reduce code!

public/game.js

@@ -48,19 +48,21 @@ const ELEMENTS = {
   DIV: document.createElement('div'),
   A: document.createElement('a'),
 }
+const txt = (str) => document.createTextNode(str)
 
 let KEY_LISTENER_OFF = false
 
 let PIECE_VIEW_FIXED = true
 let PIECE_VIEW_LOOSE = true
 
+
 function addMenuToDom(previewImageUrl) {
   function row (...elements) {
     const row = ELEMENTS.TR.cloneNode(true)
     for (let el of elements) {
       const td = ELEMENTS.TD.cloneNode(true)
       if (typeof el === 'string') {
-        td.appendChild(document.createTextNode(el))
+        td.appendChild(txt(el))
       } else {
         td.appendChild(el)
       }
@@ -104,9 +106,9 @@ function addMenuToDom(previewImageUrl) {
   const nameChangeEl = textinput(16)
   const nameChangeRow = row(label('Name: '), nameChangeEl)
 
-  const kbd = function(txt) {
+  const kbd = function(str) {
     const el = document.createElement('kbd')
-    el.appendChild(document.createTextNode(txt))
+    el.appendChild(txt(str))
     return el
   }
 
@@ -114,7 +116,7 @@ function addMenuToDom(previewImageUrl) {
     const el = ELEMENTS.DIV.cloneNode(true)
     for (const other of els) {
       if (typeof other === 'string') {
-        el.appendChild(document.createTextNode(other))
+        el.appendChild(txt(other))
       } else {
         el.appendChild(other)
       }
@@ -186,10 +188,10 @@ function addMenuToDom(previewImageUrl) {
     togglePreview()
   })
 
-  const opener = (txt, overlay, disableHotkeys = true) => {
+  const opener = (str, overlay, disableHotkeys = true) => {
     const el = ELEMENTS.DIV.cloneNode(true)
     el.classList.add('opener')
-    el.appendChild(document.createTextNode(txt))
+    el.appendChild(txt(str))
     el.addEventListener('click', () => {
       toggle(overlay, disableHotkeys)
     })
@@ -198,7 +200,7 @@ function addMenuToDom(previewImageUrl) {
 
   const homeEl = ELEMENTS.A.cloneNode(true)
   homeEl.classList.add('opener')
-  homeEl.appendChild(document.createTextNode('🧩 Puzzles'))
+  homeEl.appendChild(txt('🧩 Puzzles'))
   homeEl.target = '_blank'
   homeEl.href = '/'
 
@@ -218,36 +220,29 @@ function addMenuToDom(previewImageUrl) {
   menuEl.appendChild(tabsEl)
 
   const scoresTitleEl = ELEMENTS.DIV.cloneNode(true)
-  scoresTitleEl.appendChild(document.createTextNode('Scores'))
+  scoresTitleEl.appendChild(txt('Scores'))
 
   const scoresListEl = ELEMENTS.TABLE.cloneNode(true)
   const updateScoreBoard = (players, ts) => {
     const minTs = ts - 30 * Time.SEC
-
     const actives = players.filter(player => player.ts >= minTs)
     const nonActives = players.filter(player => player.ts < minTs)
 
     actives.sort((a, b) => b.points - a.points)
     nonActives.sort((a, b) => b.points - a.points)
 
-    scoresListEl.innerHTML = ''
+    const _row = (icon, player) => {
-    for (let player of actives) {
+      const r = row(txt(icon), txt(player.name), txt(player.points))
-      const r = row(
-        document.createTextNode('⚡'),
-        document.createTextNode(player.name),
-        document.createTextNode(player.points)
-      )
       r.style.color = player.color
-      scoresListEl.appendChild(r)
+      return r
     }
-    for (let player of nonActives) {
+
-      const r = row(
+    scoresListEl.innerHTML = ''
-        document.createTextNode('💤'),
+    for (const player of actives) {
-        document.createTextNode(player.name),
+      scoresListEl.appendChild(_row('⚡', player))
-        document.createTextNode(player.points)
+    }
-      )
+    for (const player of nonActives) {
-      r.style.color = player.color
+      scoresListEl.appendChild(_row('💤', player))
-      scoresListEl.appendChild(r)
     }
   }
 
@@ -322,150 +317,121 @@ function initme() {
   return ID
 }
 
-class EventAdapter {
+function EventAdapter (canvas, window, viewport) {
-  constructor(canvas, window, viewport) {
+  let events = []
-    this.events = []
-    this._viewport = viewport
-    this._canvas = canvas
 
-    this.LEFT = false
+  let LEFT = false
-    this.RIGHT = false
+  let RIGHT = false
-    this.UP = false
+  let UP = false
-    this.DOWN = false
+  let DOWN = false
-    this.ZOOM_IN = false
+  let ZOOM_IN = false
-    this.ZOOM_OUT = false
+  let ZOOM_OUT = false
-    this.SHIFT = false
+  let SHIFT = false
 
-    canvas.addEventListener('mousedown', this._mouseDown.bind(this))
+  const toWorldPoint = (x, y) => {
-    canvas.addEventListener('mouseup', this._mouseUp.bind(this))
+    const pos = viewport.viewportToWorld({x, y})
-    canvas.addEventListener('mousemove', this._mouseMove.bind(this))
+    return [pos.x, pos.y]
-    canvas.addEventListener('wheel', this._wheel.bind(this))
-
-    window.addEventListener('keydown', (ev) => {
-      if (KEY_LISTENER_OFF) {
-        return
-      }
-      if (ev.key === 'Shift') {
-        this.SHIFT = true
-      } else if (ev.key === 'ArrowUp' || ev.key === 'w' || ev.key === 'W') {
-        this.UP = true
-      } else if (ev.key === 'ArrowDown' || ev.key === 's' || ev.key === 'S') {
-        this.DOWN = true
-      } else if (ev.key === 'ArrowLeft' || ev.key === 'a' || ev.key === 'A') {
-        this.LEFT = true
-      } else if (ev.key === 'ArrowRight' || ev.key === 'd' || ev.key === 'D') {
-        this.RIGHT = true
-      } else if (ev.key === 'q') {
-        this.ZOOM_OUT = true
-      } else if (ev.key === 'e') {
-        this.ZOOM_IN = true
-      }
-    })
-    window.addEventListener('keyup', (ev) => {
-      if (KEY_LISTENER_OFF) {
-        return
-      }
-      if (ev.key === 'Shift') {
-        this.SHIFT = false
-      } else if (ev.key === 'ArrowUp' || ev.key === 'w' || ev.key === 'W') {
-        this.UP = false
-      } else if (ev.key === 'ArrowDown' || ev.key === 's' || ev.key === 'S') {
-        this.DOWN = false
-      } else if (ev.key === 'ArrowLeft' || ev.key === 'a' || ev.key === 'A') {
-        this.LEFT = false
-      } else if (ev.key === 'ArrowRight' || ev.key === 'd' || ev.key === 'D') {
-        this.RIGHT = false
-      } else if (ev.key === 'q') {
-        this.ZOOM_OUT = false
-      } else if (ev.key === 'e') {
-        this.ZOOM_IN = false
-      }
-    })
   }
 
-  addEvent(event) {
+  const mousePos = (ev) => toWorldPoint(ev.offsetX, ev.offsetY)
-    this.events.push(event)
+  const canvasCenter = () => toWorldPoint(canvas.width / 2, canvas.height / 2)
+
+  const key = (state, ev) => {
+    if (KEY_LISTENER_OFF) {
+      return
+    }
+    if (ev.key === 'Shift') {
+      SHIFT = state
+    } else if (ev.key === 'ArrowUp' || ev.key === 'w' || ev.key === 'W') {
+      UP = state
+    } else if (ev.key === 'ArrowDown' || ev.key === 's' || ev.key === 'S') {
+      DOWN = state
+    } else if (ev.key === 'ArrowLeft' || ev.key === 'a' || ev.key === 'A') {
+      LEFT = state
+    } else if (ev.key === 'ArrowRight' || ev.key === 'd' || ev.key === 'D') {
+      RIGHT = state
+    } else if (ev.key === 'q') {
+      ZOOM_OUT = state
+    } else if (ev.key === 'e') {
+      ZOOM_IN = state
+    }
   }
 
-  consumeAll() {
+  canvas.addEventListener('mousedown', (ev) => {
-    if (this.events.length === 0) {
+    if (ev.button === 0) {
+      addEvent([Protocol.INPUT_EV_MOUSE_DOWN, ...mousePos(ev)])
+    }
+  })
+
+  canvas.addEventListener('mouseup', (ev) => {
+    if (ev.button === 0) {
+      addEvent([Protocol.INPUT_EV_MOUSE_UP, ...mousePos(ev)])
+    }
+  })
+
+  canvas.addEventListener('mousemove', (ev) => {
+    addEvent([Protocol.INPUT_EV_MOUSE_MOVE, ...mousePos(ev)])
+  })
+
+  canvas.addEventListener('wheel', (ev) => {
+    const [x, y] = mousePos(ev)
+    const evt = ev.deltaY < 0
+      ? Protocol.INPUT_EV_ZOOM_IN
+      : Protocol.INPUT_EV_ZOOM_OUT
+    addEvent([evt, x, y])
+  })
+
+  window.addEventListener('keydown', (ev) => key(true, ev))
+  window.addEventListener('keyup', (ev) => key(false, ev))
+
+  const addEvent = (event) => {
+    events.push(event)
+  }
+
+  const consumeAll = () => {
+    if (events.length === 0) {
       return []
     }
-    const all = this.events.slice()
+    const all = events.slice()
-    this.events = []
+    events = []
     return all
   }
 
-  _keydowns() {
+  const createKeyEvents = () => {
-    let amount = this.SHIFT ? 20 : 10
+    let amount = SHIFT ? 20 : 10
     let x = 0
     let y = 0
-    if (this.UP) {
+    if (UP) {
       y += amount
     }
-    if (this.DOWN) {
+    if (DOWN) {
       y -= amount
     }
-    if (this.LEFT) {
+    if (LEFT) {
       x += amount
     }
-    if (this.RIGHT) {
+    if (RIGHT) {
       x -= amount
     }
 
     if (x !== 0 || y !== 0) {
-      this.addEvent([Protocol.INPUT_EV_MOVE, x, y])
+      addEvent([Protocol.INPUT_EV_MOVE, x, y])
     }
 
     // zoom keys
-    const pos = this._viewport.viewportToWorld({
+    if (ZOOM_IN && ZOOM_OUT) {
-      x: this._canvas.width / 2,
-      y: this._canvas.height / 2,
-    })
-    if (this.ZOOM_IN && this.ZOOM_OUT) {
       // cancel each other out
-    } else if (this.ZOOM_IN) {
+    } else if (ZOOM_IN) {
-      this.addEvent([Protocol.INPUT_EV_ZOOM_IN, pos.x, pos.y])
+      addEvent([Protocol.INPUT_EV_ZOOM_IN, ...canvasCenter()])
-    } else if (this.ZOOM_OUT) {
+    } else if (ZOOM_OUT) {
-      this.addEvent([Protocol.INPUT_EV_ZOOM_OUT, pos.x, pos.y])
+      addEvent([Protocol.INPUT_EV_ZOOM_OUT, ...canvasCenter()])
     }
   }
 
-  _mouseDown(e) {
+  return {
-    if (e.button === 0) {
+    addEvent,
-      const pos = this._viewport.viewportToWorld({
+    consumeAll,
-        x: e.offsetX,
+    createKeyEvents,
-        y: e.offsetY,
-      })
-      this.addEvent([Protocol.INPUT_EV_MOUSE_DOWN, pos.x, pos.y])
-    }
-  }
-
-  _mouseUp(e) {
-    if (e.button === 0) {
-      const pos = this._viewport.viewportToWorld({
-        x: e.offsetX,
-        y: e.offsetY,
-      })
-      this.addEvent([Protocol.INPUT_EV_MOUSE_UP, pos.x, pos.y])
-    }
-  }
-
-  _mouseMove(e) {
-    const pos = this._viewport.viewportToWorld({
-      x: e.offsetX,
-      y: e.offsetY,
-    })
-    this.addEvent([Protocol.INPUT_EV_MOUSE_MOVE, pos.x, pos.y])
-  }
-
-  _wheel(e) {
-    const pos = this._viewport.viewportToWorld({
-      x: e.offsetX,
-      y: e.offsetY,
-    })
-    const evt = e.deltaY < 0 ? Protocol.INPUT_EV_ZOOM_IN : Protocol.INPUT_EV_ZOOM_OUT
-    this.addEvent([evt, pos.x, pos.y])
   }
 }
 
@@ -746,7 +712,7 @@ async function main() {
     // handle key downs once per onUpdate
     // this will create Protocol.INPUT_EV_MOVE events if something
     // relevant is pressed
-    evts._keydowns()
+    evts.createKeyEvents()
 
     for (let evt of evts.consumeAll()) {
       if (MODE === MODE_PLAY) {