// Tutorial: https://www.youtube.com/watch?v=j7OhcuZQ-q8
document.addEventListener("DOMContentLoaded", () => {
let word = "dairy";
impactleWord();
createSquares();
let guessedWords = [
[]
];
let availableSpace = 1;
let guessedWordCount = 0;
const keys = document.querySelectorAll('.keyboard-row button');
function impactleWord() {
let wordLibrary = [];
let s = "impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense,impact,sample,four,fives,sixsix,sevense";
wordLibrary = s.split(',');
const d = new Date();
let impactleDay = Math.round((d.getTime() / 1000 - 1648360800) / 86400);
word = wordLibrary[impactleDay];
document.documentElement.style.setProperty(`--cols`, `'${word.length}'`);
// window.alert(word); // TODO: Delete -> Debugging purposes only
}
function getCurrentWordArr() {
const numberOfGuessedWords = guessedWords.length;
return guessedWords[numberOfGuessedWords - 1];
}
function updateGuessedWords(letter) {
const currentWordArr = getCurrentWordArr();
if (currentWordArr && currentWordArr.length < word.length) {
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 !== word.length) {
window.alert("Word must be 5 letters");
}
const currWord = currentWordArr.join('');
const firstLetterId = guessedWordCount * word.length + 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 (currWord === word) {
window.alert("Great success!");
}
if (guessedWords.length === word.length + 1) {
window.alert(`Game over! The word is ${word}.`);
}
guessedWords.push([]);
}
function createSquares() {
const gameBoard = document.getElementById("board");
for (let index = 0; index < word.length * (word.length + 1); index++) {
let square = document.createElement("div");
square.classList.add("square");
square.classList.add("animate__animated");
square.setAttribute("id", index + 1);
gameBoard.appendChild(square);
}
}
for (let i = 0; i < keys.length; i++) {
keys[i].onclick = ({ target }) => {
const letter = target.getAttribute("data-key");
if (letter === 'enter') {
handleSubmitWord();
return;
}
updateGuessedWords(letter);
}
}
});
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#container {
display: flex;
background-color: black;
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(58, 58, 60);
}
.title {
color: gainsboro;
font-size: 2.5rem;
font-weight: bold;
margin: 0.4rem 0 0.4rem 0;
text-align: center;
text-transform: uppercase;
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(var(--cols), 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: 44px;
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;
}
.spacer-half {
flex-grow: 0.5;
}
<!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>Worlde For Friends</title>
<script src="js/main.js"></script>
<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>
<div id="container">
<div id="game">
<header>
<h1 class="title">Friendle</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 class="spacer-half"></div>
</div>
<div class="keyboard-row">
<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>
</body>
</html>
