sucses full merged and made the anouncer feature, i convered it to tailwind and diffrent comonents!
This commit is contained in:
parent
9f927cf2e9
commit
08ef5545cf
89 changed files with 186 additions and 685 deletions
|
|
@ -12,7 +12,6 @@
|
||||||
"lint": "prettier --check . && eslint ."
|
"lint": "prettier --check . && eslint ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-auto": "^4.0.0",
|
|
||||||
"@sveltejs/kit": "^2.16.0",
|
"@sveltejs/kit": "^2.16.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||||
"@tailwindcss/postcss": "^4.1.6",
|
"@tailwindcss/postcss": "^4.1.6",
|
||||||
|
|
@ -28,11 +27,11 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@supabase/supabase-js": "^2.49.4",
|
"@supabase/supabase-js": "^2.49.4",
|
||||||
|
"@sveltejs/adapter-static": "^3.0.8",
|
||||||
"chart.js": "^4.4.9",
|
"chart.js": "^4.4.9",
|
||||||
"drag-drop-touch": "^1.3.1",
|
"js-confetti": "^0.12.0",
|
||||||
"kokoro-js": "^1.2.1",
|
|
||||||
"random-words": "^2.0.1",
|
"random-words": "^2.0.1",
|
||||||
"svelte-spa-router": "^4.0.1",
|
"svelte-5-french-toast": "^2.0.4",
|
||||||
"word-exists": "^1.0.0"
|
"word-exists": "^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
src/app.css
Normal file
1
src/app.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
@ -9,4 +9,4 @@
|
||||||
<body data-sveltekit-preload-data="hover" style="height: 100%; margin: 0">
|
<body data-sveltekit-preload-data="hover" style="height: 100%; margin: 0">
|
||||||
<div style="display: contents; height: 100%">%sveltekit.body%</div>
|
<div style="display: contents; height: 100%">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
2
src/lib/showAlert.js
Normal file
2
src/lib/showAlert.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
import JSConfetti from "js-confetti";
|
||||||
|
const jsConfetti = new JSConfetti();
|
||||||
|
|
@ -1,38 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
|
export const prerender = true;
|
||||||
|
import { Toaster } from "svelte-5-french-toast";
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
import { confettiAnimation } from "./Confetti.js";
|
|
||||||
let ShowAlertDiv = $state(false);
|
|
||||||
let ShowAlertText = $state("this Code is bad");
|
|
||||||
let ShowAlertType = $state("Error");
|
|
||||||
|
|
||||||
export function ShowAlert(text, type) {
|
|
||||||
ShowAlertDiv = true;
|
|
||||||
ShowAlertType = type;
|
|
||||||
|
|
||||||
ShowAlertText = text;
|
|
||||||
setTimeout(() => {
|
|
||||||
ShowAlertDiv = false;
|
|
||||||
}, 1500);
|
|
||||||
|
|
||||||
if (type == "success") {
|
|
||||||
confettiAnimation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<Toaster />
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<div class="h-full text-white">{@render children()}</div>
|
<div class="h-full text-white">{@render children()}</div>
|
||||||
</div>
|
</div>
|
||||||
{#if ShowAlertDiv == true}
|
|
||||||
<div id="alert">
|
|
||||||
<h1 class={ShowAlertType}>{ShowAlertText}</h1>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,8 @@
|
||||||
/>
|
/>
|
||||||
<h2>A collection of awesome tools, games, and more — made to be used in any classroom!</h2>
|
<h2>A collection of awesome tools, games, and more — made to be used in any classroom!</h2>
|
||||||
<h3>MAIN</h3>
|
<h3>MAIN</h3>
|
||||||
|
|
||||||
<div id="items2">
|
<div id="items2">
|
||||||
<a href="/KahhotClone">
|
<a href="/kahootclone">
|
||||||
<button class="button2">
|
<button class="button2">
|
||||||
<span class="front2">
|
<span class="front2">
|
||||||
<svg
|
<svg
|
||||||
|
|
@ -22,8 +21,8 @@
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
DaKahootClone
|
DaKahootClone
|
||||||
<p>The best ever kahoot clone.</p></span
|
<p>The best ever kahoot clone.</p>
|
||||||
>
|
</span>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,7 +46,7 @@
|
||||||
>
|
>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
<a href="#/RandomName">
|
<a href="/RandomName">
|
||||||
<button>
|
<button>
|
||||||
<span class="front">
|
<span class="front">
|
||||||
<svg
|
<svg
|
||||||
|
|
@ -65,7 +64,7 @@
|
||||||
>
|
>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
<a href="#/Wordle">
|
<a href="/wordle">
|
||||||
<button>
|
<button>
|
||||||
<span class="front">
|
<span class="front">
|
||||||
<svg
|
<svg
|
||||||
|
|
@ -84,7 +83,7 @@
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
|
|
||||||
<a href="#/announcer">
|
<a href="/announcer">
|
||||||
<button>
|
<button>
|
||||||
<span class="front">
|
<span class="front">
|
||||||
<svg
|
<svg
|
||||||
|
|
|
||||||
|
|
@ -1,316 +0,0 @@
|
||||||
export function confettiAnimation() {
|
|
||||||
(() => {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// Utility functions grouped into a single object
|
|
||||||
const Utils = {
|
|
||||||
// Parse pixel values to numeric values
|
|
||||||
parsePx: (value) => parseFloat(value.replace(/px/, "")),
|
|
||||||
|
|
||||||
// Generate a random number between two values, optionally with a fixed precision
|
|
||||||
getRandomInRange: (min, max, precision = 0) => {
|
|
||||||
const multiplier = Math.pow(10, precision);
|
|
||||||
const randomValue = Math.random() * (max - min) + min;
|
|
||||||
return Math.floor(randomValue * multiplier) / multiplier;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Pick a random item from an array
|
|
||||||
getRandomItem: (array) =>
|
|
||||||
array[Math.floor(Math.random() * array.length)],
|
|
||||||
|
|
||||||
// Scaling factor based on screen width
|
|
||||||
getScaleFactor: () => Math.log(window.innerWidth) / Math.log(1920),
|
|
||||||
|
|
||||||
// Debounce function to limit event firing frequency
|
|
||||||
debounce: (func, delay) => {
|
|
||||||
let timeout;
|
|
||||||
return (...args) => {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
timeout = setTimeout(() => func(...args), delay);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Precomputed constants
|
|
||||||
const DEG_TO_RAD = Math.PI / 180;
|
|
||||||
|
|
||||||
// Centralized configuration for default values
|
|
||||||
const defaultConfettiConfig = {
|
|
||||||
confettiesNumber: 250,
|
|
||||||
confettiRadius: 6,
|
|
||||||
confettiColors: [
|
|
||||||
"#fcf403",
|
|
||||||
"#62fc03",
|
|
||||||
"#f4fc03",
|
|
||||||
"#03e7fc",
|
|
||||||
"#03fca5",
|
|
||||||
"#a503fc",
|
|
||||||
"#fc03ad",
|
|
||||||
"#fc03c2",
|
|
||||||
],
|
|
||||||
emojies: [],
|
|
||||||
svgIcon: null, // Example SVG link
|
|
||||||
};
|
|
||||||
|
|
||||||
// Confetti class representing individual confetti pieces
|
|
||||||
class Confetti {
|
|
||||||
constructor({
|
|
||||||
initialPosition,
|
|
||||||
direction,
|
|
||||||
radius,
|
|
||||||
colors,
|
|
||||||
emojis,
|
|
||||||
svgIcon,
|
|
||||||
}) {
|
|
||||||
const speedFactor =
|
|
||||||
Utils.getRandomInRange(0.9, 1.7, 3) *
|
|
||||||
Utils.getScaleFactor();
|
|
||||||
this.speed = { x: speedFactor, y: speedFactor };
|
|
||||||
this.finalSpeedX = Utils.getRandomInRange(0.2, 0.6, 3);
|
|
||||||
this.rotationSpeed =
|
|
||||||
emojis.length || svgIcon
|
|
||||||
? 0.01
|
|
||||||
: Utils.getRandomInRange(0.03, 0.07, 3) *
|
|
||||||
Utils.getScaleFactor();
|
|
||||||
this.dragCoefficient = Utils.getRandomInRange(
|
|
||||||
0.0005,
|
|
||||||
0.0009,
|
|
||||||
6
|
|
||||||
);
|
|
||||||
this.radius = { x: radius, y: radius };
|
|
||||||
this.initialRadius = radius;
|
|
||||||
this.rotationAngle =
|
|
||||||
direction === "left"
|
|
||||||
? Utils.getRandomInRange(0, 0.2, 3)
|
|
||||||
: Utils.getRandomInRange(-0.2, 0, 3);
|
|
||||||
this.emojiRotationAngle = Utils.getRandomInRange(
|
|
||||||
0,
|
|
||||||
2 * Math.PI
|
|
||||||
);
|
|
||||||
this.radiusYDirection = "down";
|
|
||||||
|
|
||||||
const angle =
|
|
||||||
direction === "left"
|
|
||||||
? Utils.getRandomInRange(82, 15) * DEG_TO_RAD
|
|
||||||
: Utils.getRandomInRange(-15, -82) * DEG_TO_RAD;
|
|
||||||
this.absCos = Math.abs(Math.cos(angle));
|
|
||||||
this.absSin = Math.abs(Math.sin(angle));
|
|
||||||
|
|
||||||
const offset = Utils.getRandomInRange(-150, 0);
|
|
||||||
const position = {
|
|
||||||
x:
|
|
||||||
initialPosition.x +
|
|
||||||
(direction === "left" ? -offset : offset) * this.absCos,
|
|
||||||
y: initialPosition.y - offset * this.absSin,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.position = { ...position };
|
|
||||||
this.initialPosition = { ...position };
|
|
||||||
this.color =
|
|
||||||
emojis.length || svgIcon
|
|
||||||
? null
|
|
||||||
: Utils.getRandomItem(colors);
|
|
||||||
this.emoji = emojis.length ? Utils.getRandomItem(emojis) : null;
|
|
||||||
this.svgIcon = null;
|
|
||||||
|
|
||||||
// Preload SVG if provided
|
|
||||||
if (svgIcon) {
|
|
||||||
this.svgImage = new Image();
|
|
||||||
this.svgImage.src = svgIcon;
|
|
||||||
this.svgImage.onload = () => {
|
|
||||||
this.svgIcon = this.svgImage; // Mark as ready once loaded
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
this.createdAt = Date.now();
|
|
||||||
this.direction = direction;
|
|
||||||
}
|
|
||||||
|
|
||||||
draw(context) {
|
|
||||||
const { x, y } = this.position;
|
|
||||||
const { x: radiusX, y: radiusY } = this.radius;
|
|
||||||
const scale = window.devicePixelRatio;
|
|
||||||
|
|
||||||
if (this.svgIcon) {
|
|
||||||
context.save();
|
|
||||||
context.translate(scale * x, scale * y);
|
|
||||||
context.rotate(this.emojiRotationAngle);
|
|
||||||
context.drawImage(
|
|
||||||
this.svgIcon,
|
|
||||||
-radiusX,
|
|
||||||
-radiusY,
|
|
||||||
radiusX * 2,
|
|
||||||
radiusY * 2
|
|
||||||
);
|
|
||||||
context.restore();
|
|
||||||
} else if (this.color) {
|
|
||||||
context.fillStyle = this.color;
|
|
||||||
context.beginPath();
|
|
||||||
context.ellipse(
|
|
||||||
x * scale,
|
|
||||||
y * scale,
|
|
||||||
radiusX * scale,
|
|
||||||
radiusY * scale,
|
|
||||||
this.rotationAngle,
|
|
||||||
0,
|
|
||||||
2 * Math.PI
|
|
||||||
);
|
|
||||||
context.fill();
|
|
||||||
} else if (this.emoji) {
|
|
||||||
context.font = `${radiusX * scale}px serif`;
|
|
||||||
context.save();
|
|
||||||
context.translate(scale * x, scale * y);
|
|
||||||
context.rotate(this.emojiRotationAngle);
|
|
||||||
context.textAlign = "center";
|
|
||||||
context.fillText(this.emoji, 0, radiusY / 2); // Adjust vertical alignment
|
|
||||||
context.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updatePosition(deltaTime, currentTime) {
|
|
||||||
const elapsed = currentTime - this.createdAt;
|
|
||||||
|
|
||||||
if (this.speed.x > this.finalSpeedX) {
|
|
||||||
this.speed.x -= this.dragCoefficient * deltaTime;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.position.x +=
|
|
||||||
this.speed.x *
|
|
||||||
(this.direction === "left" ? -this.absCos : this.absCos) *
|
|
||||||
deltaTime;
|
|
||||||
this.position.y =
|
|
||||||
this.initialPosition.y -
|
|
||||||
this.speed.y * this.absSin * elapsed +
|
|
||||||
(0.00125 * Math.pow(elapsed, 2)) / 2;
|
|
||||||
|
|
||||||
if (!this.emoji && !this.svgIcon) {
|
|
||||||
this.rotationSpeed -= 1e-5 * deltaTime;
|
|
||||||
this.rotationSpeed = Math.max(this.rotationSpeed, 0);
|
|
||||||
|
|
||||||
if (this.radiusYDirection === "down") {
|
|
||||||
this.radius.y -= deltaTime * this.rotationSpeed;
|
|
||||||
if (this.radius.y <= 0) {
|
|
||||||
this.radius.y = 0;
|
|
||||||
this.radiusYDirection = "up";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.radius.y += deltaTime * this.rotationSpeed;
|
|
||||||
if (this.radius.y >= this.initialRadius) {
|
|
||||||
this.radius.y = this.initialRadius;
|
|
||||||
this.radiusYDirection = "down";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
isVisible(canvasHeight) {
|
|
||||||
return this.position.y < canvasHeight + 100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class ConfettiManager {
|
|
||||||
constructor() {
|
|
||||||
this.canvas = document.createElement("canvas");
|
|
||||||
// @ts-ignore
|
|
||||||
this.canvas.style =
|
|
||||||
"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none;";
|
|
||||||
document.body.appendChild(this.canvas);
|
|
||||||
this.context = this.canvas.getContext("2d");
|
|
||||||
this.confetti = [];
|
|
||||||
this.lastUpdated = Date.now();
|
|
||||||
window.addEventListener(
|
|
||||||
"resize",
|
|
||||||
Utils.debounce(() => this.resizeCanvas(), 200)
|
|
||||||
);
|
|
||||||
this.resizeCanvas();
|
|
||||||
requestAnimationFrame(() => this.loop());
|
|
||||||
}
|
|
||||||
|
|
||||||
resizeCanvas() {
|
|
||||||
this.canvas.width = window.innerWidth * window.devicePixelRatio;
|
|
||||||
this.canvas.height =
|
|
||||||
window.innerHeight * window.devicePixelRatio;
|
|
||||||
}
|
|
||||||
|
|
||||||
addConfetti(config = {}) {
|
|
||||||
const {
|
|
||||||
confettiesNumber,
|
|
||||||
confettiRadius,
|
|
||||||
confettiColors,
|
|
||||||
emojies,
|
|
||||||
svgIcon,
|
|
||||||
} = {
|
|
||||||
...defaultConfettiConfig,
|
|
||||||
...config,
|
|
||||||
};
|
|
||||||
|
|
||||||
const baseY = (5 * window.innerHeight) / 7;
|
|
||||||
for (let i = 0; i < confettiesNumber / 2; i++) {
|
|
||||||
this.confetti.push(
|
|
||||||
new Confetti({
|
|
||||||
initialPosition: { x: 0, y: baseY },
|
|
||||||
direction: "right",
|
|
||||||
radius: confettiRadius,
|
|
||||||
colors: confettiColors,
|
|
||||||
emojis: emojies,
|
|
||||||
svgIcon,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
this.confetti.push(
|
|
||||||
new Confetti({
|
|
||||||
initialPosition: { x: window.innerWidth, y: baseY },
|
|
||||||
direction: "left",
|
|
||||||
radius: confettiRadius,
|
|
||||||
colors: confettiColors,
|
|
||||||
emojis: emojies,
|
|
||||||
svgIcon,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
resetAndStart(config = {}) {
|
|
||||||
// Clear existing confetti
|
|
||||||
this.confetti = [];
|
|
||||||
// Add new confetti
|
|
||||||
this.addConfetti(config);
|
|
||||||
}
|
|
||||||
|
|
||||||
loop() {
|
|
||||||
const currentTime = Date.now();
|
|
||||||
const deltaTime = currentTime - this.lastUpdated;
|
|
||||||
this.lastUpdated = currentTime;
|
|
||||||
|
|
||||||
this.context.clearRect(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this.canvas.width,
|
|
||||||
this.canvas.height
|
|
||||||
);
|
|
||||||
|
|
||||||
this.confetti = this.confetti.filter((item) => {
|
|
||||||
item.updatePosition(deltaTime, currentTime);
|
|
||||||
item.draw(this.context);
|
|
||||||
return item.isVisible(this.canvas.height);
|
|
||||||
});
|
|
||||||
|
|
||||||
requestAnimationFrame(() => this.loop());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const manager = new ConfettiManager();
|
|
||||||
manager.addConfetti();
|
|
||||||
|
|
||||||
const triggerButton = document.getElementById("show-again");
|
|
||||||
if (triggerButton) {
|
|
||||||
triggerButton.addEventListener("click", () =>
|
|
||||||
manager.addConfetti()
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetInput = document.getElementById("reset");
|
|
||||||
if (resetInput) {
|
|
||||||
resetInput.addEventListener("input", () => manager.resetAndStart());
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<div id="nav">
|
<div id="nav">
|
||||||
<a href="#/" aria-label="Back to main menu"
|
<a href="/" aria-label="Back to main menu"
|
||||||
><button aria-label="Back to main menu"
|
><button aria-label="Back to main menu"
|
||||||
><span class="front"
|
><span class="front"
|
||||||
><svg
|
><svg
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export function load({ params }) {
|
|
||||||
return {
|
|
||||||
gamePin: params.gamePin
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export function load({ params }) {
|
|
||||||
return {
|
|
||||||
gamePin: params.gamePin
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export function load({ params }) {
|
|
||||||
return {
|
|
||||||
gamePin: params.gamePin
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<div id="nav">
|
<div id="nav">
|
||||||
<a href="#/" aria-label="Back to main menu"
|
<a href="/" aria-label="Back to main menu"
|
||||||
><button aria-label="Back to main menu"
|
><button aria-label="Back to main menu"
|
||||||
><span class="front"
|
><span class="front"
|
||||||
><svg
|
><svg
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { newNames, RandomNamesState } from "./main.svelte";
|
import { newNames, RandomNamesState } from "./+page.svelte";
|
||||||
|
|
||||||
let names =
|
let names =
|
||||||
RandomNamesState.NotSelectedYet.join("\n") +
|
RandomNamesState.NotSelectedYet.join("\n") +
|
||||||
|
|
@ -13,8 +13,8 @@
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<h1>Edit Names</h1>
|
<h1>Edit Names</h1>
|
||||||
<p></p>
|
<p></p>
|
||||||
<textarea
|
<textarea
|
||||||
bind:value={names}
|
bind:value={names}
|
||||||
id="box"
|
id="box"
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
<script context="module">
|
<script context="module">
|
||||||
import { RandomNamesState } from "./main.svelte";
|
import { RandomNamesState } from "./+page.svelte";
|
||||||
|
|
||||||
let DragTempName = "na";
|
let DragTempName = "na";
|
||||||
|
|
||||||
import "drag-drop-touch";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { RandomNamesState, SelectStudent } from "./main.svelte";
|
import { RandomNamesState, SelectStudent } from "./+page.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
|
|
|
||||||
20
src/routes/announcer/+page.svelte
Normal file
20
src/routes/announcer/+page.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
import List from "./components/CommonAnounceedTexts/list.svelte";
|
||||||
|
import Add from "./components/CustomText/add.svelte";
|
||||||
|
import CustomText from "./components/CustomText/CustomText.svelte";
|
||||||
|
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { LoadMostUsedAnnouncement } from "./logic/LoadMostUsedAnnouncement.js";
|
||||||
|
onMount(() => LoadMostUsedAnnouncement());
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex h-full flex-col items-center justify-center gap-5 p-5">
|
||||||
|
<div class="w-fit rounded-2xl bg-gray-900 p-3">
|
||||||
|
<h1 class="text-center text-4xl">Most Announced announcements</h1>
|
||||||
|
<List />
|
||||||
|
<hr class="my-5 w-full border-gray-600" />
|
||||||
|
<h1 class="text-center text-4xl">Or announce something else</h1>
|
||||||
|
<CustomText />
|
||||||
|
<Add />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,182 +0,0 @@
|
||||||
<script>
|
|
||||||
let text = $state("");
|
|
||||||
|
|
||||||
function speak() {
|
|
||||||
window.speechSynthesis.speak(
|
|
||||||
Object.assign(new SpeechSynthesisUtterance(text), {
|
|
||||||
rate: 0.5,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let TempelateCommonAnounce = $state(["Please be quiet"]);
|
|
||||||
|
|
||||||
let CommonAnounce = $state([]);
|
|
||||||
|
|
||||||
export function newNames(Names) {
|
|
||||||
localStorage.setItem("CommonAnounce", JSON.stringify(Names));
|
|
||||||
}
|
|
||||||
|
|
||||||
let TempCommonAnounce = localStorage.getItem("CommonAnounce") || "";
|
|
||||||
|
|
||||||
if (TempCommonAnounce != "") {
|
|
||||||
CommonAnounce = JSON.parse(TempCommonAnounce);
|
|
||||||
} else {
|
|
||||||
CommonAnounce = $state.snapshot(TempelateCommonAnounce);
|
|
||||||
localStorage.setItem("CommonAnounce", JSON.stringify(CommonAnounce));
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="root">
|
|
||||||
<div id="wrap">
|
|
||||||
<h1>Most Announced announcements</h1>
|
|
||||||
|
|
||||||
<div id="mostanouncedanounements">
|
|
||||||
{#each CommonAnounce as anouncement, i}
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
class="anuncement"
|
|
||||||
onclick={() => {
|
|
||||||
text = anouncement;
|
|
||||||
speak();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{anouncement}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Delete anouncement"
|
|
||||||
onclick={() => {
|
|
||||||
if (
|
|
||||||
confirm(
|
|
||||||
"Are you sure you want to delete this anouncement?"
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
CommonAnounce.splice(i, 1);
|
|
||||||
localStorage.setItem(
|
|
||||||
"CommonAnounce",
|
|
||||||
JSON.stringify(CommonAnounce)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="15px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="15px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
|
|
||||||
/></svg
|
|
||||||
></button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<h1>Or announce something else</h1>
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
bind:value={text}
|
|
||||||
placeholder="Type in here what you want to announce"
|
|
||||||
/>
|
|
||||||
<button onclick={speak}>Play</button>
|
|
||||||
</div>
|
|
||||||
{#if text}
|
|
||||||
<button
|
|
||||||
id="new"
|
|
||||||
onclick={() => {
|
|
||||||
CommonAnounce.push(text);
|
|
||||||
text = "";
|
|
||||||
localStorage.setItem(
|
|
||||||
"CommonAnounce",
|
|
||||||
JSON.stringify(CommonAnounce)
|
|
||||||
);
|
|
||||||
}}>Add "{text}" to "Most Announced announcements"</button
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#root {
|
|
||||||
height: 100%;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: none;
|
|
||||||
background-color: #292929;
|
|
||||||
color: white;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: none;
|
|
||||||
background-color: #292929;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #414141;
|
|
||||||
transform: rotateZ(-15deg) scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #292929;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mostanouncedanounements {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.anuncement:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.anuncement {
|
|
||||||
width: calc(100% - 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#new {
|
|
||||||
width: fit-content;
|
|
||||||
align-self: center;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#new:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
import { DeleteMostUsedAnnouncement } from "../../logic/AddAndDeleteMostUsedAnnouncements.js";
|
||||||
|
|
||||||
|
let props = $props();
|
||||||
|
let announcementID = props.announcementID;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
|
||||||
|
aria-label="Delete announcement"
|
||||||
|
onclick={() => DeleteMostUsedAnnouncement(announcementID)}
|
||||||
|
>
|
||||||
|
<i class="nf nf-md-trash_can_outline"></i></button
|
||||||
|
>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<script>
|
||||||
|
import { MostUsedAnnouncements } from "../../logic/announcerData.svelte.js";
|
||||||
|
import Delete from "./delete.svelte";
|
||||||
|
import Text from "./text.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each MostUsedAnnouncements.v as announcementText, announcementID}
|
||||||
|
<div class="flex w-full gap-2 mt-2">
|
||||||
|
<Text {announcementText} />
|
||||||
|
<Delete {announcementID} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
import { AnnounceUsingTTS } from "../../logic/AnnounceUsingTTS.js";
|
||||||
|
|
||||||
|
let props = $props();
|
||||||
|
let announcementText = props.announcementText;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="w-full cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-105 hover:bg-gray-600"
|
||||||
|
onclick={() => AnnounceUsingTTS(announcementText)}
|
||||||
|
>
|
||||||
|
{announcementText}
|
||||||
|
</button>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
import Input from "./input.svelte";
|
||||||
|
import Play from "./play.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mt-2 flex gap-2">
|
||||||
|
<Input />
|
||||||
|
<Play />
|
||||||
|
</div>
|
||||||
16
src/routes/announcer/components/CustomText/add.svelte
Normal file
16
src/routes/announcer/components/CustomText/add.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script>
|
||||||
|
import { AddMostUsedAnnouncement } from "../../logic/AddAndDeleteMostUsedAnnouncements.js";
|
||||||
|
import { CurrentText } from "../../logic/announcerData.svelte.js";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if CurrentText.v}
|
||||||
|
<div class="flex w-full justify-center mt-2">
|
||||||
|
<button
|
||||||
|
class="text-1xl w-fit cursor-pointer self-center rounded-2xl bg-gray-800 p-2.5 transition-all hover:scale-110 hover:bg-gray-600"
|
||||||
|
onclick={() => {
|
||||||
|
AddMostUsedAnnouncement(CurrentText.v);
|
||||||
|
CurrentText.v = "";
|
||||||
|
}}>Add "{CurrentText.v}" to "Most Announced announcements"</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
9
src/routes/announcer/components/CustomText/input.svelte
Normal file
9
src/routes/announcer/components/CustomText/input.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
import { CurrentText } from "../../logic/announcerData.svelte.js";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input
|
||||||
|
bind:value={CurrentText.v}
|
||||||
|
placeholder="Type in here what you want to announce"
|
||||||
|
class="flex-1 rounded-2xl bg-gray-800 p-2.5 text-2xl"
|
||||||
|
/>
|
||||||
11
src/routes/announcer/components/CustomText/play.svelte
Normal file
11
src/routes/announcer/components/CustomText/play.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script>
|
||||||
|
import { AnnounceUsingTTS } from "../../logic/AnnounceUsingTTS.js";
|
||||||
|
import { CurrentText } from "../../logic/announcerData.svelte.js";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
|
||||||
|
onclick={() => AnnounceUsingTTS(CurrentText.v)}
|
||||||
|
>
|
||||||
|
📢</button
|
||||||
|
>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { MostUsedAnnouncements } from "./announcerData.svelte.js";
|
||||||
|
|
||||||
|
export function AddMostUsedAnnouncement(announcementText) {
|
||||||
|
MostUsedAnnouncements.v.push(announcementText);
|
||||||
|
localStorage.setItem("MostUsedAnnouncements", JSON.stringify(MostUsedAnnouncements.v));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DeleteMostUsedAnnouncement(announcementID) {
|
||||||
|
if (confirm("Are you sure you want to delete this announcement?")) {
|
||||||
|
MostUsedAnnouncements.v.splice(announcementID, 1);
|
||||||
|
localStorage.setItem("MostUsedAnnouncements", JSON.stringify(MostUsedAnnouncements.v));
|
||||||
|
}
|
||||||
|
}
|
||||||
7
src/routes/announcer/logic/AnnounceUsingTTS.js
Normal file
7
src/routes/announcer/logic/AnnounceUsingTTS.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export function AnnounceUsingTTS(text) {
|
||||||
|
window.speechSynthesis.speak(
|
||||||
|
Object.assign(new SpeechSynthesisUtterance(text), {
|
||||||
|
rate: 0.5,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
12
src/routes/announcer/logic/LoadMostUsedAnnouncement.js
Normal file
12
src/routes/announcer/logic/LoadMostUsedAnnouncement.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { MostUsedAnnouncements } from "./announcerData.svelte.js";
|
||||||
|
|
||||||
|
export function LoadMostUsedAnnouncement() {
|
||||||
|
let TempMostUsedAnnouncements = JSON.parse(localStorage.getItem("MostUsedAnnouncements")) || "";
|
||||||
|
|
||||||
|
if (TempMostUsedAnnouncements == "") {
|
||||||
|
MostUsedAnnouncements.v = ["Please be quiet"];
|
||||||
|
localStorage.setItem("MostUsedAnnouncements", JSON.stringify(MostUsedAnnouncements.v));
|
||||||
|
} else {
|
||||||
|
MostUsedAnnouncements.v = TempMostUsedAnnouncements;
|
||||||
|
}
|
||||||
|
}
|
||||||
2
src/routes/announcer/logic/announcerData.svelte.js
Normal file
2
src/routes/announcer/logic/announcerData.svelte.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
export let CurrentText = $state({ v: "" });
|
||||||
|
export let MostUsedAnnouncements = $state({ v: [] });
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
<script>
|
|
||||||
import ActualAnnouncer from "./ActualAnnouncer.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="wrap">
|
|
||||||
<div id="nav">
|
|
||||||
<a href="#/" aria-label="Back to main menu"
|
|
||||||
><button aria-label="Back to main menu"
|
|
||||||
><span class="front"
|
|
||||||
><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="24px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="24px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
|
|
||||||
/></svg
|
|
||||||
> GO BACK
|
|
||||||
</span></button
|
|
||||||
></a
|
|
||||||
>
|
|
||||||
<h1>Announcer</h1>
|
|
||||||
</div>
|
|
||||||
<div id="root">
|
|
||||||
<ActualAnnouncer />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#wrap {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #121212;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: #292929;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: none;
|
|
||||||
margin: 10px;
|
|
||||||
padding: 2px 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
outline-offset: 4px;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
button:hover .front {
|
|
||||||
transform: translateY(-7px);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active .front {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.front {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
background: #4d4d4d;
|
|
||||||
color: white;
|
|
||||||
transform: translateY(-4px);
|
|
||||||
transition: all 0.1s ease-in-out;
|
|
||||||
font-family: "JetBrains Mono", monospace;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin: 5px 0px;
|
|
||||||
text-decoration: underline #444;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.5em;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -2,13 +2,13 @@
|
||||||
<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
|
<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
|
||||||
<h1 class="m-[0] text-6xl">DaKahootClone</h1>
|
<h1 class="m-[0] text-6xl">DaKahootClone</h1>
|
||||||
<p class="m-[0] mb-2 text-lg text-gray-400">The best ever kahoot clone.</p>
|
<p class="m-[0] mb-2 text-lg text-gray-400">The best ever kahoot clone.</p>
|
||||||
<a href="./join">
|
<a href="./kahootclone/join">
|
||||||
<button
|
<button
|
||||||
class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
>Join a game</button
|
>Join a game</button
|
||||||
></a
|
></a
|
||||||
>
|
>
|
||||||
<a href="./create">
|
<a href="./kahootclone/create">
|
||||||
<button
|
<button
|
||||||
class="cursor-pointer rounded-full bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
class="cursor-pointer rounded-full bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
>Create and Host a game</button
|
>Create and Host a game</button
|
||||||
|
|
@ -47,5 +47,5 @@ export async function createGame(questions, gamePin) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.location.href = "/host/" + gamePin;
|
window.location.href = `/host?gamepin=${gamePin}` ;
|
||||||
}
|
}
|
||||||
|
|
@ -7,10 +7,11 @@
|
||||||
import { GetCurrentPlayers } from "./logic/GetCurrentPlayers.js";
|
import { GetCurrentPlayers } from "./logic/GetCurrentPlayers.js";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
export let data;
|
let gamePin;
|
||||||
const gamePin = data.gamePin;
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
|
||||||
|
|
||||||
GetCurrentPlayers(gamePin);
|
GetCurrentPlayers(gamePin);
|
||||||
AutoUpdatePlayersList(gamePin);
|
AutoUpdatePlayersList(gamePin);
|
||||||
});
|
});
|
||||||
|
|
@ -26,4 +27,4 @@
|
||||||
<PlayingDisplay />
|
<PlayingDisplay />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -3,5 +3,5 @@ import { supabase } from "$lib/supabase.js";
|
||||||
export async function GameOver(GamePin) {
|
export async function GameOver(GamePin) {
|
||||||
await supabase.from("games").update({ status: `completed` }).eq("gamepin", GamePin);
|
await supabase.from("games").update({ status: `completed` }).eq("gamepin", GamePin);
|
||||||
|
|
||||||
window.location.replace("/results/" + GamePin + "?playerID=host-null");
|
window.location.replace("/results?gamepin=" + GamePin + "&playerID=host-null");
|
||||||
}
|
}
|
||||||
|
|
@ -15,5 +15,5 @@ export async function joinGame(pin, name) {
|
||||||
|
|
||||||
Checking.v = false;
|
Checking.v = false;
|
||||||
|
|
||||||
window.location.href = `./play/${pin}?name=${name}&playerid=${id}`;
|
window.location.href = `./play?gamepin=${pin}&name=${name}&playerid=${id}`;
|
||||||
}
|
}
|
||||||
|
|
@ -8,16 +8,16 @@
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { name,playerid } from "./logic/HostsData.svelte.js";
|
import { name,playerid } from "./logic/HostsData.svelte.js";
|
||||||
|
|
||||||
export let data;
|
let gamePin;
|
||||||
const gamePin = data.gamePin;
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
name.v = new URLSearchParams(new URL(window.location.href).search).get("name");
|
||||||
|
playerid.v = new URLSearchParams(new URL(window.location.href).search).get("playerid");
|
||||||
|
gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
|
||||||
|
|
||||||
GetCurrentPlayers(gamePin);
|
GetCurrentPlayers(gamePin);
|
||||||
AutoUpdatePlayersList(gamePin);
|
AutoUpdatePlayersList(gamePin);
|
||||||
IntializeGameStart(gamePin);
|
IntializeGameStart(gamePin);
|
||||||
|
|
||||||
name.v = new URLSearchParams(new URL(window.location.href).search).get("name");
|
|
||||||
playerid.v = new URLSearchParams(new URL(window.location.href).search).get("playerid");
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { supabase } from "$lib/supabase.js";
|
||||||
|
|
||||||
export async function NewStatus(NewStatus, gamePin) {
|
export async function NewStatus(NewStatus, gamePin) {
|
||||||
if (NewStatus == "completed") {
|
if (NewStatus == "completed") {
|
||||||
window.location.replace("/results/" + gamePin + "?playerID=" + playerid.v);
|
window.location.replace("/results?gamepin" + gamePin + "&playerID=" + playerid.v);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2,14 +2,15 @@
|
||||||
import { supabase } from "$lib/supabase";
|
import { supabase } from "$lib/supabase";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
export let data;
|
let gamePin;
|
||||||
const gamePin = data.gamePin;
|
|
||||||
|
|
||||||
let playerID;
|
let playerID;
|
||||||
let players = [];
|
let players = [];
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
playerID = new URLSearchParams(new URL(window.location.href).search).get("playerID");
|
playerID = new URLSearchParams(new URL(window.location.href).search).get("playerID");
|
||||||
|
gamePin = new URLSearchParams(new URL(window.location.href).search).get("gamepin");
|
||||||
|
|
||||||
|
|
||||||
let { data: fetchedPlayers } = await supabase
|
let { data: fetchedPlayers } = await supabase
|
||||||
.from("players")
|
.from("players")
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import wordExists from "word-exists";
|
import wordExists from "word-exists";
|
||||||
import { generate } from "random-words";
|
import { generate } from "random-words";
|
||||||
import { ShowAlert } from "../+layout.svelte";
|
import toast from "svelte-5-french-toast";
|
||||||
|
|
||||||
export let WordLegnth = $state({ v: 5 });
|
export let WordLegnth = $state({ v: 5 });
|
||||||
|
|
||||||
|
|
@ -87,6 +87,8 @@ export function newGame() {
|
||||||
|
|
||||||
function GameWin() {
|
function GameWin() {
|
||||||
ShowAlert("You win!", "success");
|
ShowAlert("You win!", "success");
|
||||||
|
toast.success("You win!");
|
||||||
|
|
||||||
data.value[WordLegnth.v].push(words.v.length);
|
data.value[WordLegnth.v].push(words.v.length);
|
||||||
localStorage.setItem("WordleGamesData", JSON.stringify(data.value));
|
localStorage.setItem("WordleGamesData", JSON.stringify(data.value));
|
||||||
newGame();
|
newGame();
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,7 @@
|
||||||
import adapter from '@sveltejs/adapter-auto';
|
import adapter from '@sveltejs/adapter-static';
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
export default {
|
||||||
const config = {
|
|
||||||
kit: {
|
kit: {
|
||||||
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
|
|
||||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
|
||||||
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
|
|
||||||
adapter: adapter()
|
adapter: adapter()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue