-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
116 lines (97 loc) · 2.3 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
114
115
116
import { app } from "hyperapp";
import {
div,
h1,
h2,
ul,
li,
span,
input,
label,
form,
button
} from "@hyperapp/html";
import { get } from "@hyperapp/http";
import { targetValue, preventDefault } from "@hyperapp/events";
const mdash = "\u2014";
const MAX_BAD_GUESSES = 7;
// UTILITIES
const contains = (list, item) => list.indexOf(item) > -1;
// HELPERS
const isGuessed = (letter, state) => contains(state.guesses, letter);
const isInWord = (letter, state) => contains(state.word, letter);
const badGuesses = state =>
state.guesses.filter(guess => !isInWord(guess, state));
const isVictorious = state =>
state.word.every(letter => isGuessed(letter, state));
const isGameOver = state => badGuesses(state).length >= MAX_BAD_GUESSES;
// EFFECTS
// ACTIONS
const GuessLetter = state => ({
...state,
guesses: state.guesses.concat([state.guessedLetter]),
guessedLetter: ""
});
const SetGuessedLetter = (state, letter) => ({
...state,
guessedLetter: letter
});
const SetWord = (state, { word }) => ({
...state,
word: word.split("")
});
// VIEWS
const WordLetter = (letter, guessed) =>
span({ class: "letter" }, guessed ? letter : mdash);
const Word = state =>
h1(
{},
state.word.map(letter => WordLetter(letter, isGuessed(letter, state)))
);
const BadGuesses = state => [
h2({}, "Your Guesses:"),
ul(
{ class: "guesses" },
badGuesses(state).map(guess => li({ class: "guess" }, guess))
)
];
const UserInput = letter =>
form({ onSubmit: preventDefault(GuessLetter) }, [
label({}, "Your guess:"),
,
input({
class: "input",
onInput: [SetGuessedLetter, targetValue],
type: "text",
value: letter,
maxlength: 1
}),
button({ type: "submit" }, "Guess!")
]);
const getWord = () =>
get({
url: `https://adamdawkins.uk/randomword.json`,
expect: "json",
action: SetWord
});
// THE APP
app({
init: [
{
word: [],
guesses: [],
guessedLetter: ""
},
getWord()
],
view: state =>
div(
{},
isGameOver(state)
? h1({}, `Game Over! The word was "${state.word.join("")}"`)
: isVictorious(state)
? [h1({}, "You Won!"), Word(state)]
: [UserInput(state.guessedLetter), Word(state), BadGuesses(state)]
),
node: document.getElementById("app")
});