1 | let {addIndex, chain, curry, map, range} = require("ramda")
|
2 | let snabbdom = require("../../snabbdom")
|
3 | let h = require("snabbdom/h")
|
4 | let hh = require("hyperscript-helpers")
|
5 |
|
6 | let {div, span, p} = hh(h)
|
7 |
|
8 | let patch = snabbdom.init([
|
9 | require("snabbdom/modules/style"),
|
10 | require("snabbdom/modules/attributes"),
|
11 | require("snabbdom/modules/props"),
|
12 | ])
|
13 |
|
14 | let mapi = addIndex(map)
|
15 | let chaini = addIndex(chain)
|
16 |
|
17 | let board1 = [
|
18 | [["A1", 0], ["B1", 0]],
|
19 | [["C1", 0], ["D1", 0]],
|
20 | ]
|
21 |
|
22 | let board2 = [
|
23 | [["A2", 1], ["B2", 0]],
|
24 | [["C2", 0], ["D2", 0]],
|
25 | ]
|
26 |
|
27 |
|
28 | let renderCell = curry((i, j, cell) => {
|
29 | if (cell[1] == 0) {
|
30 | return span(".cell", [
|
31 | span({attrs: {"data-state": 0}}, [cell[0]])
|
32 | ])
|
33 | } else {
|
34 | return span(".cell", [
|
35 | p({attrs: {"data-state": 1}}, [cell[0]])
|
36 | ])
|
37 | }
|
38 | })
|
39 |
|
40 |
|
41 | let renderBoard = (board) => {
|
42 | let rowsM = board.length
|
43 | let colsN = board[0] ? board[0].length : 0
|
44 | return div(".board",
|
45 | chaini((r, i) => mapi((c, j) => renderCell(i, j, c), r), board)
|
46 | )
|
47 | }
|
48 |
|
49 | let vnode = renderBoard(board1)
|
50 |
|
51 | let container = document.getElementById("app")
|
52 |
|
53 | patch(container, vnode)
|
54 |
|
55 | setTimeout(() => {
|
56 | let vnode2 = renderBoard(board2)
|
57 | console.log(vnode);
|
58 | console.log(vnode2);
|
59 | patch(vnode, vnode2)
|
60 | vnode = vnode2
|
61 | }, 3000)
|