diff --git a/src/App.vue b/src/App.vue index 65cd5f7..69d2808 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,7 +21,7 @@ diff --git a/src/algo.ts b/src/algo.ts index 68f5594..4ef9fcf 100644 --- a/src/algo.ts +++ b/src/algo.ts @@ -141,7 +141,7 @@ export function isSolvable(result: number, plaquettes: number[]): boolean { } if (histories.length) { - // printHistory(histories[0]) + printHistory(histories[0]) } return found diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 5760d28..2c1379a 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -12,7 +12,7 @@ diff --git a/src/components/OperationsList.vue b/src/components/OperationsList.vue index 995c0f2..bb2bac7 100644 --- a/src/components/OperationsList.vue +++ b/src/components/OperationsList.vue @@ -2,63 +2,61 @@
-
- -
- -
- {{ op.left?.value ?? ' ' }} -
- - -
- -   -
- - -
- {{ op.right?.value ?? ' ' }} -
- - -
- -
- - -
- - - {{ op.result?.value }} - - ? -
- - - + +
+ +
+ {{ op.left?.value ?? ' ' }}
+ + +
+ +   +
+ + +
+ {{ op.right?.value ?? ' ' }} +
+ + +
+ +
+ + +
+ + + {{ op.result?.value }} + + ? +
+ + +
@@ -93,9 +91,7 @@ function undoOperation(index: number): void { let popped: Operation if (i === index) { popped = operations[index] - setTimeout(() => { - operations[index] = getEmptyOperation() - }, transDelay * l) + operations[index] = getEmptyOperation() } else { popped = operations.pop()! diff --git a/src/components/OperatorsList.vue b/src/components/OperatorsList.vue index 0b29bf2..cb26160 100644 --- a/src/components/OperatorsList.vue +++ b/src/components/OperatorsList.vue @@ -2,7 +2,7 @@
diff --git a/src/components/PlaquettesList.vue b/src/components/PlaquettesList.vue index 5587e4c..de534a2 100644 --- a/src/components/PlaquettesList.vue +++ b/src/components/PlaquettesList.vue @@ -9,7 +9,8 @@ @click="click(item)" class="h-11 border" :class="{ - 'dark:text-stone-600 dark:border-stone-600 text-stone-500 border-stone-400': !item.free, + 'dark:text-stone-600 dark:border-stone-600 text-stone-500 border-stone-400': + !item.free, 'hover:border-cyan-500': item.free, }" :style="{ transitionDelay: `${initDelay * i}ms` }" @@ -40,4 +41,6 @@ function click(item: Plaquette): void { initDelay.value = 0 emit('clickNumber', item) } + +defineExpose({ initDelay }) diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue index 5f4bb3a..5d22e7d 100644 --- a/src/components/SideMenu.vue +++ b/src/components/SideMenu.vue @@ -6,7 +6,7 @@
diff --git a/src/composables/game-state.ts b/src/composables/game-state.ts index 1d3a4c5..7749075 100644 --- a/src/composables/game-state.ts +++ b/src/composables/game-state.ts @@ -36,3 +36,8 @@ export function numberOfGamesSinceStart(): number { ) return differenceInDays(startDate, getCurrentDate()) } + +export function clearOperationsList(): void { + operations.splice(0) + operations.push(getEmptyOperation()) +} diff --git a/src/index.css b/src/index.css index a02e228..7f4bf93 100644 --- a/src/index.css +++ b/src/index.css @@ -59,17 +59,17 @@ .route-move, .route-enter-active, .route-leave-active { - transition: all .8s ease; + transition: all 1s ease; } .route-enter-from { opacity: 0; - transform: translateX(100vw); + transform: translateX(100%); } .route-leave-to { opacity: 0; - transform: translateX(-100vw); + transform: translateX(-100%); } .route-leave-active { @@ -82,17 +82,17 @@ .route_back-move, .route_back-enter-active, .route_back-leave-active { - transition: all .8s ease; + transition: all 1s ease; } .route_back-enter-from { opacity: 0; - transform: translateX(-100vw); + transform: translateX(-100%); } .route_back-leave-to { opacity: 0; - transform: translateX(100vw); + transform: translateX(100%); } .route_back-leave-active { @@ -128,9 +128,11 @@ .slide_up-enter-from, .slide_up-leave-to { opacity: 0; - transform: translateY(30px); + transform: translateY(60px); } +/* ZERO HEIGHT */ + .zero_height-enter-active, .zero_height-leave-active { transition: all 0.5s ease; @@ -144,10 +146,20 @@ @layer utils { } + @layer components { .btn { + @apply hover:text-cyan-500 dark:text-stone-400 dark:hover:text-cyan-500; + @apply transition-colors duration-200; + } + .btn-border { @apply w-fit p-2; @apply rounded border border-stone-600 transition-opacity; @apply hover:border-cyan-500 hover:text-cyan-500; + @apply transition-colors duration-200; + } + .btn-disabled { + pointer-events: none; + opacity: 0.5; } } \ No newline at end of file diff --git a/src/locales/en.json b/src/locales/en.json index 8cb8d2e..28ae9c0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -2,12 +2,13 @@ "playAgain": "New number", "easy": "easy", "dailyGame": "Daily challenge\n", - "endGame.failureLabel": "Too bad...
Another game?", + "endGame.failureLabel": "Almost there...", "endGame.victoryLabel": "Well done!", "hard": "hard", "impossible": "☠", "medium": "medium", "randomGame": "Random number", "startGame": "Start", - "dailyDescription": "The daily challenge changes every day at midnight, and is common to all players." + "dailyDescription": "The daily challenge changes every day at midnight, and is common to all players.", + "share": "Share" } diff --git a/src/locales/fr.json b/src/locales/fr.json index 78fa7cd..5ffccd2 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -1,7 +1,7 @@ { "playAgain": "Nouveau nombre", "endGame.victoryLabel": "Bien joué !", - "endGame.failureLabel": "Dommage...
Une autre partie ?", + "endGame.failureLabel": "Presque...", "startGame": "Démarrer", "easy": "facile", "medium": "moyen", @@ -11,5 +11,6 @@ "randomGame": "Nombre au hasard", "gameDescription": "Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en approcher le plus possible.", "dailyDescription": "Le défi quotidien change chaque jour à minuit, et est commun à tous les joueurs.", - "randomDescription": "Une partie au hasard, pour le plaisir." + "randomDescription": "Une partie au hasard, pour le plaisir.", + "share": "Partager" } diff --git a/src/views/GameView.vue b/src/views/GameView.vue index 1d5c954..f93b68c 100644 --- a/src/views/GameView.vue +++ b/src/views/GameView.vue @@ -17,7 +17,7 @@
@@ -25,6 +25,7 @@ @@ -34,8 +35,7 @@ -
+
@@ -53,10 +53,16 @@ v-else v-html="t('endGame.failureLabel')" /> +
@@ -78,6 +84,7 @@ import OperationsList from '@/components/OperationsList.vue' import OperatorsList from '@/components/OperatorsList.vue' import PlaquettesList from '@/components/PlaquettesList.vue' import { +clearOperationsList, currentOperation, gameIsRunning, gameState, @@ -98,6 +105,7 @@ const { t } = useI18n() // call `useI18n`, and spread `t` from `useI18n` return */ const difficultyLevel = ref<1 | 2>(1) +const cmpPlaquettes = ref>() const isDaily = computed(() => useRoute()?.name === 'daily') const shownPlaquettes = computed(() => @@ -128,6 +136,13 @@ watch( function startGame(): void { gameState.value = GameState.Loading setTimeout(() => (gameState.value = GameState.Playing), 500) + setTimeout(() => { + if (cmpPlaquettes.value) { + // Remove the animation delay for the plaquettes, + // or else the mouse hover effect is delayed until the first click + cmpPlaquettes.value.initDelay = 0 + } + }, 2000) } function selectNumber(p: Plaquette): void { @@ -175,8 +190,7 @@ function reboot(): void { })() // result.value = 29 // Reset Operations list - operations.splice(0) - operations.push(getEmptyOperation()) + clearOperationsList() // Generate result and plaquettes plaquettes.value = [] @@ -221,6 +235,8 @@ onMounted(() => { reboot() gameState.value = GameState.Waiting }, 800) + // But make sure the operations list is empty asap + clearOperationsList() }) onUnmounted(() => { diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index ab0d2af..3892ff4 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -9,7 +9,7 @@
+ class="text-2xl btn-border"> {{ t('dailyGame') }} @@ -19,7 +19,7 @@
+ class="text-2xl btn-border"> {{ t('randomGame') }} {{ t('randomDescription') }}