-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
114 lines (103 loc) · 3.68 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// Initialising game
const game = document.getElementById(`game`);
const toggleButton = document.getElementById(`toggle-play`);
const input = document.getElementById(`game-input`);
const correctWords = document.getElementById(`correct-words`);
const score = document.getElementById(`points`);
const errorBox = document.getElementById(`error`);
const activeLetters = [];
let intervalId = false;
let cleanupTimeoutId = false;
let errorTimeoutId = false;
let foundWords = JSON.parse(localStorage.getItem(`found-words`)) || {} // { [word]: foundCount } e.g. { hamster: 2 }
const startingScore = Object.keys(foundWords)
.reduce((runningScore, word) => runningScore + (word.length * foundWords[word]), 0) || 0
correctWords.innerHTML = Object.keys(foundWords)
.reverse()
.map(word => `<span>${word}</span>`)
.join(``)
score.innerText = startingScore.toString()
if (typeof dictionary === `undefined`) {
console.error(`Could not initialise dictionary`)
errorBox.innerText = `Error! Could not load dictionary.`
start.disabled = true
stop.disabled = true
}
// constants
const alphabet = [`a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`, `j`, `k`, `l`, `m`, `n`, `o`, `p`, `q`, `r`, `s`, `t`, `u`, `v`, `w`, `x`, `y`, `z`]
const weightedLetters = [`a`, `e`, `i`, `o`, `u`, `s`]
const randomLetterList = [...alphabet, ...weightedLetters, ...weightedLetters]
const animationTime = 4000;
// Game Logic
const stopGame = () => {
if (intervalId) {
clearInterval(intervalId)
intervalId = false
input.blur()
cleanupTimeoutId = setTimeout(() => {
game.innerHTML = ``
cleanupTimeoutId = false
}, animationTime)
}
toggleButton.innerText = `Start`
}
const startGame = () => {
if (cleanupTimeoutId) clearTimeout(cleanupTimeoutId)
intervalId = setInterval(() => {
const randomLetter = randomLetterList[Math.floor(Math.random() * randomLetterList.length)];
const randomPosition = Math.floor(Math.random() * 270) / 10;
game.insertAdjacentHTML(
`afterbegin`,
`<div class="falling-letter" style="left: ${randomPosition}rem">${randomLetter}</div>`
)
activeLetters.push(randomLetter)
setTimeout(() => {
activeLetters.shift()
}, animationTime)
}, 400)
toggleButton.innerText = `Pause`
input.focus()
}
const toggleGame = () => {
if (intervalId) stopGame()
else startGame()
}
toggleButton.addEventListener(`click`, toggleGame)
document.addEventListener(`keydown`, (e) => {
if (e.code === `Space`) {
e.preventDefault()
toggleGame()
} else if (intervalId && e.code === `Escape`) {
stopGame()
}
})
input.addEventListener(`keydown`, (e) => {
if (e.key === `Enter`) {
const attempt = input.value.trim().toLowerCase()
if (attempt.length > 3 && dictionary.includes(attempt.toUpperCase())) {
input.value = ``
correctWords.insertAdjacentHTML(`afterbegin`, `<span>${attempt}</span>`)
foundWords = {...foundWords, [attempt]: foundWords[attempt] || 1 }
localStorage.setItem(`found-words`, JSON.stringify(foundWords))
score.innerText = `${parseInt(score.innerText) + attempt.length}`
} else {
// else do nothing
e.preventDefault()
console.log(attempt)
if (attempt) {
if (errorTimeoutId) clearTimeout(errorTimeoutId)
if (attempt.length > 3) {
errorBox.innerText = `${attempt} isn't in our dictionary`
} else {
errorBox.innerText = `must be at least 4 letters long`
}
errorTimeoutId = setTimeout(() => {
errorBox.innerText = ``
errorTimeoutId = false;
}, 1500)
}
}
} else if (e.code === `Space` || (e.metaKey === false && alphabet.includes(e.key) && !activeLetters.includes(e.key))) {
e.preventDefault()
}
})