Merge branch 'main' of https://github.com/RezHackXYZ/KahootClone
This commit is contained in:
commit
caff3cef7c
4 changed files with 327 additions and 0 deletions
109
src/routes/hostgame/[gamePin]/+page.svelte
Normal file
109
src/routes/hostgame/[gamePin]/+page.svelte
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { supabase } from '$lib/supabase';
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
const gamePin = data.gamePin;
|
||||||
|
|
||||||
|
let totalQuetions = 3;
|
||||||
|
let currentQuestion = 0;
|
||||||
|
|
||||||
|
let PeopleAwnseredQ = 2;
|
||||||
|
let Totalplayers = 3;
|
||||||
|
|
||||||
|
let questions = [];
|
||||||
|
|
||||||
|
async function NewUpdate(question) {
|
||||||
|
if (question[currentQuestion].playersCompelted == Totalplayers) {
|
||||||
|
currentQuestion++;
|
||||||
|
|
||||||
|
if (currentQuestion > questions.length) {
|
||||||
|
await supabase
|
||||||
|
.from('games')
|
||||||
|
.update({ gameStatus: `completed` })
|
||||||
|
.eq('gamePIN', Number(data.gamePin));
|
||||||
|
goto(`/results/${gamePin}`);
|
||||||
|
} else {
|
||||||
|
await supabase
|
||||||
|
.from('games')
|
||||||
|
.update({ gameStatus: `${currentQuestion}` })
|
||||||
|
.eq('gamePIN', Number(data.gamePin));
|
||||||
|
}
|
||||||
|
|
||||||
|
PeopleAwnseredQ = 0;
|
||||||
|
} else {
|
||||||
|
PeopleAwnseredQ = question[currentQuestion].playersCompelted;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const channel = supabase
|
||||||
|
.channel(`game-${gamePin}`)
|
||||||
|
.on(
|
||||||
|
'postgres_changes',
|
||||||
|
{
|
||||||
|
event: 'UPDATE',
|
||||||
|
schema: 'public',
|
||||||
|
table: 'games',
|
||||||
|
filter: `gamePIN=eq.${gamePin}`
|
||||||
|
},
|
||||||
|
(payload) => {
|
||||||
|
if (payload.new.questions != questions) {
|
||||||
|
questions = payload.new.questions;
|
||||||
|
currentQuestion = Number(payload.new.gameStatus);
|
||||||
|
NewUpdate(questions);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
|
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('games')
|
||||||
|
.select('players')
|
||||||
|
.eq('gamePIN', Number(gamePin))
|
||||||
|
.single();
|
||||||
|
|
||||||
|
Totalplayers = data.players.length;
|
||||||
|
|
||||||
|
const { data: data2, error: error2 } = await supabase
|
||||||
|
.from('games')
|
||||||
|
.select('questions')
|
||||||
|
.eq('gamePIN', Number(gamePin))
|
||||||
|
.single();
|
||||||
|
|
||||||
|
questions = data2.questions;
|
||||||
|
totalQuetions = questions.length;
|
||||||
|
|
||||||
|
currentQuestion = 0;
|
||||||
|
await supabase
|
||||||
|
.from('games')
|
||||||
|
.update({ gameStatus: currentQuestion.toString() })
|
||||||
|
.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-7xl">HOSTING</h1>
|
||||||
|
<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
|
||||||
|
<h3>Question {currentQuestion + 1} of {totalQuetions} is beeing awnsered</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 / totalQuetions) * 100}%;"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
|
||||||
|
<h3>{PeopleAwnseredQ} out of {Totalplayers} have awnsered the quetion</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: {(PeopleAwnseredQ / Totalplayers) * 100}%;"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
142
src/routes/play/[gamePin]/+page.svelte
Normal file
142
src/routes/play/[gamePin]/+page.svelte
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
<script>
|
||||||
|
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 = [];
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const channel = supabase
|
||||||
|
.channel(`game-${gamePin}`)
|
||||||
|
.on(
|
||||||
|
'postgres_changes',
|
||||||
|
{
|
||||||
|
event: 'UPDATE',
|
||||||
|
schema: 'public',
|
||||||
|
table: 'games',
|
||||||
|
filter: `gamePIN=eq.${gamePin}`
|
||||||
|
},
|
||||||
|
(payload) => {
|
||||||
|
if (payload.new.gameStatus != gameStatus) {
|
||||||
|
if (payload.new.questions == 'completed') {
|
||||||
|
goto(`/results/${gamePin}`, {
|
||||||
|
state: {
|
||||||
|
name
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
gameStatus = payload.new.gameStatus;
|
||||||
|
isWait = false;
|
||||||
|
Selected = null;
|
||||||
|
currentQuestion = Number(gameStatus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.subscribe();
|
||||||
|
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('games')
|
||||||
|
.select('questions')
|
||||||
|
.eq('gamePIN', Number(gamePin))
|
||||||
|
.single();
|
||||||
|
|
||||||
|
if (!error && data) {
|
||||||
|
question = data.questions || [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function SubmitAnswer() {
|
||||||
|
isWait = true;
|
||||||
|
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('games')
|
||||||
|
.select('players')
|
||||||
|
.eq('gamePIN', Number(gamePin))
|
||||||
|
.single();
|
||||||
|
players = data.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));
|
||||||
|
}
|
||||||
|
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
5
src/routes/results/[gamePin]/+page.js
Normal file
5
src/routes/results/[gamePin]/+page.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
export function load({ params }) {
|
||||||
|
return {
|
||||||
|
gamePin: params.gamePin
|
||||||
|
};
|
||||||
|
}
|
||||||
71
src/routes/results/[gamePin]/+page.svelte
Normal file
71
src/routes/results/[gamePin]/+page.svelte
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script>
|
||||||
|
import { supabase } from '$lib/supabase';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
export let data;
|
||||||
|
const gamePin = data.gamePin;
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
let name = '';
|
||||||
|
name = $page.state?.name;
|
||||||
|
|
||||||
|
let players = [];
|
||||||
|
onMount(async () => {
|
||||||
|
const { data } = await supabase
|
||||||
|
.from('games')
|
||||||
|
.select('players')
|
||||||
|
.eq('gamePIN', Number(gamePin))
|
||||||
|
.single();
|
||||||
|
|
||||||
|
players = data.players;
|
||||||
|
|
||||||
|
players.sort((a, b) => b.score - a.score);
|
||||||
|
});
|
||||||
|
</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="mb-3 text-7xl font-bold text-white">Leaderboard</h1>
|
||||||
|
|
||||||
|
{#if players}
|
||||||
|
{#each players as player, i}
|
||||||
|
{#if name == player.name}
|
||||||
|
<div class="flex w-full items-center justify-between rounded-lg bg-green-950 p-2">
|
||||||
|
<div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
|
||||||
|
{i + 1}
|
||||||
|
</div>
|
||||||
|
<div class="w-20 text-white">{player.name}</div>
|
||||||
|
<div class="flex-1 rounded-full border-2 border-gray-600">
|
||||||
|
<div
|
||||||
|
class="flex h-6 items-center justify-center rounded-full bg-green-600 transition-all duration-700"
|
||||||
|
style="width: {(player.score / players[0].score) * 100}%;"
|
||||||
|
>
|
||||||
|
<div>{player.score} points</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}<div class="flex w-full items-center justify-between rounded-lg bg-gray-800 p-2">
|
||||||
|
<div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
|
||||||
|
{i + 1}
|
||||||
|
</div>
|
||||||
|
<div class="w-20 text-white">{player.name}</div>
|
||||||
|
<div class="flex-1 rounded-full border-2 border-gray-600">
|
||||||
|
<div
|
||||||
|
class="flex h-6 items-center justify-center rounded-full bg-green-600 transition-all duration-700"
|
||||||
|
style="width: {(player.score / players[0].score) * 100}%;"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex w-17 justify-end">{player.score} points</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="mt-4 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
on:click={joinGame}
|
||||||
|
>
|
||||||
|
Go back to the home page!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue