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

3
src/wordle/InfoAndSetings/WordLegnthSetings.svelte
View file

@ -1,5 +1,6 @@
<script>
import { newGame, WordLegnth } from "../logic.svelte.js";
import { TabOpen } from "./main.svelte";
let LetersSelected = WordLegnth.v;
</script>
@ -18,6 +19,7 @@
onclick={() => {
WordLegnth.v = LetersSelected;
newGame();
TabOpen.v = "none";
}}
>Start New Game with Word legnth of {LetersSelected} letters
</button>
@ -34,6 +36,7 @@
padding: 10px;
margin: 20px;
border-radius: 10px;
width: 400px;
}
h4 {
text-align: center;

71
src/wordle/InfoAndSetings/main.svelte
View file

@ -1,45 +1,58 @@
<script>
<script module>
import { newGame, WordLegnth } from "../logic.svelte.js";
import WordLegnthSetings from "./WordLegnthSetings.svelte";
import Stats from "./stats.svelte";
let LetersSelected = WordLegnth.v;
export let TabOpen = $state({ v: "none" });
export function OpenTab(type) {
TabOpen.v = type;
}
</script>
<div id="root">
<div>
<h1>A Wordle clone designed for classrooms!</h1>
<h3>
Unlimited guesses, Unlimited words, and choose your own word length!
</h3>
{#if TabOpen.v !== "none"}
<div id="UperLayer">
<div id="wrap">
{#if TabOpen.v == "WordLength"}
<WordLegnthSetings />
{:else if TabOpen.v == "Stats"}
<Stats />
{/if}
<button
class="close"
onclick={() => (TabOpen.v = "none")}
aria-label="close">CLOSE</button
>
</div>
</div>
<WordLegnthSetings />
<Stats />
</div>
{/if}
<style>
#root {
#UperLayer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 35%;
border-radius: 20px;
margin: 20px;
margin-top: 5px;
border: 2px solid #444;
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: grid;
place-items: center;
}
#wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
}
h1 {
text-align: center;
margin: 5px 0px;
text-decoration: underline #444;
}
h3 {
text-align: center;
margin: 5px 0px;
text-decoration: underline #444;
.close {
background-color: #2b2b2b;
color: #888;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
align-self: center;
}
</style>

5
src/wordle/InfoAndSetings/stats.svelte
View file

@ -1,8 +1,8 @@
<script>
import { data } from "../logic.svelte.js";
import { data, WordLegnth } from "../logic.svelte.js";
// svelte-ignore non_reactive_update
let LetersSelected = "5";
let LetersSelected = JSON.stringify(WordLegnth.v);
let dataPoints = data.value[LetersSelected];
@ -122,6 +122,7 @@
padding: 10px;
margin: 20px;
border-radius: 10px;
width: 700px;
}
h2,
h1,

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;