RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AGHHH, now finaly the actual playing of the game works! now time to add a leader board!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-12 21:46:36 +05:30
parent f83f50d9b2
commit 9ac813c699
No known key found for this signature in database
11 changed files with 381 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/routes/play/[gamePin]/+page.js
View file

@ -1,4 +1,3 @@
// Example of what your +page.js or +page.server.js might need
export function load({ params }) {
return {
gamePin: params.gamePin

143
src/routes/play/[gamePin]/+page.svelte
View file

@ -1,36 +1,19 @@
<script>
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { supabase } from '$lib/supabase';
import { onMount } from 'svelte';
export let data;
const gamePin = data.gamePin;
import { page } from '$app/stores';
const name = $page.state?.name;
let question = [];
let Selected = null;
let currentQuestion = 0;
let isWait = true;
let gameStatus = '';
let players = [];
async function addPlayer() {
const { data: gameData, error } = await supabase
.from('games')
.select('players')
.eq('gamePIN', Number(gamePin))
.maybeSingle();
let updatedPlayers = gameData.players || [];
const alreadyExists = updatedPlayers.some((p) => p.name === name);
if (!alreadyExists) {
updatedPlayers.push({ name: name, score: 0 });
const { error: updateError } = await supabase
.from('games')
.update({ players: updatedPlayers })
.eq('gamePIN', Number(gamePin));
}
}
// Subscribe to realtime changes in players
function subscribeToPlayers() {
onMount(async () => {
const channel = supabase
.channel(`game-${gamePin}`)
.on(
@ -42,46 +25,110 @@
filter: `gamePIN=eq.${gamePin}`
},
(payload) => {
players = payload.new.players || [];
if (payload.new.gameStatus != gameStatus) {
gameStatus = payload.new.gameStatus;
isWait = false;
Selected = null;
currentQuestion = Number(gameStatus);
}
}
)
.subscribe();
}
onMount(async () => {
await addPlayer();
const { data, error } = await supabase
.from('games')
.select('questions')
.eq('gamePIN', Number(gamePin))
.single();
const { data: gameData } = await supabase
if (!error && data) {
question = data.questions || [];
}
});
async function SubmitAnswer() {
isWait = true;
const { data, error } = await supabase
.from('games')
.select('players')
.eq('gamePIN', Number(gamePin))
.maybeSingle();
.single();
players = data.players;
if (gameData?.players) {
players = gameData.players;
if (question[currentQuestion].correctAnswer == Selected) {
players.forEach((player) => {
if (player.name == name) {
player.score += 1;
}
});
await supabase.from('games').update({ players: players }).eq('gamePIN', Number(gamePin));
}
subscribeToPlayers();
});
const { data: data2 } = await supabase
.from('games')
.select('questions')
.eq('gamePIN', Number(gamePin))
.single();
question = data2.questions;
question[currentQuestion].playersCompelted++;
console.log('Players Completed:', question[currentQuestion].playersCompelted);
await supabase.from('games').update({ questions: question }).eq('gamePIN', Number(gamePin));
}
</script>
<div class="bg-grey-900 flex h-full items-center justify-center">
<div
class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
>
<h1 class="m-[0] text-9xl">PLAYING</h1>
<h1 class="m-[0] text-7xl">Game Pin:</h1>
<h1 class="m-[0] rounded-2xl bg-gray-700 pt-1.5 pr-2 pb-0 pl-2 font-mono text-5xl">
{gamePin}
</h1>
<h1 class="m-[0] mt-10 text-6xl">Players Joined:</h1>
<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.length})</h1>
<div class="mt-2 flex flex-wrap justify-center gap-2">
{#each players as player}
<span class="m-[0] rounded-xl bg-gray-700 pt-1 pr-2 pb-0 pl-2 font-mono text-3xl"
>{player.name}</span
>
{/each}
<div class="mb-5 flex w-full items-center justify-center gap-3">
<h3>Question {currentQuestion + 1} of {question.length}</h3>
<div class="flex-1 rounded-full border-2 border-gray-600">
<div
class="h-4 rounded-full bg-green-600 transition-all duration-700"
style="width: {(currentQuestion / question.length) * 100}%;"
></div>
</div>
</div>
{#if isWait != true}
<h1 class="m-[0] text-center text-5xl">
Q{currentQuestion + 1}. {question[currentQuestion].name}
</h1>
<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
{#each question[currentQuestion].answers as answer, index}
<div class="flex">
<input
type="radio"
id="O{index}"
name="question"
class="peer sr-only"
value={index}
bind:group={Selected}
/>
<label
class="w-full cursor-pointer rounded-lg border-3 border-gray-600 bg-gray-600 pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-blue-600 peer-checked:bg-blue-600 hover:border-blue-600"
for="O{index}">{answer}</label
>
</div>
{/each}
</div>
{#if Selected != null}
<button
class="mt-4 cursor-pointer gap-0 rounded-lg bg-green-700 p-2 text-3xl transition-all hover:scale-110 hover:-rotate-10"
onclick={SubmitAnswer}
>submit answer
</button>
{:else}
<button
class="mt-4 cursor-pointer gap-0 rounded-lg bg-gray-700 p-2 text-3xl transition-all hover:scale-110"
>select an answer to submit!
</button>
{/if}
{:else}<h1 class="m-[0] text-center text-5xl">
Please wait for everyone else to answer the question.
</h1>{/if}
</div>
</div>