Init

index.html

@@ -0,0 +1,4 @@
+<meta charset=utf8>
+<link rel="stylesheet" href="style.css">
+<script src=diffDOM.js></script>
+<script src=src/index.js type=module></script>

src/display.js

@@ -0,0 +1,45 @@
+export class Display {
+  constructor(baseUrl, dispatch, target) {
+    this.baseUrl = baseUrl
+    this.target = target
+    target.addEventListener('click', e => {
+      let target = e.target
+      while (target.nodeName !== 'A') {
+        target = target.parentNode
+        if (!target) return
+      }
+      window.history.pushState(null, "", target.href)
+      dispatch(target.getAttribute('href'))
+      e.preventDefault()
+    })
+  }
+  render(state) {
+    const target = document.createElement('div')
+    target.className = 'wrapper'
+    const field = document.createElement('ul')
+    field.className = 'items'
+
+    for (const item of state.items) {
+      const dom = document.createElement('li')
+      const a = document.createElement('a')
+      const action = item.state == 'face-down' ? 'flip' : 'show'
+      a.href = `/${item.id}/${action}`
+      dom.className = item.state
+      dom.appendChild(a)
+      field.appendChild(dom)
+    }
+    target.appendChild(field)
+    if (state.show !== null) {
+      const wrapper = document.createElement('a')
+      wrapper.href = '/'
+      const fullview = document.createElement('div')
+      wrapper.className = 'fullview'
+      wrapper.appendChild(fullview)
+      target.appendChild(wrapper)
+    }
+
+    const dd = new diffDOM.DiffDOM()
+    const diff = dd.diff(this.target, target)
+    dd.apply(this.target, diff)
+  }
+}

src/index.js

@@ -0,0 +1,38 @@
+import {Display} from './display.js'
+
+const target = document.createElement('div')
+
+const state = {items: [], show: null }
+for (let i = 0; i < 16; ++i) {
+  state.items.push({id: i, state: 'face-down'})
+}
+
+class Actions {
+  flip(id) {
+    state.items[id].state = 'face-up'
+  }
+  show(id) {
+    state.show = id
+  }
+  reset() {
+    state.show = null
+  }
+}
+const actions = new Actions
+
+let display
+const dispatch = target => {
+  const match = target.match(/\/([^/]+)\/([^/]+)/)
+  if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) {
+    actions[match[2]](match[1])
+  } else actions.reset()
+  display.render(state)
+}
+window.onpopstate = e => {
+  dispatch(document.location.search)
+}
+display = new Display('', dispatch, target)
+
+dispatch(document.location.search)
+document.body.appendChild(target)
+

style.css

@@ -0,0 +1,55 @@
+body {
+  background-color: #e2eff3;
+  margin: 0;
+}
+
+.wrapper {
+  max-width: 70em;
+  margin: 0 auto;
+  background-color: #FFC63F;
+}
+
+.items {
+  list-style: none;
+  margin: 0;
+}
+
+.items > li {
+  display: inline-block;
+}
+
+.items > li a {
+  width: 8em;
+  height: 8em;
+  background: #D66C00;
+  margin: 2em;
+  border-radius: 4em;
+  display: block;
+}
+
+.items > li a:hover {
+  background: #f39a3f;
+}
+
+.items > li.face-up a {
+  background-color: #ed8112;
+}
+
+.fullview {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-color: #858c8f90;
+  padding: 1em;
+  box-sizing: border-box;
+  cursor: default;
+}
+.fullview > div {
+  background-color: #858c8f;
+  width: 20em;
+  margin: 5em auto;
+  position: relative;
+  height: 30em;
+}