diff --git a/.prettierrc b/.prettierrc index 7e71c41..7ebb855 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { "useTabs": true, - "singleQuote": false, - "trailingComma": "all", + "singleQuote": true, + "trailingComma": "none", "printWidth": 100, "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], "overrides": [ diff --git a/.vscode/settings.json b/.vscode/settings.json index 6e40d33..4fc4d43 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,6 +11,8 @@ "gamepin", "hostgame", "kahoot", + "kahootclone", + "Newplayers", "playername", "questionid", "questionstext", diff --git a/README.md b/README.md index 321f964..d0a8db1 100644 --- a/README.md +++ b/README.md @@ -16,30 +16,38 @@ ```mermaid erDiagram - GAMES { - int ID PK - string creator - date creationDate - string status - } - QUESTIONS { - int ID PK - int GameID FK - string QuestionsText - string CorrectAnswer - } - ANSWERS { - int ID PK - int QuestionID FK - string content - } - PLAYERS { - int ID PK - int GameID FK - int Score - } + GAMES { + int ID PK + string creator + date creationDate + string status + } + QUESTIONS { + int ID PK + int GameID FK + string QuestionsText + string CorrectAnswer + } + ANSWERS { + int ID PK + int QuestionID FK + string content + } + ANSWEREDBY { + int ID PK + int QuestionID FK + string NameOfAnswerer + } + PLAYERS { + int ID PK + int GameID FK + int Score + } + + GAMES ||--o{ QUESTIONS : contains + QUESTIONS ||--o{ ANSWERS : has_answers + QUESTIONS ||--o{ ANSWEREDBY : has_answeredby + GAMES ||--o{ PLAYERS : has_players + - GAMES ||--o{ QUESTIONS : contains - QUESTIONS ||--o{ ANSWERS : has - GAMES ||--o{ PLAYERS : participated_by ``` diff --git a/jsconfig.json b/jsconfig.json index 851471e..d99405d 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -3,9 +3,10 @@ "compilerOptions": { "allowJs": true, "checkJs": true, - "moduleResolution": "bundler" + "moduleResolution": "bundler","target": "es2015", + "module": "es2015", + "types": ["svelte"] }, - "exclude": [ - "node_modules" - ] + "include": ["src/**/*"], + "exclude": ["node_modules/*"], } diff --git a/package.json b/package.json index 7b25e2b..2735ccf 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,7 @@ "@sveltejs/adapter-auto": "^4.0.0", "@sveltejs/kit": "^2.16.0", "@sveltejs/vite-plugin-svelte": "^5.0.0", - "@tailwindcss/postcss": "^4.1.6", "@tailwindcss/vite": "^4.0.0", - "autoprefixer": "^10.4.21", "eslint-config-prettier": "^10.0.1", "prettier": "^3.4.2", "prettier-plugin-svelte": "^3.3.3", @@ -25,8 +23,5 @@ "svelte": "^5.0.0", "tailwindcss": "^4.0.0", "vite": "^6.0.0" - }, - "dependencies": { - "@supabase/supabase-js": "^2.49.4" } } diff --git a/package-lock.json b/play.json similarity index 100% rename from package-lock.json rename to play.json diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..d4b5078 --- /dev/null +++ b/src/app.css @@ -0,0 +1 @@ +@import 'tailwindcss'; diff --git a/src/app.html b/src/app.html index a158320..77a5ff5 100644 --- a/src/app.html +++ b/src/app.html @@ -1,12 +1,12 @@ - + %sveltekit.head% - -
%sveltekit.body%
+ +
%sveltekit.body%
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1fde110..726b46c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,13 +1,6 @@ -
{@render children()}
- - +{@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4ad9622..cc88df0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,18 +1,2 @@ -
-
-

DaKahootClone

-

The best ever kahoot clone.

- - - - - -
-
\ No newline at end of file +

Welcome to SvelteKit

+

Visit svelte.dev/docs/kit to read the documentation

diff --git a/src/routes/host/[gamePin]/+page.svelte b/src/routes/host/[gamePin]/+page.svelte index 5808a7b..2719c2e 100644 --- a/src/routes/host/[gamePin]/+page.svelte +++ b/src/routes/host/[gamePin]/+page.svelte @@ -1,46 +1,18 @@ @@ -48,35 +20,10 @@
-

HOSTING

-

Game Pin:

-

- {gamePin} -

-

Players Joined:

-

(Total Players: {players.length})

-
- {#each players as player} - {player.name} - {/each} -
- + {#if Status.v == "lobby"} + + {:else if Status.v == "started"} + + {/if}
- \ No newline at end of file + diff --git a/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte b/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte new file mode 100644 index 0000000..672183b --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/PeopleAwnsered.svelte @@ -0,0 +1,13 @@ + + +
+

{PeopleAwnseredQ.v} out of {Totalplayers.v} have awnsered the quetion

+
+
+
+
diff --git a/src/routes/host/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte b/src/routes/host/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte new file mode 100644 index 0000000..c51c04d --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/QuetionsAwnsred.svelte @@ -0,0 +1,13 @@ + + +
+

Question {currentQuestion.v + 1} of {totalQuetions.v} is beeing awnsered

+
+
+
+
diff --git a/src/routes/host/[gamePin]/components/DuringGame/display.svelte b/src/routes/host/[gamePin]/components/DuringGame/display.svelte new file mode 100644 index 0000000..c6d1a1b --- /dev/null +++ b/src/routes/host/[gamePin]/components/DuringGame/display.svelte @@ -0,0 +1,9 @@ + + +

HOSTING

+ + diff --git a/src/routes/host/[gamePin]/components/lobby/PlayersGUI/playerBadge.svelte b/src/routes/host/[gamePin]/components/lobby/PlayersGUI/playerBadge.svelte new file mode 100644 index 0000000..ced3664 --- /dev/null +++ b/src/routes/host/[gamePin]/components/lobby/PlayersGUI/playerBadge.svelte @@ -0,0 +1,6 @@ + + +{playerName} diff --git a/src/routes/host/[gamePin]/components/lobby/PlayersGUI/players.svelte b/src/routes/host/[gamePin]/components/lobby/PlayersGUI/players.svelte new file mode 100644 index 0000000..de8b651 --- /dev/null +++ b/src/routes/host/[gamePin]/components/lobby/PlayersGUI/players.svelte @@ -0,0 +1,12 @@ + + +

Players Joined:

+

(Total Players: {players.v.length})

+
+ {#each players.v as playerName} + + {/each} +
diff --git a/src/routes/host/[gamePin]/components/lobby/buttons/startGame.svelte b/src/routes/host/[gamePin]/components/lobby/buttons/startGame.svelte new file mode 100644 index 0000000..4c6e8ac --- /dev/null +++ b/src/routes/host/[gamePin]/components/lobby/buttons/startGame.svelte @@ -0,0 +1,12 @@ + + + diff --git a/src/routes/host/[gamePin]/components/lobby/display.svelte b/src/routes/host/[gamePin]/components/lobby/display.svelte new file mode 100644 index 0000000..3cccce9 --- /dev/null +++ b/src/routes/host/[gamePin]/components/lobby/display.svelte @@ -0,0 +1,15 @@ + + +

HOSTING

+

Game Pin:

+

+ {gamePin} +

+ + diff --git a/src/routes/host/[gamePin]/logic/GetCurrentPlayers.js b/src/routes/host/[gamePin]/logic/GetCurrentPlayers.js new file mode 100644 index 0000000..1eac14a --- /dev/null +++ b/src/routes/host/[gamePin]/logic/GetCurrentPlayers.js @@ -0,0 +1,18 @@ +import { supabase } from "$lib/supabase.js"; +import { players } from "./HostsData.svelte.js"; + +export async function GetCurrentPlayers(gamePin) { + const { data, error } = await supabase + .from("players") + .select("playername") + .eq("gameid", Number(gamePin)); + + console.log("Current players data:", JSON.stringify(data)); + + if (error) { + console.error("Error fetching players:", error); + return; + } + + players.v = data ? data.map(player => player.playername) : []; +} diff --git a/src/routes/host/[gamePin]/logic/HostsData.svelte.js b/src/routes/host/[gamePin]/logic/HostsData.svelte.js new file mode 100644 index 0000000..c1d8316 --- /dev/null +++ b/src/routes/host/[gamePin]/logic/HostsData.svelte.js @@ -0,0 +1,9 @@ +export let players = $state({ v: [] }); +export let Status = $state({ v: "lobby" }); +export let questions = $state({ v: [] }); +export let CurrentQuestion = $state({ v: -1 }); + +export let currentQuestion = $state({ v: 0 }); +export let totalQuetions = $state({ v: 3 }); +export let PeopleAwnseredQ = $state({ v: 0 }); +export let Totalplayers = $state({ v: 3 }); diff --git a/src/routes/host/[gamePin]/logic/UpdatePlayersList.js b/src/routes/host/[gamePin]/logic/UpdatePlayersList.js new file mode 100644 index 0000000..757ca4b --- /dev/null +++ b/src/routes/host/[gamePin]/logic/UpdatePlayersList.js @@ -0,0 +1,26 @@ +import { supabase } from "$lib/supabase.js"; +import { players } from "./HostsData.svelte.js"; + +export let LobbyConnection; + +function onNewPlayer(Newplayers) { + players.v.push(Newplayers.playername); +} + +export async function AutoUpdatePlayersList(gamePin) { + LobbyConnection = supabase + .channel("players-realtime") + .on( + "postgres_changes", + { + event: "INSERT", + schema: "public", + table: "players", + filter: `gameid=eq.${gamePin}`, + }, + (payload) => { + onNewPlayer(payload.new); + }, + ) + .subscribe(); +} diff --git a/src/routes/host/[gamePin]/logic/startGame.js b/src/routes/host/[gamePin]/logic/startGame.js new file mode 100644 index 0000000..5941e99 --- /dev/null +++ b/src/routes/host/[gamePin]/logic/startGame.js @@ -0,0 +1,25 @@ +import { supabase } from "$lib/supabase.js"; +import { LobbyConnection } from "./UpdatePlayersList.js"; +import { questions, Status, CurrentQuestion, currentQuestion } from "./HostsData.svelte.js"; + +export async function startGame(gamePin) { + await supabase.removeChannel(LobbyConnection); + + Status.v = "started"; + + const { data } = await supabase + .from("questions") + .select("*") + .eq("gameid", Number(gamePin)) + .order("id", { ascending: true }); + questions.v = data; + + CurrentQuestion.v = 0; + + await supabase + .from("games") + .update({ status: `question-${currentQuestion.v}` }) + .eq("gamepin", gamePin); + + +} diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte index bf7df82..f92c8b0 100644 --- a/src/routes/join/+page.svelte +++ b/src/routes/join/+page.svelte @@ -1,13 +1,15 @@
-
+

Join a game here

{:else} -