show rules popup when accepting them on register

src/lib/components/Input/Input.svelte

@@ -17,6 +17,9 @@
 	function input(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
 		dispatch('input', e);
 	}
+	function click(e: Event) {
+		dispatch('click', e);
+	}
 
 	let initialType = type;
 
@@ -43,6 +46,7 @@
 			bind:value
 			bind:this={inputElement}
 			on:input={input}
+			on:click={click}
 		/>
 	{:else}
 		<div>
@@ -85,6 +89,7 @@
 						value = e.target?.value;
 						input(e);
 					}}
+					on:click={click}
 				/>
 				{#if initialType === 'password'}
 					<button

src/lib/rules.ts

@@ -0,0 +1,133 @@
+export const rules = {
+	header: `
+	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 6 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.
+	`,
+	sections: [
+		{
+			title: 'Respektvoller Umgang',
+			content: `
+            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.`
+		},
+		{
+			title: 'Einschränkungen von Minecraft-Namen, Skins, Chat-Nachrichten, Links, etc.',
+			content: `
+            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.
+            `
+		},
+		{
+			title: 'Clientmodifikationen',
+			content: `
+            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.    
+            `
+		},
+		{
+			title: 'Redstone bauten und überdimensionierte Villager-Baukomplexe',
+			content: `
+            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.
+            `
+		},
+		{
+			title: 'Verkauf von Items',
+			content: `
+            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.
+            `
+		},
+		{
+			title: 'Abstecken von Gebieten und Grundstücken',
+			content: `
+            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.    
+            `
+		},
+		{
+			title: 'Verhalten gegenüber anderen Spielern',
+			content: `
+            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.    
+            `
+		},
+		{
+			title: 'Rolle der Administratoren',
+			content: `
+            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.    
+            `
+		},
+		{
+			title: 'Kontakt zum Administratoren-Team',
+			content: `
+            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.    
+            `
+		},
+		{
+			title: 'Konfliktlösung und mögliche Konsequenzen',
+			content: `
+            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.   
+            `
+		}
+	],
+	footer: `
+    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.
+    `
+};

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>