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

small fix

Browse Source
This commit is contained in:
Klemek
2025-02-21 19:46:54 +01:00
parent 8248cbb56f
commit 18c986ba95
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -3
View File
@@ -191,14 +191,17 @@
<div <div
class="bg-base-200 rounded-box p-3 text-center font-black text-3xl" class="bg-base-200 rounded-box p-3 text-center font-black text-3xl"
> >
Current topic: {{ showSelected ? selectedData.text : '???' }} <span v-if="noData">No more topics</span>
<span v-else
>Current topic: {{ showSelected ? selectedData.text : '???' }}</span
>
</div> </div>
<div class="grow rounded-box p-3 overflow-hidden justify-center"> <div class="grow rounded-box p-3 overflow-hidden justify-center">
<div class="wheel relative h-full aspect-square m-auto"> <div class="wheel relative 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="h-full"
:class="timerStarted ? '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"
> >
@@ -238,7 +241,8 @@
</div> </div>
</div> </div>
<div class="bg-base-200 rounded-box p-3 text-center"> <div class="bg-base-200 rounded-box p-3 text-center">
<div v-if="timerStarted">Discuss the current topic</div> <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"> <div v-else-if="initialSpin" class="animate-pulse">
Enter your <b>topics</b> then click the wheel to <b>spin</b> ! Enter your <b>topics</b> then click the wheel to <b>spin</b> !
</div> </div>
main.js
+8 -2
View File
@@ -72,6 +72,9 @@ let app = {
} }
); );
}, },
noData() {
return this.filteredData.length === 0;
},
filteredData() { filteredData() {
return this.data.filter((item) => !item.disabled); return this.data.filter((item) => !item.disabled);
}, },
@@ -181,7 +184,7 @@ let app = {
} }
}, },
spin() { spin() {
if (this.timerStarted) return; if (this.timerStarted || this.noData) return;
this.showSelected = false; this.showSelected = false;
if (this.initialSpin) { if (this.initialSpin) {
this.meetingStart = new Date(); this.meetingStart = new Date();
@@ -195,8 +198,11 @@ let app = {
}, 5000); }, 5000);
}, },
getSelected() { getSelected() {
if (this.svgData.length <= 1) {
return 0;
}
const angle = 360 - (this.wheelPosition % 360); const angle = 360 - (this.wheelPosition % 360);
for (let index = 0; index < this.data.length; index++) { for (let index = 0; index < this.svgData.length; index++) {
const element = this.svgData[index]; const element = this.svgData[index];
if (angle >= element.from && angle < element.to) { if (angle >= element.from && angle < element.to) {
return element.id; return element.id;