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
|
'use strict';
const h = Inferno.h;
const GlobalState = {};
// IMPURE
const updateState = (state, update) => Object.keys(update).forEach(
key => {
if (typeof(state[key]) === 'object')
updateState(state[key], update[key]);
else
state[key] = update[key];
});
// IMPURE
const setState = update => {
updateState(GlobalState, update);
Inferno.render(
h(App, {state: GlobalState, setState}),
document.getElementById('root')
);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
* App
*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
// IMPURE
const App = ({state, setState}) => {
const { guessInput, } = state;
return h(GuessInput, {
value: guessInput.value,
isShaking: guessInput.isShaking,
handleInput: updateStateOnEvent(state, handleGuessInputInput),
handleKeyDown: updateStateOnEvent(state, handleGuessInputKeyDown),
});
};
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
* Components
*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
const GuessInput = ({value, isShaking, handleInput, handleKeyDown}) => {
const inputTag = isShaking ? 'input.shaking' : 'input';
return h(inputTag, {
type: 'text',
value,
onInput: handleInput,
onKeyDown: handleKeyDown,
});
};
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
* Event Handlers
*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
// IMPURE
const updateStateOnEvent = (state, handler) =>
event => setState(handler(state, event));
const handleGuessInputInput = (state, event) =>
({ guessInput: { value: event.target.value } });
const handleGuessInputKeyDown = (state, event) => {
const KEYCODE_ENTER = 13;
if (event.keyCode === KEYCODE_ENTER) {
console.log(state.guessInput.value);
return { guessInput: { value: '' } };
}
return {};
};
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
* Document load
*
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
// IMPURE
window.onload = () => {
const initialState = {
guessInput: {
value: '',
isShaking: false,
},
};
setState(initialState);
}
|
