Skip to content

Commit

Permalink
refactor players setup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@maldestor95
maldestor95 committed May 8, 2024
1 parent 4788b36 commit 151219f
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 143 deletions.
4 changes: 1 addition & 3 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import wizard from "./pages/wizard/index.vue";
</script>

<template>
<div class="container mx-auto">
<wizard></wizard>
</div>
<wizard></wizard>
</template>

<style scoped>
Expand Down
50 changes: 26 additions & 24 deletions src/pages/wizard/history.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
<template>
<div>History</div>
<div class="flex flex-row justify-center gap-2">
<button @click="setGraph = 'total'">Total</button>
<button @click="setGraph = 'table'">Table</button>
<button @click="setGraph = 'cumulative'">cumulative</button>
</div>
<container
class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
v-if="setGraph == 'table'"
>
<div class="font-semibold">
<div class="firstLine">Round</div>
<div v-for="(item, index) in store.getRoundNumber" :key="index">
{{ item }}
</div>
<div>
<div>History</div>
<div class="flex flex-row justify-center gap-2">
<button @click="setGraph = 'total'">Total</button>
<button @click="setGraph = 'table'">Table</button>
<button @click="setGraph = 'cumulative'">cumulative</button>
</div>
<div class="overflow-x-scroll">
<div class="flex flex-row gap-2 alternateBlue">
<div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
<div class="font-semibold firstLine">{{ player.name }}</div>
<div v-for="roundIScore in player.scorePerRound">
{{ roundIScore }}
<container
class="grid grid-cols-[56px_1fr] overflow-y-auto max-h-[300px]"
v-if="setGraph == 'table'"
>
<div class="font-semibold">
<div class="firstLine">Round</div>
<div v-for="(item, index) in store.getRoundNumber" :key="index">
{{ item }}
</div>
</div>
<div class="overflow-x-scroll">
<div class="flex flex-row gap-2 alternateBlue">
<div v-for="(player, playerId) in store.userList" :key="playerId" class="w-32">
<div class="font-semibold firstLine">{{ player.name }}</div>
<div v-for="roundIScore in player.scorePerRound">
{{ roundIScore }}
</div>
</div>
</div>
</div>
</div>
</container>
<historychart :graph-type="<graphType><unknown>setGraph"></historychart>
</container>
<historychart :graph-type="<graphType><unknown>setGraph"></historychart>
</div>
</template>

<script setup lang="ts">
Expand Down
8 changes: 5 additions & 3 deletions src/pages/wizard/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@
History
</div>
</div>
<players v-if="showSection == 'Setup'">Players</players>
<score v-if="showSection == 'Score'">Score</score>
<history v-if="showSection == 'History'"></history>
<div class="container mx-auto shadow-2xl mt-2">
<players v-if="showSection == 'Setup'" class="pb-4">Players</players>
<score v-if="showSection == 'Score'" class="pb-4">Score</score>
<history v-if="showSection == 'History'" class="pb-4"></history>
</div>
</template>

<script setup lang="ts">
Expand Down
147 changes: 76 additions & 71 deletions src/pages/wizard/players.vue
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,87 @@
<template>
<container>
<div
class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
>
<button class="w-32" @click="store.addUser()" :disabled="isGameStarted">
Add Player
</button>
<button
class="bg-blue-400 text-white w-32 justify-self-end"
@click="store.newGame()"
>
New Game
</button>
<toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
>Steps Setup</toggleSwitch
>
<toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
>Bets
</toggleSwitch>
</div>
</container>

<div class="flex flex-wrap justify-center" v-if="showStepsSetup">
<container class="basis-full md:basis-1/2 pl-4">
<defineSteps
:steps="store.scoreSteps"
@change="
(ev) => {
store.scoreSteps = ev;
}
"
>ROUND STEPS</defineSteps
>
</container>
<container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
<defineSteps
:steps="store.betSteps"
@change="
(ev) => {
store.betSteps = ev;
}
"
>BETS STEPS</defineSteps
></container
>
</div>

<container>
<div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
<div class="absolute top-2">name</div>
<div>
<container>
<div
v-for="userIndex in store.getUsers.length"
class="flex flex-row md:gap-10 mb-4 md:mb-2 gap-2"
class="grid grid-cols-2 md:flex md:justify-around md:flex-wrap items-center gap-y-4"
>
<input v-model="store.userList[userIndex - 1].name" class="grow w-60 shrink" />
<button
@click="deleteU(userIndex)"
class="grow-0"
:hidden="store.getUsers.length < 2"
class="bg-blue-400 text-white w-32 justify-self-end"
@click="store.newGame()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
New Game
</button>
<toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
>Steps Setup</toggleSwitch
>
<toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
>Bets
</toggleSwitch>
</div>
</container>

<div class="flex flex-wrap justify-center" v-if="showStepsSetup">
<container class="basis-full md:basis-1/2 pl-4">
<defineSteps
:steps="store.scoreSteps"
@change="
(ev) => {
store.scoreSteps = ev;
}
"
>ROUND STEPS</defineSteps
>
</container>
<container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
<defineSteps
:steps="store.betSteps"
@change="
(ev) => {
store.betSteps = ev;
}
"
>BETS STEPS</defineSteps
></container
>
</div>
</container>

<container>
<div v-if="store.getUsers.length > 0" class="pt-8 mx-2 relative">
<div class="absolute top-2">name</div>
<div
v-for="userIndex in store.getUsers.length"
class="flex flex-row md:gap-10 mb-4 md:mb-2 gap-2"
>
<input v-model="store.userList[userIndex - 1].name" class="grow w-60 shrink" />
<button
@click="deleteU(userIndex)"
class="grow-0"
:hidden="store.getUsers.length < 2"
tabindex="-1"
v-if="!store.isGameStarted"
>
<!-- delete icon -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
</div>
</div>
<button class="w-32" @click="store.addUser()" v-if="!store.isGameStarted">
Add Player
</button>
</container>
</div>
</template>

<script setup lang="ts">
Expand Down
84 changes: 43 additions & 41 deletions src/pages/wizard/score.vue
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,51 @@
<template>
<h1>
Round <span>{{ scoreStore.getRoundNumber }}</span>
</h1>
<div class="flex flex-row justify-evenly">
<button
@click="
scoreStore.newRound();
activeUser = '';
"
>
New Round
</button>
<toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
Round
<template #post> Bet</template>
</toggleSwitch>
</div>
<div>
<h1>
Round <span>{{ scoreStore.getRoundNumber }}</span>
</h1>
<div class="flex flex-row justify-evenly">
<button
@click="
scoreStore.newRound();
activeUser = '';
"
>
New Round
</button>
<toggleSwitch v-model="betOrRoundPhase" v-if="scoreStore.trackBets" square>
Round
<template #post> Bet</template>
</toggleSwitch>
</div>

<div class="flex flex-row flex-grow text-2xl capitalize">
<div class="basis-1/3 px-2">Player</div>
<div class="basis-2/3">
<div class="flex justify-between mx-4">
<div>Round</div>
<div v-if="scoreStore.trackBets">Bet</div>
<div class="text-2xl">Score</div>
<div class="flex flex-row flex-grow text-2xl capitalize">
<div class="basis-1/3 px-2">Player</div>
<div class="basis-2/3">
<div class="flex justify-between mx-4">
<div>Round</div>
<div v-if="scoreStore.trackBets">Bet</div>
<div class="text-2xl">Score</div>
</div>
</div>
</div>
</div>
<div
v-for="(user, userId) in scoreStore.getUsers"
:key="userId"
@click="activeUser = user.name"
>
<editscore
:lastScore="scoreStore.getScore(userId)"
:roundScore="scoreStore.userList[userId].currentRound"
:betScore="scoreStore.userList[userId].currentBet"
:steps="betOrRoundPhase ? scoreStore.betSteps : scoreStore.scoreSteps"
:editable="activeUser == user.name"
:phase="betOrRoundPhase ? 'bet' : 'round'"
@changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
@changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
<div
v-for="(user, userId) in scoreStore.getUsers"
:key="userId"
@click="activeUser = user.name"
>
{{ user.name }}
</editscore>
<editscore
:lastScore="scoreStore.getScore(userId)"
:roundScore="scoreStore.userList[userId].currentRound"
:betScore="scoreStore.userList[userId].currentBet"
:steps="betOrRoundPhase ? scoreStore.betSteps : scoreStore.scoreSteps"
:editable="activeUser == user.name"
:phase="betOrRoundPhase ? 'bet' : 'round'"
@changeScore="(event) => scoreStore.editCurrentRound(userId, event)"
@changeBet="(event) => scoreStore.editCurrentBet(userId, event)"
>
{{ user.name }}
</editscore>
</div>
</div>
</template>

Expand Down
4 changes: 3 additions & 1 deletion src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ a:visited{
color: #2a2a29;
}


.debug {
@apply border-2 border-solid border-red-500
}
h1 {
@apply text-5xl;
/* font-size: 3.2em; */
Expand Down

0 comments on commit 151219f

Please sign in to comment.