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

🧱 Added docs about self-hosting and changed envs

Browse Source
This commit is contained in:
Mawoka
2022-03-11 16:39:22 +01:00
parent 8aa6c9190d
commit 5222cc5a8f
8 changed files with 254 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/play/join.svelte
+39 -26
View File
@@ -1,16 +1,18 @@
<script lang="ts">
<script lang='ts'>
import { socket } from '$lib/socket';
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/env';
import * as Sentry from "@sentry/browser";
export let game_pin: string;
let username = '';
let hcaptchaSitekey = 'ee81b2a1-acf3-4d20-b2a4-a7ea94c7eba5';
let hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA;
let hcaptcha = {
execute: async (_a, _b) => ({ response: '' }),
render: (_a, _b) => {}
render: (_a, _b) => {
}
};
let hcaptchaWidgetID;
@@ -31,7 +33,8 @@
if (browser) {
hcaptcha = {
execute: async () => ({ response: '' }),
render: () => {}
render: () => {
}
};
}
});
@@ -40,13 +43,23 @@
if (username.length <= 3) {
return;
}
const { response } = await hcaptcha.execute(hcaptchaWidgetID, {
async: true
});
let captcha_resp;
try {
const { response } = await hcaptcha.execute(hcaptchaWidgetID, {
async: true
});
captcha_resp = response;
} catch (e) {
if (import.meta.env.VITE_SENTRY !== null){
Sentry.captureException(e);
}
alert('Captcha failed, reloading the page probably helps!');
window.location.reload();
}
socket.emit('join_game', {
username: username,
game_pin: game_pin,
captcha: response
captcha: captcha_resp
});
};
socket.on('game_not_found', () => {
@@ -56,27 +69,27 @@
</script>
<svelte:head>
<script src="https://js.hcaptcha.com/1/api.js?render=explicit" async defer></script>
<script src='https://js.hcaptcha.com/1/api.js?render=explicit' async defer></script>
</svelte:head>
{#if game_pin === '' || game_pin.length <= 7}
<div class="flex flex-col justify-center align-center w-screen h-screen">
<div class='flex flex-col justify-center align-center w-screen h-screen'>
<form
on:submit|preventDefault={() => {}}
class="flex-col flex justify-center align-center mx-auto"
class='flex-col flex justify-center align-center mx-auto'
>
<h1 class="text-lg text-center">Game Pin</h1>
<h1 class='text-lg text-center'>Game Pin</h1>
<input
class="border border-amber-800 self-center text-center text-black"
class='border border-amber-800 self-center text-center text-black'
bind:value={game_pin}
maxlength="8"
maxlength='8'
/>
<!-- use:tippy={{content: "Please enter the game pin", sticky: true, placement: 'top'}}-->
<br />
<button
class="bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2"
type="submit"
class='bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50 disabled:cursor-not-allowed mt-2'
type='submit'
disabled={game_pin.length <= 7}
>
Submit
@@ -84,16 +97,16 @@
</form>
</div>
{:else}
<div class="flex flex-col justify-center align-center w-screen h-screen">
<div class='flex flex-col justify-center align-center w-screen h-screen'>
<form
on:submit|preventDefault={setUsername}
class="flex-col flex justify-center align-center mx-auto"
class='flex-col flex justify-center align-center mx-auto'
>
<h1 class="text-lg text-center">Username</h1>
<input class="border border-amber-800 text-black text-center" bind:value={username} />
<h1 class='text-lg text-center'>Username</h1>
<input class='border border-amber-800 text-black text-center' bind:value={username} />
<button
class="bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:cursor-not-allowed disabled:opacity-50 mt-2"
type="submit"
class='bg-amber-800 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded disabled:cursor-not-allowed disabled:opacity-50 mt-2'
type='submit'
disabled={username.length <= 3}
>
Submit
@@ -102,9 +115,9 @@
</div>
{/if}
<div
id="hcaptcha"
class="h-captcha"
id='hcaptcha'
class='h-captcha'
data-sitekey={hcaptchaSitekey}
data-size="invisible"
data-theme="dark"
data-size='invisible'
data-theme='dark'
/>