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

Improved wordle Ui even more

Browse source
This commit is contained in:
RezHackXYZ 2025-05-04 17:50:22 +05:30
parent 06c2cac6e4
commit fbe9e3b60d
4 changed files with 143 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/wordle/game.svelte
View file

@ -4,13 +4,66 @@
import { onMount } from "svelte";
import { handleKey } from "./logic.svelte.js";
import Right from "./InfoAndSetings/main.svelte";
import { OpenTab } from "./InfoAndSetings/main.svelte";
onMount(() => {
window.addEventListener("keydown", handleKey);
});
</script>
<h1>CLASSROOM WORDLE <span>~made by Rhythm Upadhyay of 7th A</span></h1>
<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>Wordle</h1>
<div>
<button
aria-label="Back to main menu"
onclick={() => OpenTab("WordLength")}
><span class="front"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M320-80 160-240l160-160 57 56-64 64h334l-63-64 56-56 160 160L640-80l-57-56 64-64H313l63 64-56 56ZM200-480v-400h80v400h-80Zm240 0v-400h80v400h-80Zm240 0v-400h80v400h-80Z"
/></svg
> Change word legnth
</span></button
>
<button
aria-label="Back to main menu"
onclick={() => OpenTab("Stats")}
><span class="front"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="m105-399-65-47 200-320 120 140 160-260 120 180 135-214 65 47-198 314-119-179-152 247-121-141-145 233Zm475 159q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM784-80 676-188q-21 14-45.5 21t-50.5 7q-75 0-127.5-52.5T400-340q0-75 52.5-127.5T580-520q75 0 127.5 52.5T760-340q0 26-7 50.5T732-244l108 108-56 56Z"
/></svg
> Stats
</span></button
>
</div>
</div>
<div id="root">
<div id="left">
<Display />
@ -20,6 +73,47 @@
</div>
<style>
#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 {
height: 90%;
display: flex;