feat: analytics
This commit is contained in:
+325
-300
@@ -1,304 +1,329 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Meeting Roulette</title>
|
<title>Meeting Roulette</title>
|
||||||
<script type="importmap">
|
<script type="importmap">
|
||||||
{
|
{
|
||||||
"imports": {
|
"imports": {
|
||||||
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
|
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script type="module" src="main.js"></script>
|
<script type="module" src="main.js"></script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.6/daisyui.css"
|
href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.6/daisyui.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
/>
|
/>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
<link
|
<link
|
||||||
href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.6/themes.css"
|
href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.6/themes.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
/>
|
/>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
<!-- card related -->
|
<!-- card related -->
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta property="og:title" content="Meeting Roulette" />
|
<meta property="og:title" content="Meeting Roulette" />
|
||||||
<meta property="og:description" content="🎡 Spin your meetings" />
|
<meta property="og:description" content="🎡 Spin your meetings" />
|
||||||
<!-- <meta property="og:image" content="https://.../preview_640x320.jpg" /> -->
|
<!-- <meta property="og:image" content="https://.../preview_640x320.jpg" /> -->
|
||||||
<meta property="org:url" content="https://meeting.klemek.fr" />
|
<meta property="org:url" content="https://meeting.klemek.fr" />
|
||||||
</head>
|
<script
|
||||||
<body class="w-full h-screen max-h-screen">
|
defer
|
||||||
<main
|
src="https://tics.klemek.fr/script.js"
|
||||||
id="app"
|
data-website-id="db693ff1-cde1-4951-9e72-49764a7fc7fb"
|
||||||
style="display: none"
|
></script>
|
||||||
class="flex flex-col lg:flex-row h-screen w-full gap-6 p-6 max-h-screen"
|
</head>
|
||||||
>
|
<body class="w-full h-screen max-h-screen">
|
||||||
<div class="flex flex-col h-full gap-6 lg:min-w-60 xl:min-w-100">
|
<main
|
||||||
<div class="p-3 bg-base-200 rounded-box">
|
id="app"
|
||||||
<div class="font-title font-black leading-none text-2xl">
|
style="display: none"
|
||||||
Meeting Roulette
|
class="flex flex-col lg:flex-row h-screen w-full gap-6 p-6 max-h-screen"
|
||||||
</div>
|
|
||||||
<p class="font-title font-light text-2xl">🎡 Spin your meetings</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="p-3 rounded-box text-center"
|
|
||||||
:class="overtime() ? 'text-error-content bg-error' : 'bg-base-200'"
|
|
||||||
>
|
>
|
||||||
<span class="countdown font-mono text-5xl">
|
<div class="flex flex-col h-full gap-6 lg:min-w-60 xl:min-w-100">
|
||||||
{{ timerParts(0) }}
|
<div class="p-3 bg-base-200 rounded-box">
|
||||||
<span :style="`--value:${timerParts(1)};`"
|
<div class="font-title font-black leading-none text-2xl">
|
||||||
>{{ timerParts(1) }}</span
|
Meeting Roulette
|
||||||
>
|
</div>
|
||||||
:
|
<p class="font-title font-light text-2xl">
|
||||||
<span :style="`--value:${timerParts(2)};`"
|
🎡 Spin your meetings
|
||||||
>{{ timerParts(2) }}</span
|
</p>
|
||||||
>
|
</div>
|
||||||
:
|
<div
|
||||||
<span :style="`--value: ${timerParts(3)};`"
|
class="p-3 rounded-box text-center"
|
||||||
>{{ timerParts(3) }}</span
|
:class="overtime() ? 'text-error-content bg-error' : 'bg-base-200'"
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row gap-6">
|
|
||||||
<button
|
|
||||||
class="btn btn-xl btn-success flex-1"
|
|
||||||
:disabled="!showSelected || timerStarted"
|
|
||||||
title="Start timer"
|
|
||||||
@click="timerFunction"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-xl btn-warning flex-1"
|
|
||||||
:disabled="!showSelected || !timerStarted"
|
|
||||||
title="Stop timer"
|
|
||||||
@click="timerFunction"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="btn btn-xl btn-error flex-1"
|
|
||||||
:disabled="!showSelected || timerStarted"
|
|
||||||
title="Remove topic"
|
|
||||||
@click="removeTopic"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-6"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="hidden lg:block p-3 bg-base-200 rounded-box">
|
|
||||||
<div class="stats stats-vertical w-full">
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-title">Meeting duration so far</div>
|
|
||||||
<div class="stat-value" :id="rid + 1">
|
|
||||||
{{ timeText(elapsedTime) }}
|
|
||||||
</div>
|
|
||||||
<div class="stat-desc" :id="rid + 2">
|
|
||||||
Started at: <b>{{ timeText(startedAt, 2) }}</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-title">Remaining meeting time</div>
|
|
||||||
<div class="stat-value" :id="rid + 3">
|
|
||||||
{{ timeText(totalRemainingTime) }}
|
|
||||||
</div>
|
|
||||||
<div class="stat-desc" :id="rid + 4">
|
|
||||||
End estimated at: <b>{{ timeText(estimatedEnd, 2) }}</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-title">Total meeting time</div>
|
|
||||||
<div class="stat-value" :id="rid + 4">
|
|
||||||
{{ timeText(totalTime) }}
|
|
||||||
</div>
|
|
||||||
<div class="stat-desc">
|
|
||||||
Overtime: <b>{{ timeText(overtimeTime) }}</b>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hidden lg:block grow"></div>
|
|
||||||
<div class="hidden lg:block p-3 bg-base-200 rounded-box">
|
|
||||||
<div class="dropdown dropdown-top w-full">
|
|
||||||
<div tabindex="0" role="button" class="btn m-1 w-full flex">
|
|
||||||
<div class="grow text-left">Theme</div>
|
|
||||||
<svg
|
|
||||||
width="12px"
|
|
||||||
height="12px"
|
|
||||||
class="inline-block h-2 w-2 fill-current opacity-60"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 2048 2048"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<ul
|
|
||||||
tabindex="0"
|
|
||||||
class="dropdown-content max-h-100 overflow-scroll bg-base-300 rounded-box z-1 w-52 p-2 shadow-2xl"
|
|
||||||
>
|
|
||||||
<li v-for="theme in themes">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="theme-dropdown"
|
|
||||||
class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
|
|
||||||
:aria-label="theme"
|
|
||||||
:value="theme"
|
|
||||||
:checked="theme === currentTheme"
|
|
||||||
@click="setTheme(theme)"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col grow h-full gap-6">
|
|
||||||
<div class="bg-base-200 rounded-box p-3 text-center">
|
|
||||||
<div class="font-black text-3xl">
|
|
||||||
<span v-if="noData">No more topics</span>
|
|
||||||
<span v-else-if="timerStarted || showSelected">
|
|
||||||
Current topic:
|
|
||||||
<span class="underline">{{selectedData.text}}</span>
|
|
||||||
</span>
|
|
||||||
<span v-else-if="spinning">Spinning...</span>
|
|
||||||
<span v-else>No current topic</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-if="spinning">Wheeeeee</span>
|
|
||||||
<span v-else class="animate-pulse">
|
|
||||||
Click the wheel to <b>spin</b> !
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grow rounded-box overflow-hidden justify-center">
|
|
||||||
<div class="wheel relative max-h-full aspect-square m-auto">
|
|
||||||
<svg
|
|
||||||
viewBox="-1.05 -1.05 2.1 2.1"
|
|
||||||
:class="timerStarted || noData ? 'cursor-not-allowed' : 'cursor-pointer'"
|
|
||||||
:style="`transform: rotate(${wheelPosition}deg)`"
|
|
||||||
@click="spin"
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
r="1"
|
|
||||||
cx="0"
|
|
||||||
cy="0"
|
|
||||||
stroke-width="0.02"
|
|
||||||
style="stroke: var(--wheel); fill: var(--wheel)"
|
|
||||||
/>
|
|
||||||
<g v-for="d in svgData" :transform="d.transform">
|
|
||||||
<path :d="d.path" :style="d.backgroundStyle" />
|
|
||||||
<text
|
|
||||||
:x="d.textPosition"
|
|
||||||
y="0"
|
|
||||||
style="
|
|
||||||
font: bold 1px sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
"
|
|
||||||
dominant-baseline="middle"
|
|
||||||
text-anchor="end"
|
|
||||||
:style="d.textStyle"
|
|
||||||
:transform="d.textTransform"
|
|
||||||
>
|
>
|
||||||
{{ d.text }}
|
<span class="countdown font-mono text-5xl">
|
||||||
</text>
|
{{ timerParts(0) }}
|
||||||
</g>
|
<span :style="`--value:${timerParts(1)};`"
|
||||||
<circle
|
>{{ timerParts(1) }}</span
|
||||||
r="10%"
|
>
|
||||||
cx="0"
|
:
|
||||||
cy="0"
|
<span :style="`--value:${timerParts(2)};`"
|
||||||
style="stroke: var(--wheel); fill: var(--color-base-100)"
|
>{{ timerParts(2) }}</span
|
||||||
stroke-width="0.01"
|
>
|
||||||
/>
|
:
|
||||||
</svg>
|
<span :style="`--value: ${timerParts(3)};`"
|
||||||
</div>
|
>{{ timerParts(3) }}</span
|
||||||
</div>
|
>
|
||||||
</div>
|
</span>
|
||||||
<div class="flex flex-col lg:min-w-60 xl:min-w-100 h-full gap-6">
|
</div>
|
||||||
<textarea
|
<div class="flex flex-row gap-6">
|
||||||
v-model="rawData"
|
<button
|
||||||
class="grow w-full bg-base-200 min-h-64 textarea rounded-box resize-none"
|
class="btn btn-xl btn-success flex-1"
|
||||||
placeholder="Meeting point 1: 5min"
|
:disabled="!showSelected || timerStarted"
|
||||||
></textarea>
|
title="Start timer"
|
||||||
<div class="p-3 bg-base-200 rounded-box">
|
@click="timerFunction"
|
||||||
<fieldset class="fieldset">
|
>
|
||||||
<label class="fieldset-label">
|
<svg
|
||||||
<input
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
type="checkbox"
|
fill="none"
|
||||||
id="weighted"
|
viewBox="0 0 24 24"
|
||||||
v-model="weighted"
|
stroke-width="1.5"
|
||||||
class="toggle"
|
stroke="currentColor"
|
||||||
/>
|
class="size-6"
|
||||||
Weighted topics
|
>
|
||||||
</label>
|
<path
|
||||||
</fieldset>
|
stroke-linecap="round"
|
||||||
</div>
|
stroke-linejoin="round"
|
||||||
<div class="bg-base-200 rounded-box p-3">
|
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
|
||||||
<a href="https://github.com/Klemek" target="_blank" class="link"
|
/>
|
||||||
>@klemek</a
|
</svg>
|
||||||
>
|
</button>
|
||||||
-
|
<button
|
||||||
<a
|
class="btn btn-xl btn-warning flex-1"
|
||||||
href="https://github.com/Klemek/meeting-roulette"
|
:disabled="!showSelected || !timerStarted"
|
||||||
target="_blank"
|
title="Stop timer"
|
||||||
class="link"
|
@click="timerFunction"
|
||||||
>Github</a
|
>
|
||||||
>
|
<svg
|
||||||
- 2025
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</div>
|
fill="none"
|
||||||
</div>
|
viewBox="0 0 24 24"
|
||||||
</main>
|
stroke-width="1.5"
|
||||||
</body>
|
stroke="currentColor"
|
||||||
|
class="size-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M5.25 7.5A2.25 2.25 0 0 1 7.5 5.25h9a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-9Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-xl btn-error flex-1"
|
||||||
|
:disabled="!showSelected || timerStarted"
|
||||||
|
title="Remove topic"
|
||||||
|
@click="removeTopic"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="size-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="hidden lg:block p-3 bg-base-200 rounded-box">
|
||||||
|
<div class="stats stats-vertical w-full">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-title">
|
||||||
|
Meeting duration so far
|
||||||
|
</div>
|
||||||
|
<div class="stat-value" :id="rid + 1">
|
||||||
|
{{ timeText(elapsedTime) }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-desc" :id="rid + 2">
|
||||||
|
Started at: <b>{{ timeText(startedAt, 2) }}</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-title">Remaining meeting time</div>
|
||||||
|
<div class="stat-value" :id="rid + 3">
|
||||||
|
{{ timeText(totalRemainingTime) }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-desc" :id="rid + 4">
|
||||||
|
End estimated at:
|
||||||
|
<b>{{ timeText(estimatedEnd, 2) }}</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-title">Total meeting time</div>
|
||||||
|
<div class="stat-value" :id="rid + 4">
|
||||||
|
{{ timeText(totalTime) }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-desc">
|
||||||
|
Overtime: <b>{{ timeText(overtimeTime) }}</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden lg:block grow"></div>
|
||||||
|
<div class="hidden lg:block p-3 bg-base-200 rounded-box">
|
||||||
|
<div class="dropdown dropdown-top w-full">
|
||||||
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
role="button"
|
||||||
|
class="btn m-1 w-full flex"
|
||||||
|
>
|
||||||
|
<div class="grow text-left">Theme</div>
|
||||||
|
<svg
|
||||||
|
width="12px"
|
||||||
|
height="12px"
|
||||||
|
class="inline-block h-2 w-2 fill-current opacity-60"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 2048 2048"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
tabindex="0"
|
||||||
|
class="dropdown-content max-h-100 overflow-scroll bg-base-300 rounded-box z-1 w-52 p-2 shadow-2xl"
|
||||||
|
>
|
||||||
|
<li v-for="theme in themes">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="theme-dropdown"
|
||||||
|
class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
|
||||||
|
:aria-label="theme"
|
||||||
|
:value="theme"
|
||||||
|
:checked="theme === currentTheme"
|
||||||
|
@click="setTheme(theme)"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col grow h-full gap-6">
|
||||||
|
<div class="bg-base-200 rounded-box p-3 text-center">
|
||||||
|
<div class="font-black text-3xl">
|
||||||
|
<span v-if="noData">No more topics</span>
|
||||||
|
<span v-else-if="timerStarted || showSelected">
|
||||||
|
Current topic:
|
||||||
|
<span class="underline">{{selectedData.text}}</span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="spinning">Spinning...</span>
|
||||||
|
<span v-else>No current topic</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-if="spinning">Wheeeeee</span>
|
||||||
|
<span v-else class="animate-pulse">
|
||||||
|
Click the wheel to <b>spin</b> !
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grow rounded-box overflow-hidden justify-center">
|
||||||
|
<div class="wheel relative max-h-full aspect-square m-auto">
|
||||||
|
<svg
|
||||||
|
viewBox="-1.05 -1.05 2.1 2.1"
|
||||||
|
:class="timerStarted || noData ? 'cursor-not-allowed' : 'cursor-pointer'"
|
||||||
|
:style="`transform: rotate(${wheelPosition}deg)`"
|
||||||
|
@click="spin"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
r="1"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
stroke-width="0.02"
|
||||||
|
style="stroke: var(--wheel); fill: var(--wheel)"
|
||||||
|
/>
|
||||||
|
<g v-for="d in svgData" :transform="d.transform">
|
||||||
|
<path :d="d.path" :style="d.backgroundStyle" />
|
||||||
|
<text
|
||||||
|
:x="d.textPosition"
|
||||||
|
y="0"
|
||||||
|
style="
|
||||||
|
font: bold 1px sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
font-family:
|
||||||
|
"Courier New", Courier,
|
||||||
|
monospace;
|
||||||
|
"
|
||||||
|
dominant-baseline="middle"
|
||||||
|
text-anchor="end"
|
||||||
|
:style="d.textStyle"
|
||||||
|
:transform="d.textTransform"
|
||||||
|
>
|
||||||
|
{{ d.text }}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
<circle
|
||||||
|
r="10%"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
style="
|
||||||
|
stroke: var(--wheel);
|
||||||
|
fill: var(--color-base-100);
|
||||||
|
"
|
||||||
|
stroke-width="0.01"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col lg:min-w-60 xl:min-w-100 h-full gap-6">
|
||||||
|
<textarea
|
||||||
|
v-model="rawData"
|
||||||
|
class="grow w-full bg-base-200 min-h-64 textarea rounded-box resize-none"
|
||||||
|
placeholder="Meeting point 1: 5min"
|
||||||
|
></textarea>
|
||||||
|
<div class="p-3 bg-base-200 rounded-box">
|
||||||
|
<fieldset class="fieldset">
|
||||||
|
<label class="fieldset-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="weighted"
|
||||||
|
v-model="weighted"
|
||||||
|
class="toggle"
|
||||||
|
/>
|
||||||
|
Weighted topics
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<div class="bg-base-200 rounded-box p-3">
|
||||||
|
<a
|
||||||
|
href="https://github.com/Klemek"
|
||||||
|
target="_blank"
|
||||||
|
class="link"
|
||||||
|
>@klemek</a
|
||||||
|
>
|
||||||
|
-
|
||||||
|
<a
|
||||||
|
href="https://github.com/Klemek/meeting-roulette"
|
||||||
|
target="_blank"
|
||||||
|
class="link"
|
||||||
|
>Github</a
|
||||||
|
>
|
||||||
|
- 2025
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user