✨ Added /explore and /view

frontend/src/lib/collapsible.svelte

@@ -0,0 +1,62 @@
+<script>
+	export let headerText;
+
+	let expanded = false;
+</script>
+
+<div class='collapsible'>
+	<h3>
+		<button aria-expanded={expanded} on:click={() => expanded = !expanded}>{headerText}
+			<svg viewBox='0 0 20 20' fill='none'>
+				<path class='vert' d='M10 1V19' stroke='black' stroke-width='2' />
+				<path d='M1 10L19 10' stroke='black' stroke-width='2' />
+			</svg>
+		</button>
+	</h3>
+
+	<div class='contents' class:hidden={!expanded}>
+		<slot></slot>
+	</div>
+</div>
+
+<style>
+    .collapsible {
+        border-bottom: 1px solid var(--gray-light, #eee);
+    }
+
+    h3 {
+        margin: 0;
+    }
+
+    button {
+        background-color: var(--background, #fff);
+        color: var(--gray-darkest, #282828);
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        margin: 0;
+        padding: 1em 0.5em;
+    }
+
+    button[aria-expanded="true"] {
+        border-bottom: 1px solid var(--gray-light, #eee);
+    }
+
+    button[aria-expanded="true"] .vert {
+        display: none;
+    }
+
+    button:focus svg {
+        outline: 2px solid;
+    }
+
+    button [aria-expanded="true"] rect {
+        fill: currentColor;
+    }
+
+    svg {
+        height: 0.7em;
+        width: 0.7em;
+    }
+</style>

frontend/src/lib/play/end.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { QuizData } from '../../app';
+	import type { QuizData } from '$lib/quiz_types';
 
 	export let quiz_data: QuizData;
 	export let final_results: Array<null> | Array<Array<PlayerAnswer>>;

frontend/src/lib/play/question.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Question } from '../../app';
+	import type { Question } from '$lib/quiz_types';
 	import { socket } from '$lib/socket';
 
 	export let question: Question;

frontend/src/lib/play/show_results.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Answer, QuizData } from '../../app';
+	import type { Answer, QuizData } from '$lib/quiz_types';
 
 	export let results: Array<Answer>;
 	export let game_data: QuizData;

frontend/src/lib/quiz_types.ts

@@ -0,0 +1,44 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#the-app-namespace
+// for information about these interfaces
+declare namespace App {
+	// interface Locals {}
+	// interface Platform {}
+	interface Session {
+		authenticated: boolean;
+		token: string | null;
+		email: string | null;
+	}
+
+	// interface Stuff {}
+}
+
+export interface QuizData {
+	title: string;
+	description: string;
+	quiz_id: string;
+	questions: Question[];
+	game_id: string;
+	game_pin: string;
+	started: boolean;
+}
+
+export interface Question {
+	time: string;
+	question: string;
+	image?: string;
+	answers: Answer[];
+}
+
+export interface Answer {
+	right: boolean;
+	answer: string;
+}
+
+// TODO Keep an eye on this shit
+// export interface Answer {
+// 	username: string;
+// 	answer: string;
+// 	right: boolean;
+// }