show rules popup when accepting them on register

src/routes/register/Register.svelte

@@ -3,6 +3,7 @@
 	import Input from '$lib/components/Input/Input.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
+	import { rules } from '$lib/rules';
 
 	const dispatch = createEventDispatcher();
 
@@ -53,6 +54,9 @@
 		});
 	}
 
+	let rulesAccepted = false;
+	let rulesModal: HTMLDialogElement | null = null;
+
 	let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
 	let registerRequest: Promise<void> | null = null;
 </script>
@@ -169,11 +173,19 @@
 				name="rules"
 				type="checkbox"
 				required={true}
+				on:input={(e) => {
+					if (!rulesAccepted) {
+						e.detail.target.checked = false;
+						rulesModal.show();
+					}
+				}}
 				bind:inputElement={rulesInput}
 			/>
 			<label for="rules">
-				Ich bin mit den <a class="link" href="{env.PUBLIC_BASE_PATH}/rules">Regeln</a> einverstanden
-				und achte sie
+				Ich bin mit den <a target="_blank" class="link" href="{env.PUBLIC_BASE_PATH}/rules"
+					>Regeln</a
+				>
+				einverstanden und achte sie
 				<span class="text-red-700">*</span>
 				<br />
 				<p class="text-[.75rem]">
@@ -221,3 +233,50 @@
 		{/key}
 	</div>
 </form>
+
+<dialog class="modal" bind:this={rulesModal}>
+	<form method="dialog" class="modal-box flex 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">
+			<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" />
+				</div>
+				{#each rules.sections as section, i}
+					<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">
+							<p>{section.content}</p>
+						</div>
+					</div>
+					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
+				{/each}
+			</div>
+			<div>
+				<Input
+					id="rules-accept"
+					type="submit"
+					value="Akzeptieren"
+					on:click={() => {
+						rulesAccepted = true;
+						rulesInput.checked = true;
+					}}
+				/>
+			</div>
+		</div>
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>

src/routes/rules/+page.svelte

@@ -1,121 +1,20 @@
+<script lang="ts">
+	import { rules } from '$lib/rules';
+</script>
+
 <svelte:head>
 	<title>Craftattack - Regeln</title>
 </svelte:head>
 
-<h1 class="text-3xl lg:text-5xl mb-4">CraftAttack 5 Regelwerk</h1>
-<p>
-	Das Lesen der Regeln ist für alle Teilnehmer verpflichtend. Die Regeln sollen für einen
-	reibungslosen und strukturierte Ablauf des Projekts sorgen, weshalb das Lesen der Regeln ein
-	essenzieller Bestandteil für das Gelingen von CraftAttack 5 ist. Die Regeln sind wörtlich zu
-	verstehen und sind Grundlage für das Projekt. Zur Vereinfachung gehen sie nicht zu weit ins Detail
-	und deuten teils nur umfangreiche Themengebiete an. Entscheidungen werden, wenn von Spielern
-	angeregt, dann durch die Administratoren getroffen, die sich an den Regeln orientieren.
-</p>
+<h1 class="text-3xl lg:text-5xl mb-4">CraftAttack 6 Regelwerk</h1>
+<p>{rules.header}</p>
 <ol class="p-[revert] list-decimal my-6">
-	<li>
-		Oberste Priorität hat der respektvolle und tolerante Umgang der Spieler untereinander. Der
-		Spielspaß, der offene Umgang miteinander und die Interaktion aller steht im Vordergrund, weshalb
-		Drohungen, Belästigungen oder sonstige gegenüber anderen Spielern respektlose Aktivitäten
-		strengstens verboten sind und auch hart geahndet werden.
-	</li>
-	<li>
-		Selbstverständlich sind sämtliche Inhalte (Minecraft-Namen, Skins, Chat-Nachrichten, Links,
-		etc.) mit sexistischen, diskriminierenden, rassistischen, pornographischen oder illegalen
-		Inhalten nicht erlaubt. Außerdem ist es nicht gestattet, den Chat mit Nachrichten jeglicher Art
-		vollzuspammen. Des Weiteren sollte der MC-Name des Spielers, der bei der Anmeldung angegeben
-		wird, bis zum Ende des Projekts nicht geändert werden. Das Nutzen bzw. Anmelden von
-		Zweitaccounts ist nicht gestattet.
-	</li>
-	<li>
-		Jegliche Clientmodifications, die deutliche Vorteile gegenüber anderen Spielern erbringen, sind
-		nicht gestattet. Alle Spieler, die kein Minecraft Vanilla spielen, sind verpflichtet ihre
-		Clients oder Modifications dahingehend zu überprüfen, ob durch diese entscheidende Vorteile
-		erlangt werden können. Solche Modifications sind zu entfernen. Das Nutzen von simplen Mini-Maps
-		(Draufsicht) oder Cosmetics ist selbstverständlich erlaubt. Es liegt im Allgemeinen im Interesse
-		der Administratoren, dass Spieler es nicht übertreiben und sich keine Vorteile schaffen, die
-		gegenüber anderen ungerecht sind. Dabei setzen die Administratoren auch auf eine Selbstreflexion
-		jedes einzelnen. Im Zweifel sind Spieler dazu angehalten, einen Administrator zu kontaktieren,
-		der genauer Informationen übermitteln kann.
-	</li>
-	<li>
-		Das Erbauen und Betreiben lag-erzeugender Maschinen, Farmen (Zero-Tick-Farmen etc.) oder andere
-		Bauten, die den Spielfluss stören könnten, ist verboten. Im Zweifelsfall ist eine Anfrage bei
-		den Administratoren erwünscht. Bei beispielsweise Farmen oder allgemeinen Redstone Schaltung
-		sollten diese auch nur dann aktiviert werden, wenn nötig. Außerdem sollten überdimensional große
-		Villager-Baukomplexe nur in Absprache mit Administratoren errichtet und betreiben werden.
-		Selbstverständlich ist das Erbauen von Farmen ein essenzieller Bestandteil des Projekts und
-		stellt auch kein Problem dar, solange die oben genannten Bedingungen eingehalten werden.
-	</li>
-	<li>
-		Das Verkaufen von Items ist allgemein jedem Spieler überall gestattet. Jedoch bietet es sich an
-		und ist wünschenswert, die Shops aller Spieler in einem Shoppingdistrict gemeinsam anzusiedeln,
-		um die Interaktion zu fördern. Ein Shop muss sich innerhalb des ausgewiesenen Bereiches befinden
-		und muss ebenso über das dort bestehende Wegenetz erreichbar sein. Der Shoppingdistrict ist
-		ausschließlich zum Bauen von Shops vorgesehen. Mehrere Shops zu einem bestimmten Item sind
-		möglich und auch erwünscht. Diebstahl im Shoppingdistrict untersteht denselben Strafen wie
-		allgemeiner Diebstahl. Ein angemessener Abstand der privaten Strukturen vom Shoppingdisrict ist
-		einzuhalten.
-	</li>
-	<li>
-		Das Abstecken bestimmter Gebiete ist grundsätzlich erlaubt, jedoch sind unangemessen große
-		Grundstücke untersagt. Das maximale Maß ist im Einzelfall zu entscheiden. Die Grenzen bereits
-		abgesteckter Grundstücke sind unveränderlich. Im Fall von Inaktivität oder andere Beschwerden
-		beziehungsweise Verstöße ist ein Administrator zu kontaktieren.
-	</li>
-	<li>
-		Wie bereits angedeutet, ist das Ziel ein Umgang untereinander, der für keinen negative Aspekte
-		beinhaltet. So ist es beispielsweise nicht gestattet, andere zu bestehlen oder ohne Erlaubnis
-		Bauwerke anderer zu verändern. Dabei liegt natürlich eine gewisse Toleranzbereitschaft vor und
-		ein Spielraum, der allerdings nicht überschritten werden darf. Dies gilt sowohl für das
-		Bestehlen anderer als auch für Griefing (zerstören von Bauten anderer ohne Erlaubnis etc.).
-		Außerdem ist das Töten anderer ohne nachvollziehbaren Grund verboten. Natürlich ist auch hier
-		eine Bewertung jeder einzelnen Situation notwendig, weshalb eine Verallgemeinerung hier bewusst
-		nicht angeführt wird. Fest steht jedoch, dass klar zwischen einem Töten aus Spaß mit geringen
-		Folgen und einem mehrmaligen - ja sogar permanenten Töten anderer mit schlimmeren Folgen,
-		unterschieden wird.
-	</li>
-	<li>
-		Allgemein liegt es in der Hand der Administratoren einzelne Situation zu bewerten, Strafen zu
-		verhängen und Entscheidungen zu treffen. Ein internes Strikesystem der Administratoren sorgt für
-		eine Gleichberechtigung aller Spieler. Des Weiteren erfolgt eine Absprache unter den
-		Administratoren, um alle Sichtweisen miteinzubringen. Wichtig ist zusätzlich, dass alle
-		Entscheidungen der Administratoren im Sinne des Projekts getroffen werden. Den Entscheidungen
-		und Anweisungen der Administratoren ist stets Folge zu leisten, wenn diese als Administrator
-		fungieren. Im normalen Spielbetrieb sind sie normale Mitspieler ohne spielentscheidende
-		Sonderrechte. So ist es nicht ihre Aufgabe überall nach dem Rechten zu sehen, sondern
-		Ansprechpartner zu sein, um dann nach der Vorlegung eines Problems durch einen Geschädigten die
-		Administratorenrolle einzunehmen und dementsprechend zu handeln. In dem Feld ist einzutragen,
-		wobei die Regeln trotzdem bis zum Ende gelesen werden müssen. Allgemein gilt immer der
-		Grundsatz, dass ein Eingriff der Administratoren nur dann erfolgt, wenn dies die Spieler auch
-		fordern. Solange beide Parteien zufrieden sind, passiert natürlich auch nichts. Wenn also
-		beispielsweise zwei Spieler ein bewusstes pvp-Duell starten, zieht das logischer Weise keine
-		Konsequenzen nach sich.
-	</li>
-	<li>
-		Jedem Teilnehmer ist es möglich sich an den Support/das Administratoren-Team zu wenden. Zu den
-		Administratoren gehören die Spieler, die auf dem Server mit einem Admin-Tag versehen sind. Zwei
-		von diesen sind außerdem Administrator der WhatsApp-Gruppe. Eine Kontaktaufnahme ist direkt auf
-		dem Server im Chat oder auf dem Teamspeak: „mhsl.eu“ möglich. Außerdem können sie über WhatsApp
-		angeschrieben werden, wenn sich z.B. gerade kein Administrator auf dem Server befindet oder bei
-		anderen Rückfragen. Bei Unzufriedenheit, Meldung eines Regelverstoßen, Anregungen oder Fragen
-		steht das Administratoren-Team allen Spielern jederzeit zu Verfügung.
-	</li>
-	<li>
-		Konflikte sollen grundlegend zuerst auf einer Ebene zwischen den Spielern geschlichtet werden,
-		bevor ein Administrator kontaktiert wird. Jeder Regelverstoß zieht unterschiedliche Folgen nach
-		sich, die von Ermahnungen, über Tagesbänne bis zum permanenten Bann führen können. Diese
-		möglichen Konsequenzen sind von allen Teilnehmern zu akzeptieren.
-	</li>
+	{#each rules.sections as section}
+		<li class="mb-2">
+			{section.content}
+		</li>
+	{/each}
 </ol>
 <p>
-	Alle aufgeführten Regeln und die damit in Verbindung stehende Angaben erfolgen ohne Gewähr auf
-	Vollständigkeit, Richtigkeit und Aktualität. Das Durchsetzen der Regeln liegt im Ermessen der
-	Administratoren, die vorher in Absprache mit dem Geschädigten eine der Situation angemessene
-	Maßnahmen getroffen haben.
+	{rules.footer}
 </p>
-
-<style lang="postcss">
-	li {
-		@apply mb-2;
-	}
-</style>