game stuff

2020-11-25 22:03:35 +01:00 · 2020-11-25 22:03:35 +01:00 · e75cd7406f
commit e75cd7406f
parent 07da40dce7
20 changed files with 1527 additions and 387 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 /server/node_modules
 /server/config.js
+/data
--- a/common/GameCommon.js
+++ b/common/GameCommon.js
@ -1,4 +1,5 @@
 import Geometry from './Geometry.js'
+import Util from './Util.js'

 const GAMES = {}

@ -10,13 +11,21 @@ function setGame(gameId, game) {
  GAMES[gameId] = game
 }

-function addPlayer(gameId, playerId, name) {
+function addPlayer(gameId, playerId) {
+  const ts = Util.timestamp()
+  if (!GAMES[gameId].players[playerId]) {
    GAMES[gameId].players[playerId] = {
      id: playerId,
      x: 0,
      y: 0,
-    down: false,
-    name: name,
+      d: 0, // mouse down
+      name: 'anon',
+      color: '#ffffff',
+      points: 0,
+      ts,
+    }
+  } else {
+    changePlayer(gameId, playerId, { ts })
  }
  GAMES[gameId].evtInfos[playerId] = {
    _last_mouse: null,
@ -32,6 +41,14 @@ function addSocket(gameId, socket) {
  }
 }

+function removeSocket(gameId, socket) {
+  GAMES[gameId].sockets = GAMES[gameId].sockets.filter(s => s !== socket)
+}
+
+function getAllGames() {
+  return GAMES
+}
+
 function get(gameId) {
  return GAMES[gameId]
 }
@ -294,10 +311,23 @@ function handleInput(gameId, playerId, input) {
    }
  }

-  let [type, x, y] = input
-  let pos = {x, y}
-  if (type === 'down') {
-    changePlayer(gameId, playerId, { down: true })
+  const ts = Util.timestamp()
+
+  const type = input[0]
+  if (type === 'player_color') {
+    const color = input[1]
+    changePlayer(gameId, playerId, { color, ts })
+    _playerChange()
+  } else if (type === 'player_name') {
+    const name = `${input[1]}`.substr(0, 16)
+    changePlayer(gameId, playerId, { name, ts })
+    _playerChange()
+  } else if (type === 'down') {
+    const x = input[1]
+    const y = input[2]
+    const pos = {x, y}
+
+    changePlayer(gameId, playerId, { d: 1, ts })
    _playerChange()
    evtInfo._last_mouse_down = pos

@ -311,9 +341,14 @@ function handleInput(gameId, playerId, input) {
      setTilesOwner(gameId, tileIdxs, playerId)
      _tileChanges(tileIdxs)
    }
+    evtInfo._last_mouse = pos

  } else if (type === 'move') {
-    changePlayer(gameId, playerId, pos)
+    const x = input[1]
+    const y = input[2]
+    const pos = {x, y}
+
+    changePlayer(gameId, playerId, {x, y, ts})
    _playerChange()

    if (evtInfo._last_mouse_down !== null) {
@ -329,8 +364,14 @@ function handleInput(gameId, playerId, input) {

      evtInfo._last_mouse_down = pos
    }
+    evtInfo._last_mouse = pos
+
  } else if (type === 'up') {
-    changePlayer(gameId, playerId, { down: false })
+    const x = input[1]
+    const y = input[2]
+    const pos = {x, y}
+
+    changePlayer(gameId, playerId, { d: 0, ts })
    _playerChange()
    evtInfo._last_mouse_down = null

@ -349,6 +390,7 @@ function handleInput(gameId, playerId, input) {
        // Snap the tile to the final destination
        moveTilesDiff(gameId, tileIdxs, diff)
        finishTiles(gameId, tileIdxs)
+        changePlayer(gameId, playerId, { points: players[playerId].points + tileIdxs.length })
        _tileChanges(tileIdxs)
      } else {
        // Snap to other tiles
@ -392,8 +434,11 @@ function handleInput(gameId, playerId, input) {
        }
      }
    }
-  }
    evtInfo._last_mouse = pos
+  } else {
+    changePlayer(gameId, playerId, { ts })
+    _playerChange()
+  }

  return changes
 }
@ -404,7 +449,9 @@ export default {
  exists,
  addPlayer,
  addSocket,
+  removeSocket,
  get,
+  getAllGames,
  getSockets,
  handleInput,
 }
--- a/common/Util.js
+++ b/common/Util.js
@ -20,9 +20,23 @@ export const shuffle = (array) => {
  return arr
 }

+export const timestamp = () => {
+  const d = new Date();
+  return Date.UTC(
+    d.getUTCFullYear(),
+    d.getUTCMonth(),
+    d.getUTCDate(),
+    d.getUTCHours(),
+    d.getUTCMinutes(),
+    d.getUTCSeconds(),
+    d.getUTCMilliseconds(),
+  )
+}
+
 export default {
  uniqId,
  randomInt,
  choice,
  shuffle,
+  timestamp,
 }
--- a/game/Camera.js
+++ b/game/Camera.js
@ -9,7 +9,7 @@ export default class Camera {
        this.height = canvas.height

        this.zoom = 1
-        this.minZoom = .2
+        this.minZoom = .1
        this.maxZoom = 6
        this.zoomStep = .05
    }
@ -44,11 +44,11 @@ export default class Camera {
    }

    zoomOut() {
-        return this.setZoom(this.zoom - this.zoomStep)
+        return this.setZoom(this.zoom - this.zoomStep * this.zoom)
    }

    zoomIn() {
-        return this.setZoom(this.zoom + this.zoomStep)
+        return this.setZoom(this.zoom + this.zoomStep * this.zoom)
    }

    /**
--- a/game/Communication.js
+++ b/game/Communication.js
@ -15,13 +15,13 @@ function send(message) {

 let clientSeq
 let events
-function connect(gameId, clientId, name) {
+function connect(gameId, clientId) {
  clientSeq = 0
  events = {}
  conn = new WsClient(WS_ADDRESS, clientId + '|' + gameId)
  return new Promise(r => {
    conn.connect()
-    send([Protocol.EV_CLIENT_INIT, name])
+    send([Protocol.EV_CLIENT_INIT])
    conn.onSocket('message', async ({ data }) => {
      const msg = JSON.parse(data)
      const msgType = msg[0]
--- a/game/Graphics.js
+++ b/game/Graphics.js
@ -1,7 +1,7 @@
 function createCanvas(width = 0, height = 0) {
    const c = document.createElement('canvas')
-    c.width = width === 0 ? window.innerWidth : width
-    c.height = height === 0 ? window.innerHeight : height
+    c.width = width
+    c.height = height
    return c
 }

@ -29,9 +29,26 @@ async function createBitmap(width, height, color) {
  return await createImageBitmap(c)
 }

+async function colorize(image, mask, color) {
+  const c = createCanvas(image.width, image.height)
+  const ctx = c.getContext('2d')
+  ctx.save()
+  ctx.drawImage(mask, 0, 0)
+  ctx.fillStyle = color
+  ctx.globalCompositeOperation = "source-in"
+  ctx.fillRect(0, 0, mask.width, mask.height)
+  ctx.restore()
+  ctx.save()
+  ctx.globalCompositeOperation = "destination-over"
+  ctx.drawImage(image, 0, 0)
+  ctx.restore()
+  return await createImageBitmap(c)
+}
+
 export default {
  createBitmap,
  createCanvas,
  loadImageToBitmap,
  resizeBitmap,
+  colorize,
 }
--- a/game/PuzzleGraphics.js
+++ b/game/PuzzleGraphics.js
@ -27,34 +27,51 @@ async function createPuzzleTileBitmaps(img, tiles, info) {

    const path = new Path2D()
    const topLeftEdge = { x: tileMarginWidth, y: tileMarginWidth }
+    const topRightEdge = Geometry.pointAdd(topLeftEdge, { x: tileSize, y: 0 })
+    const bottomRightEdge = Geometry.pointAdd(topRightEdge, { x: 0, y: tileSize })
+    const bottomLeftEdge = Geometry.pointSub(bottomRightEdge, { x: tileSize, y: 0 })
+
    path.moveTo(topLeftEdge.x, topLeftEdge.y)
+    if (shape.top !== 0) {
      for (let i = 0; i < curvyCoords.length / 6; i++) {
        const p1 = Geometry.pointAdd(topLeftEdge, { x: curvyCoords[i * 6 + 0] * tileRatio, y: shape.top * curvyCoords[i * 6 + 1] * tileRatio })
        const p2 = Geometry.pointAdd(topLeftEdge, { x: curvyCoords[i * 6 + 2] * tileRatio, y: shape.top * curvyCoords[i * 6 + 3] * tileRatio })
        const p3 = Geometry.pointAdd(topLeftEdge, { x: curvyCoords[i * 6 + 4] * tileRatio, y: shape.top * curvyCoords[i * 6 + 5] * tileRatio })
        path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
      }
-    const topRightEdge = Geometry.pointAdd(topLeftEdge, { x: tileSize, y: 0 })
+    } else {
+      path.lineTo(topRightEdge.x, topRightEdge.y)
+    }
+    if (shape.right !== 0) {
      for (let i = 0; i < curvyCoords.length / 6; i++) {
        const p1 = Geometry.pointAdd(topRightEdge, { x: -shape.right * curvyCoords[i * 6 + 1] * tileRatio, y: curvyCoords[i * 6 + 0] * tileRatio })
        const p2 = Geometry.pointAdd(topRightEdge, { x: -shape.right * curvyCoords[i * 6 + 3] * tileRatio, y: curvyCoords[i * 6 + 2] * tileRatio })
        const p3 = Geometry.pointAdd(topRightEdge, { x: -shape.right * curvyCoords[i * 6 + 5] * tileRatio, y: curvyCoords[i * 6 + 4] * tileRatio })
        path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
      }
-    const bottomRightEdge = Geometry.pointAdd(topRightEdge, { x: 0, y: tileSize })
+    } else {
+      path.lineTo(bottomRightEdge.x, bottomRightEdge.y)
+    }
+    if (shape.bottom !== 0) {
      for (let i = 0; i < curvyCoords.length / 6; i++) {
        let p1 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 0] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 1] * tileRatio })
        let p2 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 2] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 3] * tileRatio })
        let p3 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 4] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 5] * tileRatio })
        path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
      }
-    const bottomLeftEdge = Geometry.pointSub(bottomRightEdge, { x: tileSize, y: 0 })
+    } else {
+      path.lineTo(bottomLeftEdge.x, bottomLeftEdge.y)
+    }
+    if (shape.left !== 0) {
      for (let i = 0; i < curvyCoords.length / 6; i++) {
        let p1 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 1] * tileRatio, y: curvyCoords[i * 6 + 0] * tileRatio })
        let p2 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 3] * tileRatio, y: curvyCoords[i * 6 + 2] * tileRatio })
        let p3 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 5] * tileRatio, y: curvyCoords[i * 6 + 4] * tileRatio })
        path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
      }
+    } else {
+      path.lineTo(topLeftEdge.x, topLeftEdge.y)
+    }
    paths[key] = path
    return path
  }
@ -65,13 +82,37 @@ async function createPuzzleTileBitmaps(img, tiles, info) {

    const c = Graphics.createCanvas(tileDrawSize, tileDrawSize)
    const ctx = c.getContext('2d')
+
+    // stroke (slightly darker version of image)
    // -----------------------------------------------------------
    // -----------------------------------------------------------
+    ctx.save()
    ctx.lineWidth = 2
    ctx.stroke(path)
+    ctx.globalCompositeOperation = 'source-in'
+    ctx.drawImage(
+      img,
+      srcRect.x - tileMarginWidth,
+      srcRect.y - tileMarginWidth,
+      tileDrawSize,
+      tileDrawSize,
+      0,
+      0,
+      tileDrawSize,
+      tileDrawSize,
+    )
+    ctx.restore()
+    ctx.save()
+    ctx.globalCompositeOperation = 'source-in'
+    ctx.globalAlpha = .2
+    ctx.fillStyle = 'black'
+    ctx.fillRect(0,0, c.width, c.height)
+    ctx.restore()
+
+    // main image
    // -----------------------------------------------------------
    // -----------------------------------------------------------
-    ctx.save();
+    ctx.save()
    ctx.clip(path)
    ctx.drawImage(
      img,
@ -84,8 +125,65 @@ async function createPuzzleTileBitmaps(img, tiles, info) {
      tileDrawSize,
      tileDrawSize,
    )
+    ctx.restore()
+
+    // INSET SHADOW (bottom, right)
+    // -----------------------------------------------------------
+    // -----------------------------------------------------------
+    ctx.save()
+    ctx.clip(path)
+    ctx.strokeStyle = 'rgba(0,0,0,.4)'
+    ctx.lineWidth = 0
+    ctx.shadowColor = "black";
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetX = -1;
+    ctx.shadowOffsetY = -1;
    ctx.stroke(path)
-    ctx.restore();
+    ctx.restore()
+
+    // INSET SHADOW (top, left)
+    // -----------------------------------------------------------
+    // -----------------------------------------------------------
+    ctx.save()
+    ctx.clip(path)
+    ctx.strokeStyle = 'rgba(255,255,255,.4)'
+    ctx.lineWidth = 0
+    ctx.shadowColor = "white";
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 1;
+    ctx.stroke(path)
+    ctx.restore()
+
+    // -----------------------------------------------------------
+    // -----------------------------------------------------------
+    const tmpc = Graphics.createCanvas(tileDrawSize, tileDrawSize)
+    const ctx2 = tmpc.getContext('2d')
+    ctx2.save()
+    ctx2.lineWidth = 1
+    ctx2.stroke(path)
+    ctx2.globalCompositeOperation = 'source-in'
+    ctx2.drawImage(
+      img,
+      srcRect.x - tileMarginWidth - 50,
+      srcRect.y - tileMarginWidth - 50,
+      tileDrawSize + 100,
+      tileDrawSize + 100,
+      0 - 50,
+      0 - 50,
+      tileDrawSize + 100,
+      tileDrawSize + 100,
+    )
+    ctx2.restore()
+    // ctx2.save()
+    // ctx2.globalCompositeOperation = 'source-in'
+    // ctx2.globalAlpha = .1
+    // ctx2.fillStyle = 'black'
+    // ctx2.fillRect(0,0, c.width, c.height)
+    // ctx2.restore()
+    // ctx.globalCompositeOperation = 'darken'
+    ctx.drawImage(tmpc, 0, 0)
+

    bitmaps[tile.idx] = await createImageBitmap(c)
  }
--- a/game/game.js
+++ b/game/game.js
@ -0,0 +1,503 @@
+"use strict"
+import {run} from './gameloop.js'
+import Camera from './Camera.js'
+import Graphics from './Graphics.js'
+import Debug from './Debug.js'
+import Communication from './Communication.js'
+import Util from './../common/Util.js'
+import PuzzleGraphics from './PuzzleGraphics.js'
+import Game from './Game.js'
+
+if (typeof GAME_ID === 'undefined') throw '[ GAME_ID not set ]'
+if (typeof WS_ADDRESS === 'undefined') throw '[ WS_ADDRESS not set ]'
+
+if (typeof DEBUG === 'undefined') window.DEBUG = false
+
+let RERENDER = true
+
+function addCanvasToDom(canvas) {
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  document.body.appendChild(canvas)
+  window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+    RERENDER = true
+  })
+  return canvas
+}
+
+function getActivePlayers(players) {
+  const ts = Util.timestamp()
+  const activePlayers = []
+  for (let id of Object.keys(players)) {
+    const player = players[id]
+    if (player.ts >= ts - 30000) {
+      activePlayers.push(player)
+    }
+  }
+  return activePlayers
+}
+
+function addMenuToDom(previewImageUrl) {
+  function row (...elements) {
+    const row = document.createElement('tr')
+    for (let el of elements) {
+      const td = document.createElement('td')
+      td.appendChild(el)
+      row.appendChild(td)
+    }
+    return row
+  }
+
+  function colorinput() {
+    const input = document.createElement('input')
+    input.type = 'color'
+    return input
+  }
+
+  function textinput(maxLength) {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.maxLength = maxLength
+    return input
+  }
+
+  function label(text) {
+    const label = document.createElement('label')
+    label.innerText = text
+    return label
+  }
+
+  const bgColorPickerEl = colorinput()
+  const bgColorPickerRow = row(
+    label('Background: '),
+    bgColorPickerEl
+  )
+
+  const playerColorPickerEl = colorinput()
+  const playerColorPickerRow = row(
+    label('Color: '),
+    playerColorPickerEl
+  )
+
+  const nameChangeEl = textinput(16)
+  const nameChangeRow = row(
+    label('Name: '),
+    nameChangeEl
+  )
+
+  const settingsEl = document.createElement('table')
+  settingsEl.classList.add('layer', 'settings', 'closed')
+  settingsEl.appendChild(bgColorPickerRow)
+  settingsEl.appendChild(playerColorPickerRow)
+  settingsEl.appendChild(nameChangeRow)
+
+  const previewEl = document.createElement('div')
+  previewEl.classList.add('preview')
+
+  const imgEl = document.createElement('div')
+  imgEl.classList.add('img')
+  imgEl.style.backgroundImage = `url(${previewImageUrl})`
+  previewEl.appendChild(imgEl)
+
+  const previewOverlay = document.createElement('div')
+  previewOverlay.classList.add('overlay', 'closed')
+  previewOverlay.appendChild(previewEl)
+  previewOverlay.addEventListener('click', () => {
+    previewOverlay.classList.toggle('closed')
+  })
+
+  const settingsOpenerEl = document.createElement('div')
+  settingsOpenerEl.classList.add('opener')
+  settingsOpenerEl.appendChild(document.createTextNode('🛠️ Settings'))
+  settingsOpenerEl.addEventListener('click', () => {
+    settingsEl.classList.toggle('closed')
+  })
+
+  const homeEl = document.createElement('a')
+  homeEl.classList.add('opener')
+  homeEl.appendChild(document.createTextNode('🧩 Puzzles'))
+  homeEl.href = "/"
+
+  const previewOpenerEl = document.createElement('div')
+  previewOpenerEl.classList.add('opener')
+  previewOpenerEl.appendChild(document.createTextNode('🖼️ Preview'))
+  previewOpenerEl.addEventListener('click', () => {
+    previewOverlay.classList.toggle('closed')
+  })
+
+  const tabsEl = document.createElement('div')
+  tabsEl.classList.add('tabs')
+  tabsEl.appendChild(homeEl)
+  tabsEl.appendChild(previewOpenerEl)
+  tabsEl.appendChild(settingsOpenerEl)
+
+  const menuEl = document.createElement('div')
+  menuEl.classList.add('menu')
+  menuEl.appendChild(tabsEl)
+
+  const scoresTitleEl = document.createElement('div')
+  scoresTitleEl.appendChild(document.createTextNode('Scores'))
+
+  const scoresListEl = document.createElement('table')
+  const updateScores = (players) => {
+    const activePlayers = getActivePlayers(players)
+    const scores = activePlayers.map(p => ({
+      name: p.name,
+      points: p.points,
+      color: p.color,
+    }))
+    scores.sort((a, b) => b.points - a.points)
+    scoresListEl.innerHTML = ''
+    for (let score of scores) {
+      const r = row(
+        document.createTextNode(score.name),
+        document.createTextNode(score.points)
+      )
+      r.style.color = score.color
+      scoresListEl.appendChild(r)
+    }
+  }
+
+  const scoresEl = document.createElement('div')
+  scoresEl.classList.add('scores')
+  scoresEl.appendChild(scoresTitleEl)
+  scoresEl.appendChild(scoresListEl)
+
+  document.body.appendChild(settingsEl)
+  document.body.appendChild(previewOverlay)
+  document.body.appendChild(menuEl)
+  document.body.appendChild(scoresEl)
+
+  return {
+    bgColorPickerEl,
+    playerColorPickerEl,
+    nameChangeEl,
+    updateScores,
+  }
+}
+
+function initme() {
+  // return uniqId()
+  let ID = localStorage.getItem('ID')
+  if (!ID) {
+    ID = Util.uniqId()
+    localStorage.setItem('ID', ID)
+  }
+  return ID
+}
+
+const getFirstOwnedTile = (puzzle, userId) => {
+  for (let t of puzzle.tiles) {
+    if (t.owner === userId) {
+      return t
+    }
+  }
+  return null
+}
+
+export default class EventAdapter {
+  constructor(canvas, viewport) {
+    this.events = []
+    this._viewport = viewport
+    canvas.addEventListener('mousedown', this._mouseDown.bind(this))
+    canvas.addEventListener('mouseup', this._mouseUp.bind(this))
+    canvas.addEventListener('mousemove', this._mouseMove.bind(this))
+    canvas.addEventListener('wheel', this._wheel.bind(this))
+  }
+
+  addEvent(event) {
+    this.events.push(event)
+  }
+
+  consumeAll() {
+    if (this.events.length === 0) {
+      return []
+    }
+    const all = this.events.slice()
+    this.events = []
+    return all
+  }
+
+  _mouseDown(e) {
+    if (e.button === 0) {
+      const pos = this._viewport.viewportToWorld({
+        x: e.offsetX,
+        y: e.offsetY,
+      })
+      this.addEvent(['down', pos.x, pos.y])
+    }
+  }
+
+  _mouseUp(e) {
+    if (e.button === 0) {
+      const pos = this._viewport.viewportToWorld({
+        x: e.offsetX,
+        y: e.offsetY,
+      })
+      this.addEvent(['up', pos.x, pos.y])
+    }
+  }
+
+  _mouseMove(e) {
+    const pos = this._viewport.viewportToWorld({
+      x: e.offsetX,
+      y: e.offsetY,
+    })
+    this.addEvent(['move', pos.x, pos.y])
+  }
+
+  _wheel(e) {
+    const pos = this._viewport.viewportToWorld({
+      x: e.offsetX,
+      y: e.offsetY,
+    })
+    const evt = e.deltaY < 0 ? 'zoomin' : 'zoomout'
+    this.addEvent([evt, pos.x, pos.y])
+  }
+}
+
+async function main() {
+  let gameId = GAME_ID
+  let CLIENT_ID = initme()
+
+  const cursorGrab = await Graphics.loadImageToBitmap('/grab.png')
+  const cursorHand = await Graphics.loadImageToBitmap('/hand.png')
+  const cursorGrabMask = await Graphics.loadImageToBitmap('/grab_mask.png')
+  const cursorHandMask = await Graphics.loadImageToBitmap('/hand_mask.png')
+
+  const cursors = {}
+  const getPlayerCursor = async (p) => {
+    let key = p.color + ' ' + p.d
+    if (!cursors[key]) {
+      const cursor = p.d ? cursorGrab : cursorHand
+      const mask = p.d ? cursorGrabMask : cursorHandMask
+      cursors[key] = await Graphics.colorize(cursor, mask, p.color)
+    }
+    return cursors[key]
+  }
+
+  const game = await Communication.connect(gameId, CLIENT_ID)
+  Game.createGame(GAME_ID, game);
+
+  const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(game.puzzle)
+  const puzzle = game.puzzle
+  const players = game.players
+
+  let bgColor = '#222222'
+
+  const changePlayer = (change) => {
+    for (let k of Object.keys(change)) {
+      players[CLIENT_ID][k] = change[k]
+    }
+  }
+
+  const {bgColorPickerEl, playerColorPickerEl, nameChangeEl, updateScores} = addMenuToDom(game.puzzle.info.imageUrl)
+  updateScores(players)
+
+  // Create a dom and attach adapters to it so we can work with it
+  const canvas = addCanvasToDom(Graphics.createCanvas())
+  const ctx = canvas.getContext('2d')
+
+  // initialize some view data
+  // this global data will change according to input events
+  const viewport = new Camera(canvas)
+  // center viewport
+  viewport.move(
+    -(puzzle.info.table.width - viewport.width) /2,
+    -(puzzle.info.table.height - viewport.height) /2
+  )
+
+  const evts = new EventAdapter(canvas, viewport)
+
+  bgColorPickerEl.value = bgColor
+  bgColorPickerEl.addEventListener('change', () => {
+    evts.addEvent(['bg_color', bgColorPickerEl.value])
+  })
+  playerColorPickerEl.value = players[CLIENT_ID].color
+  playerColorPickerEl.addEventListener('change', () => {
+    evts.addEvent(['player_color', playerColorPickerEl.value])
+  })
+  nameChangeEl.value = players[CLIENT_ID].name
+  nameChangeEl.addEventListener('change', () => {
+    evts.addEvent(['player_name', nameChangeEl.value])
+  })
+
+  Communication.onServerChange((msg) => {
+    const msgType = msg[0]
+    const evClientId = msg[1]
+    const evClientSeq = msg[2]
+    const evChanges = msg[3]
+    for(let [changeType, changeData] of evChanges) {
+      switch (changeType) {
+        case 'player': {
+          if (changeData.id !== CLIENT_ID) {
+            players[changeData.id] = changeData
+            RERENDER = true
+          }
+        } break;
+        case 'tile': {
+          puzzle.tiles[changeData.idx] = changeData
+          RERENDER = true
+        } break;
+        case 'data': {
+          puzzle.data = changeData
+          RERENDER = true
+        } break;
+      }
+    }
+  })
+
+  const tilesSortedByZIndex = () => {
+    const sorted = puzzle.tiles.slice()
+    return sorted.sort((t1, t2) => t1.z - t2.z)
+  }
+
+  let _last_mouse_down = null
+  const onUpdate = () => {
+    for (let evt of evts.consumeAll()) {
+
+      // LOCAL ONLY CHANGES
+      // -------------------------------------------------------------
+      const type = evt[0]
+      if (type === 'bg_color') {
+        const color = evt[1]
+        bgColor = color
+        RERENDER = true
+      } else if (type === 'move') {
+        const pos = { x: evt[1], y: evt[2] }
+        RERENDER = true
+        changePlayer(pos)
+
+        if (_last_mouse_down && !getFirstOwnedTile(puzzle, CLIENT_ID)) {
+          // move the cam
+          const mouse = viewport.worldToViewport(pos)
+          const diffX = Math.round(mouse.x - _last_mouse_down.x)
+          const diffY = Math.round(mouse.y - _last_mouse_down.y)
+          viewport.move(diffX, diffY)
+
+          _last_mouse_down = mouse
+        }
+      } else if (type === 'down') {
+        const pos = { x: evt[1], y: evt[2] }
+        _last_mouse_down = viewport.worldToViewport(pos)
+      } else if (type === 'up') {
+        _last_mouse_down = null
+      } else if (type === 'zoomin') {
+        if (viewport.zoomIn()) {
+          const pos = { x: evt[1], y: evt[2] }
+          RERENDER = true
+          changePlayer(pos)
+        }
+      } else if (type === 'zoomout') {
+        if (viewport.zoomOut()) {
+          const pos = { x: evt[1], y: evt[2] }
+          RERENDER = true
+          changePlayer(pos)
+        }
+      }
+
+      // LOCAL + SERVER CHANGES
+      // -------------------------------------------------------------
+      const changes = Game.handleInput(GAME_ID, CLIENT_ID, evt)
+      if (changes.length > 0) {
+        RERENDER = true
+      }
+      Communication.sendClientEvent(evt)
+    }
+  }
+
+  const onRender = async () => {
+    if (!RERENDER) {
+      return
+    }
+
+    let pos
+    let dim
+
+    if (DEBUG) Debug.checkpoint_start(0)
+
+    // CLEAR CTX
+    // ---------------------------------------------------------------
+    ctx.fillStyle = bgColor
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    if (DEBUG) Debug.checkpoint('clear done')
+    // ---------------------------------------------------------------
+
+
+    // DRAW BOARD
+    // ---------------------------------------------------------------
+    pos = viewport.worldToViewport({
+      x: (puzzle.info.table.width - puzzle.info.width) / 2,
+      y: (puzzle.info.table.height - puzzle.info.height) / 2
+    })
+    dim = viewport.worldDimToViewport({
+      w: puzzle.info.width,
+      h: puzzle.info.height,
+    })
+    ctx.fillStyle = 'rgba(255, 255, 255, .5)'
+    ctx.fillRect(pos.x, pos.y, dim.w, dim.h)
+    if (DEBUG) Debug.checkpoint('board done')
+    // ---------------------------------------------------------------
+
+
+    // DRAW TILES
+    // ---------------------------------------------------------------
+    for (let tile of tilesSortedByZIndex()) {
+      const bmp = bitmaps[tile.idx]
+      pos = viewport.worldToViewport({
+        x: puzzle.info.tileDrawOffset + tile.pos.x,
+        y: puzzle.info.tileDrawOffset + tile.pos.y,
+      })
+      dim = viewport.worldDimToViewport({
+        w: puzzle.info.tileDrawSize,
+        h: puzzle.info.tileDrawSize,
+      })
+      ctx.drawImage(bmp,
+        0, 0, bmp.width, bmp.height,
+        pos.x, pos.y, dim.w, dim.h
+      )
+    }
+    if (DEBUG) Debug.checkpoint('tiles done')
+    // ---------------------------------------------------------------
+
+
+    // DRAW PLAYERS
+    // ---------------------------------------------------------------
+    for (let p of getActivePlayers(players)) {
+      const cursor = await getPlayerCursor(p)
+      const pos = viewport.worldToViewport(p)
+      ctx.drawImage(cursor,
+        Math.round(pos.x - cursor.width/2),
+        Math.round(pos.y - cursor.height/2)
+      )
+      if (p.id !== CLIENT_ID) {
+        ctx.fillStyle = 'white'
+        ctx.font = '10px sans-serif'
+        ctx.textAlign = 'center'
+        ctx.fillText(p.name + ' (' + p.points + ')',
+          Math.round(pos.x),
+          Math.round(pos.y) + cursor.height
+        )
+      }
+    }
+    if (DEBUG) Debug.checkpoint('players done')
+
+    // DRAW PLAYERS
+    // ---------------------------------------------------------------
+    updateScores(players)
+    if (DEBUG) Debug.checkpoint('scores done')
+    // ---------------------------------------------------------------
+
+
+    RERENDER = false
+  }
+
+  run({
+    update: onUpdate,
+    render: onRender,
+  })
+}
+
+main()
--- a/game/grab_mask.png
+++ b/game/grab_mask.png
--- a/game/hand_mask.png
+++ b/game/hand_mask.png
--- a/game/index.js
+++ b/game/index.js
@ -1,307 +1,98 @@
-"use strict"
-import {run} from './gameloop.js'
-import Camera from './Camera.js'
-import Graphics from './Graphics.js'
-import Debug from './Debug.js'
-import Communication from './Communication.js'
-import Util from './../common/Util.js'
-import PuzzleGraphics from './PuzzleGraphics.js'
-import Game from './Game.js'
-
-if (typeof GAME_ID === 'undefined') throw '[ GAME_ID not set ]'
-if (typeof WS_ADDRESS === 'undefined') throw '[ WS_ADDRESS not set ]'
-
-if (typeof DEBUG === 'undefined') window.DEBUG = false
-
-function addCanvasToDom(canvas) {
-    document.body.append(canvas)
-    return canvas
-}
-
-function initme() {
-  // return uniqId()
-  let ID = localStorage.getItem('ID')
-  if (!ID) {
-    ID = Util.uniqId()
-    localStorage.setItem('ID', ID)
-  }
-  let name = localStorage.getItem('NAME')
-  if (!name) {
-    name = prompt('What\'s your name?');
-    localStorage.setItem('NAME', name)
-  }
-  return [ID, name]
-}
-
-const getFirstOwnedTile = (puzzle, userId) => {
-  for (let t of puzzle.tiles) {
-    if (t.owner === userId) {
-      return t
-    }
-  }
-  return null
-}
-
-export default class EventAdapter {
-  constructor(canvas, viewport) {
-    this._mouseEvts = []
-    this._viewport = viewport
-    canvas.addEventListener('mousedown', this._mouseDown.bind(this))
-    canvas.addEventListener('mouseup', this._mouseUp.bind(this))
-    canvas.addEventListener('mousemove', this._mouseMove.bind(this))
-    canvas.addEventListener('wheel', this._wheel.bind(this))
-  }
-
-  consumeAll() {
-    if (this._mouseEvts.length === 0) {
-      return []
-    }
-    const all = this._mouseEvts.slice()
-    this._mouseEvts = []
-    return all
-  }
-
-  _mouseDown(e) {
-    if (e.button === 0) {
-      const pos = this._viewport.viewportToWorld({
-        x: e.offsetX,
-        y: e.offsetY,
+const Upload = {
+  name: 'upload',
+  props: {
+    accept: String,
+    label: String,
+  },
+  template: `
+<label>
+    <input type="file" style="display: none" @change="upload" :accept="accept" />
+    <span class="btn">{{label || 'Upload File'}}</span>
+</label>
+`,
+  methods: {
+    async upload(evt) {
+      const file = evt.target.files[0]
+      if (!file) return;
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      const res = await fetch('/upload', {
+        method: 'post',
+        body: formData,
      })
-      this._mouseEvts.push(['down', pos.x, pos.y])
+      const j = await res.json()
+      this.$emit('uploaded', j)
+    },
  }
 }

-  _mouseUp(e) {
-    if (e.button === 0) {
-      const pos = this._viewport.viewportToWorld({
-        x: e.offsetX,
-        y: e.offsetY,
+export default {
+  components: {
+    Upload,
+  },
+  props: {
+    games: Array,
+    images: Array,
+  },
+  template: `
+<div id="app">
+  <h1>Running games</h1>
+  <div v-for="g in games">
+    <a :href="'/g/' + g.id">{{g.title}}</a>
+  </div>
+
+  <h1>New game</h1>
+  <div>
+    <label>Tiles: </label>
+    <input type="text" v-model="tiles" />
+  </div>
+  <div>
+    <label>Image: </label>
+    <span v-if="image">
+      <img :src="image.url" style="width: 150px;" />
+      or
+      <upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
+    </span>
+    <span v-else>
+      <upload @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
+      (or select from below)
+    </span>
+  </div>
+  <span class="btn" :class="" @click="newGame">Start new game</span>
+
+  <h1>Image lib</h1>
+  <div>
+    <img
+      v-for="i in images"
+      :src="i.url"
+      @click="image = i"
+      style="width: 150px; display: inline-block; margin: 5px;"
+      />
+  </div>
+</div>`,
+  data() {
+    return {
+      tiles: 1000,
+      image: '',
+    }
+  },
+  methods: {
+    mediaImgUploaded(j) {
+      this.image = j.image
+    },
+    async newGame() {
+      const res = await fetch('/newgame', {
+        method: 'post',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({tiles: this.tiles, image: this.image}),
      })
-      this._mouseEvts.push(['up', pos.x, pos.y])
+      if (res.status === 200) {
+        const game = await res.json()
+        location.assign(game.url)
      }
    }
-
-  _mouseMove(e) {
-    const pos = this._viewport.viewportToWorld({
-      x: e.offsetX,
-      y: e.offsetY,
-    })
-    this._mouseEvts.push(['move', pos.x, pos.y])
-  }
-
-  _wheel(e) {
-    const pos = this._viewport.viewportToWorld({
-      x: e.offsetX,
-      y: e.offsetY,
-    })
-    const evt = e.deltaY < 0 ? 'zoomin' : 'zoomout'
-    this._mouseEvts.push([evt, pos.x, pos.y])
  }
 }
-
-async function main() {
-  let gameId = GAME_ID
-  let [CLIENT_ID, name] = initme()
-
-  let cursorGrab = await Graphics.loadImageToBitmap('/grab.png')
-  let cursorHand = await Graphics.loadImageToBitmap('/hand.png')
-
-  const game = await Communication.connect(gameId, CLIENT_ID, name)
-  Game.createGame(GAME_ID, game);
-
-  const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(game.puzzle)
-  const puzzle = game.puzzle
-  const players = game.players
-
-  let rerender = true
-
-  const changePlayer = (change) => {
-    for (let k of Object.keys(change)) {
-      players[CLIENT_ID][k] = change[k]
-    }
-  }
-
-  // Create a dom and attach adapters to it so we can work with it
-  const canvas = addCanvasToDom(Graphics.createCanvas())
-  const ctx = canvas.getContext('2d')
-
-  // initialize some view data
-  // this global data will change according to input events
-  const viewport = new Camera(canvas)
-  // center viewport
-  viewport.move(
-    -(puzzle.info.table.width - viewport.width) /2,
-    -(puzzle.info.table.height - viewport.height) /2
-  )
-
-  const evts = new EventAdapter(canvas, viewport)
-
-  Communication.onServerChange((msg) => {
-    const msgType = msg[0]
-    const evClientId = msg[1]
-    const evClientSeq = msg[2]
-    const evChanges = msg[3]
-    for(let [changeType, changeData] of evChanges) {
-      switch (changeType) {
-        case 'player': {
-          if (changeData.id !== CLIENT_ID) {
-            players[changeData.id] = changeData
-            rerender = true
-          }
-        } break;
-        case 'tile': {
-          puzzle.tiles[changeData.idx] = changeData
-          rerender = true
-        } break;
-        case 'data': {
-          puzzle.data = changeData
-          rerender = true
-        } break;
-      }
-    }
-  })
-
-  // In the middle of the table, there is a board. this is to
-  // tell the player where to place the final puzzle
-  const boardColor = '#505050'
-
-  const tilesSortedByZIndex = () => {
-    const sorted = puzzle.tiles.slice()
-    return sorted.sort((t1, t2) => t1.z - t2.z)
-  }
-
-  let _last_mouse_down = null
-  const onUpdate = () => {
-    for (let evt of evts.consumeAll()) {
-
-      // LOCAL ONLY CHANGES
-      // -------------------------------------------------------------
-      const type = evt[0]
-      const pos = {x: evt[1], y: evt[2]}
-      if (type === 'move') {
-        rerender = true
-        changePlayer(pos)
-
-        if (_last_mouse_down && !getFirstOwnedTile(puzzle, CLIENT_ID)) {
-            // move the cam
-            const mouse = viewport.worldToViewport(pos)
-            const diffX = Math.round(mouse.x - _last_mouse_down.x)
-            const diffY = Math.round(mouse.y - _last_mouse_down.y)
-            viewport.move(diffX, diffY)
-
-            _last_mouse_down = mouse
-        }
-      } else if (type === 'down') {
-        _last_mouse_down = viewport.worldToViewport(pos)
-      } else if (type === 'up') {
-        _last_mouse_down = null
-      } else if (type === 'zoomin') {
-        if (viewport.zoomIn()) {
-          rerender = true
-          changePlayer(pos)
-        }
-      } else if (type === 'zoomout') {
-        if (viewport.zoomOut()) {
-          rerender = true
-          changePlayer(pos)
-        }
-      }
-
-      // LOCAL + SERVER CHANGES
-      // -------------------------------------------------------------
-      const changes = Game.handleInput(GAME_ID, CLIENT_ID, evt)
-      if (changes.length > 0) {
-        rerender = true
-      }
-      Communication.sendClientEvent(evt)
-    }
-  }
-
-  const onRender = () => {
-    if (!rerender) {
-      return
-    }
-
-    let pos
-    let dim
-
-    if (DEBUG) Debug.checkpoint_start(0)
-
-    // CLEAR CTX
-    // ---------------------------------------------------------------
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    if (DEBUG) Debug.checkpoint('clear done')
-    // ---------------------------------------------------------------
-
-
-    // DRAW BOARD
-    // ---------------------------------------------------------------
-    pos = viewport.worldToViewport({
-      x: (puzzle.info.table.width - puzzle.info.width) / 2,
-      y: (puzzle.info.table.height - puzzle.info.height) / 2
-    })
-    dim = viewport.worldDimToViewport({
-      w: puzzle.info.width,
-      h: puzzle.info.height,
-    })
-    ctx.fillStyle = boardColor
-    ctx.fillRect(pos.x, pos.y, dim.w, dim.h)
-    if (DEBUG) Debug.checkpoint('board done')
-    // ---------------------------------------------------------------
-
-
-    // DRAW TILES
-    // ---------------------------------------------------------------
-    for (let tile of tilesSortedByZIndex()) {
-      const bmp = bitmaps[tile.idx]
-      pos = viewport.worldToViewport({
-        x: puzzle.info.tileDrawOffset + tile.pos.x,
-        y: puzzle.info.tileDrawOffset + tile.pos.y,
-      })
-      dim = viewport.worldDimToViewport({
-        w: puzzle.info.tileDrawSize,
-        h: puzzle.info.tileDrawSize,
-      })
-      ctx.drawImage(bmp,
-        0, 0, bmp.width, bmp.height,
-        pos.x, pos.y, dim.w, dim.h
-      )
-    }
-    if (DEBUG) Debug.checkpoint('tiles done')
-    // ---------------------------------------------------------------
-
-
-    // DRAW PLAYERS
-    // ---------------------------------------------------------------
-    for (let id of Object.keys(players)) {
-      const p = players[id]
-      const cursor = p.down ? cursorGrab : cursorHand
-      const pos = viewport.worldToViewport(p)
-      ctx.drawImage(cursor,
-        Math.round(pos.x - cursor.width/2),
-        Math.round(pos.y - cursor.height/2)
-      )
-      if (id !== CLIENT_ID) {
-        ctx.fillStyle = 'white'
-        ctx.font = '10px sans-serif'
-        ctx.textAlign = 'center'
-        ctx.fillText(p.name,
-          Math.round(pos.x),
-          Math.round(pos.y) + cursor.height
-        )
-      }
-    }
-    if (DEBUG) Debug.checkpoint('players done')
-    // ---------------------------------------------------------------
-
-
-    rerender = false
-  }
-
-  run({
-    update: onUpdate,
-    render: onRender,
-  })
-}
-
-main()
--- a/game/style.css
+++ b/game/style.css
@ -0,0 +1,145 @@
+:root {
+  --main-color: #c1b19f;
+  --link-color: #808db0;
+  --link-hover-color: #c5cfeb;
+  --highlight-color: #dd7e7e;
+  --input-bg-color: #262523;
+  --bg-color: rgba(0,0,0,.7);
+}
+
+html,
+body {
+  margin: 0;
+  background: #2b2b2b;
+  color: var(--main-color);
+  height: 100%;
+  font-family: sans-serif;
+}
+
+a { color: var(--link-color); text-decoration: none; }
+a:hover { color: var(--link-hover-color); }
+
+.scores {
+  position: absolute;
+  right: 0;
+
+  background: var(--bg-color);
+  padding: 5px;
+  border: solid 1px black;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
+}
+
+.menu {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-color);
+  padding: 5px;
+  border: solid 1px black;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
+  z-index: 2;
+}
+
+.closed {
+  display: none;
+}
+
+.layer {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  background: var(--bg-color);
+  padding: 5px;
+  border: solid 1px black;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,.7);
+  z-index: 1;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  background: var(--bg-color);
+}
+
+.preview {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  bottom: 20px;
+  right: 20px;
+}
+
+.preview .img {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.menu .opener {
+  display: inline-block;
+  margin-right: 10px;
+  color: var(--link-color);
+}
+
+.menu .opener:last-child {
+  margin-right: 0;
+}
+
+.menu .opener:hover {
+  color: var(--link-hover-color);
+  cursor: pointer;
+}
+
+canvas {
+  cursor: none;
+}
+
+input {
+  background: #333230;
+  border-radius: 4px;
+  color: var(--main-color);
+  padding: 6px 10px;
+  border: solid 1px black;
+  box-shadow: 0 0 3px rgba(0, 0,0,0.3) inset;
+}
+
+input:focus {
+  border: solid 1px #686767;
+  background: var(--input-bg-color);
+}
+
+.btn {
+  font: 15px sans-serif;
+  display: inline-block;
+  background: var(--input-bg-color);
+  color: var(--link-color);
+  border: solid 1px black;
+  padding: 5px 10px;
+  box-shadow: 1px 1px 2px rgba(0,0,0,.5), 0 0 1px rgba(150,150,150,.4) inset;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.btn:hover {
+  background: #2f2e2c;
+  color: var(--link-hover-color);
+  border: solid 1px #111;
+  box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  background: #2f2e2c;
+  color: #8c4747 !important;
+  border: solid 1px #111;
+  box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
+  cursor: not-allowed;
+}
--- a/game/templates/game.html.twig
+++ b/game/templates/game.html.twig
@ -0,0 +1,16 @@
+<html>
+<head>
+  <link rel="stylesheet" href="/style.css" />
+  <style type="text/css">
+  html,
+  body {
+    overflow: hidden;
+  }
+  </style>
+</head>
+<body>
+  <script>window.GAME_ID = '{{GAME_ID}}'</script>
+  <script>window.WS_ADDRESS = '{{WS_ADDRESS}}'</script>
+  <script src="/game.js" type="module"></script>
+</body>
+</html>
--- a/game/templates/index.html.twig
+++ b/game/templates/index.html.twig
@ -0,0 +1,21 @@
+<html>
+<head>
+  <link rel="stylesheet" href="/style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+  import Page from "/index.js"
+  new Vue({
+    el: '#app',
+    render: (h) => h(Page, {
+      props: {
+        games: {{ games|json_encode|raw }},
+        images: {{ images|json_encode|raw }},
+      },
+    }),
+  })
+  </script>
+</body>
+</html>
--- a/server/Game.js
+++ b/server/Game.js
@ -1,3 +1,4 @@
+import fs from 'fs'
 import { createPuzzle } from './Puzzle.js'
 import GameCommon from './../common/GameCommon.js'

@ -5,18 +6,47 @@ async function createGame(gameId, targetTiles, image) {
  const game = {
    puzzle: await createPuzzle(targetTiles, image),
    players: {},
-
    sockets: [],
    evtInfos: {},
  }
  GameCommon.setGame(gameId, game)
 }

+function loadAllGames() {
+  const files = fs.readdirSync('./../data/')
+  for (const f of files) {
+    if (!f.match(/\.json$/)) {
+      continue
+    }
+    const gameId = f.replace(/\.json$/, '')
+    const contents = fs.readFileSync(`./../data/${f}`, 'utf-8')
+    const game = JSON.parse(contents)
+    GameCommon.setGame(gameId, {
+      puzzle: game.puzzle,
+      players: game.players,
+      sockets: [],
+      evtInfos: {},
+    })
+  }
+}
+
+function store(gameId) {
+  const game = GameCommon.get(gameId)
+  fs.writeFileSync('./../data/' + gameId + '.json', JSON.stringify({
+    puzzle: game.puzzle,
+    players: game.players,
+  }))
+}
+
 export default {
+  loadAllGames,
+  getAllGames: GameCommon.getAllGames,
+  store,
  createGame,
  exists: GameCommon.exists,
  addPlayer: GameCommon.addPlayer,
  addSocket: GameCommon.addSocket,
+  removeSocket: GameCommon.removeSocket,
  get: GameCommon.get,
  getSockets: GameCommon.getSockets,
  handleInput: GameCommon.handleInput,
--- a/server/Puzzle.js
+++ b/server/Puzzle.js
@ -6,8 +6,8 @@ import Util from './../common/Util.js'
 const TILE_SIZE = 64

 async function createPuzzle(targetTiles, image) {
-  const imagePath = './../game' + image
-  const imageUrl = image
+  const imagePath = image.file
+  const imageUrl = image.url

  // load bitmap, to determine the original size of the image
  const dim = sizeOf(imagePath)
--- a/server/WebSocketServer.js
+++ b/server/WebSocketServer.js
@ -67,6 +67,7 @@ class WebSocketServer {
          return socket.terminate()
        }
        socket.isAlive = false
+        this.evt.dispatch('close', {socket})
        socket.ping(() => { })
      })
    }, 30000)
--- a/server/index.js
+++ b/server/index.js
@ -1,58 +1,91 @@
 import WebSocketServer from './WebSocketServer.js'

+import fs from 'fs'
 import express from 'express'
+import multer from 'multer'
 import config from './config.js'
 import Protocol from './../common/Protocol.js'
 import Util from './../common/Util.js'
 import Game from './Game.js'
+import twing from 'twing'
+import bodyParser from 'body-parser'

-// desired number of tiles
-// actual calculated number can be higher
-const TARGET_TILES = 1000
-
-const IMAGES = [
-  '/example-images/ima_86ec3fa.jpeg',
-  '/example-images/bleu.png',
-  '/example-images/saechsische_schweiz.jpg',
-  '/example-images/132-2048x1365.jpg',
+const allImages = () => [
+  ...fs.readdirSync('./../game/example-images/').map(f => ({
+    file: `./../game/example-images/${f}`,
+    url: `/example-images/${f}`,
+  })),
+  ...fs.readdirSync('./../data/uploads/').map(f => ({
+    file: `./../data/uploads/${f}`,
+    url: `/uploads/${f}`,
+  })),
 ]

-const games = {}
-
 const port = config.http.port
 const hostname = config.http.hostname
 const app = express()
+
+const uploadDir = './../data/uploads'
+const storage = multer.diskStorage({
+  destination: uploadDir,
+  filename: function (req, file, cb) {
+    cb(null , file.originalname);
+  }
+})
+const upload = multer({storage}).single('file');
+
 const statics = express.static('./../game/')
-app.use('/g/:gid', (req, res, next) => {
-  res.send(`
-    <html><head><style>
-    html,body {margin: 0; overflow: hidden;}
-    html, body, #main { background: #222 }
-    canvas {cursor: none;}
-    </style></head><body>
-    <script>window.GAME_ID = '${req.params.gid}'</script>
-    <script>window.WS_ADDRESS = '${config.ws.connectstring}'</script>
-    <script src="/index.js" type="module"></script>
-    </body>
-    </html>
-  `)
+
+const render = async (template, data) => {
+  const loader = new twing.TwingLoaderFilesystem('./../game/templates')
+  const env = new twing.TwingEnvironment(loader)
+  return env.render(template, data)
+}
+
+app.use('/g/:gid', async (req, res, next) => {
+  res.send(await render('game.html.twig', {
+    GAME_ID: req.params.gid,
+    WS_ADDRESS: config.ws.connectstring,
+  }))
+})
+app.post('/upload', (req, res) => {
+  upload(req, res, (err) => {
+    if (err) {
+      console.log(err)
+      res.status(400).send("Something went wrong!");
+    }
+    res.send({
+      image: {
+        file: './../data/uploads/' + req.file.filename,
+        url: '/uploads/' + req.file.filename,
+      },
+    })
+  })
+})
+app.post('/newgame', bodyParser.json(), async (req, res) => {
+  console.log(req.body.tiles, req.body.image)
+  const gameId = Util.uniqId()
+  if (!Game.exists(gameId)) {
+    await Game.createGame(gameId, req.body.tiles, req.body.image)
+  }
+  res.send({ url: `/g/${gameId}` })
 })

 app.use('/common/', express.static('./../common/'))
-app.use('/', (req, res, next) => {
+app.use('/uploads/', express.static('./../data/uploads/'))
+app.use('/', async (req, res, next) => {
  if (req.path === '/') {
-    res.send(`
-      <html><head><style>
-      html,body {margin: 0; overflow: hidden;}
-      html, body, #main { background: #222 }
-      </style></head><body>
-      <a href="/g/${Util.uniqId()}">New game :P</a>
-      ${Object.keys(games).map(k => {
-        return `<a href="/g/${k}">Game ${k}</a>`
-      })}
-      </body>
-      </html>
-    `)
+    const games = [
+      ...Object.keys(Game.getAllGames()).map(id => ({
+        id: id,
+        title: id,
+      })),
+    ]
+
+    res.send(await render('index.html.twig', {
+      games,
+      images: allImages(),
+    }))
  } else {
    statics(req, res, next)
  }
@ -67,6 +100,15 @@ const notify = (data, sockets) => {
  }
 }

+wss.on('close', async ({socket}) => {
+  const proto = socket.protocol.split('|')
+  const clientId = proto[0]
+  const gameId = proto[1]
+  if (Game.exists(gameId)) {
+    Game.removeSocket(gameId, socket)
+  }
+})
+
 wss.on('message', async ({socket, data}) => {
  try {
    const proto = socket.protocol.split('|')
@ -76,13 +118,12 @@ wss.on('message', async ({socket, data}) => {
    const msgType = msg[0]
    switch (msgType) {
      case Protocol.EV_CLIENT_INIT: {
-        const name = msg[1]
        if (!Game.exists(gameId)) {
-          await Game.createGame(gameId, TARGET_TILES, Util.choice(IMAGES))
+          throw `[game ${gameId} does not exist... ]`
        }
-        Game.addPlayer(gameId, clientId, name)
+        Game.addPlayer(gameId, clientId)
        Game.addSocket(gameId, socket)
-
+        Game.store(gameId)
        notify(
          [Protocol.EV_SERVER_INIT, Game.get(gameId)],
          [socket]
@ -93,6 +134,7 @@ wss.on('message', async ({socket, data}) => {
        const clientSeq = msg[1]
        const clientEvtData = msg[2]
        const changes = Game.handleInput(gameId, clientId, clientEvtData)
+        Game.store(gameId)
        notify(
          [Protocol.EV_SERVER_EVENT, clientId, clientSeq, changes],
          Game.getSockets(gameId)
@ -104,5 +146,6 @@ wss.on('message', async ({socket, data}) => {
  }
 })

+Game.loadAllGames()
 app.listen(port, hostname, () => console.log(`server running on http://${hostname}:${port}`))
 wss.listen()
--- a/server/package-lock.json
+++ b/server/package-lock.json
@ -2,6 +2,16 @@
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
+    "@types/luxon": {
+      "version": "1.25.0",
+      "resolved": "https://npm.stroeermediabrands.de/@types%2fluxon/-/luxon-1.25.0.tgz",
+      "integrity": "sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g=="
+    },
+    "@types/node": {
+      "version": "12.19.7",
+      "resolved": "https://npm.stroeermediabrands.de/@types%2fnode/-/node-12.19.7.tgz",
+      "integrity": "sha512-zvjOU1g4CpPilbTDUATnZCUb/6lARMRAqzT7ILwl1P3YvU2leEcZ2+fw9+Jrw/paXB1CgQyXTrN4hWDtqT9O2A=="
+    },
    "accepts": {
      "version": "1.3.7",
      "resolved": "https://npm.stroeermediabrands.de/accepts/-/accepts-1.3.7.tgz",
@ -11,6 +21,11 @@
        "negotiator": "0.6.2"
      }
    },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://npm.stroeermediabrands.de/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
    "array-flatten": {
      "version": "1.1.1",
      "resolved": "https://npm.stroeermediabrands.de/array-flatten/-/array-flatten-1.1.1.tgz",
@ -33,11 +48,80 @@
        "type-is": "~1.6.17"
      }
    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://npm.stroeermediabrands.de/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://npm.stroeermediabrands.de/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      }
+    },
    "bytes": {
      "version": "3.1.0",
      "resolved": "https://npm.stroeermediabrands.de/bytes/-/bytes-3.1.0.tgz",
      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
    },
+    "camelcase": {
+      "version": "4.1.0",
+      "resolved": "https://npm.stroeermediabrands.de/camelcase/-/camelcase-4.1.0.tgz",
+      "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+    },
+    "capitalize": {
+      "version": "1.0.0",
+      "resolved": "https://npm.stroeermediabrands.de/capitalize/-/capitalize-1.0.0.tgz",
+      "integrity": "sha1-3IAsWAruEBkpAg0soUtMqKCuRL4="
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://npm.stroeermediabrands.de/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://npm.stroeermediabrands.de/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://npm.stroeermediabrands.de/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://npm.stroeermediabrands.de/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://npm.stroeermediabrands.de/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "content-disposition": {
      "version": "0.5.3",
      "resolved": "https://npm.stroeermediabrands.de/content-disposition/-/content-disposition-0.5.3.tgz",
@ -61,6 +145,16 @@
      "resolved": "https://npm.stroeermediabrands.de/cookie-signature/-/cookie-signature-1.0.6.tgz",
      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://npm.stroeermediabrands.de/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "crypto-js": {
+      "version": "3.3.0",
+      "resolved": "https://npm.stroeermediabrands.de/crypto-js/-/crypto-js-3.3.0.tgz",
+      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+    },
    "debug": {
      "version": "2.6.9",
      "resolved": "https://npm.stroeermediabrands.de/debug/-/debug-2.6.9.tgz",
@ -69,6 +163,14 @@
        "ms": "2.0.0"
      }
    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://npm.stroeermediabrands.de/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
    "depd": {
      "version": "1.1.2",
      "resolved": "https://npm.stroeermediabrands.de/depd/-/depd-1.1.2.tgz",
@ -79,6 +181,15 @@
      "resolved": "https://npm.stroeermediabrands.de/destroy/-/destroy-1.0.4.tgz",
      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
    },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://npm.stroeermediabrands.de/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      }
+    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://npm.stroeermediabrands.de/ee-first/-/ee-first-1.1.1.tgz",
@ -89,11 +200,21 @@
      "resolved": "https://npm.stroeermediabrands.de/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
    },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://npm.stroeermediabrands.de/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
    "escape-html": {
      "version": "1.0.3",
      "resolved": "https://npm.stroeermediabrands.de/escape-html/-/escape-html-1.0.3.tgz",
      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
    },
+    "esrever": {
+      "version": "0.2.0",
+      "resolved": "https://npm.stroeermediabrands.de/esrever/-/esrever-0.2.0.tgz",
+      "integrity": "sha1-lunSj08bGnZ4TNXUkOquAQ50B7g="
+    },
    "etag": {
      "version": "1.8.1",
      "resolved": "https://npm.stroeermediabrands.de/etag/-/etag-1.8.1.tgz",
@ -160,6 +281,26 @@
      "resolved": "https://npm.stroeermediabrands.de/fresh/-/fresh-0.5.2.tgz",
      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
    },
+    "fs-extra": {
+      "version": "5.0.0",
+      "resolved": "https://npm.stroeermediabrands.de/fs-extra/-/fs-extra-5.0.0.tgz",
+      "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://npm.stroeermediabrands.de/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+    },
+    "htmlspecialchars": {
+      "version": "1.0.5",
+      "resolved": "https://npm.stroeermediabrands.de/htmlspecialchars/-/htmlspecialchars-1.0.5.tgz",
+      "integrity": "sha1-9DD4wdXzcJvnvrrqaW3ASCQwajA="
+    },
    "http-errors": {
      "version": "1.7.2",
      "resolved": "https://npm.stroeermediabrands.de/http-errors/-/http-errors-1.7.2.tgz",
@ -198,11 +339,88 @@
      "resolved": "https://npm.stroeermediabrands.de/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
    },
+    "is-finite": {
+      "version": "1.1.0",
+      "resolved": "https://npm.stroeermediabrands.de/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
+    },
+    "is-integer": {
+      "version": "1.0.7",
+      "resolved": "https://npm.stroeermediabrands.de/is-integer/-/is-integer-1.0.7.tgz",
+      "integrity": "sha1-a96Bqs3feLZZtmKdYpytxRqIbVw=",
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
+    "is-number": {
+      "version": "5.0.0",
+      "resolved": "https://npm.stroeermediabrands.de/is-number/-/is-number-5.0.0.tgz",
+      "integrity": "sha512-LmVHHP5dTJwrwZg2Jjqp7K5jpvcnYvYD1LMpvGadMsMv5+WXoDSLBQ0+zmuBJmuZGh2J2K845ygj/YukxUnr4A=="
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://npm.stroeermediabrands.de/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://npm.stroeermediabrands.de/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://npm.stroeermediabrands.de/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://npm.stroeermediabrands.de/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "levenshtein": {
+      "version": "1.0.5",
+      "resolved": "https://npm.stroeermediabrands.de/levenshtein/-/levenshtein-1.0.5.tgz",
+      "integrity": "sha1-ORFzepy1baNF0Aj1V4LG8TiXm6M="
+    },
+    "locutus": {
+      "version": "2.0.14",
+      "resolved": "https://npm.stroeermediabrands.de/locutus/-/locutus-2.0.14.tgz",
+      "integrity": "sha512-0H1o1iHNEp3kJ5rW57bT/CAP5g6Qm0Zd817Wcx2+rOMTYyIJoc482Ja1v9dB6IUjwvWKcBNdYi7x2lRXtlJ3bA==",
+      "requires": {
+        "es6-promise": "^4.2.5"
+      }
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://npm.stroeermediabrands.de/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+    },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://npm.stroeermediabrands.de/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+    },
+    "luxon": {
+      "version": "1.25.0",
+      "resolved": "https://npm.stroeermediabrands.de/luxon/-/luxon-1.25.0.tgz",
+      "integrity": "sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ=="
+    },
    "media-typer": {
      "version": "0.3.0",
      "resolved": "https://npm.stroeermediabrands.de/media-typer/-/media-typer-0.3.0.tgz",
      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
    },
+    "merge": {
+      "version": "1.2.1",
+      "resolved": "https://npm.stroeermediabrands.de/merge/-/merge-1.2.1.tgz",
+      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ=="
+    },
    "merge-descriptors": {
      "version": "1.0.1",
      "resolved": "https://npm.stroeermediabrands.de/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@ -231,16 +449,62 @@
        "mime-db": "1.44.0"
      }
    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://npm.stroeermediabrands.de/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://npm.stroeermediabrands.de/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://npm.stroeermediabrands.de/ms/-/ms-2.0.0.tgz",
      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
    },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://npm.stroeermediabrands.de/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://npm.stroeermediabrands.de/negotiator/-/negotiator-0.6.2.tgz",
      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
    },
+    "no-case": {
+      "version": "2.3.2",
+      "resolved": "https://npm.stroeermediabrands.de/no-case/-/no-case-2.3.2.tgz",
+      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+      "requires": {
+        "lower-case": "^1.1.1"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://npm.stroeermediabrands.de/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-hash": {
+      "version": "1.3.1",
+      "resolved": "https://npm.stroeermediabrands.de/object-hash/-/object-hash-1.3.1.tgz",
+      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA=="
+    },
    "on-finished": {
      "version": "2.3.0",
      "resolved": "https://npm.stroeermediabrands.de/on-finished/-/on-finished-2.3.0.tgz",
@ -249,6 +513,19 @@
        "ee-first": "1.1.1"
      }
    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://npm.stroeermediabrands.de/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "pad": {
+      "version": "2.3.0",
+      "resolved": "https://npm.stroeermediabrands.de/pad/-/pad-2.3.0.tgz",
+      "integrity": "sha512-lxrgnOG5AXmzMRT1O5urWtYFxHnFSE+QntgTHij1nvS4W+ubhQLmQRHmZXDeEvk9I00itAixLqU9Q6fE0gW3sw==",
+      "requires": {
+        "wcwidth": "^1.0.1"
+      }
+    },
    "parseurl": {
      "version": "1.3.3",
      "resolved": "https://npm.stroeermediabrands.de/parseurl/-/parseurl-1.3.3.tgz",
@ -259,6 +536,11 @@
      "resolved": "https://npm.stroeermediabrands.de/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://npm.stroeermediabrands.de/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
    "proxy-addr": {
      "version": "2.0.6",
      "resolved": "https://npm.stroeermediabrands.de/proxy-addr/-/proxy-addr-2.0.6.tgz",
@ -297,6 +579,27 @@
        "unpipe": "1.0.0"
      }
    },
+    "readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://npm.stroeermediabrands.de/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "regex-parser": {
+      "version": "2.2.11",
+      "resolved": "https://npm.stroeermediabrands.de/regex-parser/-/regex-parser-2.2.11.tgz",
+      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q=="
+    },
+    "runes": {
+      "version": "0.4.3",
+      "resolved": "https://npm.stroeermediabrands.de/runes/-/runes-0.4.3.tgz",
+      "integrity": "sha512-K6p9y4ZyL9wPzA+PMDloNQPfoDGTiFYDvdlXznyGKgD10BJpcAosvATKrExRKOrNLgD8E7Um7WGW0lxsnOuNLg=="
+    },
    "safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://npm.stroeermediabrands.de/safe-buffer/-/safe-buffer-5.1.2.tgz",
@ -350,16 +653,87 @@
      "resolved": "https://npm.stroeermediabrands.de/setprototypeof/-/setprototypeof-1.1.1.tgz",
      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
    },
+    "snake-case": {
+      "version": "2.1.0",
+      "resolved": "https://npm.stroeermediabrands.de/snake-case/-/snake-case-2.1.0.tgz",
+      "integrity": "sha1-Qb2xtz8w7GagTU4srRt2OH1NbZ8=",
+      "requires": {
+        "no-case": "^2.2.0"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://npm.stroeermediabrands.de/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
    "statuses": {
      "version": "1.5.0",
      "resolved": "https://npm.stroeermediabrands.de/statuses/-/statuses-1.5.0.tgz",
      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://npm.stroeermediabrands.de/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://npm.stroeermediabrands.de/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://npm.stroeermediabrands.de/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
    "toidentifier": {
      "version": "1.0.0",
      "resolved": "https://npm.stroeermediabrands.de/toidentifier/-/toidentifier-1.0.0.tgz",
      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
    },
+    "twig-lexer": {
+      "version": "0.7.2",
+      "resolved": "https://npm.stroeermediabrands.de/twig-lexer/-/twig-lexer-0.7.2.tgz",
+      "integrity": "sha512-c+SyqPvjH1fDXIdW9E6oWMNGGB0f5Ua64ggEh/3AGUEIImkAGTzVdOY09qLaK1NhLCUSfT/JEjr8VnZbOaZDjg==",
+      "requires": {
+        "@types/node": "^12.0.8"
+      }
+    },
+    "twing": {
+      "version": "5.0.2",
+      "resolved": "https://npm.stroeermediabrands.de/twing/-/twing-5.0.2.tgz",
+      "integrity": "sha512-uyOnD+KUTH+Ddbs21/KVJJI8DFhlDLNJLEU5UrudGS1W1qLyyCho9HxSus9LUzIjYRYNifXiQnlYwzi2aWI0Pg==",
+      "requires": {
+        "@types/luxon": "^1.4.0",
+        "camelcase": "^4.1.0",
+        "capitalize": "^1.0.0",
+        "crypto-js": "^3.1.9-1",
+        "esrever": "^0.2.0",
+        "fs-extra": "^5.0.0",
+        "htmlspecialchars": "^1.0.5",
+        "iconv-lite": "^0.4.19",
+        "is-integer": "^1.0.7",
+        "is-number": "^5.0.0",
+        "is-plain-object": "^2.0.4",
+        "isobject": "^3.0.1",
+        "levenshtein": "^1.0.5",
+        "locutus": "^2.0.11",
+        "luxon": "^1.19.3",
+        "merge": "^1.2.1",
+        "object-hash": "^1.2.0",
+        "pad": "^2.0.3",
+        "regex-parser": "^2.2.8",
+        "runes": "^0.4.3",
+        "snake-case": "^2.1.0",
+        "source-map": "^0.6.1",
+        "tmp": "0.0.33",
+        "twig-lexer": "^0.7.2",
+        "utf8-binary-cutter": "^0.9.2"
+      }
+    },
    "type-is": {
      "version": "1.6.18",
      "resolved": "https://npm.stroeermediabrands.de/type-is/-/type-is-1.6.18.tgz",
@ -369,11 +743,34 @@
        "mime-types": "~2.1.24"
      }
    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://npm.stroeermediabrands.de/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://npm.stroeermediabrands.de/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
    "unpipe": {
      "version": "1.0.0",
      "resolved": "https://npm.stroeermediabrands.de/unpipe/-/unpipe-1.0.0.tgz",
      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
    },
+    "utf8-binary-cutter": {
+      "version": "0.9.2",
+      "resolved": "https://npm.stroeermediabrands.de/utf8-binary-cutter/-/utf8-binary-cutter-0.9.2.tgz",
+      "integrity": "sha512-lS/2TaA9idsyafus4+WaB+C/AfL3JD85C/sgMJBpplZay1G5SwTQcxmd4jiJLI1VxSJr6a3yuNicBxD+iU2MKQ==",
+      "requires": {
+        "lodash": "^4.17.10"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://npm.stroeermediabrands.de/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
    "utils-merge": {
      "version": "1.0.1",
      "resolved": "https://npm.stroeermediabrands.de/utils-merge/-/utils-merge-1.0.1.tgz",
@ -384,10 +781,23 @@
      "resolved": "https://npm.stroeermediabrands.de/vary/-/vary-1.1.2.tgz",
      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://npm.stroeermediabrands.de/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
    "ws": {
      "version": "7.3.1",
      "resolved": "https://npm.stroeermediabrands.de/ws/-/ws-7.3.1.tgz",
      "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA=="
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://npm.stroeermediabrands.de/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    }
  }
 }
--- a/server/package.json
+++ b/server/package.json
@ -1,8 +1,11 @@
 {
  "type": "module",
  "dependencies": {
+    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "image-size": "^0.9.3",
+    "multer": "^1.4.2",
+    "twing": "^5.0.2",
    "ws": "^7.3.1"
  }
 }