From e75cd7406f5daf68fff85b4603336aafcba71e69 Mon Sep 17 00:00:00 2001 From: Zutatensuppe Date: Wed, 25 Nov 2020 22:03:35 +0100 Subject: [PATCH] game stuff --- .gitignore | 1 + common/GameCommon.js | 75 ++++- common/Util.js | 14 + game/Camera.js | 6 +- game/Communication.js | 4 +- game/Graphics.js | 21 +- game/PuzzleGraphics.js | 150 ++++++++-- game/game.js | 503 +++++++++++++++++++++++++++++++++ game/grab_mask.png | Bin 0 -> 125 bytes game/hand_mask.png | Bin 0 -> 140 bytes game/index.js | 383 ++++++------------------- game/style.css | 145 ++++++++++ game/templates/game.html.twig | 16 ++ game/templates/index.html.twig | 21 ++ server/Game.js | 32 ++- server/Puzzle.js | 4 +- server/WebSocketServer.js | 1 + server/index.js | 125 +++++--- server/package-lock.json | 410 +++++++++++++++++++++++++++ server/package.json | 3 + 20 files changed, 1527 insertions(+), 387 deletions(-) create mode 100644 game/game.js create mode 100644 game/grab_mask.png create mode 100644 game/hand_mask.png create mode 100644 game/style.css create mode 100644 game/templates/game.html.twig create mode 100644 game/templates/index.html.twig diff --git a/.gitignore b/.gitignore index a805f8d..62aba20 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /server/node_modules /server/config.js +/data diff --git a/common/GameCommon.js b/common/GameCommon.js index e21dd3e..387f9db 100644 --- 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) { - GAMES[gameId].players[playerId] = { - id: playerId, - x: 0, - y: 0, - down: false, - name: name, +function addPlayer(gameId, playerId) { + const ts = Util.timestamp() + if (!GAMES[gameId].players[playerId]) { + GAMES[gameId].players[playerId] = { + id: playerId, + x: 0, + y: 0, + 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() } - evtInfo._last_mouse = pos return changes } @@ -404,7 +449,9 @@ export default { exists, addPlayer, addSocket, + removeSocket, get, + getAllGames, getSockets, handleInput, } diff --git a/common/Util.js b/common/Util.js index 0d20aa1..1ed3bd4 100644 --- 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, } diff --git a/game/Camera.js b/game/Camera.js index bb92a67..7f44ae6 100644 --- 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) } /** diff --git a/game/Communication.js b/game/Communication.js index 16106f2..27c885a 100644 --- 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] diff --git a/game/Graphics.js b/game/Graphics.js index 95b313f..9b38e65 100644 --- 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, } diff --git a/game/PuzzleGraphics.js b/game/PuzzleGraphics.js index 29dc7a7..e8eb610 100644 --- a/game/PuzzleGraphics.js +++ b/game/PuzzleGraphics.js @@ -27,33 +27,50 @@ async function createPuzzleTileBitmaps(img, tiles, info) { const path = new Path2D() const topLeftEdge = { x: tileMarginWidth, y: tileMarginWidth } - path.moveTo(topLeftEdge.x, topLeftEdge.y) - 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 }) - 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 }) - 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 }) - 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); + + 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); + } + } 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); + } + } 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); + } + } 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) } diff --git a/game/game.js b/game/game.js new file mode 100644 index 0000000..3eecb75 --- /dev/null +++ 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() diff --git a/game/grab_mask.png b/game/grab_mask.png new file mode 100644 index 0000000000000000000000000000000000000000..d294692ec0a8b45793a9875a78e2d5dd0e279d39 GIT binary patch literal 125 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`E}kxqAr`&K2@@qs%|{caXKt% n&!LWk3I_#5Y(>;nx)>RPOZfP=9NXImG@ilJ)z4*}Q$iB}BF`+S literal 0 HcmV?d00001 diff --git a/game/index.js b/game/index.js index cf8705c..191027d 100644 --- 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: ` + +`, + 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]) - } - } - - _mouseUp(e) { - if (e.button === 0) { - const pos = this._viewport.viewportToWorld({ - x: e.offsetX, - y: e.offsetY, - }) - this._mouseEvts.push(['up', pos.x, pos.y]) - } - } - - _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]) + const j = await res.json() + this.$emit('uploaded', j) + }, } } -async function main() { - let gameId = GAME_ID - let [CLIENT_ID, name] = initme() +export default { + components: { + Upload, + }, + props: { + games: Array, + images: Array, + }, + template: ` +
+

Running games

+
+ {{g.title}} +
- let cursorGrab = await Graphics.loadImageToBitmap('/grab.png') - let cursorHand = await Graphics.loadImageToBitmap('/hand.png') +

New game

+
+ + +
+
+ + + + or + + + + + (or select from below) + +
+ Start new game - 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] +

Image lib

+
+ +
+
`, + data() { + return { + tiles: 1000, + image: '', } - } - - // 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; + }, + 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}), + }) + if (res.status === 200) { + const game = await res.json() + location.assign(game.url) } } - }) - - // 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() diff --git a/game/style.css b/game/style.css new file mode 100644 index 0000000..3a72a81 --- /dev/null +++ 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; +} diff --git a/game/templates/game.html.twig b/game/templates/game.html.twig new file mode 100644 index 0000000..5e699ac --- /dev/null +++ b/game/templates/game.html.twig @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/game/templates/index.html.twig b/game/templates/index.html.twig new file mode 100644 index 0000000..9562a2c --- /dev/null +++ b/game/templates/index.html.twig @@ -0,0 +1,21 @@ + + + + + + +
+ + + diff --git a/server/Game.js b/server/Game.js index 5d722dc..43caad3 100644 --- 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, diff --git a/server/Puzzle.js b/server/Puzzle.js index 0a45cab..c5ece8e 100644 --- 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) diff --git a/server/WebSocketServer.js b/server/WebSocketServer.js index 38afa2e..5d79c97 100644 --- 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) diff --git a/server/index.js b/server/index.js index 4a97e55..b053847 100644 --- 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(` - - - - - - - `) + +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(` - - New game :P - ${Object.keys(games).map(k => { - return `Game ${k}` - })} - - - `) + 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() diff --git a/server/package-lock.json b/server/package-lock.json index 3174937..03ba5bc 100644 --- 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==" } } } diff --git a/server/package.json b/server/package.json index 3b244b0..42efc53 100644 --- 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" } }