COPS-IITBHU · Puneet-03 · Apr 23, 2022
diff --git a/css/all.min.css b/css/all.min.css
diff --git a/css/instrimg.png b/css/instrimg.png
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,148 @@
+*{
+ margin:0;
+ padding: 0;
+}
+
+html,body{
+ height: 100%;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+li{
+ font-size: 20px;
+}
+
+
+
+#menu{
+ padding: 0;
+ margin: 0;
+ text-decoration: none;
+ list-style: none;
+ box-sizing: border-box;
+}
+#container{
+ display: flex;
+ height: 100%;
+ align-items: center;
+ flex-direction: column;
+}
+
+#game{
+ width: 100%;
+ max-width: 500px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+header{
+ border-bottom: 1px solid rgb(53, 23, 160);
+}
+
+.title{
+ color: rgb(25, 59, 207);
+ font-size: 3rem;
+ font-weight: bold;
+ margin: 0.4rem 0 0.4rem 0;
+ text-align: center;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+#board-container{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+ overflow: hidden;
+}
+
+#board{
+ display: grid;
+ grid-template-columns: repeat(5,1fr);
+ grid-gap: 5px;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+.square {
+ border: 2px solid rgb(58,58,60);
+ min-width: 60px;
+ min-height: 60px;
+ font-size: 50px;
+ font-weight: bold;
+ color: gainsboro;
+ text-transform: uppercase;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#keyboard-container{
+ height: 200px;
+}
+
+.keyboard-row {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin: 0 auto 8px;
+ touch-action: manipulation;
+}
+
+.keyboard-row button{
+ font-family: inherit;
+ font-weight: bold;
+ border: 0;
+ padding: 0;
+ height: 58px;
+ cursor: pointer;
+ background-color: rgb(129,131,132);
+ color: rgb(215,218,220);
+ flex-grow: 1;
+ text-transform: uppercase;
+ margin-right: 6px;
+ border-radius: 4px;
+ user-select: none;
+}
+
+.keyboard-row button.wide-button{
+ flex-grow: 1.5;
+}
+
+.space-half {
+ flex-grow: 0.5;
+}
+
+.header {
+ height: 100%;
+ width:100%;
+ background-image:linear-gradient(rgba(13, 194, 194, 0.7),rgba(23, 53, 170, 0.7)),url(valo.jpg);
+ background-position: center;
+ background-size: cover;
+ background-attachment: fixed;
+}
+
+.uxu {
+ height: 100%;
+ width: 100%;
+ background-image:linear-gradient(rgba(13, 194, 194, 0.7),rgba(2, 6, 19, 0.7)),url(instrimg.png);
+ background-position: center;
+ background-size: cover;
+ background-attachment: fixed;
+}
+
+.inst{
+ color: rgb(196, 20, 20);
+ font-size: 3rem;
+ font-weight: bold;
+ margin: 0.4rem 0 0.4rem 0;
+ text-align: center;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+#points{
+ align-content: center;
+ color: rgba(0, 0, 0, 0.877);
+}
diff --git a/css/valo.jpg b/css/valo.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <title>Valordle</title>
+
+ <script src="js/mains.js"></script>
+ <link rel="stylesheet" href="css/all.min.css" />
+
+ <link rel="stylesheet" href="css/styles.css" />
+ <link
+ rel="stylesheet"
+ href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+ />
+</head>
+<body>
+ <section class="header">
+ <div class="menu">
+ <nav>
+ <label class="logo"></label>
+ <ul>
+ <li><a href="instructions.html">Instructions</a></li>
+ </ul>
+ </nav>
+ </div> 
+ <div id="container">
+ <div id="game">
+ <header>
+ <h1 class="title">VALORDLE</h1>
+ </header>
+
+ <div id="board-container">
+ <div id="board"></div>
+ </div>
+ <div id="keyboard-container">
+ <div class="keyboard-row">
+ <button data-key="q">q</button>
+ <button data-key="w">w</button>
+ <button data-key="e">e</button>
+ <button data-key="r">r</button>
+ <button data-key="t">t</button>
+ <button data-key="y">y</button>
+ <button data-key="u">u</button>
+ <button data-key="i">i</button>
+ <button data-key="o">o</button>
+ <button data-key="p">p</button>
+ </div>
+ <div class="keyboard-row">
+ <div class="spacer-half"></div>
+ <button data-key="a">a</button>
+ <button data-key="s">s</button>
+ <button data-key="d">d</button>
+ <button data-key="f">f</button>
+ <button data-key="g">g</button>
+ <button data-key="h">h</button>
+ <button data-key="j">j</button>
+ <button data-key="k">k</button>
+ <button data-key="l">l</button>
+ <div class="spacer-half"></div>
+ </div>
+ <div class="keyboard-row">
+ <button data-key="enter" class="wide-button">Enter</button>
+ <button data-key="z">z</button>
+ <button data-key="x">x</button>
+ <button data-key="c">c</button>
+ <button data-key="v">v</button>
+ <button data-key="b">b</button>
+ <button data-key="n">n</button>
+ <button data-key="m">m</button>
+ <button data-key="del" class="wide-button">Del</button>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+ </section>
+
+</body>
+</html>
diff --git a/instructions.html b/instructions.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Instructions</title>
+ <link rel="stylesheet" href="css/styles.css" />
+</head>
+<body>
+ <section class="uxu">
+ <header>
+ <h1 class="inst">Instructions</h1>
+ </header>
+ <div id="points">
+ <ol start="1"> 
+ <br>
+ <li>I) Guess the VALORDLE in six tries.</li><br>
+
+ <li> II) Each guess must be a valid five-letter word. Hit the enter button to submit.</li><br>
+
+ <li>III) After each guess, the color of the tiles will change to show how close your guess was to the word.</li><br>
+ <li> IV) If the tile turns green, the letter is in the word and in the correct spot. </li><br>
+ <li>V) If the tile turns yellow, the letter is in the word but in the wrong position.</li><br>
+ <li>VI) If the tile turns grey, the letter is not in the word.</li><br>
+
+
+ </div>
+
+ </section>
+</body>
+</html>
diff --git a/js/mains.js b/js/mains.js
@@ -0,0 +1,125 @@
+document.addEventListener("DOMContentLoaded", () => {
+ createSquares();
+
+ let guessedWords = [[]];
+ let availableSpace = 1;
+
+ const arr = ["spike" , "reyna" , "plant" , "viper" , "drone" , "recon" , "clear" , "cubby" , "flick" , "entry" , "flank" , "flash" , "molly" , "spawn" , "stack" , "trade" , "swing","party", "sight" , "blind" , "flash" , "blade" , "storm" , "cross" , "smoke" , "shock" , "ropes" , "sewer" , "swarm" , "blast" , "prime","ghost" , "sword" , "hooka" , "nitro" , "prism" , "smite" , "haven","split" , "astra", "relay" ,"vines" , "pizza" ,"judge" , "melee", "bucky","tower" , "lamps"]
+
+ let word = arr[Math.floor(Math.random() * 47)];
+ let guessedWordCount = 0;
+
+ const keys = document.querySelectorAll(".keyboard-row button");
+
+ function getCurrentWordArr() {
+ const numberOfGuessedWords = guessedWords.length;
+ return guessedWords[numberOfGuessedWords - 1];
+ }
+
+ function updateGuessedWords(letter) {
+ const currentWordArr = getCurrentWordArr();
+
+ if (currentWordArr && currentWordArr.length < 5) {
+ currentWordArr.push(letter);
+
+ const availableSpaceEl = document.getElementById(String(availableSpace));
+
+ availableSpace = availableSpace + 1;
+ availableSpaceEl.textContent = letter;
+ }
+ }
+
+ function getTileColor(letter, index) {
+ const isCorrectLetter = word.includes(letter);
+
+ if (!isCorrectLetter) {
+ return "rgb(58, 58, 60)";
+ }
+
+ const letterInThatPosition = word.charAt(index);
+ const isCorrectPosition = letter === letterInThatPosition;
+
+ if (isCorrectPosition) {
+ return "rgb(83, 141, 78)";
+ }
+
+ return "rgb(181, 159, 59)";
+ }
+
+ function handleSubmitWord() {
+ const currentWordArr = getCurrentWordArr();
+ if (currentWordArr.length !== 5) {
+ window.alert("Word must be 5 letters");
+ }
+
+ const currentWord = currentWordArr.join("");
+
+ const firstLetterId = guessedWordCount * 5 + 1;
+ const interval = 200;
+ currentWordArr.forEach((letter, index) => {
+ setTimeout(() => {
+ const tileColor = getTileColor(letter, index);
+
+ const letterId = firstLetterId + index;
+ const letterEl = document.getElementById(letterId);
+ letterEl.classList.add("animate__flipInX");
+ letterEl.style = `background-color:${tileColor};border-color:${tileColor}`;
+ }, interval * index);
+ });
+
+ guessedWordCount += 1;
+
+ if (currentWord === word) {
+ window.alert("GGWP! ..You Got It.");
+ }
+
+ if (guessedWords.length === 6) {
+ window.alert(`Sorry, you lost! The word is ${word}.`);
+ }
+
+ guessedWords.push([]);
+
+ }
+
+ function createSquares() {
+ const gameBoard = document.getElementById("board");
+
+ for (let index = 0; index < 30; index++) {
+ let square = document.createElement("div");
+ square.classList.add("square");
+ square.classList.add("animate__animated");
+ square.setAttribute("id", index + 1);
+ gameBoard.appendChild(square);
+ }
+ }
+
+ function handleDeleteLetter() {
+ const currentWordArr = getCurrentWordArr();
+ const removedLetter = currentWordArr.pop();
+
+ guessedWords[guessedWords.length - 1] = currentWordArr;
+
+ const lastLetterEl = document.getElementById(String(availableSpace - 1));
+
+ lastLetterEl.textContent = "";
+ availableSpace = availableSpace - 1;
+ }
+
+ for (let i = 0; i < keys.length; i++) {
+ keys[i].onclick = ({ target }) => {
+ const letter = target.getAttribute("data-key");
+
+ if (letter === "enter") {
+ handleSubmitWord();
+ return;
+ }
+
+ if (letter === "del") {
+ handleDeleteLetter();
+ return;
+ }
+
+ updateGuessedWords(letter);
+ };
+ }
+});
diff --git a/webfonts/fa-brands-400.ttf b/webfonts/fa-brands-400.ttf
diff --git a/webfonts/fa-brands-400.woff2 b/webfonts/fa-brands-400.woff2
diff --git a/webfonts/fa-regular-400.ttf b/webfonts/fa-regular-400.ttf
diff --git a/webfonts/fa-regular-400.woff2 b/webfonts/fa-regular-400.woff2
diff --git a/webfonts/fa-solid-900.ttf b/webfonts/fa-solid-900.ttf
diff --git a/webfonts/fa-solid-900.woff2 b/webfonts/fa-solid-900.woff2
diff --git a/webfonts/fa-v4compatibility.ttf b/webfonts/fa-v4compatibility.ttf
diff --git a/webfonts/fa-v4compatibility.woff2 b/webfonts/fa-v4compatibility.woff2