alvierahman90/words
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: alvierahman90:64178c3220ea3fa0ad08fb89faad88cb7026d586
Branches Tags
alvierahman90:main
alvierahman90:shalom
..
compare: alvierahman90:1b075f299d5e43c374c92f1f3c081ace6a0e451b
Branches Tags
alvierahman90:main
alvierahman90:shalom

2 Commits
64178c3220 ... 1b075f299d

Author SHA1 Message Date
Alvie Rahman
1b075f299d
tie keyboard into game 2022-01-28 00:32:26 +00:00
Alvie Rahman
356edb2024
add keyboard 2022-01-27 22:05:10 +00:00
6 changed files with 133 additions and 15 deletions
Show Stats Expand all files Collapse all files

3
.gitmodules vendored
View File

@ -0,0 +1,3 @@
[submodule "Font-Awesome"]
path = Font-Awesome
url = https://github.com/FortAwesome/Font-Awesome.git

1
Font-Awesome Submodule

@ -0,0 +1 @@
Subproject commit afecf2af5d897b763e5e8e28d46aad2f710ccad6

6
Makefile
View File

@ -3,8 +3,14 @@ MIN_FREQUENCY=1
SOURCE_WORDLIST=1_1_all_fullalpha.txt SOURCE_WORDLIST=1_1_all_fullalpha.txt
ALLOWED_TYPELIST=allowed_types ALLOWED_TYPELIST=allowed_types
all: wordlist.js .SUBMODULES
wordlist.js: wordlist.js:
./scripts/gen_wordlist.py ${SOURCE_WORDLIST} ${WORD_LENGTH} ${MIN_FREQUENCY} ${ALLOWED_TYPELIST} > wordlist.js ./scripts/gen_wordlist.py ${SOURCE_WORDLIST} ${WORD_LENGTH} ${MIN_FREQUENCY} ${ALLOWED_TYPELIST} > wordlist.js
clean: clean:
rm -rf wordlist.js rm -rf wordlist.js
.SUBMODULES:
git submodule init
git submodule update

33
game.js
View File

@ -7,13 +7,16 @@ const word = wordlist[Math.floor(Math.random()*wordlist.length)];
var gameCompleted = null var gameCompleted = null
// HTML items // HTML items
const gameContainer = document.getElementById("game_container")
const body = document.getElementsByTagName("body")[0] const body = document.getElementsByTagName("body")[0]
const endScreen = document.getElementById("end_screen") const endScreen = document.getElementById("end_screen")
const endScreenGuesses = document.getElementById("end_screen_guesses") const endScreenGuesses = document.getElementById("end_screen_guesses")
const endScreenMessage = document.getElementById("end_screen_message") const endScreenMessage = document.getElementById("end_screen_message")
const endScreenTime = document.getElementById("end_screen_time") const endScreenTime = document.getElementById("end_screen_time")
const gameContainer = document.getElementById("game_container")
const gridItems = [] const gridItems = []
const kbLetters = Array.from(document.getElementsByClassName("kb_letter")).filter(kbl => kbl.id === '')
const kbEnter = document.getElementById("kb_enter")
const kbBackspace = document.getElementById("kb_backspace")
// helper functions // helper functions
const gridItemId = (row, column) => "grid_item_" + row + "_" + column const gridItemId = (row, column) => "grid_item_" + row + "_" + column
@ -168,17 +171,33 @@ function endGame(won) {
endScreenMessage.innerHTML = "damn. better luck nex time" endScreenMessage.innerHTML = "damn. better luck nex time"
} }
endScreenGuesses.innerHTML = `guesses: ${findCurrentLetterPosition()[0]+1}/${gridHeight}` endScreenGuesses.innerHTML = `guesses used: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
endScreen.style.display = ""; endScreen.style.display = "";
} }
function runClickAnimation(el) {
console.log(el)
el.classList.add("clicked")
setTimeout(() => el.classList.remove("clicked"), 500)
}
// create event listeners // create event listeners
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', e => setNextLetter(e))
console.log(e) kbBackspace.addEventListener('click', () => {
setNextLetter(e) runClickAnimation(kbBackspace)
setNextLetter({code: "Backspace", key: "Backspace"})
})
kbEnter.addEventListener('click', () => {
runClickAnimation(kbEnter)
setNextLetter({code: "Enter", key: "Enter"})
})
kbLetters.forEach(kbl => {
kbl.addEventListener('click', () => {
runClickAnimation(kbl)
setNextLetter({code: kbl.innerHTML, key: kbl.innerHTML })
})
}) })
// start game
init() init()
console.log(word) console.log(word)

46
index.html
View File

@ -3,10 +3,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<title>words</title> <link rel="stylesheet" type="text/css" href="./Font-Awesome/css/all.min.css">
<title>words by alv</title>
</head> </head>
<body> <body>
<h1>words</h1> <h1 style="text-align: center">words by alv</h1>
<div id="game_container"> <div id="game_container">
</div> </div>
@ -16,9 +17,46 @@
<h3 id="end_screen_time"></h3> <h3 id="end_screen_time"></h3>
<p> refresh page to play again </p> <p> refresh page to play again </p>
</div> </div>
<div id="keyboard">
<div class="kb_row" id="kb_row1">
<p class="kb_letter">q</p>
<p class="kb_letter">w</p>
<p class="kb_letter">e</p>
<p class="kb_letter">r</p>
<p class="kb_letter">t</p>
<p class="kb_letter">y</p>
<p class="kb_letter">u</p>
<p class="kb_letter">i</p>
<p class="kb_letter">o</p>
<p class="kb_letter">p</p>
</div>
<div class="kb_row" id="kb_row2">
<p class="kb_letter">a</p>
<p class="kb_letter">s</p>
<p class="kb_letter">d</p>
<p class="kb_letter">f</p>
<p class="kb_letter">g</p>
<p class="kb_letter">h</p>
<p class="kb_letter">j</p>
<p class="kb_letter">k</p>
<p class="kb_letter">l</p>
</div>
<div class="kb_row" id="kb_row3">
<p class="kb_letter" id="kb_enter"><i class="fas fa-sign-in-alt"></i></p>
<p class="kb_letter">z</p>
<p class="kb_letter">x</p>
<p class="kb_letter">c</p>
<p class="kb_letter">v</p>
<p class="kb_letter">b</p>
<p class="kb_letter">n</p>
<p class="kb_letter">m</p>
<p class="kb_letter" id="kb_backspace"><i class="fas fa-backspace"></i></p>
</div>
</div>
<div id="footer">
<p>built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p> <p>built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p>
<p>thanks to Lancaster University for the wordlist and you can find it <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a></p> <p>thanks to Lancaster University for the wordlist, which you can find <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a> </p>
</div>
<script type="application/javascript" src="wordlist.js"></script> <script type="application/javascript" src="wordlist.js"></script>
<script type="application/javascript" src="game.js"></script> <script type="application/javascript" src="game.js"></script>

59
styles.css
View File

@ -15,6 +15,11 @@
--brown: #a16946; --brown: #a16946;
} }
body {
font-family: monospace;
margin-top: 0;
}
#game_container { #game_container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -26,19 +31,23 @@
margin: 0 auto; margin: 0 auto;
} }
#footer { margin-top: 4em; }
.grid_row { .grid_row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.grid_item { .grid_item {
width: 3em; width: 8vw;
height: 3em; max-width: 3em;
height: 8vw;
max-height: 3em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 0.2em solid var(--default-fg); border: 0.2em solid var(--default-fg);
margin: 1em; margin: 3vw;
text-transform: uppercase; text-transform: uppercase;
font-weight: 800; font-weight: 800;
transition: 0.5s; transition: 0.5s;
@ -61,6 +70,10 @@
animation: incorrect 0.5s; animation: incorrect 0.5s;
} }
.clicked {
animation: clicked 0.5s;
}
@keyframes correct { @keyframes correct {
0% { 0% {
background: var(--default-bg); background: var(--default-bg);
@ -85,6 +98,18 @@
} }
} }
@keyframes clicked {
0% {
background: var(--default-bg);
}
50% {
background: var(--dark-bg);
}
100% {
background: var(--default-bg);
}
}
#end_screen { #end_screen {
position: fixed; position: fixed;
height: 100vh; height: 100vh;
@ -100,4 +125,30 @@
#end_screen * { #end_screen * {
width: fit-content; width: fit-content;
} }
#keyboard {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.kb_row {
display: flex;
}
.kb_row * {
width: min(10vw, 3em);
height: min(10vw, 3em);
text-align: center;
margin: 0;
}
.kb_filler {
width: min(5vw, 1.5em);
}
.kb_letter {
line-height: min(10vw, 3em)
}