Initial commit

frontend/src/routes/__layout.svelte

@@ -0,0 +1 @@
+<script>import "../app.css";</script><slot></slot>

frontend/src/routes/admin.svelte

@@ -0,0 +1,119 @@
+<script lang='ts'>
+	import type { QuizData } from '../app';
+
+	import { socket } from '$lib/socket';
+
+	let gameData = {
+		game_id: '4ced1410-e2bf-47e6-9bc7-c1f332642963',
+		game_pin: '81039240'
+	};
+	let success = false;
+	let players: Array<string> = [];
+	let errorMessage = '';
+	let game_started = false;
+	let quiz_data: QuizData;
+	let question_number: string = '0';
+	let question_results = null;
+
+	let shown_question_now: number;
+	const connect = () => {
+		socket.emit('register_as_admin', gameData);
+	};
+	socket.on('registered_as_admin', (data) => {
+		console.log('registered_as_admin', data['game']);
+		quiz_data = JSON.parse(data['game']);
+		console.log(quiz_data);
+		console.log(quiz_data.questions[0].question);
+		console.log(quiz_data.questions);
+		success = true;
+	});
+	socket.on('player_joined', (data) => {
+		players = [...players, data];
+	});
+	socket.on('already_registered_as_admin', (data) => {
+		errorMessage = 'There is already an admin registered for this game.';
+	});
+	let timer_res: string;
+	const set_question_number = (q_number: number) => {
+		question_results = null;
+		socket.emit('set_question_number', q_number.toString());
+		shown_question_now = q_number;
+		timer_res = quiz_data.questions[q_number].time;
+		timer(timer_res);
+	};
+
+	const get_question_results = () => {
+		socket.emit('get_question_results', {
+			game_id: gameData.game_id,
+			question_number: shown_question_now
+		});
+	};
+
+
+	socket.on('question_results', (data) => {
+		data = JSON.parse(data);
+		console.log(data);
+		question_results = data;
+	});
+
+	const timer = (time: string) => {
+		let seconds = Number(time);
+		let timer_interval = setInterval(() => {
+			if (timer_res === '0') {
+				clearInterval(timer_interval);
+				return;
+			} else {
+				seconds--;
+			}
+
+			timer_res = seconds.toString();
+		}, 1000);
+	};
+
+
+</script>
+
+{#if !success}
+	<input placeholder='game id' bind:value={gameData.game_id}>
+	<input placeholder='game pin' bind:value={gameData.game_pin}>
+	<button on:click={connect}>Connect!</button>
+	{#if errorMessage !== ""}
+		<p class='text-red-700'>{errorMessage}</p>
+	{/if}
+{:else }
+	{#if !game_started}
+		<ul>
+			{#if players.length > 0}
+				{#each players as player}
+					<li><span>{player.username} </span>
+						<button>Kick</button>
+					</li>
+				{/each}
+			{/if}
+		</ul>
+		{#if players.length > 0}
+			<button on:click={() => {socket.emit('start_game', ""); game_started = true}}>Start Game</button>
+		{/if}
+	{:else }
+		<span>Time left: {timer_res}</span>
+		<br>
+		{#if timer_res === '0'}
+			<button on:click={get_question_results}>Get results</button>
+			<br>
+			{#if question_results !== null}
+				{question_results}
+				<br>
+				<ul>
+					{#each question_results as result}
+						<li>{result.username} - {result.answer} - {result.right}</li>
+					{/each}
+				</ul>
+			{/if}
+		{/if}
+		<br>
+		{#each quiz_data.questions as { question }, index}
+			<button on:click={() => {set_question_number(index)}}>{index}: {question}</button>
+			<br>
+		{/each}
+	{/if}
+{/if}

frontend/src/routes/debug.svelte

@@ -0,0 +1,82 @@
+<script lang='ts'>
+	import type { QuizData } from '../app';
+	import Title from '$lib/play/title.svelte';
+	import Question from '$lib/play/question.svelte';
+	import {socket} from '$lib/socket';
+
+	interface GameMeta {
+		started: boolean;
+	}
+
+	let gameId = '81039240';
+	let message = '';
+	let username = '';
+	let gameData: QuizData;
+	let gameMeta: GameMeta = {
+		started: false
+	};
+
+	let question_index = '';
+
+
+	let unique = {};
+
+	function restart() {
+		unique = {}; // every {} is unique, {} === {} evaluates to false
+	}
+
+	const connect = () => {
+		socket.emit('join_game', { game_pin: gameId, username: username });
+	};
+
+	const sendMessage = () => {
+		socket.emit('message', message);
+		message = '';
+	};
+
+	socket.on('joined_game', (data) => {
+		console.log('joined_game', data);
+		gameData = JSON.parse(data);
+	});
+	socket.on('game_not_found', (data) => {
+		console.log(data, 'game not found');
+	});
+
+	socket.on('join_game', (data) => {
+		console.log(data, 'join_game');
+	});
+
+	socket.on('message', (data) => {
+		console.log(data, 'message');
+	});
+
+	socket.on('start_game', (data) => {
+		gameMeta.started = true;
+	});
+
+	socket.on('set_question_number', (data) => {
+		restart();
+		question_index = data;
+	});
+
+</script>
+
+{#if !gameMeta.started}
+	<input bind:value={gameId} placeholder='GameID'>
+	<input bind:value={username} placeholder='Username'>
+
+	<button on:click={connect}>Connect</button>
+
+	<br>
+	<input bind:value={message} placeholder='message'>
+	<button on:click={sendMessage}>Send Message</button>
+
+{:else}
+	{#if question_index === ""}
+		<Title bind:description={gameData.description} bind:title={gameData.title} />
+	{:else}
+		{#key unique}
+			<Question bind:question={gameData.questions[parseInt(question_index)]} bind:question_index/>
+		{/key}
+	{/if}
+{/if}

frontend/src/routes/index.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>