From 959f2441aef75740795d0a8397440bbdf0888106 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Mon, 26 May 2025 21:17:47 +0530
Subject: [PATCH] made the time display work in idle screen!

---
 package.json                                  |   1 +
 src/app.css                                   |   7 +
 src/routes/+layout.svelte                     |  39 +--
 src/routes/IdleScreen/+page.svelte            | 185 ++------------
 src/routes/IdleScreen/EditTimetable.svelte    |   2 +-
 .../components/time/DisplayCollsOfTime.svelte |  38 +++
 .../IdleScreen/components/time/digit.svelte   |   9 +
 .../IdleScreen/components/time/row.svelte     |  29 +++
 .../logic/TimeAndTableData.svelte.js          |   0
 src/routes/IdleScreen/logic/updateTime.js     |  31 +++
 src/routes/IdleScreen/time.svelte             | 231 ------------------
 src/routes/IdleScreen/timeTable.svelte        |   4 +-
 12 files changed, 138 insertions(+), 438 deletions(-)
 create mode 100644 src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte
 create mode 100644 src/routes/IdleScreen/components/time/digit.svelte
 create mode 100644 src/routes/IdleScreen/components/time/row.svelte
 create mode 100644 src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
 create mode 100644 src/routes/IdleScreen/logic/updateTime.js
 delete mode 100644 src/routes/IdleScreen/time.svelte

diff --git a/package.json b/package.json
index def688c..066c3c1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
+		"sv-popup": "^0.5.3",
 		"svelte": "^5.0.0",
 		"tailwindcss": "^4.0.0",
 		"vite": "^6.0.0"
diff --git a/src/app.css b/src/app.css
index a461c50..e2cfb8a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1,8 @@
+/*
+
+This file literally only exist so that tailwind intellisense stats to work
+there is no other use of it, you can delete it if you want!
+
+*/
+
 @import "tailwindcss";
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 65c6221..945f689 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,47 +5,10 @@
 </script>
 
 <Toaster />
-<div id="root">
-	<div class="h-full text-white">{@render children()}</div>
-</div>
+<div class="h-full text-white bg-black font-[Sour_Gummy]">{@render children()}</div>
 
 <style>
 	@import "https://www.nerdfonts.com/assets/css/webfont.css";
 	@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";
-
-	:root {
-		background-color: black;
-		font-family: "Comfortaa", sans-serif;
-		font-weight: 300;
-	}
-
-	#root {
-		height: 100%;
-		margin: 0;
-		font-family: "Sour Gummy", sans-serif;
-	}
-
-	#alert {
-		position: fixed;
-		top: 10px;
-		color: white;
-		left: 50%;
-		transform: translate(-50%, 0);
-		h1 {
-			margin: 0;
-			padding: 10px 20px;
-			border-radius: 20px;
-			font-family: "Sour Gummy", sans-serif;
-		}
-		.error {
-			background-color: #830000;
-		}
-		.warning {
-			background-color: #975b00;
-		}
-		.success {
-			background-color: #006b00;
-		}
-	}
 </style>
diff --git a/src/routes/IdleScreen/+page.svelte b/src/routes/IdleScreen/+page.svelte
index 07b67aa..4a9da74 100644
--- a/src/routes/IdleScreen/+page.svelte
+++ b/src/routes/IdleScreen/+page.svelte
@@ -1,180 +1,33 @@
 <script module>
-	import Time from "./time.svelte";
+	import { Modal, Content, Trigger } from "sv-popup";
+
+	import Time from "./components/time/DisplayCollsOfTime.svelte";
 	import TimeTable from "./timeTable.svelte";
 	import EditTimetableDiv from "./EditTimetable.svelte";
 
-	function EditTimetable() {
-		console.log("Edit timetable");
-		TabOpen.v = true;
-	}
-
-	let TabOpen = $state({ v: false });
-
 	export let ShowSeconds = $state({ v: true });
 </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
+	<div>
+		<button
+			onclick={() => {
+				ShowSeconds.v = !ShowSeconds.v;
+				localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
+			}}
+			>{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</button
 		>
-		<h1>Idle Screen</h1>
-		<div>
-			<button
-				aria-label="Back to main menu"
-				onclick={() => {
-					ShowSeconds.v = !ShowSeconds.v;
-					localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
-				}}
-				><span class="front"
-					>{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</span
-				></button
-			><button
-				aria-label="Back to main menu"
-				onclick={() => EditTimetable()}
-				><span class="front"
-					><svg
-						xmlns="http://www.w3.org/2000/svg"
-						height="24px"
-						viewBox="0 -960 960 960"
-						width="24px"
-						fill="#FFFFFF"
-						><path
-							d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v200h-80v-40H200v400h280v80H200Zm0-560h560v-80H200v80Zm0 0v-80 80ZM560-80v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L683-80H560Zm300-263-37-37 37 37ZM620-140h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"
-						/></svg
-					> Edit timetable
-				</span></button
-			>
-		</div>
+		<Modal button={false} big={true}>
+			<Content>
+				<EditTimetableDiv />
+			</Content>
+			<Trigger>
+				<button>Edit timetable </button>
+			</Trigger>
+		</Modal>
 	</div>
 
 	<div id="root">
-		<TimeTable /><Time />
+		<!--<TimeTable />--><Time />
 	</div>
 </div>
-
-{#if TabOpen.v !== false}
-	<div id="UpperLayer">
-		<div id="wrapClose">
-			<EditTimetableDiv />
-			<button
-				class="close"
-				onclick={() => (TabOpen.v = false)}
-				aria-label="close">CLOSE</button
-			>
-		</div>
-	</div>
-{/if}
-
-<style>
-	#wrap {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-
-	#root {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		justify-content: space-evenly;
-	}
-
-	#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;
-	}
-	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;
-	}
-
-	#UpperLayer {
-		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;
-	}
-
-	#wrapClose {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.close {
-		background-color: #2b2b2b;
-		color: #888;
-		border: none;
-		padding: 10px 20px;
-		border-radius: 5px;
-		cursor: pointer;
-		align-self: center;
-	}
-</style>
diff --git a/src/routes/IdleScreen/EditTimetable.svelte b/src/routes/IdleScreen/EditTimetable.svelte
index d21080b..186b69d 100644
--- a/src/routes/IdleScreen/EditTimetable.svelte
+++ b/src/routes/IdleScreen/EditTimetable.svelte
@@ -12,7 +12,7 @@
 	<div id="wrap">
 		<div id="left">
 			<div class="Header Row">
-				<span class="DayOfWeek" style="Opacity: 0;"></span>
+				<span class="DayOfWeek" ></span>
 				{#each table.Times as time}
 					<input
 						type="text"
diff --git a/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte b/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte
new file mode 100644
index 0000000..047c2b5
--- /dev/null
+++ b/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { onMount } from "svelte";
+	import Row from "./row.svelte";
+
+	let ShowSeconds;
+	let ampm;
+
+	onMount(() => {
+		ShowSeconds = localStorage.getItem("ShowSeconds") || "true" == "true" ? true : false;
+
+		setInterval(() => {
+			ampm = new Date().getHours() >= 12 ? "PM" : "AM";
+		}, 1000);
+	});
+</script>
+
+<div class="flex justify-center items-end flex-row">
+	<Row type={"hour"} digit={0} />
+	<Row type={"hour"} digit={1} />
+	<h1 class="text-[200px] leading-[200px]">:</h1>
+	<Row type={"min"} digit={0} />
+	<Row type={"min"} digit={1} />
+
+	{#if ShowSeconds}
+		<Row type={"sec"} digit={0} />
+		<Row type={"sec"} digit={1} />
+	{/if}
+
+	<h1>{ampm}</h1>
+</div>
+<div>
+	<h2>
+		{new Date().toLocaleString("en-US", { weekday: "short" })}
+		{new Date().getDate()},
+		{new Date().toLocaleString("en-US", { month: "short" })}
+		{new Date().getFullYear()}
+	</h2>
+</div>
diff --git a/src/routes/IdleScreen/components/time/digit.svelte b/src/routes/IdleScreen/components/time/digit.svelte
new file mode 100644
index 0000000..fd91b91
--- /dev/null
+++ b/src/routes/IdleScreen/components/time/digit.svelte
@@ -0,0 +1,9 @@
+<script>
+	let props = $props();
+</script>
+
+{#if props.size == "small"}
+	<h1 class="m-0 leading-[75px] text-[75px] text-gray-500">{props.digit}</h1>
+{:else if props.size == "large"}
+	<h1 class="m-0 leading-[200px] text-[200px]">{props.digit}</h1>
+{/if}
diff --git a/src/routes/IdleScreen/components/time/row.svelte b/src/routes/IdleScreen/components/time/row.svelte
new file mode 100644
index 0000000..bc81e23
--- /dev/null
+++ b/src/routes/IdleScreen/components/time/row.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { onMount } from "svelte";
+	import Digit from "./digit.svelte";
+	import { updateTime } from "../../logic/updateTime.js";
+
+	let props = $props();
+	let size = props.type == "sec" ? "small" : "large";
+	let digit = props.digit;
+	let digits = digit == 1 ? 10 : digit == 0 && props.type == "hour" ? 2 : 6;
+
+	let thisRow;
+
+	onMount(() => {
+		setInterval(() => {
+            updateTime(thisRow, digit, props.type);
+        }, 1000);
+	});
+</script>
+
+<div
+	style="--height: {size == 'small' ? '75px' : '200px'};"
+	class="flex h-(--height) flex-col overflow-y-hidden scroll-smooth"
+	bind:this={thisRow}
+>
+	{#each Array(digits) as _, i}
+		<Digit {size} digit={i} />
+	{/each}
+	<Digit {size} digit={0} />
+</div>
diff --git a/src/routes/IdleScreen/logic/TimeAndTableData.svelte.js b/src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/IdleScreen/logic/updateTime.js b/src/routes/IdleScreen/logic/updateTime.js
new file mode 100644
index 0000000..0d4927a
--- /dev/null
+++ b/src/routes/IdleScreen/logic/updateTime.js
@@ -0,0 +1,31 @@
+export function updateTime(RowsObject, Digit, type) {
+	let DigitsHeight = parseInt(type == "sec" ? "75" : "200");
+	let LastZeroPos = Digit == 1 ? 10 : Digit == 0 && type == "hour" ? 2 : 6;
+	let currentTime;
+
+	if (type == "hour") {
+		if (new Date().getHours() > 12) {
+			currentTime = parseInt((new Date().getHours() - 12).toString().padStart(2, "0")[Digit]);
+		} else {
+			currentTime = parseInt(new Date().getHours().toString().padStart(2, "0")[Digit]);
+		}
+	} else if (type == "min") {
+		currentTime = parseInt(new Date().getMinutes().toString().padStart(2, "0")[Digit]);
+	} else if (type == "sec") {
+		currentTime = parseInt(new Date().getSeconds().toString().padStart(2, "0")[Digit]);
+	}
+
+	if (currentTime == 0) {
+		if (RowsObject.scrollTop != 0) {
+			RowsObject.scrollTop = LastZeroPos * DigitsHeight;
+			setTimeout(() => {
+				RowsObject.scroll({
+					top: 0,
+					behavior: "instant",
+				});
+			}, 500);
+		}
+	} else {
+		RowsObject.scrollTop = currentTime * DigitsHeight;
+	}
+}
diff --git a/src/routes/IdleScreen/time.svelte b/src/routes/IdleScreen/time.svelte
deleted file mode 100644
index 75e1ba3..0000000
--- a/src/routes/IdleScreen/time.svelte
+++ /dev/null
@@ -1,231 +0,0 @@
-<script>
-	import { ShowSeconds } from "./+page.svelte";
-	import { onMount } from "svelte";
-
-	let hour1;
-	let hour2;
-	let min1;
-	let min2;
-	let sec1;
-	let sec2;
-	let AmOrPm;
-
-	function DecideScrool(Object, currentTime, legnth, LastZeroPos) {
-		if (currentTime == 0) {
-			if (Object.scrollTop != 0) {
-				Object.scrollTop = LastZeroPos * legnth;
-				setTimeout(() => {
-					Object.scroll({
-						top: 0,
-						behavior: "instant",
-					});
-				}, 500);
-			}
-		} else {
-			Object.scrollTop = currentTime * legnth;
-		}
-	}
-
-	function updateTime() {
-		const now = new Date();
-
-		let hours = now.getHours().toString().padStart(2, "0");
-
-		if (now.getHours() >= 12) {
-			hours = (now.getHours() - 12).toString().padStart(2, "0");
-			AmOrPm = "PM";
-		} else {
-			AmOrPm = "AM";
-		}
-
-		const minutes = now.getMinutes().toString().padStart(2, "0");
-		const seconds = now.getSeconds().toString().padStart(2, "0");
-
-		DecideScrool(hour1, parseInt(hours[0]), 200, 2);
-		DecideScrool(hour2, parseInt(hours[1]), 200, 10);
-		DecideScrool(min1, parseInt(minutes[0]), 200, 6);
-		DecideScrool(min2, parseInt(minutes[1]), 200, 10);
-		if (ShowSeconds) {
-			DecideScrool(sec1, parseInt(seconds[0]), 75, 6);
-			DecideScrool(sec2, parseInt(seconds[1]), 75, 10);
-		}
-	}
-
-	onMount(() => {
-		updateTime();
-		setInterval(updateTime, 1000);
-	});
-
-	let TempLocalStorage = localStorage.getItem("ShowSeconds") || "";
-
-	if (TempLocalStorage == "false") {
-		ShowSeconds.v = false;
-	}
-</script>
-
-<div id="root">
-	<div id="wrap">
-		<div id="time">
-			<div class="rowOfNumbers" bind:this={hour1}>
-				<h1>0</h1>
-				<h1>1</h1>
-				<h1>0</h1>
-			</div>
-			<div class="rowOfNumbers" bind:this={hour2}>
-				<h1>0</h1>
-				<h1>1</h1>
-				<h1>2</h1>
-				<h1>3</h1>
-				<h1>4</h1>
-				<h1>5</h1>
-				<h1>6</h1>
-				<h1>7</h1>
-				<h1>8</h1>
-				<h1>9</h1>
-				<h1>0</h1>
-			</div>
-			<h1 id="HourMinDivider">:</h1>
-			<div class="rowOfNumbers" bind:this={min1}>
-				<h1>0</h1>
-				<h1>1</h1>
-				<h1>2</h1>
-				<h1>3</h1>
-				<h1>4</h1>
-				<h1>5</h1>
-				<h1>0</h1>
-			</div>
-			<div class="rowOfNumbers" bind:this={min2}>
-				<h1>0</h1>
-				<h1>1</h1>
-				<h1>2</h1>
-				<h1>3</h1>
-				<h1>4</h1>
-				<h1>5</h1>
-				<h1>6</h1>
-				<h1>7</h1>
-				<h1>8</h1>
-				<h1>9</h1>
-				<h1>0</h1>
-			</div>
-			{#if ShowSeconds.v}
-				<h1 id="MinSecDivider">.</h1>
-				<div class="rowOfNumbersSec" bind:this={sec1}>
-					<h1>0</h1>
-					<h1>1</h1>
-					<h1>2</h1>
-					<h1>3</h1>
-					<h1>4</h1>
-					<h1>5</h1>
-					<h1>0</h1>
-				</div>
-				<div class="rowOfNumbersSec" bind:this={sec2}>
-					<h1>0</h1>
-					<h1>1</h1>
-					<h1>2</h1>
-					<h1>3</h1>
-					<h1>4</h1>
-					<h1>5</h1>
-					<h1>6</h1>
-					<h1>7</h1>
-					<h1>8</h1>
-					<h1>9</h1>
-					<h1>0</h1>
-				</div>{/if}
-			<h1 id="AmOrPm">{AmOrPm}</h1>
-		</div>
-		<div id="date">
-			<h2>
-				{new Date().toLocaleString("en-US", { weekday: "short" })}
-				{new Date().getDate()},
-				{new Date().toLocaleString("en-US", { month: "short" })}
-				{new Date().getFullYear()}
-			</h2>
-		</div>
-	</div>
-</div>
-
-<style>
-	#root {
-		display: grid;
-		place-items: center;
-	}
-
-	#wrap {
-		background-color: #252525;
-		padding: 20px 70px;
-		border-radius: 20px;
-	}
-
-	#time {
-		display: flex;
-		justify-content: center;
-		align-items: baseline;
-		margin: -30px;
-	}
-
-	#HourMinDivider {
-		font-size: 200px;
-		margin: 0;
-	}
-
-	#MinSecDivider {
-		font-size: 75px;
-		margin: 0;
-		color: #585858;
-	}
-
-	.rowOfNumbers {
-		display: flex;
-		flex-direction: column;
-		height: 200px;
-		overflow-y: hidden;
-		scroll-behavior: smooth;
-	}
-
-	.rowOfNumbers h1 {
-		height: 200px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.rowOfNumbers > h1 {
-		font-size: 200px;
-		margin: 0;
-	}
-
-	.rowOfNumbersSec {
-		display: flex;
-		flex-direction: column;
-		height: 75px;
-		overflow-y: hidden;
-		scroll-behavior: smooth;
-	}
-
-	.rowOfNumbersSec > h1 {
-		height: 75px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.rowOfNumbersSec > h1 {
-		font-size: 75px;
-		margin: 0;
-		color: #585858;
-	}
-
-	#AmOrPm {
-		font-size: 75px;
-		margin: 0;
-		margin-left: 30px;
-		color: #585858;
-	}
-
-	h2 {
-		margin: 0;
-		font-size: 40px;
-		color: #888;
-		text-align: center;
-	}
-</style>
diff --git a/src/routes/IdleScreen/timeTable.svelte b/src/routes/IdleScreen/timeTable.svelte
index 7eeb45d..67374c8 100644
--- a/src/routes/IdleScreen/timeTable.svelte
+++ b/src/routes/IdleScreen/timeTable.svelte
@@ -63,13 +63,13 @@
 
 	let table = $state();
 
-	let TempTimeTable = localStorage.getItem("TimeTable") || "";
+	/*let TempTimeTable = localStorage.getItem("TimeTable") || "";
 
 	if (TempTimeTable != "") {
 		table = JSON.parse(TempTimeTable);
 	} else {
 		newTable($state.snapshot(TemplateTable));
-	}
+	}*/
 </script>
 
 <div id="root">