100 lines
2.6 KiB
Svelte
100 lines
2.6 KiB
Svelte
<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++;
|
|
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>
|