Get the site functional for the game release

frontend/src/components/modals/settings.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { t, locales, locale } from "svelte-i18n";
+import { isStreamer, dyslexiaFont, visibleModal } from "../../stores";
+import localeNames from "../../locales";
+import Toggle from "../toggle.svelte";
+import { api } from "../../main";
+
+async function startBot() {
+	let r = await api.post(`.`, { validateStatus: null });
+	switch (r.status) {
+		case 202:
+			alert(`Bot already listening to channel`);
+			break;
+		case 200:
+			alert(`Started bot in channel`);
+			break;
+	}
+};
+</script>
+
+<div class="modal-background">
+	<div class="modal-content">
+		<h1>{$t("display.modal.settings.title")}</h1>
+		<p>{$t("display.modal.settings.description")}</p>
+		<div class="options">
+			<Toggle value={isStreamer} label="{$t("option.streamer-mode")}" />
+			<Toggle value={dyslexiaFont} label="{$t("option.dyslexic-font")}" />
+			<select bind:value={$locale}>
+				{#each $locales as lang}
+				<option value="{lang}">{localeNames[lang]}</option>
+				{/each}
+			</select>
+			<button
+				on:click={startBot}
+			>
+				{$t("option.join-channel")}
+			</button>
+			<!--
+			<button>
+				{$t("option.delete-questions")}
+			</button>
+			-->
+		</div>
+		<div class="button-row">
+			<button
+				on:click={() => $visibleModal = null}
+			>
+				{$t("display.modal.close")}
+			</button>
+		</div>
+	</div>
+</div>
+
+<style>
+.modal-background {
+	position: absolute;
+	left: 0;
+	top: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.modal-content {
+	border-radius: 25px;
+	max-width: 60%;
+	text-align: center;
+}
+.options {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+.button-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+select {
+	margin: 5px 10px;
+	border-radius: 7px;
+	border-style: none;
+	border-width: 0px;
+	background: rgba(0,0,0, 0.25);
+	padding: 10px 14px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	color: white;
+	font-family: inherit;
+	font-size: inherit;
+}
+</style>