Skip to content

Commit

Permalink
single player games now are public and improve navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Patcire
Patcire committed Jun 26, 2024
1 parent 568f286 commit 0d85ed3
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 192 deletions.
214 changes: 108 additions & 106 deletions src/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,108 @@
<script>
import { useSessionStore } from '@/stores/sessionStore.js'
import router from '@/router/router.js'
export default {
name: 'Navbar',
data(){
return{
sessionStore: useSessionStore()
}
},
methods: {
exit(){
this.sessionStore.user.isConnected = false
router.push('/');
}
}
}
</script>

<template>

<nav>
<ul v-if="!this.sessionStore.user.isConnected" class="navbar">
<li>
<router-link to="/login" class="navbar__link">Login</router-link>
</li>
<li>
<router-link to="/play" class="navbar__link">Play</router-link>
</li>
<li>
<router-link to="/about" class="navbar__link">About</router-link>
</li>
</ul>


<ul v-if="this.sessionStore.user.isConnected" class="navbar navbar--mod">
<li>
<router-link to="/games" class="navbar__link navbar__link--mod">Games</router-link>
</li>
<li>
<router-link to="/create" class="navbar__link navbar__link--mod" >Create</router-link>
</li>

<li class="navbar__submenu">
<router-link to="/profile" class="navbar__link navbar__link--mod" >Comunnity</router-link>
</li>
<li>
<a @click="exit" class="navbar__link pointer navbar__link pointer--mod" >Exit</a>
</li>
</ul>
</nav>

<!--For mobile-->
<nav class= "hambmenu" v-if="!this.sessionStore.isConnected">
<article class="hambmenu__icon">
<input aria-label="drop menu on mobiles" type="checkbox" class="hambmenu__check">
<label for="hambmenu__check">
<img src="../../public/hambmenu.svg"
alt="Menu icon"
class="hambmenu__img">
</label>

<ul class="hambmenu__submenu" v-if="!sessionStore.user.isConnected">
<li>
<router-link to="/" aria-current="page" class="navbar__link">Home</router-link>
</li>
<li>
<router-link to="/play" class="navbar__link">Play</router-link>
</li>
<li>
<router-link to="/about" class="navbar__link">About</router-link>
</li>
</ul>
</article>

</nav>

<nav class= "hambmenu hambmenu--mod" v-if="this.sessionStore.user.isConnected">
<article class="hambmenu__icon hambmenu__icon--mod">
<input aria-label="drop menu on mobiles" type="checkbox" class="hambmenu__check">
<label for="hambmenu__check">
<img src="../../public/hambmenu.svg"
alt="Menu icon"
class="hambmenu__img">
</label>
<ul class="hambmenu__submenu hambmenu__submenu--mod">
<li>
<router-link to="/games" class="navbar__link">Games</router-link>
</li>
<li>
<router-link to="/create" class="navbar__link" >Create</router-link>
</li>
<li class="navbar__submenu">
<router-link to="/profile" class="navbar__link">Comunnity</router-link>
</li>
<li>
<a @click="exit" class="navbar__link pointer" >Exit</a>
</li>
</ul>
</article>

</nav>

</template>
<script>
import { useSessionStore } from '@/stores/sessionStore.js'
import router from '@/router/router.js'
export default {
name: 'Navbar',
data(){
return{
sessionStore: useSessionStore()
}
},
methods: {
exit(){
this.sessionStore.user.isConnected = false
router.push('/');
}
}
}
</script>

<template>

<!--DESKTOP-->
<!--no connected-->
<nav>
<ul v-if="!this.sessionStore.user.isConnected" class="navbar">
<li>
<router-link to="/play" class="navbar__link">Play</router-link>
</li>
<li>
<router-link to="/profile" class="navbar__link">Community</router-link>
</li>
<li>
<router-link to="/about" class="navbar__link">About</router-link>
</li>
</ul>
<!--connected-->
<ul v-if="this.sessionStore.user.isConnected" class="navbar navbar--mod">
<li>
<router-link to="/play" class="navbar__link navbar__link--mod">Play</router-link>
</li>
<li>
<router-link to="/create" class="navbar__link navbar__link--mod" >Create</router-link>
</li>
<li class="navbar__submenu">
<router-link to="/profile" class="navbar__link navbar__link--mod" >Comunnity</router-link>
</li>
<li>
<a @click="exit" class="navbar__link pointer navbar__link pointer--mod" >Exit</a>
</li>
</ul>
</nav>

<!--TABLET/MOBILE-->
<!--no connected-->
<nav class= "hambmenu" v-if="!this.sessionStore.isConnected">
<article class="hambmenu__icon">
<input aria-label="drop menu on mobiles" type="checkbox" class="hambmenu__check">
<label for="hambmenu__check">
<img src="../../public/hambmenu.svg"
alt="Menu icon"
class="hambmenu__img">
</label>

<ul class="hambmenu__submenu" v-if="!sessionStore.user.isConnected">
<li>
<router-link to="/play" class="navbar__link">Play</router-link>
</li>
<li>
<router-link to="/profile" class="navbar__link">Community</router-link>
</li>
<li>
<router-link to="/about" class="navbar__link">About</router-link>
</li>
</ul>
</article>

</nav>

<!--connected-->
<nav class= "hambmenu hambmenu--mod" v-if="this.sessionStore.user.isConnected">
<article class="hambmenu__icon hambmenu__icon--mod">
<input aria-label="drop menu on mobiles" type="checkbox" class="hambmenu__check">
<label for="hambmenu__check">
<img src="../../public/hambmenu.svg"
alt="Menu icon"
class="hambmenu__img">
</label>
<ul class="hambmenu__submenu hambmenu__submenu--mod">
<li>
<router-link to="/play" class="navbar__link">Play</router-link>
</li>
<li>
<router-link to="/create" class="navbar__link" >Create</router-link>
</li>
<li class="navbar__submenu">
<router-link to="/profile" class="navbar__link">Comunnity</router-link>
</li>
<li>
<a @click="exit" class="navbar__link pointer" >Exit</a>
</li>
</ul>
</article>

</nav>

</template>
11 changes: 4 additions & 7 deletions src/components/Quiz.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,13 +262,13 @@ export default {
:
await this.getQuestionsFromAPIForNewQuiz()
this.mode.gameMode !== "zen" && await this.createQuizAndMatchOnDB()
useSessionStore().user.isConnected && this.mode.gameMode !== "zen" && await this.createQuizAndMatchOnDB()
},
watch: {
counter(value) {
// when matches finish and game mode is not zen
if (value>this.questions.length-1 && this.mode.gameMode !== "zen") this.handleFinishedQuiz()
if (useSessionStore().user.isConnected && value>this.questions.length-1 && this.mode.gameMode !== "zen") this.handleFinishedQuiz()
},
}
Expand All @@ -277,11 +277,7 @@ export default {

<template>

<Loading v-if="!questions.length"
key-word="loading"
imgSrc="/public/electron.svg"
></Loading>

<Loading v-if="!questions.length" key-word="loading" imgSrc="/public/electron.svg"></Loading>
<section class="quiz quiz--home"
v-if="questions.length > 0
&& questions[counter]
Expand Down Expand Up @@ -330,6 +326,7 @@ export default {
<span class="quiz__response">{{questions[counter].option_c}}</span>
</label>
</fieldset>
<!--img for right/fail-->
<img src="../../public/like.svg"
class="quiz__like"
:class="{'active' : isCorrectAnimationTrigger}"
Expand Down
142 changes: 71 additions & 71 deletions src/pages/Games.vue
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,71 @@
<script>
import BigButtonsMenu from '@/components/BigButtonsMenu.vue'
import router from '@/router/router.js'
import { useSessionStore } from '@/stores/sessionStore.js'
import { v4 as uuidv4 } from 'uuid';
export default {
name: 'Games',
components: { BigButtonsMenu },
data(){
return{
roomID: null
}
},
methods: {
router() {
return router
},
generateRoomID(){
useSessionStore().user.createdRoomID = uuidv4().split('-')[4]
useSessionStore().user.roomAdmin = true
this.router().push('/room')
},
joinToExistingRoom(){
useSessionStore().user.joinedRoomID = this.roomID
this.router().push('/room')
}
},
}
</script>

<template>

<section class="games">

<article class="games__content">
<div class="games__container">
<img class="games__hand" src="/public/Vectorhand.svg" alt="hand doodle">
</div>
<BigButtonsMenu></BigButtonsMenu>
<div class="games__container games__container--mod">
<img class="games__daydream" src="/public/Vectordaydream.svg" alt="hand doodle">
</div>
</article>

<article class="multi">
<h3 class="multi__title">Multiplayer</h3>

<form class="multi__join">
<input type="text" placeholder="Room seed..."
v-model="roomID" class="multi__input">
<button @click.prevent="joinToExistingRoom" class="multi__b-mod primary-button">Enter</button>
</form>

<div class="multi__create">
<h3 class="">Or create new one</h3>
<button @click="generateRoomID" class="multi__new">
<img class="multi__box" alt="doodle of a box" src="/public/Vectorbox.svg">
</button>
</div>

</article>

</section>


</template>
<script>
import BigButtonsMenu from '@/components/BigButtonsMenu.vue'
import router from '@/router/router.js'
import { useSessionStore } from '@/stores/sessionStore.js'
import { v4 as uuidv4 } from 'uuid';
export default {
name: 'Games',
components: { BigButtonsMenu },
data(){
return{
roomID: null
}
},
methods: {
router() {
return router
},
generateRoomID(){
useSessionStore().user.createdRoomID = uuidv4().split('-')[4]
useSessionStore().user.roomAdmin = true
this.router().push('/room')
},
joinToExistingRoom(){
useSessionStore().user.joinedRoomID = this.roomID
this.router().push('/room')
}
},
}
</script>

<template>

<section class="games">

<article class="games__content">
<div class="games__container">
<img class="games__hand" src="/public/Vectorhand.svg" alt="hand doodle">
</div>
<BigButtonsMenu></BigButtonsMenu>
<div class="games__container games__container--mod">
<img class="games__daydream" src="/public/Vectordaydream.svg" alt="hand doodle">
</div>
</article>

<article class="multi">
<h3 class="multi__title">Multiplayer</h3>

<form class="multi__join">
<input type="text" placeholder="Room seed..."
v-model="roomID" class="multi__input">
<button @click.prevent="joinToExistingRoom" class="multi__b-mod primary-button">Enter</button>
</form>

<div class="multi__create">
<h3 class="">Or create new one</h3>
<button @click="generateRoomID" class="multi__new">
<img class="multi__box" alt="doodle of a box" src="/public/Vectorbox.svg">
</button>
</div>

</article>

</section>


</template>
Loading

0 comments on commit 0d85ed3

Please sign in to comment.