about summary refs log tree commit diff
diff options
context:
space:
mode:
authorgennyble <gen@nyble.dev>2023-06-18 14:50:42 -0500
committergennyble <gen@nyble.dev>2023-06-18 14:50:42 -0500
commit2600d94694c326fa450cb6d753401e70f18fb0e9 (patch)
tree0573615392c9b9525eac3e31f665ba4c52d2a2e1
parent11d62ee01516b1046a51d575e4eb6659ecdc0d3f (diff)
downloadwednesdayle-2600d94694c326fa450cb6d753401e70f18fb0e9.tar.gz
wednesdayle-2600d94694c326fa450cb6d753401e70f18fb0e9.zip
it worksish
Diffstat
-rw-r--r--.DS_Storebin0 -> 6148 bytes
-rw-r--r--.vscode/settings.json5


-rw-r--r--BarlowCondensed-Medium.ttfbin0 -> 97960 bytes
-rw-r--r--README.md1


-rw-r--r--index.html51


-rw-r--r--script.js119


-rw-r--r--style.css153


7 files changed, 301 insertions, 28 deletions
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..4737907
--- /dev/null
+++ b/.DS_Store
Binary files differdiff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..43dc03a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+	"cSpell.words": [
+		"Wednesdayle"
+	]
+}
\ No newline at end of file
diff --git a/BarlowCondensed-Medium.ttf b/BarlowCondensed-Medium.ttf
new file mode 100644
index 0000000..82e45ac
--- /dev/null
+++ b/BarlowCondensed-Medium.ttf
Binary files differdiff --git a/README.md b/README.md
new file mode 100644
index 0000000..89b15c6
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+Barlow font: <https://github.com/jpt/barlow>
\ No newline at end of file
diff --git a/index.html b/index.html
index 35f18ef..5f62f48 100644
--- a/index.html
+++ b/index.html
@@ -10,28 +10,47 @@
 
 <body>
 	<main>
+		<section id="dropdown">
+			<button id="close-dropdown">X</button>
+			<h1>Wednesdayle</h1>
+			<p>
+				It's one word, nine letters long!
+			</p>
+			<p>
+				You have one guess. Goodluck!
+			</p>
+		</section>
+		<h1>Wednesdayle</h1>
 		<section id="game-area">
-			<div id="box0"> </div>
-			<div id="box1"> </div>
-			<div id="box2"> </div>
-			<div id="box3"> </div>
-			<div id="box4"> </div>
-			<div id="box5"> </div>
-			<div id="box6"> </div>
-			<div id="box7"> </div>
-			<div id="box8"> </div>
+			<div id="box0"></div>
+			<div id="box1"></div>
+			<div id="box2"></div>
+			<div id="box3"></div>
+			<div id="box4"></div>
+			<div id="box5"></div>
+			<div id="box6"></div>
+			<div id="box7"></div>
+			<div id="box8"></div>
+			<section id="msgbox">
+				<div id="notword">That's not the word..</div>
+				<div id="theword">That's the word!</div>
+			</section>
 		</section>
 		<section id="keyboard">
 			<div id="row0">
-				<button id="key00">W</button>
-				<button id="key01">E</button>
-				<button id="key02">Y</button>
+				<button id="key0">W</button>
+				<button id="key1">E</button>
+				<button id="key2">Y</button>
 			</div>
 			<div id="row1">
-				<button id="key10">A</button>
-				<button id="key11">S</button>
-				<button id="key12">D</button>
-				<button id="key13">N</button>
+				<button id="key3">A</button>
+				<button id="key4">S</button>
+				<button id="key5">D</button>
+				<button id="key6">N</button>
+			</div>
+			<div id="row2">
+				<button id="delete">Delete</button>
+				<button id="enter">Enter</button>
 			</div>
 		</section>
 	</main>
diff --git a/script.js b/script.js
index e69de29..ea4bd12 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,119 @@
+class Wednesdayle {
+	constructor() {
+		this.active = true;
+		this.nextBox = 0;
+		this.boxes = new Array();
+		for (let i = 0; i < 9; ++i) {
+			this.boxes.push(document.getElementById('box' + i));
+		}
+
+		this.buttons = new Array();
+		for (let i = 0; i < 7; ++i) {
+			let btn = document.getElementById('key' + i);
+			btn.addEventListener('click', this.buttonPush.bind(this));
+			this.buttons.push(btn);
+		}
+
+		window.addEventListener('keydown', this.keydown.bind(this));
+
+		this.delete = document.getElementById('delete');
+		this.delete.addEventListener('click', this.letterUndid.bind(this));
+
+		this.enter = document.getElementById('enter');
+		this.enter.addEventListener('click', this.submit.bind(this));
+
+		this.dropdown = document.getElementById('dropdown');
+		document.getElementById('close-dropdown').addEventListener('click', this.closeDropdown.bind(this));
+
+		this.theword = document.getElementById('theword');
+		this.notword = document.getElementById('notword');
+	}
+
+	// Terrible function name genny
+	letterDid(letter) {
+		if (!this.active) {
+			return;
+		}
+
+		if (this.nextBox < this.boxes.length) {
+			let up = letter.toUpperCase();
+
+			this.boxes[this.nextBox].innerText = up;
+			if (this.nextBox < this.boxes.length) {
+				this.nextBox++;
+			}
+		}
+	}
+
+	// undid? really? genny,,,
+	letterUndid() {
+		if (!this.active) {
+			return;
+		}
+
+		if (this.nextBox > 0) {
+			this.nextBox--;
+			this.boxes[this.nextBox].innerText = '';
+		}
+	}
+
+	submit() {
+		if (!this.active) {
+			return;
+		}
+
+		let word = "wednesday";
+		for (let i = 0; i < this.boxes.length; ++i) {
+			if (word[i].toUpperCase() != this.boxes[i].innerText.toUpperCase()) {
+				this.notword.style.display = "block";
+				this.active = false;
+				return;
+			}
+		}
+
+		this.theword.style.display = "block";
+		this.active = false;
+	}
+
+	buttonPush(event) {
+		if (!this.active) {
+			return;
+		}
+
+		let btn = event.target;
+		let letter = btn.innerText;
+
+		this.letterDid(letter);
+	}
+
+	keydown(event) {
+		if (!this.active) {
+			return;
+		}
+
+		let allowed = "weyadsn";
+		let key = event.key;
+
+		if (allowed.includes(key)) {
+			this.letterDid(key);
+		} else if (key == "Enter") {
+			this.submit();
+		} else if (key == "Backspace") {
+			this.letterUndid();
+		}
+	}
+
+	closeDropdown() {
+		console.log('thf');
+		this.dropdown.style.display = "none";
+	}
+}
+
+let wednesdayle;
+
+function setup() {
+	console.log("started");
+	wednesdayle = new Wednesdayle();
+}
+
+window.addEventListener('DOMContentLoaded', setup)
\ No newline at end of file
diff --git a/style.css b/style.css
index 78686f8..af0d5bb 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,9 @@
+@font-face {
+	font-family: 'Barlow Condensed';
+	src: url("BarlowCondensed-Medium.ttf") format("truetype");
+	font-weight: 500;
+}
+
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -7,26 +13,116 @@
 body {
 	width: 100vw;
 	height: 100vh;
+	background-color: burlywood;
 }
 
 main {
+	height: 100%;
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
+	justify-content: center;
+}
+
+#dropdown {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	width: 100vw;
+	color: whitesmoke;
+	background-color: slategray;
+	border-bottom: 2px solid darkslategray;
+	padding: 2rem 2rem 5rem 4rem;
+	font-weight: 600;
+	font-size: 1.2rem;
+	z-index: 1;
+}
+
+#close-dropdown {
+	font-family: 'Times New Roman', Times, serif;
+	color: whitesmoke;
+	background-color: unset;
+	border: none;
+	font-size: 3rem;
+	position: absolute;
+	bottom: 1rem;
+	left: 1rem;
+}
+
+#dropdown h1 {
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	font-size: 2rem;
+	text-decoration: underline;
+	margin-bottom: 1rem;
+}
+
+#dropdown p {
+	font-weight: inherit;
+	margin: 1rem 0;
+}
+
+main>h1 {
+	text-align: center;
+	color: whitesmoke;
+	text-shadow: black 2px 2px;
+	font-size: 3rem;
+	margin: 0.5rem;
+	padding: 0;
+	text-decoration: underline;
 }
 
 #game-area {
+	position: relative;
 	margin: 0 auto;
-	padding: 2rem;
-	width: 32rem;
+	padding: 0 0 1rem 0;
+	width: 22rem;
+	box-sizing: content-box;
 	aspect-ratio: 1 / 1;
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 1rem;
 }
 
-#game-area div {
-	border: 2px solid black;
+#game-area>div {
+	font-family: 'Barlow Condensed', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border: 3px solid darkcyan;
+	border-radius: 0.25rem;
+	background-color: powderblue;
+	font-size: 5rem;
+	text-align: center;
+	color: darkslategray;
+	/* this seems wrong and bad, but it works, so */
+	line-height: 0;
+}
+
+#msgbox {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#msgbox>div {
+	background-color: #000c;
+	color: whitesmoke;
+	font-weight: 600;
+	padding: 1rem;
+	font-size: 2rem;
+	width: fit-content;
+	margin: 0 auto;
+}
+
+#theword,
+#notword {
+	display: none;
 }
 
 /*
@@ -36,10 +132,12 @@ asdn
 */
 #keyboard {
 	padding-bottom: 2rem;
+	font-family: 'Barlow Condensed', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }
 
 #row0,
-#row1 {
+#row1,
+#row2 {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -47,18 +145,49 @@ asdn
 	margin: 0.5rem 0;
 }
 
-button {
-	border: 1px solid salmon;
-	border-radius: 0.2rem;
-	width: 10vw;
-	height: 10vw;
+#keyboard button {
+	font-family: inherit;
+	border: 2px solid salmon;
+	background-color: lightsalmon;
+	color: white;
+	text-shadow: black 2px 2px;
+	border-radius: 0.5rem;
+	width: 5.5rem;
+	height: 5.5rem;
+	font-size: 3.5rem;
+}
+
+#keyboard #delete,
+#keyboard #enter {
+	width: 11.5rem;
+	height: 4rem;
+	font-size: 2.75rem;
 }
 
 @media (max-width: 40rem) {
 
 	/* Modile target */
 	#game-area {
-		width: 75vw;
+		max-width: 80vw;
+		min-width: 25vh;
+		gap: 2vw;
+	}
+
+	#game-area>div {
+		font-size: 4rem;
+	}
+
+	#keyboard button {
+		width: 4rem;
+		height: 4rem;
+		font-size: 2.5rem;
+	}
+
+	#keyboard #delete,
+	#keyboard #enter {
+		width: 8.5rem;
+		height: 3rem;
+		font-size: 1.75rem;
 	}
 }
 

 

generated by cgit-pink 1.4.1-3-g733a5 (git 2.37.1) at 2025-01-18 05:20:36 +0000