CraftAttack/varo-website
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show the required read time in the rules popup more clearly
All checks were successful
deploy / build-and-deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
bytedream 2025-05-31 14:52:13 +02:00
parent c177832fbe
commit 95daaddb9b
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/website/signup/RulesPopup.svelte
View File

@ -1,18 +1,19 @@
<script lang="ts"> <script lang="ts">
import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts'; import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts';
import { rules } from '../../../rules.ts'; import { rules } from '../../../rules.ts';
import { popupState } from '@components/popup/Popup.ts';
const modalTimeoutSeconds = 30; const modalTimeoutSeconds = 30;
let modalElem: HTMLDialogElement; let modalElem: HTMLDialogElement;
let modalTimer = $state(null); let modalTimer = $state<ReturnType<typeof setInterval> | null>(null);
let modalSecondsOpen = $state(import.meta.env.PROD ? 0 : modalTimeoutSeconds); let modalSecondsOpen = $state(0);
rulesPopupState.listen((value) => { rulesPopupState.listen((value) => {
if (value == 'open') { if (value == 'open') {
modalElem.show(); modalElem.show();
setInterval(() => modalSecondsOpen++, 1000); modalTimer = setInterval(() => modalSecondsOpen++, 1000);
} else if (value == 'closed') { } else if (value == 'closed') {
clearInterval(modalTimer!); clearInterval(modalTimer!);
} }
@ -60,19 +61,29 @@
<div <div
class="relative w-min" class="relative w-min"
title={modalSecondsOpen < modalTimeoutSeconds 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 <div
style="width: {Math.min((modalSecondsOpen / modalTimeoutSeconds) * 100, 100)}%" style="width: {Math.min((modalSecondsOpen / modalTimeoutSeconds) * 100, 100)}%"
class="h-full bg-base-300" class="h-full bg-neutral"
></div> ></div>
</div--> </div>
<button <button
class="btn btn-neutral" class="btn bg-transparent z-[1] relative"
disabled={modalSecondsOpen < modalTimeoutSeconds} class:btn-active={modalSecondsOpen < modalTimeoutSeconds}
onclick={() => { 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; $rulesPopupRead = true;
$rulesPopupState = 'accepted'; $rulesPopupState = 'accepted';
}}>Akzeptieren</button }}>Akzeptieren</button