From 95daaddb9beec2cb556560642f0e7a3498fddc09 Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Sat, 31 May 2025 14:52:13 +0200
Subject: [PATCH] show the required read time in the rules popup more clearly

---
 src/app/website/signup/RulesPopup.svelte | 31 ++++++++++++++++--------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/website/signup/RulesPopup.svelte b/src/app/website/signup/RulesPopup.svelte
index 083599f..fc2cfd7 100644
--- a/src/app/website/signup/RulesPopup.svelte
+++ b/src/app/website/signup/RulesPopup.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts';
   import { rules } from '../../../rules.ts';
+  import { popupState } from '@components/popup/Popup.ts';
 
   const modalTimeoutSeconds = 30;
 
   let modalElem: HTMLDialogElement;
 
-  let modalTimer = $state(null);
-  let modalSecondsOpen = $state(import.meta.env.PROD ? 0 : modalTimeoutSeconds);
+  let modalTimer = $state<ReturnType<typeof setInterval> | null>(null);
+  let modalSecondsOpen = $state(0);
 
   rulesPopupState.listen((value) => {
     if (value == 'open') {
       modalElem.show();
-      setInterval(() => modalSecondsOpen++, 1000);
+      modalTimer = setInterval(() => modalSecondsOpen++, 1000);
     } else if (value == 'closed') {
       clearInterval(modalTimer!);
     }
@@ -60,19 +61,29 @@
     <div
       class="relative w-min"
       title={modalSecondsOpen < modalTimeoutSeconds
-        ? `Regeln können in ${Math.max(modalTimeoutSeconds - modalSecondsOpen, 0)} Sekunden akzeptiert werden`
+        ? `Die Regeln können in ${Math.max(modalTimeoutSeconds - modalSecondsOpen, 0)} Sekunden akzeptiert werden`
         : ''}
     >
-      <!--div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
+      <div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
         <div
           style="width: {Math.min((modalSecondsOpen / modalTimeoutSeconds) * 100, 100)}%"
-          class="h-full bg-base-300"
+          class="h-full bg-neutral"
         ></div>
-      </div-->
+      </div>
       <button
-        class="btn btn-neutral"
-        disabled={modalSecondsOpen < modalTimeoutSeconds}
-        onclick={() => {
+        class="btn bg-transparent z-[1] relative"
+        class:btn-active={modalSecondsOpen < modalTimeoutSeconds}
+        class:cursor-default={modalSecondsOpen < modalTimeoutSeconds}
+        onclick={(e) => {
+          if (modalSecondsOpen < modalTimeoutSeconds) {
+            e.preventDefault();
+            $popupState = {
+              type: 'info',
+              title: 'Regeln',
+              message: 'Bitte lies die Regeln aufmerksam durch. Du kannst erst in einigen Sekunden fortfahren.'
+            };
+            return;
+          }
           $rulesPopupRead = true;
           $rulesPopupState = 'accepted';
         }}>Akzeptieren</button