Initial commit
This commit is contained in:
Mawoka
@@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
@@ -0,0 +1 @@
|
||||
engine-strict=true
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"tabWidth": 4
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm init svelte@next
|
||||
|
||||
# create a new project in my-app
|
||||
npm init svelte@next my-app
|
||||
```
|
||||
|
||||
> Note: the `@next` is temporary
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build",
|
||||
"package": "svelte-kit package",
|
||||
"preview": "svelte-kit preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
|
||||
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@types/luxon": "^2.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
||||
"@typescript-eslint/parser": "^5.10.1",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^3.2.1",
|
||||
"luxon": "^2.3.1",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss-load-config": "^3.1.1",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-svelte": "^2.5.0",
|
||||
"socket.io-client": "^4.4.1",
|
||||
"svelte": "^3.44.0",
|
||||
"svelte-check": "^2.2.6",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"tailwindcss": "^3.0.12",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "~4.5.4"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
Generated
+2140
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,13 @@
|
||||
const tailwindcss = require('tailwindcss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
|
||||
tailwindcss(),
|
||||
//But others, like autoprefixer, need to run after,
|
||||
autoprefixer
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@@ -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
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,19 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1,11 @@
|
||||
const config = {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
|
||||
plugins: []
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"lib": ["es2020", "DOM"],
|
||||
"target": "es2020",
|
||||
/**
|
||||
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
||||
to enforce using \`import type\` instead of \`import\` for Types.
|
||||
*/
|
||||
"importsNotUsedAsValues": "error",
|
||||
/**
|
||||
TypeScript doesn't know about import usages in the template because it only sees the
|
||||
script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
|
||||
*/
|
||||
"preserveValueImports": true,
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
To have warnings/errors of the Svelte compiler at the correct position,
|
||||
enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"paths": {
|
||||
"$lib": ["src/lib"],
|
||||
"$lib/*": ["src/lib/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
||||
}
|
||||
Reference in New Issue
Block a user