Initial commit
This commit is contained in:
Mawoka
@@ -0,0 +1,4 @@
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Vendored
+31
@@ -0,0 +1,31 @@
|
||||
/// <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 {}
|
||||
// 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;
|
||||
answers: Answer[];
|
||||
}
|
||||
|
||||
export interface Answer {
|
||||
right: boolean;
|
||||
answer: string;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="%svelte.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div>%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script lang='ts'>
|
||||
import type { Question } from '../../app';
|
||||
import { socket } from '$lib/socket';
|
||||
|
||||
export let question: Question;
|
||||
export let question_index: string | number;
|
||||
|
||||
if (typeof question_index === 'string') {
|
||||
question_index = parseInt(question_index);
|
||||
} else {
|
||||
throw new Error('question_index must be a string or number');
|
||||
}
|
||||
|
||||
|
||||
let timer_res = question.time;
|
||||
let selected_answer: string;
|
||||
|
||||
|
||||
// Stop the timer if the question is answered
|
||||
let timer_interval;
|
||||
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);
|
||||
};
|
||||
console.log(selected_answer)
|
||||
|
||||
|
||||
timer(question.time);
|
||||
|
||||
const selectAnswer = (answer: string) => {
|
||||
selected_answer = answer;
|
||||
//timer_res = '0';
|
||||
socket.emit('submit_answer', {
|
||||
question_index: question_index,
|
||||
answer: answer
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<div class='flex flex-col justify-center w-screen h-1/6'>
|
||||
<h1 class='text-6xl text-center'>
|
||||
{question.question}
|
||||
</h1>
|
||||
<span class='text-center py-2 text-lg'>{timer_res}</span>
|
||||
</div>
|
||||
{#if timer_res !== "0"}
|
||||
<div class='flex flex-wrap'>
|
||||
{#each question.answers as answer}
|
||||
<button class='w-1/2 text-3xl bg-amber-700 my-2 disabled:opacity-60 border border-white' disabled={selected_answer !== undefined}
|
||||
on:click={() => selectAnswer(answer.answer)}>{answer.answer}</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class='flex flex-wrap'>
|
||||
{#each question.answers as answer}
|
||||
{#if answer.right}
|
||||
<button class='w-1/2 text-3xl bg-green-600 border border-white' disabled
|
||||
class:opacity-30={answer.answer !== selected_answer}
|
||||
>{answer.answer}</button>
|
||||
{:else }
|
||||
<button class='w-1/2 text-3xl bg-red-500 border border-white' disabled
|
||||
class:opacity-30={answer.answer !== selected_answer}
|
||||
>{answer.answer}</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
</script>
|
||||
|
||||
|
||||
<div class='flex flex-col justify-center w-screen h-screen'>
|
||||
<h1 class='text-7xl text-center'>{title}</h1>
|
||||
<p class='text-3xl pt-8 text-center'>{description}</p>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
export const socket = io();
|
||||
@@ -0,0 +1 @@
|
||||
<script>import "../app.css";</script><slot></slot>
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
|
||||
const messageStore = writable('');
|
||||
|
||||
|
||||
// Connection opened
|
||||
|
||||
Reference in New Issue
Block a user