LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added lobby-music

Browse Source
This commit is contained in:
Mawoka
2022-09-18 11:28:28 +02:00
parent 7b677f5eba
commit 1d6dceab82
7 changed files with 128 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.pre-commit-config.yaml
+1 -1
View File
@@ -7,7 +7,7 @@ repos:
- id: trailing-whitespace
- id: end-of-file-fixer
- id: check-yaml
- id: check-added-large-files
# - id: check-added-large-files
- repo: https://github.com/psf/black
rev: 22.8.0
frontend/src/lib/assets/music/1-128.mp3
BIN
View File
Binary file not shown.
frontend/src/lib/assets/music/1_original.mp3
BIN
View File
Binary file not shown.
frontend/src/lib/dashboard/main_slider.svelte
+9
View File
@@ -12,6 +12,7 @@
import { QuizQuestionType } from '$lib/quiz_types.js';
import { getLocalization } from '../i18n';
import StartGamePopup from './start_game.svelte';
import { onMount } from 'svelte';
let start_game = null;
const { t } = getLocalization();
@@ -26,6 +27,14 @@
});
window.location.reload();
};
const close_start_game_if_esc_is_pressed = (key: KeyboardEvent) => {
if (key.code === 'Escape') {
start_game = null;
}
};
onMount(() => {
document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
});
</script>
<div class="w-screen p-8">
frontend/src/lib/dashboard/start_game.svelte
+5 -1
View File
@@ -7,6 +7,7 @@
import { alertModal } from '$lib/stores';
import { captcha_enabled } from '$lib/config';
import StartGameBackground from './start_game_background.svg';
import { fade } from 'svelte/transition';
export let quiz_id;
let captcha_selected = false;
@@ -48,7 +49,10 @@
};
</script>
<div class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50">
<div
class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50"
transition:fade={{ duration: 100 }}
>
<div
class="w-5/6 h-5/6 bg-black m-auto rounded-lg shadow-lg p-4 flex flex-col"
style="background-image: url({StartGameBackground}); background-color: #DFDBE5;"
frontend/src/lib/play/audio_player.svelte
+79
View File
@@ -0,0 +1,79 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
import Audio1 from '$lib/assets/music/1-128.mp3';
export let play = false;
let volume = 100;
const audio = new Audio(Audio1);
const control_audio = (play_audio: boolean) => {
if (play_audio) {
audio.play();
audio.loop = true;
} else {
audio.pause();
}
};
$: audio.volume = volume / 100;
$: control_audio(play);
</script>
<div class="fixed top-0 left-0">
{#if play}
<button
on:click={() => {
play = false;
}}
>
<!-- heroicons/volume-up -->
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
/>
</svg>
</button>
{:else}
<button
on:click={() => {
play = true;
}}
>
<!-- heroicons/volume-off -->
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
clip-rule="evenodd"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
/>
</svg>
</button>
{/if}
<input type="range" class="vertical_input" bind:value={volume} min="0" max="100" />
</div>
frontend/src/routes/admin/+page.svelte
+34 -29
View File
@@ -11,6 +11,7 @@
import { navbarVisible } from '$lib/stores';
import type { PlayerAnswer, Player } from '$lib/admin.ts';
import SomeAdminScreen from '$lib/admin.svelte';
import AudioPlayer from '$lib/play/audio_player.svelte';
import { browser } from '$app/environment';
import { onMount } from 'svelte';
@@ -36,6 +37,7 @@
let success = false;
let dataexport_download_a;
let warnToLeave = true;
let play_music = false;
const connect = async () => {
socket.emit('register_as_admin', {
@@ -128,37 +130,40 @@
<p class="text-red-700">{errorMessage}</p>
{/if}
{:else if !game_started}
<img
alt="QR code to join the game"
src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
class="block mx-auto w-1/6"
/>
<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
<div class="flex justify-center w-full mt-4">
<ul class="list-disc pl-8">
{#if players.length > 0}
{#each players as player}
<li>
<span>{player.username}</span>
<!-- <button>{$t('words.kick')}</button>-->
</li>
{/each}
{/if}
</ul>
</div>
{#if players.length > 0}
<div class="w-full h-full">
<AudioPlayer bind:play={play_music} />
<img
alt="QR code to join the game"
src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
class="block mx-auto w-1/6"
/>
<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
<div class="flex justify-center w-full mt-4">
<button
class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
id="startGame"
on:click={() => {
socket.emit('start_game', '');
game_started = true;
}}
>{$t('admin_page.start_game')}
</button>
<ul class="list-disc pl-8">
{#if players.length > 0}
{#each players as player}
<li>
<span>{player.username}</span>
<!-- <button>{$t('words.kick')}</button>-->
</li>
{/each}
{/if}
</ul>
</div>
{/if}
{#if players.length > 0}
<div class="flex justify-center w-full mt-4">
<button
class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
id="startGame"
on:click={() => {
socket.emit('start_game', '');
game_started = true;
}}
>{$t('admin_page.start_game')}
</button>
</div>
{/if}
</div>
{:else}
<SomeAdminScreen
bind:final_results