klemek/meeting-roulette
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

quality of life

Browse Source
This commit is contained in:
Klemek
2025-02-21 20:00:14 +01:00
parent 18c986ba95
commit ba52c5cc3a
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+23 -21
View File
@@ -188,19 +188,32 @@
</div> </div>
</div> </div>
<div class="flex flex-col grow h-full gap-6"> <div class="flex flex-col grow h-full gap-6">
<div <div class="bg-base-200 rounded-box p-3 text-center">
class="bg-base-200 rounded-box p-3 text-center font-black text-3xl" <div class="font-black text-3xl">
> <span v-if="noData">No more topics</span>
<span v-if="noData">No more topics</span> <span v-else-if="timerStarted || showSelected">
<span v-else Current topic:
>Current topic: {{ showSelected ? selectedData.text : '???' }}</span <span class="underline">{{selectedData.text}}</span>
> </span>
<span v-else-if="initialSpin">No current topic</span>
<span v-else>Spinning...</span>
</div>
<div class="font-light">
<span v-if="noData">End of meeting?</span>
<span v-else-if="timerStarted">Discuss the current topic</span>
<span v-else-if="initialSpin" class="animate-pulse">
Enter your <b>topics</b> then click the wheel to <b>spin</b> !
</span>
<span v-else-if="showSelected" class="animate-pulse">
Start <b>timer</b> or click the wheel to <b>spin</b>
</span>
<span v-else>Wheeeeee</span>
</div>
</div> </div>
<div class="grow rounded-box p-3 overflow-hidden justify-center"> <div class="grow rounded-box overflow-hidden justify-center">
<div class="wheel relative h-full aspect-square m-auto"> <div class="wheel relative max-h-full aspect-square m-auto">
<svg <svg
viewBox="-1.05 -1.05 2.1 2.1" viewBox="-1.05 -1.05 2.1 2.1"
class="h-full"
:class="timerStarted || noData ? 'cursor-not-allowed' : 'cursor-pointer'" :class="timerStarted || noData ? 'cursor-not-allowed' : 'cursor-pointer'"
:style="`transform: rotate(${wheelPosition}deg)`" :style="`transform: rotate(${wheelPosition}deg)`"
@click="spin" @click="spin"
@@ -240,17 +253,6 @@
</svg> </svg>
</div> </div>
</div> </div>
<div class="bg-base-200 rounded-box p-3 text-center">
<div v-if="noData">End of meeting?</div>
<div v-else-if="timerStarted">Discuss the current topic</div>
<div v-else-if="initialSpin" class="animate-pulse">
Enter your <b>topics</b> then click the wheel to <b>spin</b> !
</div>
<div v-else-if="showSelected" class="animate-pulse">
Start <b>timer</b> or click the wheel to <b>spin</b>
</div>
<div v-else>&nbsp;</div>
</div>
</div> </div>
<div class="flex flex-col min-w-64 h-full gap-6"> <div class="flex flex-col min-w-64 h-full gap-6">
<textarea <textarea