KnockOutWhist/KnockOutWhist-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 21 Wiki Activity

feat/FRO-36: PWA #25

Merged
Janis merged 6 commits from feat/FRO-36 into main 2025-12-18 09:46:23 +01:00
Conversation 1 Commits 6 Files Changed 8 +4610 -129
8 changed files with 4610 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dfae8ebb5d - Show all commits

51
src/views/OfflineView.vue
View File

@@ -48,34 +48,41 @@ const spin = (): void => {
<q-layout> <q-layout>
<q-page-container> <q-page-container>
<q-page class="flex flex-center"> <q-page class="flex flex-center">
<q-card class="slot-machine-card q-pa-lg text-center shadow-10"> <transition
<div class="text-h4 q-mb-md text-black text-weight-bolder " style="font-family: serif;">Offline Casino</div> appear
tag="div"
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<q-card class="slot-machine-card q-pa-lg text-center shadow-10">
<div class="text-h4 q-mb-md text-black text-weight-bolder " style="font-family: serif;">Offline Casino</div>
<div class="row justify-center q-gutter-md q-mb-xl"> <div class="row justify-center q-gutter-md q-mb-xl">
<div v-for="(reel, index) in reelStates" :key="index" class="reel-container shadow-2"> <div v-for="(reel, index) in reelStates" :key="index" class="reel-container shadow-2">
<div v-if="reel.isSpinning" class="reel-strip">
<div v-for="n in 10" :key="n" class="text-h2">{{ symbols[n % symbols.length] }}</div>
</div>
<div v-else class="text-h2 static-symbol">{{ reel.value }}</div>
<div v-if="reel.isSpinning" class="reel-strip">
<div v-for="n in 10" :key="n" class="text-h2">{{ symbols[n % symbols.length] }}</div>
</div> </div>
<div v-else class="text-h2 static-symbol">{{ reel.value }}</div>
</div> </div>
</div>
<div class="result-box q-mb-md" style="height: 40px;"> <div class="result-box q-mb-md" style="height: 40px;">
<div v-if="isWinner" class="text-h5 text-positive text-weight-bold animate-bounce">YOU WIN! (Nothing)</div> <div v-if="isWinner" class="text-h5 text-positive text-weight-bold animate-bounce">YOU WIN! (Nothing)</div>
<div v-else-if="hasSpun && !globalSpinning" class="text-h6 text-grey-7">Try again!</div> <div v-else-if="hasSpun && !globalSpinning" class="text-h6 text-grey-7">Try again!</div>
<div v-else class="text-h6 text-grey-7">Try your luck until you are connected!</div> <div v-else class="text-h6 text-grey-7">Try your luck until you are connected!</div>
</div> </div>
<q-btn <q-btn
size="lg" color="light-green" size="lg" color="light-green"
:label="globalSpinning ? 'SPINNING...' : 'SPIN'" :label="globalSpinning ? 'SPINNING...' : 'SPIN'"
:loading="globalSpinning" :loading="globalSpinning"
@click="spin" class="full-width" rounded @click="spin" class="full-width" rounded
/> />
</q-card> </q-card>
</transition>
</q-page> </q-page>
</q-page-container> </q-page-container>
</q-layout> </q-layout>