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

added 3 things: min 2 max 8 options in quetion, the quetion and awnser in the host panle too, clour coded and symbol for awnsers.

Browse source
This commit is contained in:
RezHackXYZ 2025-05-24 07:26:49 +05:30
parent 2a4102438a
commit ad959266a5
No known key found for this signature in database
24 changed files with 259 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app.css
View file

@ -1 +0,0 @@
@import 'tailwindcss';

60
src/lib/config.json Normal file
View file

@ -0,0 +1,60 @@
{
"AnswersSymbolAndColor": [
{
"Color": "#6E0000",
"SelectedColor": "#AA2222",
"HoverBorderColor": "#FF5D5D",
"SelectedBorderColor": "#FF0000",
"Symbol": "nf-md-triangle"
},
{
"Color": "#00316E",
"SelectedColor": "#2255AA",
"HoverBorderColor": "#5D9CFF",
"SelectedBorderColor": "#0000FF",
"Symbol": "nf-fa-square"
},
{
"Color": "#6E6E00",
"SelectedColor": "#AAAA22",
"HoverBorderColor": "#FFFF5D",
"SelectedBorderColor": "#DDFF00",
"Symbol": "nf-fa-circle"
},
{
"Color": "#006E00",
"SelectedColor": "#22AA22",
"HoverBorderColor": "#5DFF5D",
"SelectedBorderColor": "#00ff00",
"Symbol": "nf-fa-diamond"
},
{
"Color": "#4B0082",
"SelectedColor": "#7F33B5",
"HoverBorderColor": "#B066FF",
"SelectedBorderColor": "#9932CC",
"Symbol": "nf-md-star"
},
{
"Color": "#FF8C00",
"SelectedColor": "#FFB347",
"HoverBorderColor": "#FFD580",
"SelectedBorderColor": "#FFA500",
"Symbol": "nf-md-hexagon"
},
{
"Color": "#008B8B",
"SelectedColor": "#33CCCC",
"HoverBorderColor": "#66FFFF",
"SelectedBorderColor": "#00CED1",
"Symbol": "nf-md-octagon"
},
{
"Color": "#8B4513",
"SelectedColor": "#CD853F",
"HoverBorderColor": "#DEB887",
"SelectedBorderColor": "#A0522D",
"Symbol": "nf-md-heart"
}
]
}

6
src/routes/+layout.svelte
View file

@ -5,9 +5,13 @@
<div class="h-full text-white">{@render children()}</div>
<style>
@import 'tailwindcss';
@import "https://www.nerdfonts.com/assets/css/webfont.css";
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
@import "tailwindcss";
:root {
background-color: black;
font-family: "Comfortaa", sans-serif;
font-weight: 300;
}
</style>

33
src/routes/create/components/Questions/question.svelte
View file

@ -1,7 +1,7 @@
<script>
import DeleteQuestion from '../buttons/DeleteQuestion.svelte';
import Answers from './answers.svelte';
import { questions } from '../../logic/GameCreateData.svelte.js';
import DeleteQuestion from "../buttons/DeleteQuestion.svelte";
import Answers from "./answers.svelte";
import { questions } from "../../logic/GameCreateData.svelte.js";
let props = $props();
let index = props.index;
@ -17,10 +17,35 @@
placeholder="Question {index + 1}"
class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
/>
<select
bind:value={questions.v[index].answers.length}
onchange={(e) => {
const newLength = parseInt(e.target.value);
const currentAnswers = questions.v[index].answers;
if (newLength > currentAnswers.length) {
// Add more answers
while (questions.v[index].answers.length < newLength) {
questions.v[index].answers = [
...questions.v[index].answers,
{ text: "", correct: false },
];
}
} else if (newLength < currentAnswers.length) {
// Remove excess answers
questions.v[index].answers = currentAnswers.slice(0, newLength);
}
}}
class="h-fit rounded-xl bg-gray-800 p-1 text-center text-white"
>
<option disabled selected>Options</option>
{#each Array(7) as _, i}
<option value={i + 2}>{i + 2}</option>
{/each}
</select>
<DeleteQuestion {index} />
</div>
<div class="flex flex-col gap-2">
{#each questions.v[index].answers as answer, answersIndex}
<Answers questionsIndex={index} {answersIndex} />

18
src/routes/create/components/buttons/WaitStartGame.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
import { startGame } from '../../logic/StartGame.js';
</script>
<button
onclick={startGame}
class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-gray-700 p-2"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
/></svg
>Wait for game to be created</button
>

2
src/routes/create/logic/StartGame.js
View file

@ -2,6 +2,8 @@ import { createGame } from "./InsertGameInDB.js";
import { questions } from "./GameCreateData.svelte.js";
export async function startGame() {
if (questions.v.some((q) => q.name === "")) return alert("Please fill all questions");
if (questions.v.some((q) => q.answers.some((a) => a === ""))) return alert("Fill all options");
if (questions.v.some((q) => q.correctAnswer === undefined))

4
src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte
View file

@ -2,8 +2,8 @@
import { PeopleAwnseredQ, Totalplayers } from "./../../logic/HostsData.svelte.js";
</script>
<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
<h3>{PeopleAwnseredQ.v} out of {Totalplayers.v} have awnsered the quetion</h3>
<div class="mt-2 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
<h3>{PeopleAwnseredQ.v} out of {Totalplayers.v} have answered the question</h3>
<div class="flex-1 rounded-full border-2 border-gray-600">
<div
class="h-4 rounded-full bg-green-600 transition-all duration-500"

13
src/routes/host/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte
View file

@ -1,13 +0,0 @@
<script>
import { currentQuestion, totalQuetions } from "./../../logic/HostsData.svelte.js";
</script>
<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
<h3>Question {currentQuestion.v + 1} of {totalQuetions.v} 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-500"
style="width: {(currentQuestion.v / totalQuetions.v) * 100}%;"
></div>
</div>
</div>

23
src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/Awnsers.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { CurrentQuestionDetails } from "../../../logic/HostsData.svelte.js";
import config from "$lib/config.json";
</script>
<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
{#each CurrentQuestionDetails.v.answers as answer, index}
<div class="flex">
<input type="radio" name="question" class="sr-only" />
<label
for="O{index}"
style="
--border-color: {config.AnswersSymbolAndColor[index].Color};
--bg-color: {config.AnswersSymbolAndColor[index].Color};
"
class="w-full rounded-lg border-[5px] border-[var(--border-color)] bg-[var(--bg-color)] pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all"
>
<i class="nf {config.AnswersSymbolAndColor[index].Symbol}"></i>
{answer}
</label>
</div>
{/each}
</div>

13
src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/ProgressBar.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import { currentQuestion, totalQuetions } from "./../../../logic/HostsData.svelte.js";
</script>
<div class="mt-5 mb-2 flex w-full items-center justify-center gap-3">
<h3>Question {currentQuestion.v + 1} of {totalQuetions.v}</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.v / totalQuetions.v) * 100}%;"
></div>
</div>
</div>

9
src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/display.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
import Question from "./text/Quetion.svelte";
import Awnsers from "./Awnsers.svelte";
import ProgressBar from "./ProgressBar.svelte";
</script>
<ProgressBar />
<Question />
<Awnsers />

7
src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/text/Quetion.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
import { currentQuestion, CurrentQuestionDetails } from "../../../../logic/HostsData.svelte.js";
</script>
<h1 class="m-[0] text-center text-5xl">
Q{currentQuestion.v + 1}. {CurrentQuestionDetails.v.question}
</h1>

5
src/routes/host/[gamePin]/components/DuringGame/display.svelte
View file

@ -1,9 +1,8 @@
<script>
import PeopleAwnsered from "./PeopleAwnsered.svelte";
import QuetionsAwnsred from "./QuetionsAwnsred.svelte";
import Display from "./awnseringQuetions/display.svelte";
</script>
<h1 class="m-[0] text-7xl">HOSTING</h1>
<QuetionsAwnsred />
<Display />
<PeopleAwnsered />

5
src/routes/host/[gamePin]/logic/HostsData.svelte.js
View file

@ -1,9 +1,10 @@
export let players = $state({ v: [] });
export let Status = $state({ v: "lobby" });
export let questions = { v: [] };
export let CurrentQuestion = $state({ v: -1 });
export let questions = { v: {} };
export let currentQuestion = $state({ v: 0 });
export let totalQuetions = $state({ v: 3 });
export let PeopleAwnseredQ = $state({ v: 0 });
export let Totalplayers = $state({ v: 3 });
export let CurrentQuestionDetails = $state({ v: {} });

21
src/routes/host/[gamePin]/logic/WaitForAwnser.js
View file

@ -1,6 +1,6 @@
import { supabase } from "$lib/supabase.js";
import { onNewPlayerAwnsered } from "./onNewPlayerAwnsered.js";
import { currentQuestion, questions } from "./HostsData.svelte.js";
import { currentQuestion, questions, CurrentQuestionDetails } from "./HostsData.svelte.js";
let WaitingForAwnserConection;
@ -29,4 +29,23 @@ export async function WaitForAwnser(questionid, gamePin) {
},
)
.subscribe();
const { data: questionsData } = await supabase
.from("questions")
.select("id,questionstext,correctanswer")
.eq("gameid", Number(gamePin))
.order("id", { ascending: true });
const { data: answers } = await supabase
.from("answers")
.select("content")
.eq("questionid", Number(questionsData[currentQuestion.v].id))
.order("id", { ascending: true });
CurrentQuestionDetails.v = {
question: questionsData[currentQuestion.v].questionstext,
correctAnswer: questionsData[currentQuestion.v].correctanswer,
answers: answers.map((answer) => answer.content),
questionid: questionsData[currentQuestion.v].id,
};
}

23
src/routes/host/[gamePin]/logic/startGame.js
View file

@ -1,9 +1,20 @@
import { supabase } from "$lib/supabase.js";
import { LobbyConnection } from "./UpdatePlayersList.js";
import { questions, Status, CurrentQuestion, currentQuestion } from "./HostsData.svelte.js";
import {
questions,
Status,
Totalplayers,
totalQuetions,
players,
} from "./HostsData.svelte.js";
import { WaitForAwnser } from "./WaitForAwnser.js";
export async function startGame(gamePin) {
if (players.v.length == 0) {
alert("you need at least 1 person to start the game!");
return;
}
await supabase.removeChannel(LobbyConnection);
Status.v = "started";
@ -16,7 +27,15 @@ export async function startGame(gamePin) {
questions.v = data;
CurrentQuestion.v = 0;
totalQuetions.v = data.length;
const { data: playersData } = await supabase
.from("players")
.select("id")
.eq("gameid", Number(gamePin))
.order("id", { ascending: true });
Totalplayers.v = playersData.length;
WaitForAwnser(0, gamePin);
}

18
src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte
View file

@ -1,5 +1,6 @@
<script>
import { questions, Selected } from "../../logic/HostsData.svelte.js";
import config from "$lib/config.json";
</script>
<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
@ -13,10 +14,23 @@
value={index}
bind:group={Selected.v}
/>
<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
for="O{index}"
style="
--border-color: {config.AnswersSymbolAndColor[index].Color};
--bg-color: {config.AnswersSymbolAndColor[index].Color};
--border-color-checked: {config.AnswersSymbolAndColor[index].SelectedColor};
--bg-color-checked: {config.AnswersSymbolAndColor[index].SelectedColor};
--border-color-hover: {config.AnswersSymbolAndColor[index].HoverBorderColor};
--border-color-checked: {config.AnswersSymbolAndColor[index].SelectedBorderColor};
--border-color-hover: {config.AnswersSymbolAndColor[index].HoverBorderColor};
"
class="w-full cursor-pointer rounded-lg border-[5px] border-[var(--border-color)] bg-[var(--bg-color)] pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-[var(--border-color-checked)] peer-checked:border-[var(--border-color-checked)] peer-checked:bg-[var(--bg-color-checked)] hover:border-[var(--border-color-hover)]"
>
<i class="nf {config.AnswersSymbolAndColor[index].Symbol}"></i>
{answer}
</label>
</div>
{/each}
</div>

17
src/routes/play/[gamePin]/components/awnseringQuetions/buttons/SelectFirst.svelte
View file

@ -1,4 +1,13 @@
<button
class="mt-4 cursor-pointer gap-0 rounded-lg bg-gray-700 p-2 text-3xl transition-all hover:scale-110"
>select a answer
</button>
<div class="group relative">
<button
class="mt-4 cursor-not-allowed gap-0 rounded-lg bg-gray-500 p-2 text-3xl text-gray-300 transition-all"
disabled
>
Submit
</button>
<div
class="invisible absolute bottom-full left-1/2 mb-2 w-40 -translate-x-1/2 rounded-md bg-black px-3 py-1 text-center text-sm text-white opacity-0 transition-all group-hover:visible group-hover:opacity-100"
>
Select an option to submit
</div>
</div>

2
src/routes/play/[gamePin]/components/awnseringQuetions/buttons/submitAwnser.svelte
View file

@ -5,5 +5,5 @@
<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
>Submit
</button>

2
src/routes/play/[gamePin]/components/lobby/PlayersGUI/players.svelte
View file

@ -3,7 +3,7 @@
import PlayerBadge from "./playerBadge.svelte";
</script>
<h1 class="m-[0] mt-10 text-6xl">Players Joined:</h1>
<h1 class="m-[0] mt-5 text-6xl">Players Joined:</h1>
<h1 class="m-[0] text-4xl text-gray-400">(Total Players: {players.v.length})</h1>
<div class="mt-2 flex flex-wrap justify-center gap-2">
{#each players.v as playerName}

7
src/routes/play/[gamePin]/components/lobby/display.svelte
View file

@ -2,12 +2,17 @@
import Players from "./PlayersGUI/players.svelte";
let props = $props();
let gamePin = props.gamePin;
let gamePin = props.gamePin;
</script>
<h1 class="m-[0] text-9xl">PLAYING</h1>
<h1 class="m-[0] text-7xl text-center">Waiting for host to start the game</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>
-->
<Players />

3
src/routes/play/[gamePin]/logic/NewStatus.js
View file

@ -5,6 +5,7 @@ import {
isWait,
Selected,
playerid,
TotalQuestions,
} from "./HostsData.svelte.js";
import { supabase } from "$lib/supabase.js";
@ -23,6 +24,8 @@ export async function NewStatus(NewStatus, gamePin) {
.eq("gameid", Number(gamePin))
.order("id", { ascending: true });
TotalQuestions.v = questionsData.length;
const { data: answers } = await supabase
.from("answers")
.select("content")

6
src/routes/play/[gamePin]/logic/startGame.js
View file

@ -1,6 +1,6 @@
import { supabase } from "$lib/supabase.js";
import { LobbyConnection } from "./UpdatePlayersList.js";
import { questions, Status, CurrentQuestion } from "./HostsData.svelte.js";
import { questions, Status, CurrentQuestion, TotalQuestions } from "./HostsData.svelte.js";
export async function startGame(gamePin) {
await supabase.removeChannel(LobbyConnection);
@ -12,7 +12,7 @@ export async function startGame(gamePin) {
.select("*")
.eq("gameid", Number(gamePin))
.order("id", { ascending: true });
questions.v = data;
TotalQuestions.v = data.length;
CurrentQuestion.v = 0;
@ -20,6 +20,4 @@ export async function startGame(gamePin) {
.from("games")
.update({ status: `question-${CurrentQuestion.v}` })
.eq("gamepin", gamePin);
}