99 lines
3.4 KiB
Svelte
99 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { rulesPopupState, rulesPopupRead } from './RulesPopup.ts';
|
|
import { rules } from '../../../rules.ts';
|
|
import { popupState } from '@components/popup/Popup.ts';
|
|
import { onDestroy } from 'svelte';
|
|
|
|
const modalTimeoutSeconds = 30;
|
|
|
|
let modalElem: HTMLDialogElement;
|
|
|
|
let modalTimer = $state<ReturnType<typeof setInterval> | null>(null);
|
|
let modalSecondsOpen = $state(import.meta.env.PROD ? 0 : modalTimeoutSeconds);
|
|
|
|
const cancel = rulesPopupState.subscribe((value) => {
|
|
if (value == 'open') {
|
|
modalElem.show();
|
|
modalTimer = setInterval(() => modalSecondsOpen++, 1000);
|
|
} else if (value == 'closed') {
|
|
clearInterval(modalTimer!);
|
|
}
|
|
});
|
|
|
|
onDestroy(cancel);
|
|
</script>
|
|
|
|
<dialog
|
|
class="modal"
|
|
onclose={() => {
|
|
if ($rulesPopupState !== 'accepted') $rulesPopupState = 'closed';
|
|
}}
|
|
bind:this={modalElem}
|
|
>
|
|
<form method="dialog" class="modal-box flex flex-col max-h-[90%] max-w-[95%] md:max-w-[90%] lg:max-w-[75%]">
|
|
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
|
<div class="overflow-auto mt-5">
|
|
<div class="mb-4">
|
|
<div class="collapse collapse-arrow">
|
|
<input type="checkbox" autocomplete="off" checked />
|
|
<div class="collapse-title">
|
|
<p>0. Vorwort</p>
|
|
</div>
|
|
<div class="collapse-content">
|
|
<p>{rules.header}</p>
|
|
<p class="mt-1 text-[.75rem]">{rules.footer}</p>
|
|
</div>
|
|
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
|
|
</div>
|
|
{#each rules.sections as section, i (section.title)}
|
|
<div class="collapse collapse-arrow">
|
|
<input type="checkbox" autocomplete="off" />
|
|
<div class="collapse-title">
|
|
<p>{i + 1}. {section.title}</p>
|
|
</div>
|
|
<div class="collapse-content">
|
|
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
{@html section.content}
|
|
</div>
|
|
</div>
|
|
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600"></span>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="relative w-min"
|
|
title={modalSecondsOpen < modalTimeoutSeconds
|
|
? `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
|
|
style="width: {Math.min((modalSecondsOpen / modalTimeoutSeconds) * 100, 100)}%"
|
|
class="h-full bg-neutral"
|
|
></div>
|
|
</div>
|
|
<button
|
|
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
|
|
>
|
|
</div>
|
|
</form>
|
|
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
|
|
<button class="!cursor-default">close</button>
|
|
</form>
|
|
</dialog>
|