From 903bc35bd31e0ce197282ab2cc259f40ef23ec2f Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Tue, 15 Feb 2022 08:46:15 +0100
Subject: [PATCH] Display & transitions

---
 index.html             |   4 +-
 src/App.vue            |   2 +-
 src/globals.ts         |  10 ++--
 src/index.css          |   1 +
 src/store.ts           |  11 ++++-
 src/views/GameView.vue | 106 ++++++++++++++++++++++++++++-------------
 tailwind.config.js     |   1 +
 7 files changed, 93 insertions(+), 42 deletions(-)
diff --git a/index.html b/index.html
index f6aabab..f40619f 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
+  <title>Le compte est bon</title>
 </head>
 
 <body class="bg-stone-200 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full">
diff --git a/src/App.vue b/src/App.vue
index fc25d1f..d0a86fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <RouterView class="container mx-auto h-full border" />
+  <RouterView class="container mx-auto h-full" />
 </template>
diff --git a/src/globals.ts b/src/globals.ts
index 91b2b33..32e77a8 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -6,9 +6,11 @@ export const pool = [
 ] as const
 
 export enum GameState {
-  Playing,
-  Lost,
-  Won,
+  Undefined = 0,
+  Waiting = 1,
+  Playing = 2,
+  Lost = 3,
+  Won = 4,
 }
 
-export const gameState = ref(GameState.Playing)
+export const gameState = ref(GameState.Undefined)
diff --git a/src/index.css b/src/index.css
index 3acfeb9..ea3c8d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -46,6 +46,7 @@
   /* Legacy iOS */
 }
 
+.slide_left-move,
 .slide_left-enter-active,
 .slide_left-leave-active {
   transition: all 0.5s ease;
diff --git a/src/store.ts b/src/store.ts
index 788a3ab..d1b9e1d 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,6 +1,15 @@
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 
+import { isOperationReady } from './algo'
 import { Operation, Plaquette } from './types'
 
 export const operations = reactive<Operation[]>([])
 export const plaquettes = ref<Plaquette[]>([])
+
+export const currentOperation = computed(
+  () => operations[operations.length - 1],
+)
+
+export const isEndGame = computed(
+  () => operations.length === 5 && isOperationReady(currentOperation.value),
+)
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 785fa1c..a56014e 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
-      ASMD
+  <div class="">
+    <h1 class="pt-2 pb-4 text-3xl font-bold text-center">
+      Le compte est bon
     </h1>
-    <!-- Number to find -->
 
+    <!-- Number to find -->
     <NumberBox
       class="aspect-square mx-auto mb-8 w-[3em] text-4xl"
       :class="{
@@ -14,55 +15,79 @@
       {{ result }}
     </NumberBox>
 
+    <!-- Start button -->
+    <Transition name="slide_up">
+      <!-- TODO: fix animation -->
+      <div class="text-center">
+        <button
+          v-if="!gameIsRunning"
+          @click="startGame"
+          class="py-2 px-4 bg-stone-800 rounded border">
+          {{ t('startGame') }}
+        </button>
+      </div>
+    </Transition>
+
     <!-- PLAQUETTES -->
     <div
       class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
       <TransitionGroup name="slide_left">
         <PlaquetteBox
+          v-for="(item, i) in shownPlaquettes"
+          :key="i"
           is="button"
           @click="selectNumber(item)"
-          :dynamic-size="true"
           class="h-11"
           :class="{ 'text-stone-600 border-stone-600': !item.free }"
           :style="{ transitionDelay: `${initDelay * i}ms` }"
-          v-for="(item, i) in plaquettes"
-          :key="i">
+          :dynamic-size="true">
           {{ item.value }}
         </PlaquetteBox>
       </TransitionGroup>
     </div>
 
     <!-- OPERATORS -->
-    <div class="flex gap-2 justify-center my-4">
-      <NumberBox
-        class="aspect-square w-[1.5em] text-2xl"
-        @click="selectOperator(item)"
-        v-for="(item, i) in operators"
-        :key="i">
-        {{ item }}
-      </NumberBox>
-    </div>
+    <Transition name="slide_up">
+      <div v-if="gameIsRunning">
+        <div class="flex gap-2 justify-center my-4">
+          <NumberBox
+            class="aspect-square w-[1.5em] text-2xl"
+            @click="selectOperator(item)"
+            v-for="(item, i) in operators"
+            :key="i">
+            {{ item }}
+          </NumberBox>
+        </div>
 
-    <div class="my-4 mx-auto max-w-sm border-b" />
+        <!-- Divider -->
+        <div class="my-4 mx-auto max-w-sm border-b" />
 
-    <!-- List of Operations -->
-    <OperationsList />
+        <!-- List of Operations -->
+        <OperationsList v-show="gameIsRunning" />
+      </div>
+    </Transition>
 
-    <div class="flex justify-evenly items-center mt-8">
-      <Transition name="slide_up">
+    <Transition name="slide_up">
+      <div
+        v-if="isEndGame"
+        class="flex flex-row justify-evenly items-center mt-8">
+        <span v-if="gameState === GameState.Won">{{
+          t('endGame.victoryLabel')
+        }}</span>
+        <span v-else>{{ t('endGame.failureLabel') }}</span>
         <button
-          v-if="gameState === GameState.Won"
           class="p-2 rounded border"
           @click="reboot">
-          Rejouer
+          {{ t('playAgain') }}
         </button>
-      </Transition>
-    </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import {
   getEmptyOperation,
@@ -75,14 +100,27 @@ import NumberBox from '@/components/common/NumberBox.vue'
 import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
 import OperationsList from '@/components/OperationsList.vue'
 import { GameState, gameState, operators, pool } from '@/globals'
-import { operations, plaquettes } from '@/store'
+import { currentOperation, isEndGame, operations, plaquettes } from '@/store'
 import { OperatorType, Plaquette } from '@/types'
 import { randItem, randRange } from '@/utils'
 
+const { t } = useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
+
 const result = ref(0)
 const initDelay = ref(100)
 
-const currentOperation = computed(() => operations[operations.length - 1])
+/*
+ * Computed
+ */
+
+const gameIsRunning = computed(() => gameState.value > GameState.Waiting)
+const shownPlaquettes = computed(() =>
+  gameIsRunning.value ? plaquettes.value : [],
+)
+
+onMounted(() => {
+  reboot()
+})
 
 watch(
   currentOperation,
@@ -105,6 +143,10 @@ watch(
   { deep: true },
 )
 
+function startGame(): void {
+  gameState.value = GameState.Playing
+}
+
 function selectNumber(p: Plaquette): void {
   initDelay.value = 0
 
@@ -129,18 +171,18 @@ function selectOperator(o: OperatorType): void {
 const difficultyLevel = randItem([1, 1, 1, 1, 1, 1, 2, 2, 2, 3])
 
 function reboot(): void {
-  gameState.value = GameState.Playing
+  gameState.value = GameState.Waiting
   do {
     // Find a problem
     // result.value = randRange(101, 1000)
     result.value = (() => {
       switch (difficultyLevel) {
         case 1:
-          return randRange(50, 100)
+          return randRange(101, 25)
         case 2:
-          return randRange(100, 250)
+          return randRange(251, 500)
         default:
-          return randRange(250, 1000)
+          return randRange(501, 1000)
       }
     })()
     // Reset Operations list
@@ -164,8 +206,4 @@ function reboot(): void {
   )
   plaquettes.value.sort((a, b) => a.value - b.value)
 }
-
-onMounted(() => {
-  reboot()
-})
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index e10c99a..34c631d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'class',
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},
