From 6bcde94422f63c4c867dbb591fadf30f55a0f9af Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Sat, 10 May 2025 19:40:24 +0530 Subject: [PATCH] anouncer now has common anuncer, basicly favoritutes --- jsconfig.json | 8 +- src/Confetti.js | 316 +++++++++++++++++++++++++ src/IdleScreen/time.svelte | 2 +- src/RandomName/main.svelte | 3 +- src/announcer/ActualAnnouncer.svelte | 151 +++++++++++- src/announcer/main.svelte | 22 -- src/app.svelte | 94 ++++++-- src/wordle/InfoAndSetings/stats.svelte | 2 +- src/wordle/logic.svelte.js | 7 +- 9 files changed, 541 insertions(+), 64 deletions(-) create mode 100644 src/Confetti.js diff --git a/jsconfig.json b/jsconfig.json index 3cdda25..d9b4e58 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -24,6 +24,12 @@ */ "checkJs": true, "types": ["svelte", "estree"], - "exclude": ["node_modules", "package.json", "package-lock.json"] + "exclude": [ + "node_modules", + "package.json", + "package-lock.json", + "src/Confetti.js", + "" + ] } } diff --git a/src/Confetti.js b/src/Confetti.js new file mode 100644 index 0000000..f6ebf90 --- /dev/null +++ b/src/Confetti.js @@ -0,0 +1,316 @@ +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()); + } + })(); +} diff --git a/src/IdleScreen/time.svelte b/src/IdleScreen/time.svelte index ec07ba6..dc660b6 100644 --- a/src/IdleScreen/time.svelte +++ b/src/IdleScreen/time.svelte @@ -45,7 +45,7 @@ DecideScrool(hour2, parseInt(hours[1]), 200, 10); DecideScrool(min1, parseInt(minutes[0]), 200, 6); DecideScrool(min2, parseInt(minutes[1]), 200, 10); - if (ShowSeconds.v) { + if (ShowSeconds) { DecideScrool(sec1, parseInt(seconds[0]), 75, 6); DecideScrool(sec2, parseInt(seconds[1]), 75, 10); } diff --git a/src/RandomName/main.svelte b/src/RandomName/main.svelte index 9d19a8e..cbee3fd 100644 --- a/src/RandomName/main.svelte +++ b/src/RandomName/main.svelte @@ -2,6 +2,7 @@ import Selector from "./selector.svelte"; import TopDisplay from "./TopDisplay.svelte"; import EditNameOfStudents from "./EditNameOfStudents.svelte"; + import {ShowAlert} from "../app.svelte"; export let RandomNamesState = $state({ NotSelectedYet: [], @@ -24,7 +25,7 @@ ]; RandomNamesState.NotSelectedYet.splice(randomIndex, 1); } else { - alert("All students have been selected."); + ShowAlert("All students have been selected.", "warning"); } } diff --git a/src/announcer/ActualAnnouncer.svelte b/src/announcer/ActualAnnouncer.svelte index cc2d2a9..b10bb0e 100644 --- a/src/announcer/ActualAnnouncer.svelte +++ b/src/announcer/ActualAnnouncer.svelte @@ -1,27 +1,119 @@
- - +
+

Most Announced announcements

+ +
+ {#each CommonAnounce as anouncement, i} +
+ + +
+ {/each} +
+ +
+ +

Or announce something else

+
+ + +
+ {#if text} + + {/if} +
diff --git a/src/announcer/main.svelte b/src/announcer/main.svelte index 635c6f5..1c2008c 100644 --- a/src/announcer/main.svelte +++ b/src/announcer/main.svelte @@ -97,26 +97,4 @@ text-decoration: none; color: #444; } - #UperLayer { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - backdrop-filter: blur(5px); - background-color: rgba(0, 0, 0, 0.5); - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - } - .close { - background-color: #2b2b2b; - color: #888; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - align-self: center; - } diff --git a/src/app.svelte b/src/app.svelte index 8d58f36..8e424e2 100644 --- a/src/app.svelte +++ b/src/app.svelte @@ -1,33 +1,79 @@ -
- +
+{#if ShowAlertDiv == true} +
+

{ShowAlertText}

+
+{/if} diff --git a/src/wordle/InfoAndSetings/stats.svelte b/src/wordle/InfoAndSetings/stats.svelte index 0cb2cdd..00c75ef 100644 --- a/src/wordle/InfoAndSetings/stats.svelte +++ b/src/wordle/InfoAndSetings/stats.svelte @@ -55,7 +55,7 @@ function UpdateChart(val) { dataPoints = data.value[LetersSelected]; if (chart) { - chart.data.labels = dataPoints.map((_, i) => `Point ${i + 1}`); + chart.data.labels = dataPoints.map((_, i) => `Game ${i + 1}`); chart.data.datasets[0].data = $state.snapshot(dataPoints); chart.update(); } diff --git a/src/wordle/logic.svelte.js b/src/wordle/logic.svelte.js index 96e3801..7898be2 100644 --- a/src/wordle/logic.svelte.js +++ b/src/wordle/logic.svelte.js @@ -1,5 +1,6 @@ import wordExists from "word-exists"; -import { generate } from "random-words"; +import { generate } from "random-words"; import {ShowAlert} from "../app.svelte"; + export let WordLegnth = $state({ v: 5 }); @@ -85,7 +86,7 @@ export function newGame() { } function GameWin() { - alert("You win!"); + ShowAlert("You win!", "success"); data.value[WordLegnth.v].push(words.v.length); localStorage.setItem("WordleGamesData", JSON.stringify(data.value)); newGame(); @@ -169,7 +170,7 @@ export function ButtonPressed(key) { SendWord(CurrentWord.v); CurrentWord.v = []; } else { - alert("Not a valid word"); + ShowAlert("Not a valid word", "error"); } } return;