first commit

src/app.svelte

@@ -0,0 +1,35 @@
+<script>
+	import Game from "./wordle/game.svelte";
+</script>
+
+<div id="root">
+	<h1>CLASSROOM WORDLE <span>~made by Rhythm Upadhyay of 7th A</span></h1>
+	<Game />
+</div>
+
+<style>
+	:root {
+		background-color: #121212;
+		color: white;
+	}
+
+	#root {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		font-family: "Sour Gummy", sans-serif;
+	}
+
+	h1 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+	}
+
+	span {
+		font-size: 0.5em;
+		text-decoration: none;
+		color: #444;
+	}
+</style>

src/wordle/display.svelte

@@ -0,0 +1,75 @@
+<script>
+	import { CurrentWord, words } from "./logic.svelte.js";
+</script>
+
+<div id="root">
+	{#each words as word}
+		<div class="word">
+			{#each word as letter}
+				<span class={letter[1]}>{letter[0]}</span>
+			{/each}
+		</div>
+	{/each}
+	<div class="word">
+		<span>{CurrentWord[0]}</span>
+		<span>{CurrentWord[1]}</span>
+		<span>{CurrentWord[2]}</span>
+		<span>{CurrentWord[3]}</span>
+		<span>{CurrentWord[4]}</span>
+	</div>
+</div>
+
+<style>
+	#root {
+		height: calc(100% - 320px);
+		border: 2px solid #202020;
+		margin: 20px;
+		border-radius: 10px;
+		overflow-y: scroll;
+	}
+
+	.word {
+		display: flex;
+		gap: 5px;
+		margin: 10px;
+		justify-content: center;
+	}
+
+	span {
+		width: 70px;
+		height: 70px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 10px;
+		font-size: 50px;
+		border: 2px solid #444;
+	}
+
+	.c {
+		background-color: #2b5f2d;
+	}
+	.d {
+		background-color: #804d00;
+	}
+	.w {
+		background-color: #2b2b2b;
+	}
+
+	/* width */
+	::-webkit-scrollbar {
+		width: 20px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 5px grey;
+		border-radius: 10px;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: red;
+		border-radius: 10px;
+	}
+</style>

src/wordle/game.svelte

@@ -0,0 +1,22 @@
+<script>
+    import Keyboard from "./keyboard.svelte";
+    import Display from "./display.svelte";
+</script>
+
+<div id="root">
+    <Display />
+    <Keyboard />
+</div>
+
+<style>
+    #root {
+        width: calc(50% - 40px);
+        height: calc(100% - 75px);
+        border-radius: 20px;
+        margin: 20px;
+        margin-top: 5px;
+        border: 2px solid #444;
+
+        font-family: "JetBrains Mono", monospace;
+    }
+</style>

src/wordle/keyboard.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { keys, ButtonPressed } from "./logic.svelte.js";
+</script>
+
+<div id="root">
+	<div class="word">
+		{#each keys.slice(0, 10) as key}
+			<button on:click={() => ButtonPressed(key[0])} class={key[1]}
+				>{key[0]}</button
+			>
+		{/each}
+	</div>
+
+	<div class="word">
+		{#each keys.slice(10, 19) as key}
+		<button on:click={() => ButtonPressed(key[0])} class={key[1]}
+			>{key[0]}</button
+			>
+		{/each}
+	</div>
+	<div class="word">
+		{#each keys.slice(19) as key}
+		<button on:click={() => ButtonPressed(key[0])} class={key[1]}
+			>{key[0]}</button
+			>
+		{/each}
+	</div>
+</div>
+
+<style>
+	#root {
+		height: 255px;
+		margin: 20px;
+		border-radius: 10px;
+		border: 2px solid #202020;
+	}
+
+	.word {
+		display: flex;
+		gap: 5px;
+		margin: 10px;
+		justify-content: center;
+	}
+
+	button {
+		background-color: #202020;
+		font-family: "JetBrains Mono", monospace;
+		color: #808080;
+		width: 70px;
+		height: 70px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 10px;
+		font-size: 50px;
+		border: 2px solid #444;
+	}
+
+	.c {
+		background-color: #2b5f2d;
+	}
+	.d {
+		background-color: #804d00;
+	}
+	.w {
+		background-color: #2b2b2b;
+	}
+	.o {
+		background-color: #202829;
+	}
+</style>

src/wordle/logic.svelte.js

@@ -0,0 +1,55 @@
+import commonWords from "common-words";
+
+export let keys = $state([
+	["Q", "n"],
+	["W", "n"],
+	["E", "n"],
+	["R", "n"],
+	["T", "n"],
+	["Y", "n"],
+	["U", "n"],
+	["I", "n"],
+	["O", "n"],
+	["P", "n"],
+	["A", "n"],
+	["S", "n"],
+	["D", "n"],
+	["F", "n"],
+	["G", "n"],
+	["H", "n"],
+	["J", "n"],
+	["K", "n"],
+	["L", "n"],
+	["⇦", "o"],
+	["Z", "n"],
+	["X", "n"],
+	["C", "n"],
+	["V", "n"],
+	["B", "n"],
+	["N", "n"],
+	["M", "n"],
+	["↵", "o"],
+]);
+
+export let words = $state([
+	[
+		["R", "c"],
+		["A", "d"],
+		["D", "w"],
+		["I", "w"],
+		["O", "w"],
+	],
+]);
+
+export let CurrentWord = $state([]);
+
+export function ButtonPressed(key) {
+	CurrentWord.push(key);
+}
+
+function getRandomWord() {
+	let fiveLetterWords = commonWords
+		.map((entry) => entry.word)
+		.filter((word) => word.length === 5);
+	return fiveLetterWords[Math.floor(Math.random() * fiveLetterWords.length)];
+}