finished eldrow
Before Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 1.8 KiB |
BIN
favicon/android-chrome-192x192.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
favicon/android-chrome-512x512.png
Normal file
After Width: | Height: | Size: 6.9 KiB |
BIN
favicon/apple-touch-icon.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
|
@ -2,8 +2,8 @@
|
||||||
<browserconfig>
|
<browserconfig>
|
||||||
<msapplication>
|
<msapplication>
|
||||||
<tile>
|
<tile>
|
||||||
<square150x150logo src="/mstile-150x150.png"/>
|
<square150x150logo src="/favicon/mstile-150x150.png"/>
|
||||||
<TileColor>#da532c</TileColor>
|
<TileColor>#00aba9</TileColor>
|
||||||
</tile>
|
</tile>
|
||||||
</msapplication>
|
</msapplication>
|
||||||
</browserconfig>
|
</browserconfig>
|
Before Width: | Height: | Size: 833 B After Width: | Height: | Size: 833 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
32
favicon/safari-pinned-tab.svg
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M712 6810 c-261 -68 -456 -266 -522 -526 -20 -78 -20 -107 -18 -2839
|
||||||
|
l3 -2760 26 -72 c43 -117 96 -202 178 -284 120 -120 257 -187 423 -209 58 -8
|
||||||
|
885 -10 2783 -8 2568 3 2703 4 2760 21 259 78 450 271 522 527 17 62 18 184
|
||||||
|
18 2810 0 3093 8 2787 -79 2965 -94 191 -273 331 -483 379 -65 15 -320 16
|
||||||
|
-2805 15 -2655 0 -2735 -1 -2806 -19z m1578 -1215 l0 -895 -890 0 -891 0 3
|
||||||
|
753 3 752 28 60 c32 69 104 147 162 177 90 47 81 47 853 47 l732 1 0 -895z
|
||||||
|
m2120 -7 l0 -901 -512 6 c-281 4 -682 7 -890 7 l-378 0 0 895 0 895 890 0 890
|
||||||
|
0 0 -902z m1915 868 c76 -38 149 -110 183 -184 l27 -57 3 -757 2 -758 -895 0
|
||||||
|
-895 0 0 895 0 896 758 -3 757 -3 60 -29z m-4028 -2643 c-4 -302 -7 -702 -7
|
||||||
|
-890 l0 -343 -657 0 c-362 0 -763 3 -890 7 l-233 6 0 879 0 878 888 3 c488 1
|
||||||
|
891 3 896 5 6 1 7 -216 3 -545z m2120 533 c2 -2 1 -402 -3 -890 l-7 -886 -890
|
||||||
|
0 -890 0 6 503 c4 276 7 678 7 892 l0 390 887 -3 c488 -1 888 -4 890 -6z
|
||||||
|
m2133 -876 l0 -890 -900 0 -900 0 0 243 c0 134 3 535 7 890 l6 647 894 0 893
|
||||||
|
0 0 -890z m-4263 -1234 c2 -2 1 -405 -3 -895 l-7 -891 -703 0 c-476 0 -720 4
|
||||||
|
-756 11 -120 25 -225 108 -276 217 l-27 57 -3 755 -2 755 887 -3 c488 -1 888
|
||||||
|
-4 890 -6z m4261 -738 c-3 -737 -3 -743 -25 -796 -42 -102 -123 -183 -225
|
||||||
|
-225 -53 -22 -59 -22 -800 -25 l-748 -3 0 896 0 895 900 0 901 0 -3 -742z
|
||||||
|
m-2138 -158 l0 -890 -895 0 -895 0 0 543 c0 299 3 700 7 890 l6 347 889 0 888
|
||||||
|
0 0 -890z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.8 KiB |
|
@ -3,12 +3,12 @@
|
||||||
"short_name": "",
|
"short_name": "",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-192x192.png",
|
"src": "/favicon/android-chrome-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/android-chrome-512x512.png",
|
"src": "/favicon/android-chrome-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
33
index.css
|
@ -56,8 +56,17 @@ header p {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.board .row .cell.unguessed {
|
||||||
|
color: black;
|
||||||
transform: scale(-1, 1);
|
transform: scale(-1, 1);
|
||||||
}
|
}
|
||||||
|
.board .row .cell.guessed {
|
||||||
|
color: black;
|
||||||
|
transform: scale(-1, 1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
.board .row .cell.correct {
|
.board .row .cell.correct {
|
||||||
background-color: #6aaa64;
|
background-color: #6aaa64;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -100,6 +109,21 @@ header p {
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
transform: scale(-1, 1);
|
transform: scale(-1, 1);
|
||||||
}
|
}
|
||||||
|
.letters .row .letter.correct {
|
||||||
|
background-color: #6aaa64 !important;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.letters .row .letter.present {
|
||||||
|
background-color: #c9b458;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.letters .row .letter.absent {
|
||||||
|
background-color: #787c7e;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
.letters .row #backspace {
|
.letters .row #backspace {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
}
|
}
|
||||||
|
@ -111,6 +135,15 @@ header p {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
background: black !important;
|
||||||
|
color: white;
|
||||||
|
font-family: "Raleway", sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 5px !important;
|
||||||
|
transform: scale(-1, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-family: "Playfair Display", serif;
|
font-family: "Playfair Display", serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAWA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACVF;;ADYA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACXF;;ADaA;EACE,sCA5BM;EA6BN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACVF;ADYE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACVJ;;ADYA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCA3CW;ACkCb;;ADWA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACRF;ADUE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACRJ;ADUI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,uBAAA;ACRN;ADUM;EACE,yBAhEQ;EAiER,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBAtEQ;EAuER,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBAzEO;EA0EP,WAAA;EACA,YAAA;ACRR;;ADUA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;ACPF;ADSE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACPJ;ADSI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACPN;ADSI;EACE,WAAA;ACPN;ADSM;EACE,uBAAA;EACA,UAAA;ACPR;ADUI;EACE,WAAA;ACRN;;ADUA;EACE,sCAxHM;EAyHN,eAAA;EACA,gBAAA;EACA,gBAAA;ACPF;ADSE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACPJ;ADSI;EACE,WAAA;ACPN","file":"index.css"}
|
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAWA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACVF;;ADYA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACXF;;ADaA;EACE,sCA5BM;EA6BN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACVF;ADYE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACVJ;;ADYA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCA3CW;ACkCb;;ADWA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACRF;ADUE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACRJ;ADUI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACRN;ADUM;EACE,YAAA;EACA,uBAAA;ACRR;ADUM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACRR;ADUM;EACE,yBAzEQ;EA0ER,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBA/EQ;EAgFR,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBAlFO;EAmFP,WAAA;EACA,YAAA;ACRR;;ADUA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;ACPF;ADSE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACPJ;ADSI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACPN;ADSM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBApHY;EAqHZ,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBAvHW;EAwHX,WAAA;EACA,YAAA;ACPR;ADSI;EACE,WAAA;ACPN;ADSM;EACE,uBAAA;EACA,UAAA;ACPR;ADUI;EACE,WAAA;ACRN;;ADUA;EACE,4BAAA;EACA,YAAA;EACA,kCAjJW;EAkJX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACPF;;ADSA;EACE,sCAxJM;EAyJN,eAAA;EACA,gBAAA;EACA,gBAAA;ACNF;ADQE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACNJ;ADQI;EACE,WAAA;ACNN","file":"index.css"}
|
66
index.html
|
@ -1,13 +1,34 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
<link
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
rel="apple-touch-icon"
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
sizes="180x180"
|
||||||
<link rel="manifest" href="/site.webmanifest" />
|
href="/favicon/apple-touch-icon.png"
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
|
/>
|
||||||
<meta name="msapplication-TileColor" content="#da532c" />
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="/favicon/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/favicon/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||||
|
<link
|
||||||
|
rel="mask-icon"
|
||||||
|
href="/favicon/safari-pinned-tab.svg"
|
||||||
|
color="#5bbad5"
|
||||||
|
/>
|
||||||
|
<link rel="shortcut icon" href="/favicon/favicon.ico" />
|
||||||
|
<meta name="msapplication-TileColor" content="#00aba9" />
|
||||||
|
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
|
||||||
<meta name="theme-color" content="#ffffff" />
|
<meta name="theme-color" content="#ffffff" />
|
||||||
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>eldroW</title>
|
<title>eldroW</title>
|
||||||
|
@ -19,6 +40,11 @@
|
||||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
|
||||||
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
@ -29,18 +55,18 @@
|
||||||
<div class="game">
|
<div class="game">
|
||||||
<div class="board" id="board">
|
<div class="board" id="board">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="cell absent" id="Y">Y</div>
|
<div class="cell"></div>
|
||||||
<div class="cell present" id="R">R</div>
|
<div class="cell"></div>
|
||||||
<div class="cell absent" id="R">R</div>
|
<div class="cell"></div>
|
||||||
<div class="cell absent" id="U">U</div>
|
<div class="cell"></div>
|
||||||
<div class="cell absent" id="C">C</div>
|
<div class="cell"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="cell" id="R">R</div>
|
<div class="cell"></div>
|
||||||
<div class="cell" id="E">E</div>
|
<div class="cell"></div>
|
||||||
<div class="cell" id="T">T</div>
|
<div class="cell"></div>
|
||||||
<div class="cell" id="A">A</div>
|
<div class="cell"></div>
|
||||||
<div class="cell" id="W">W</div>
|
<div class="cell"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="cell"></div>
|
<div class="cell"></div>
|
||||||
|
@ -96,7 +122,7 @@
|
||||||
<div class="letter" id="A">A</div>
|
<div class="letter" id="A">A</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="letter" id="backspace">ENTER</div>
|
<div class="letter" id="enter">ENTER</div>
|
||||||
<div class="letter" id="M">M</div>
|
<div class="letter" id="M">M</div>
|
||||||
<div class="letter" id="N">N</div>
|
<div class="letter" id="N">N</div>
|
||||||
<div class="letter" id="B">B</div>
|
<div class="letter" id="B">B</div>
|
||||||
|
@ -132,6 +158,12 @@
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
src="https://cdn.jsdelivr.net/npm/toastify-js"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
|
||||||
<script src="lists.js"></script>
|
<script src="lists.js"></script>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
209
index.js
|
@ -1,40 +1,205 @@
|
||||||
const LENGTH = 5;
|
const LENGTH = 5;
|
||||||
const GUESSES = LENGTH + 1;
|
const GUESSES = LENGTH + 1;
|
||||||
|
|
||||||
|
let guesses = [];
|
||||||
|
let running = true;
|
||||||
|
let currentGuess = "";
|
||||||
|
let lockedGuess = "";
|
||||||
|
let runningAnim = false;
|
||||||
|
|
||||||
let hashDate = (date) => {
|
let hashDate = (date) => {
|
||||||
return date.getFullYear() + date.getMonth() + date.getDate();
|
return date.getFullYear() + date.getMonth() + date.getDate();
|
||||||
};
|
};
|
||||||
|
|
||||||
const currentWord = ANSWERS[hashDate(new Date()) % ANSWERS.length];
|
const currentWord =
|
||||||
|
ANSWERS[hashDate(new Date()) % ANSWERS.length].toUpperCase();
|
||||||
|
|
||||||
// initialize board
|
let startGame = () => {
|
||||||
|
guesses = [];
|
||||||
|
let boardElement = document.getElementById("board");
|
||||||
|
|
||||||
let guesses = [];
|
boardElement.innerHTML = "";
|
||||||
let boardElement = document.getElementById("board");
|
|
||||||
|
|
||||||
boardElement.innerHTML = "";
|
for (let i = 0; i < GUESSES; i++) {
|
||||||
|
let row = document.createElement("div");
|
||||||
|
row.classList.add("row");
|
||||||
|
row.id = "row" + i;
|
||||||
|
boardElement.appendChild(row);
|
||||||
|
|
||||||
for (let i = 0; i < GUESSES; i++) {
|
for (let j = 0; j < LENGTH; j++) {
|
||||||
let row = document.createElement("div");
|
let cell = document.createElement("div");
|
||||||
row.classList.add("row");
|
cell.classList.add("cell");
|
||||||
row.id = "row" + i;
|
cell.id = "row" + i + "cell" + j;
|
||||||
boardElement.appendChild(row);
|
cell.classList.add("unguessed");
|
||||||
|
row.appendChild(cell);
|
||||||
for (let i = 0; i < LENGTH; i++) {
|
}
|
||||||
let cell = document.createElement("div");
|
|
||||||
cell.classList.add("cell");
|
|
||||||
cell.id = "cell" + i;
|
|
||||||
row.appendChild(cell);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
let running = true;
|
running = true;
|
||||||
let currentGuess = "";
|
currentGuess = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
startGame();
|
||||||
|
|
||||||
let updateBoard = () => {
|
let updateBoard = () => {
|
||||||
let row = document.getElementById("row" + guesses.length);
|
if (runningAnim) return;
|
||||||
for (let i = LENGTH; i > 0; i--) {
|
for (let i = 0; i < LENGTH; i++) {
|
||||||
let cell = document.getElementById("cell" + i);
|
let cell = document.getElementById(
|
||||||
|
"row" + guesses.length + "cell" + (LENGTH - i - 1)
|
||||||
|
);
|
||||||
cell.innerHTML = currentGuess[i] || "";
|
cell.innerHTML = currentGuess[i] || "";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let addLetter = (letter) => {
|
||||||
|
if (currentGuess.length < LENGTH) currentGuess += letter;
|
||||||
|
};
|
||||||
|
|
||||||
|
let handleButtonPress = (button) => {
|
||||||
|
if (!running || runningAnim) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (button.id === "backspace") {
|
||||||
|
currentGuess = currentGuess.slice(0, -1);
|
||||||
|
} else if (button.id === "enter") {
|
||||||
|
handleGuess();
|
||||||
|
} else {
|
||||||
|
addLetter(button.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBoard();
|
||||||
|
};
|
||||||
|
|
||||||
|
onkeyup = (event) => {
|
||||||
|
if (!running || runningAnim) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === "Backspace") {
|
||||||
|
currentGuess = currentGuess.slice(0, -1);
|
||||||
|
} else if (event.key === "Enter") {
|
||||||
|
handleGuess();
|
||||||
|
} else {
|
||||||
|
addLetter(event.key.toUpperCase());
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBoard();
|
||||||
|
};
|
||||||
|
|
||||||
|
let buttons = document.getElementsByClassName("letter");
|
||||||
|
|
||||||
|
for (let button of buttons) {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
handleButtonPress(button);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let handleGuess = () => {
|
||||||
|
if (currentGuess.length !== LENGTH) {
|
||||||
|
Toastify({
|
||||||
|
text: "Not enough letters",
|
||||||
|
duration: 1000,
|
||||||
|
newWindow: false,
|
||||||
|
close: false,
|
||||||
|
gravity: "top",
|
||||||
|
position: "center",
|
||||||
|
stopOnFocus: false,
|
||||||
|
className: "toast",
|
||||||
|
}).showToast();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!WORDS.includes(currentGuess.toLowerCase())) {
|
||||||
|
Toastify({
|
||||||
|
text: "Not in word list",
|
||||||
|
duration: 1000,
|
||||||
|
newWindow: false,
|
||||||
|
close: false,
|
||||||
|
gravity: "top",
|
||||||
|
position: "center",
|
||||||
|
stopOnFocus: false,
|
||||||
|
className: "toast",
|
||||||
|
}).showToast();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lockedGuess = currentGuess;
|
||||||
|
runningAnim = true;
|
||||||
|
currentGuess = "";
|
||||||
|
|
||||||
|
for (let i = 0; i < LENGTH; i++) {
|
||||||
|
let cell = document.getElementById(
|
||||||
|
"row" + guesses.length + "cell" + (LENGTH - i - 1)
|
||||||
|
);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
cell.classList.remove("unguessed");
|
||||||
|
}, 50 * (LENGTH - i));
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
cell.classList.add("guessed");
|
||||||
|
|
||||||
|
if (lockedGuess[i] === currentWord[i]) {
|
||||||
|
cell.classList.add("correct");
|
||||||
|
document
|
||||||
|
.getElementById(lockedGuess[i].toUpperCase())
|
||||||
|
.classList.add("correct");
|
||||||
|
} else if (currentWord.includes(lockedGuess[i])) {
|
||||||
|
cell.classList.add("present");
|
||||||
|
document
|
||||||
|
.getElementById(lockedGuess[i].toUpperCase())
|
||||||
|
.classList.add("present");
|
||||||
|
} else {
|
||||||
|
cell.classList.add("absent");
|
||||||
|
document
|
||||||
|
.getElementById(lockedGuess[i].toUpperCase())
|
||||||
|
.classList.add("absent");
|
||||||
|
}
|
||||||
|
}, 300 * (i + 1) + 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lockedGuess === currentWord) {
|
||||||
|
running = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
Toastify({
|
||||||
|
text: "You win!",
|
||||||
|
duration: 1000,
|
||||||
|
newWindow: false,
|
||||||
|
close: false,
|
||||||
|
gravity: "top",
|
||||||
|
position: "center",
|
||||||
|
stopOnFocus: false,
|
||||||
|
className: "toast",
|
||||||
|
}).showToast();
|
||||||
|
confetti({
|
||||||
|
particleCount: 100,
|
||||||
|
spread: 70,
|
||||||
|
origin: { y: 0.6 },
|
||||||
|
});
|
||||||
|
}, 2000);
|
||||||
|
} else if (guesses.length === GUESSES) {
|
||||||
|
running = false;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
Toastify({
|
||||||
|
text: "You lose!",
|
||||||
|
duration: 1000,
|
||||||
|
newWindow: false,
|
||||||
|
close: false,
|
||||||
|
gravity: "top",
|
||||||
|
position: "center",
|
||||||
|
stopOnFocus: false,
|
||||||
|
className: "toast",
|
||||||
|
}).showToast();
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
guesses.push(lockedGuess);
|
||||||
|
lockedGuess = "";
|
||||||
|
runningAnim = false;
|
||||||
|
updateBoard();
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
34
index.sass
|
@ -63,7 +63,16 @@ header
|
||||||
align-items: center
|
align-items: center
|
||||||
font-size: 2rem
|
font-size: 2rem
|
||||||
font-weight: 800
|
font-weight: 800
|
||||||
transform: scale(-1, 1)
|
color: white
|
||||||
|
|
||||||
|
&.unguessed
|
||||||
|
color: black
|
||||||
|
transform: scale(-1, 1)
|
||||||
|
|
||||||
|
&.guessed
|
||||||
|
color: black
|
||||||
|
transform: scale(-1, 1)
|
||||||
|
transition: all 0.3s
|
||||||
|
|
||||||
&.correct
|
&.correct
|
||||||
background-color: $color-correct
|
background-color: $color-correct
|
||||||
|
@ -106,6 +115,21 @@ header
|
||||||
transition: all 0.3s
|
transition: all 0.3s
|
||||||
transform: scale(-1, 1)
|
transform: scale(-1, 1)
|
||||||
|
|
||||||
|
&.correct
|
||||||
|
background-color: $key-color-correct !important
|
||||||
|
color: #fff
|
||||||
|
border: none
|
||||||
|
|
||||||
|
&.present
|
||||||
|
background-color: $key-color-present
|
||||||
|
color: #fff
|
||||||
|
border: none
|
||||||
|
|
||||||
|
&.absent
|
||||||
|
background-color: $key-color-absent
|
||||||
|
color: #fff
|
||||||
|
border: none
|
||||||
|
|
||||||
#backspace
|
#backspace
|
||||||
width: 5rem
|
width: 5rem
|
||||||
|
|
||||||
|
@ -117,6 +141,14 @@ header
|
||||||
#enter
|
#enter
|
||||||
width: 5rem
|
width: 5rem
|
||||||
|
|
||||||
|
.toast
|
||||||
|
background: black !important
|
||||||
|
color: white
|
||||||
|
font-family: $sans-serif
|
||||||
|
font-weight: 600
|
||||||
|
border-radius: 5px !important
|
||||||
|
transform: scale(-1, 1) !important
|
||||||
|
|
||||||
footer
|
footer
|
||||||
font-family: $serif
|
font-family: $serif
|
||||||
font-size: 1rem
|
font-size: 1rem
|
||||||
|
|
|
@ -1,32 +0,0 @@
|
||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
||||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
|
||||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
|
|
||||||
preserveAspectRatio="xMidYMid meet">
|
|
||||||
<metadata>
|
|
||||||
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
|
||||||
</metadata>
|
|
||||||
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
|
|
||||||
fill="#000000" stroke="none">
|
|
||||||
<path d="M734 6815 c-108 -23 -222 -81 -322 -163 -96 -79 -199 -255 -227 -389
|
|
||||||
-13 -64 -15 -404 -13 -2820 l3 -2748 27 -80 c40 -116 92 -199 183 -290 89 -90
|
|
||||||
185 -147 315 -187 l75 -23 2690 -3 c1786 -2 2718 1 2775 8 304 36 553 253 627
|
|
||||||
545 17 66 18 215 18 2810 l0 2740 -23 78 c-70 244 -241 425 -477 505 l-80 27
|
|
||||||
-2755 2 c-2262 1 -2766 -1 -2816 -12z m1556 -1220 l0 -895 -890 0 -890 0 0
|
|
||||||
740 c0 707 1 743 19 796 27 75 77 142 141 187 98 68 66 66 883 66 l737 1 0
|
|
||||||
-895z m2120 -5 l0 -900 -267 0 c-148 0 -548 3 -890 7 l-623 6 0 894 0 893 890
|
|
||||||
0 890 0 0 -900z m1912 868 c112 -52 195 -159 217 -282 7 -39 11 -301 11 -768
|
|
||||||
l0 -708 -900 0 -900 0 0 895 0 895 758 -2 757 -3 57 -27z m-4022 -2365 c0
|
|
||||||
-148 -3 -548 -7 -890 l-6 -623 -889 0 -888 0 0 890 0 890 895 0 895 0 0 -267z
|
|
||||||
m1442 257 l678 0 0 -312 c0 -172 -3 -573 -7 -890 l-6 -578 -889 0 -888 0 0
|
|
||||||
273 c0 149 3 553 7 896 l6 624 210 -6 c116 -4 515 -7 889 -7z m2808 -880 l0
|
|
||||||
-890 -900 0 -900 0 0 393 c0 217 3 617 7 890 l6 497 894 0 893 0 0 -890z
|
|
||||||
m-5007 -1230 l747 0 0 -233 c0 -129 -3 -531 -7 -895 l-6 -662 -712 0 c-771 0
|
|
||||||
-776 0 -870 56 -56 32 -117 99 -152 166 l-28 53 -3 764 -2 764 142 -6 c79 -4
|
|
||||||
479 -7 891 -7z m2114 -10 l753 0 0 -890 0 -890 -895 0 -895 0 0 708 c0 389 3
|
|
||||||
792 7 896 l6 189 135 -7 c74 -3 474 -6 889 -6z m2893 -708 c0 -766 -1 -775
|
|
||||||
-50 -871 -30 -60 -108 -131 -180 -165 l-65 -31 -752 -3 -753 -3 0 896 0 895
|
|
||||||
900 0 900 0 0 -718z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.8 KiB |