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

now you can add and remove pertiods in the idlescreen/timetable

Browse source
This commit is contained in:
RezHackXYZ 2025-05-08 15:46:54 +05:30
parent 1278b1d975
commit 38538a4b28
3 changed files with 181 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

1
jsconfig.json
View file

@ -25,5 +25,4 @@
"checkJs": true, "checkJs": true,
"types": ["svelte", "estree"] "types": ["svelte", "estree"]
}, },
"exclude": ["wordle/**/*", "IdleScreen/**/*", "SelectionMenue/**/*"]
} }

229
src/IdleScreen/EditTimetable.svelte
View file

@ -1,4 +1,4 @@
<script> <script module>
import { newTable } from "./timeTable.svelte"; import { newTable } from "./timeTable.svelte";
let table = JSON.parse(localStorage.getItem("TimeTable")); let table = JSON.parse(localStorage.getItem("TimeTable"));
@ -7,77 +7,137 @@
<div id="root"> <div id="root">
<div id="root"> <div id="root">
<div id="wrap"> <div id="wrap">
<div class="Header Row"> <div id="left">
<span class="DayOfWeek" style="Opacity: 0;"></span> <div class="Header Row">
{#each table.Times as time} <span class="DayOfWeek" style="Opacity: 0;"></span>
<input {#each table.Times as time}
type="text" <input
onchange={() => { type="text"
newTable(table); onchange={() => {
}} newTable(table);
bind:value={time} }}
/> bind:value={time}
{/each} />
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Monday</span>
{#each table.Monday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Tuesday</span>
{#each table.Tuesday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Wednesday</span>
{#each table.Wednesday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Thursday</span>
{#each table.Thursday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Friday</span>
{#each table.Friday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
</div> </div>
<div class="Row"> <div id="right">
<span class="DayOfWeek">Monday</span> <button
{#each table.Monday as time} onclick={() => {
<input table.Times.push("");
type="text" table.Monday.push("");
onchange={() => { table.Tuesday.push("");
table.Wednesday.push("");
table.Thursday.push("");
table.Friday.push("");
newTable(table); newTable(table);
}} table = JSON.parse(
bind:value={time} localStorage.getItem("TimeTable"),
/> );
{/each}
</div> }}
<div class="Row"> ><svg
<span class="DayOfWeek">Tuesday</span> xmlns="http://www.w3.org/2000/svg"
{#each table.Tuesday as time} height="24px"
<input viewBox="0 -960 960 960"
type="text" width="24px"
onchange={() => { fill="#FFFFFF"
><path
d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
/></svg
> <br />Add<br />new<br />Period
</button>
<button
onclick={() => {
if (
confirm(
"This will remove the last period, it is not reversable! are you sure?",
)
) {
table.Times.pop();
table.Monday.pop();
table.Tuesday.pop();
table.Wednesday.pop();
table.Thursday.pop();
table.Friday.pop();
newTable(table); newTable(table);
}} table = JSON.parse(
bind:value={time} localStorage.getItem("TimeTable"),
/> );
{/each} }
</div> }}
<div class="Row"> ><svg
<span class="DayOfWeek">Wednesday</span> xmlns="http://www.w3.org/2000/svg"
{#each table.Wednesday as time} height="24px"
<input viewBox="0 -960 960 960"
type="text" width="24px"
onchange={() => { fill="#FFFFFF"
newTable(table); ><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"
bind:value={time} /></svg
/> ><br />
{/each} Delete<br />last<br />Period
</div> </button>
<div class="Row">
<span class="DayOfWeek">Thursday</span>
{#each table.Thursday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Friday</span>
{#each table.Friday as time}
<input
type="text"
onchange={() => {
newTable(table);
}}
bind:value={time}
/>
{/each}
</div> </div>
</div> </div>
</div> </div>
@ -102,8 +162,7 @@
background-color: #252525; background-color: #252525;
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
flex-direction: column; gap: 20px;
gap: 5px;
} }
.Row { .Row {
@ -138,4 +197,32 @@
.Header > input { .Header > input {
background-color: #30492e; background-color: #30492e;
} }
#left {
gap: 5px;
display: flex;
flex-direction: column;
}
#right {
gap: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#right > button {
background-color: rgb(63, 63, 63);
color: white;
border: 2px solid white;
border-radius: 10px;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
#right > button:hover {
transform: scale(1.2);
background-color: rgb(50, 50, 50);
}
</style> </style>

46
src/app.svelte
View file

@ -1,33 +1,33 @@
<script> <script>
import Router from "svelte-spa-router"; import Router from "svelte-spa-router";
import Wordle from "./wordle/game.svelte"; import Wordle from "./wordle/game.svelte";
import TypeSelector from "./SelectionMenue/TypeSelector.svelte"; import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
import IdleScreen from "./IdleScreen/main.svelte"; import IdleScreen from "./IdleScreen/main.svelte";
import RandomName from "./RandomName/main.svelte"; import RandomName from "./RandomName/main.svelte";
import announcer from "./announcer/main.svelte"; import Announcer from "./announcer/main.svelte";
let routes = { let routes = {
"/": TypeSelector, "/": TypeSelector,
"/Wordle": Wordle, "/Wordle": Wordle,
"/IdleScreen": IdleScreen, "/IdleScreen": IdleScreen,
"/RandomName": RandomName, "/RandomName": RandomName,
"/announcer": announcer, "/announcer": Announcer,
}; };
</script> </script>
<div id="root"> <div id="root">
<Router {routes} /> <Router {routes} />
</div> </div>
<style> <style>
:root { :root {
background-color: #121212; background-color: #121212;
color: white; color: white;
} }
#root { #root {
height: 100%; height: 100%;
margin: 0; margin: 0;
font-family: "Sour Gummy", sans-serif; font-family: "Sour Gummy", sans-serif;
} }
</style> </style>