Practice mode

This commit is contained in:
Simon Cambier 2022-03-02 13:18:35 +01:00
parent 80064a98e5
commit fb0b8c010f
6 changed files with 55 additions and 23 deletions

View File

@ -22,10 +22,10 @@
<script setup lang="ts">
import { onMounted } from 'vue'
import { plausible } from '@/analytics'
import AppHeader from '@/components/AppHeader.vue'
import SideMenu from '@/components/SideMenu.vue'
import ToastMessage from '@/components/ToastMessage.vue'
import { plausible } from '@/analytics'
onMounted(() => {
plausible.enableAutoPageviews()

View File

@ -16,6 +16,7 @@
"randomDescription": "A challenge at random, just for fun.",
"copiedInClipboard": "Copied in clipboard",
"soon": "Soon",
"dailyHard": "Hard Mode",
"dailyNormal": "Normal Mode"
"dailyHard": "Advanced Mode",
"dailyNormal": "Normal Mode",
"practiceMode": "Practice"
}

View File

@ -17,5 +17,6 @@
"copiedInClipboard": "Copié dans le presse-papier",
"soon": "Bientôt",
"dailyNormal": "Mode Normal",
"dailyHard": "Mode Difficile"
"dailyHard": "Mode Avancé",
"practiceMode": "Entraînement"
}

View File

@ -12,8 +12,8 @@ const router = createRouter({
meta: { transition: '' },
},
{
path: '/hard',
name: 'hard',
path: '/advanced',
name: 'advanced',
component: () => import('../views/GameView.vue'),
meta: { transition: 'route' },
},
@ -23,6 +23,12 @@ const router = createRouter({
component: () => import('../views/GameView.vue'),
meta: { transition: 'route' },
},
{
path: '/practice',
name: 'practice',
component: () => import('../views/GameView.vue'),
meta: { transition: 'route' },
},
],
})

View File

@ -12,12 +12,17 @@
class="text-center"
v-if="gameState <= GameStateType.Waiting">
{{ t('dailyDescription') }}<br><br>
<div v-if="isPracticeMode">
{{ t('practiceModeDescription') }}
</div>
<div v-else>
<div v-if="isHardMode">
{{ t('hardModeDescription') }}
</div>
<div v-else>
{{ t('normalModeDescription') }}
</div>
</div>
<button
@click="startGame"
@ -58,11 +63,19 @@
v-else
v-html="t('endGame.failureLabel')" />
<button
v-if="!isPracticeMode"
@click="toClipboard"
class="inline-flex items-center btn-border">
<IconShare class="mr-2" />
{{ t('share') }}
</button>
<button
v-else
@click="reboot"
class="inline-flex items-center btn-border">
<!-- TODO: icon reload -->
{{ t('playAgain') }}
</button>
</div>
</Transition>
</div>
@ -122,6 +135,7 @@ const cmpPlaquettes = ref<InstanceType<typeof PlaquettesList> | null>(null)
const isHardMode = computed(
() => gameDifficulty.value === GameDifficultyType.Hard,
)
const isPracticeMode = ref(false)
const shownPlaquettes = computed(() =>
gameIsRunning.value ? plaquettes.value : [],
)
@ -188,14 +202,12 @@ function reboot(): void {
gameState.value = GameStateType.Playing
// The daily number is >= 500 to have a minimum challenge
const minValue = isHardMode.value ? 500 : 101
const numPlaquettes = isHardMode.value ? 6 : 5
const minValue = isHardMode.value && !isPracticeMode.value ? 500 : 101
const numPlaquettes = isHardMode.value || isPracticeMode.value ? 6 : 5
do {
// Find a problem
// result.value = randRange(101, 1000)
poolType.value = randItem([1, 1, 1, 1, 1, 2, 3])
result.value = randRange(minValue, 1000)
// result.value = 29
// Reset Operations list
clearOperationsList()
@ -207,10 +219,7 @@ function reboot(): void {
const el = poolCopy.splice(rndItem, 1)[0]
plaquettes.value.push({ value: el, free: true })
}
// plaquettes.value = [4, 8, 10, 25, 50, 100].map(value => ({
// free: true,
// value,
// }))
// Solve it
} while (
(isHardMode.value ? !isHardEnough(result.value) : false) ||
@ -228,11 +237,18 @@ function reboot(): void {
onMounted(() => {
gameDifficulty.value =
useRoute()?.name === 'hard'
useRoute()?.name !== 'normal'
? GameDifficultyType.Hard
: GameDifficultyType.Normal
isPracticeMode.value = useRoute().name === 'practice'
if (isPracticeMode.value) {
setMathPRNG()
}
else {
setDailyPRNG()
}
result.value = 0
// Wait until after the page transion to generate the number

View File

@ -1,6 +1,6 @@
<template>
<div class="flex flex-col grow p-1 w-full text-center">
<div class="flex flex-col grow gap-16 justify-center md:mt-16">
<div class="flex flex-col grow gap-8 justify-center md:mt-16">
<div>
{{ t('gameDescription') }}<br><br>
<span v-html="t('dailyDescription')" />
@ -9,7 +9,7 @@
</div>
<!-- Normal -->
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col items-center">
<RouterLink
to="/normal"
class="text-2xl btn-border">
@ -18,14 +18,22 @@
</div>
<!-- Hard -->
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col items-center">
<RouterLink
to="/hard"
to="/advanced"
class="text-2xl btn-border">
{{ t('dailyHard') }}
</RouterLink>
</div>
<!-- Practice -->
<div class="flex flex-col items-center mt-4">
<RouterLink
to="/practice"
class="text-xl btn-border">
{{ t('practiceMode') }}
</RouterLink>
</div>
</div>
</div>
</template>