para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

game stuff

Browse source
This commit is contained in:
Zutatensuppe 2020-11-25 22:03:35 +01:00
parent 07da40dce7
commit e75cd7406f
20 changed files with 1527 additions and 387 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
/server/node_modules /server/node_modules
/server/config.js /server/config.js
/data

75
common/GameCommon.js
View file

@ -1,4 +1,5 @@
import Geometry from './Geometry.js' import Geometry from './Geometry.js'
import Util from './Util.js'
const GAMES = {} const GAMES = {}
@ -10,13 +11,21 @@ function setGame(gameId, game) {
GAMES[gameId] = game GAMES[gameId] = game
} }
function addPlayer(gameId, playerId, name) { function addPlayer(gameId, playerId) {
GAMES[gameId].players[playerId] = { const ts = Util.timestamp()
id: playerId, if (!GAMES[gameId].players[playerId]) {
x: 0, GAMES[gameId].players[playerId] = {
y: 0, id: playerId,
down: false, x: 0,
name: name, y: 0,
d: 0, // mouse down
name: 'anon',
color: '#ffffff',
points: 0,
ts,
}
} else {
changePlayer(gameId, playerId, { ts })
} }
GAMES[gameId].evtInfos[playerId] = { GAMES[gameId].evtInfos[playerId] = {
_last_mouse: null, _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) { function get(gameId) {
return GAMES[gameId] return GAMES[gameId]
} }
@ -294,10 +311,23 @@ function handleInput(gameId, playerId, input) {
} }
} }
let [type, x, y] = input const ts = Util.timestamp()
let pos = {x, y}
if (type === 'down') { const type = input[0]
changePlayer(gameId, playerId, { down: true }) 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() _playerChange()
evtInfo._last_mouse_down = pos evtInfo._last_mouse_down = pos
@ -311,9 +341,14 @@ function handleInput(gameId, playerId, input) {
setTilesOwner(gameId, tileIdxs, playerId) setTilesOwner(gameId, tileIdxs, playerId)
_tileChanges(tileIdxs) _tileChanges(tileIdxs)
} }
evtInfo._last_mouse = pos
} else if (type === 'move') { } 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() _playerChange()
if (evtInfo._last_mouse_down !== null) { if (evtInfo._last_mouse_down !== null) {
@ -329,8 +364,14 @@ function handleInput(gameId, playerId, input) {
evtInfo._last_mouse_down = pos evtInfo._last_mouse_down = pos
} }
evtInfo._last_mouse = pos
} else if (type === 'up') { } 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() _playerChange()
evtInfo._last_mouse_down = null evtInfo._last_mouse_down = null
@ -349,6 +390,7 @@ function handleInput(gameId, playerId, input) {
// Snap the tile to the final destination // Snap the tile to the final destination
moveTilesDiff(gameId, tileIdxs, diff) moveTilesDiff(gameId, tileIdxs, diff)
finishTiles(gameId, tileIdxs) finishTiles(gameId, tileIdxs)
changePlayer(gameId, playerId, { points: players[playerId].points + tileIdxs.length })
_tileChanges(tileIdxs) _tileChanges(tileIdxs)
} else { } else {
// Snap to other tiles // 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 return changes
} }
@ -404,7 +449,9 @@ export default {
exists, exists,
addPlayer, addPlayer,
addSocket, addSocket,
removeSocket,
get, get,
getAllGames,
getSockets, getSockets,
handleInput, handleInput,
} }

14
common/Util.js
View file

@ -20,9 +20,23 @@ export const shuffle = (array) => {
return arr 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 { export default {
uniqId, uniqId,
randomInt, randomInt,
choice, choice,
shuffle, shuffle,
timestamp,
} }

6
game/Camera.js
View file

@ -9,7 +9,7 @@ export default class Camera {
this.height = canvas.height this.height = canvas.height
this.zoom = 1 this.zoom = 1
this.minZoom = .2 this.minZoom = .1
this.maxZoom = 6 this.maxZoom = 6
this.zoomStep = .05 this.zoomStep = .05
} }
@ -44,11 +44,11 @@ export default class Camera {
} }
zoomOut() { zoomOut() {
return this.setZoom(this.zoom - this.zoomStep) return this.setZoom(this.zoom - this.zoomStep * this.zoom)
} }
zoomIn() { zoomIn() {
return this.setZoom(this.zoom + this.zoomStep) return this.setZoom(this.zoom + this.zoomStep * this.zoom)
} }
/** /**

4
game/Communication.js
View file

@ -15,13 +15,13 @@ function send(message) {
let clientSeq let clientSeq
let events let events
function connect(gameId, clientId, name) { function connect(gameId, clientId) {
clientSeq = 0 clientSeq = 0
events = {} events = {}
conn = new WsClient(WS_ADDRESS, clientId + '|' + gameId) conn = new WsClient(WS_ADDRESS, clientId + '|' + gameId)
return new Promise(r => { return new Promise(r => {
conn.connect() conn.connect()
send([Protocol.EV_CLIENT_INIT, name]) send([Protocol.EV_CLIENT_INIT])
conn.onSocket('message', async ({ data }) => { conn.onSocket('message', async ({ data }) => {
const msg = JSON.parse(data) const msg = JSON.parse(data)
const msgType = msg[0] const msgType = msg[0]

21
game/Graphics.js
View file

@ -1,7 +1,7 @@
function createCanvas(width = 0, height = 0) { function createCanvas(width = 0, height = 0) {
const c = document.createElement('canvas') const c = document.createElement('canvas')
c.width = width === 0 ? window.innerWidth : width c.width = width
c.height = height === 0 ? window.innerHeight : height c.height = height
return c return c
} }
@ -29,9 +29,26 @@ async function createBitmap(width, height, color) {
return await createImageBitmap(c) 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 { export default {
createBitmap, createBitmap,
createCanvas, createCanvas,
loadImageToBitmap, loadImageToBitmap,
resizeBitmap, resizeBitmap,
colorize,
} }

150
game/PuzzleGraphics.js
View file

@ -27,33 +27,50 @@ async function createPuzzleTileBitmaps(img, tiles, info) {
const path = new Path2D() const path = new Path2D()
const topLeftEdge = { x: tileMarginWidth, y: tileMarginWidth } 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 }) 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 }) 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 }) 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 }) path.moveTo(topLeftEdge.x, topLeftEdge.y)
let p2 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 3] * tileRatio, y: curvyCoords[i * 6 + 2] * tileRatio }) if (shape.top !== 0) {
let p3 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 5] * tileRatio, y: curvyCoords[i * 6 + 4] * tileRatio }) for (let i = 0; i < curvyCoords.length / 6; i++) {
path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y); 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 paths[key] = path
return path return path
@ -65,13 +82,37 @@ async function createPuzzleTileBitmaps(img, tiles, info) {
const c = Graphics.createCanvas(tileDrawSize, tileDrawSize) const c = Graphics.createCanvas(tileDrawSize, tileDrawSize)
const ctx = c.getContext('2d') const ctx = c.getContext('2d')
// stroke (slightly darker version of image)
// ----------------------------------------------------------- // -----------------------------------------------------------
// ----------------------------------------------------------- // -----------------------------------------------------------
ctx.save()
ctx.lineWidth = 2 ctx.lineWidth = 2
ctx.stroke(path) 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.clip(path)
ctx.drawImage( ctx.drawImage(
img, img,
@ -84,8 +125,65 @@ async function createPuzzleTileBitmaps(img, tiles, info) {
tileDrawSize, tileDrawSize,
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.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) bitmaps[tile.idx] = await createImageBitmap(c)
} }

503
game/game.js Normal file
View file

@ -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()

BIN
game/grab_mask.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 125 B

BIN
game/hand_mask.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 140 B

383
game/index.js
View file

@ -1,307 +1,98 @@
"use strict" const Upload = {
import {run} from './gameloop.js' name: 'upload',
import Camera from './Camera.js' props: {
import Graphics from './Graphics.js' accept: String,
import Debug from './Debug.js' label: String,
import Communication from './Communication.js' },
import Util from './../common/Util.js' template: `
import PuzzleGraphics from './PuzzleGraphics.js' <label>
import Game from './Game.js' <input type="file" style="display: none" @change="upload" :accept="accept" />
<span class="btn">{{label || 'Upload File'}}</span>
if (typeof GAME_ID === 'undefined') throw '[ GAME_ID not set ]' </label>
if (typeof WS_ADDRESS === 'undefined') throw '[ WS_ADDRESS not set ]' `,
methods: {
if (typeof DEBUG === 'undefined') window.DEBUG = false async upload(evt) {
const file = evt.target.files[0]
function addCanvasToDom(canvas) { if (!file) return;
document.body.append(canvas) const formData = new FormData();
return canvas formData.append('file', file, file.name);
} const res = await fetch('/upload', {
method: 'post',
function initme() { body: formData,
// 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,
}) })
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,
})
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])
} }
} }
async function main() { export default {
let gameId = GAME_ID components: {
let [CLIENT_ID, name] = initme() 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>
let cursorGrab = await Graphics.loadImageToBitmap('/grab.png') <h1>New game</h1>
let cursorHand = await Graphics.loadImageToBitmap('/hand.png') <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>
const game = await Communication.connect(gameId, CLIENT_ID, name) <h1>Image lib</h1>
Game.createGame(GAME_ID, game); <div>
<img
const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(game.puzzle) v-for="i in images"
const puzzle = game.puzzle :src="i.url"
const players = game.players @click="image = i"
style="width: 150px; display: inline-block; margin: 5px;"
let rerender = true />
</div>
const changePlayer = (change) => { </div>`,
for (let k of Object.keys(change)) { data() {
players[CLIENT_ID][k] = change[k] return {
tiles: 1000,
image: '',
} }
} },
methods: {
// Create a dom and attach adapters to it so we can work with it mediaImgUploaded(j) {
const canvas = addCanvasToDom(Graphics.createCanvas()) this.image = j.image
const ctx = canvas.getContext('2d') },
async newGame() {
// initialize some view data const res = await fetch('/newgame', {
// this global data will change according to input events method: 'post',
const viewport = new Camera(canvas) headers: {
// center viewport 'Accept': 'application/json',
viewport.move( 'Content-Type': 'application/json'
-(puzzle.info.table.width - viewport.width) /2, },
-(puzzle.info.table.height - viewport.height) /2 body: JSON.stringify({tiles: this.tiles, image: this.image}),
) })
if (res.status === 200) {
const evts = new EventAdapter(canvas, viewport) const game = await res.json()
location.assign(game.url)
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()

145
game/style.css Normal file
View file

@ -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;
}

16
game/templates/game.html.twig Normal file
View file

@ -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>

21
game/templates/index.html.twig Normal file
View file

@ -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>

32
server/Game.js
View file

@ -1,3 +1,4 @@
import fs from 'fs'
import { createPuzzle } from './Puzzle.js' import { createPuzzle } from './Puzzle.js'
import GameCommon from './../common/GameCommon.js' import GameCommon from './../common/GameCommon.js'
@ -5,18 +6,47 @@ async function createGame(gameId, targetTiles, image) {
const game = { const game = {
puzzle: await createPuzzle(targetTiles, image), puzzle: await createPuzzle(targetTiles, image),
players: {}, players: {},
sockets: [], sockets: [],
evtInfos: {}, evtInfos: {},
} }
GameCommon.setGame(gameId, game) 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 { export default {
loadAllGames,
getAllGames: GameCommon.getAllGames,
store,
createGame, createGame,
exists: GameCommon.exists, exists: GameCommon.exists,
addPlayer: GameCommon.addPlayer, addPlayer: GameCommon.addPlayer,
addSocket: GameCommon.addSocket, addSocket: GameCommon.addSocket,
removeSocket: GameCommon.removeSocket,
get: GameCommon.get, get: GameCommon.get,
getSockets: GameCommon.getSockets, getSockets: GameCommon.getSockets,
handleInput: GameCommon.handleInput, handleInput: GameCommon.handleInput,

4
server/Puzzle.js
View file

@ -6,8 +6,8 @@ import Util from './../common/Util.js'
const TILE_SIZE = 64 const TILE_SIZE = 64
async function createPuzzle(targetTiles, image) { async function createPuzzle(targetTiles, image) {
const imagePath = './../game' + image const imagePath = image.file
const imageUrl = image const imageUrl = image.url
// load bitmap, to determine the original size of the image // load bitmap, to determine the original size of the image
const dim = sizeOf(imagePath) const dim = sizeOf(imagePath)

1
server/WebSocketServer.js
View file

@ -67,6 +67,7 @@ class WebSocketServer {
return socket.terminate() return socket.terminate()
} }
socket.isAlive = false socket.isAlive = false
this.evt.dispatch('close', {socket})
socket.ping(() => { }) socket.ping(() => { })
}) })
}, 30000) }, 30000)

125
server/index.js
View file

@ -1,58 +1,91 @@
import WebSocketServer from './WebSocketServer.js' import WebSocketServer from './WebSocketServer.js'
import fs from 'fs'
import express from 'express' import express from 'express'
import multer from 'multer'
import config from './config.js' import config from './config.js'
import Protocol from './../common/Protocol.js' import Protocol from './../common/Protocol.js'
import Util from './../common/Util.js' import Util from './../common/Util.js'
import Game from './Game.js' import Game from './Game.js'
import twing from 'twing'
import bodyParser from 'body-parser'
// desired number of tiles const allImages = () => [
// actual calculated number can be higher ...fs.readdirSync('./../game/example-images/').map(f => ({
const TARGET_TILES = 1000 file: `./../game/example-images/${f}`,
url: `/example-images/${f}`,
const IMAGES = [ })),
'/example-images/ima_86ec3fa.jpeg', ...fs.readdirSync('./../data/uploads/').map(f => ({
'/example-images/bleu.png', file: `./../data/uploads/${f}`,
'/example-images/saechsische_schweiz.jpg', url: `/uploads/${f}`,
'/example-images/132-2048x1365.jpg', })),
] ]
const games = {}
const port = config.http.port const port = config.http.port
const hostname = config.http.hostname const hostname = config.http.hostname
const app = express() 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/') const statics = express.static('./../game/')
app.use('/g/:gid', (req, res, next) => {
res.send(` const render = async (template, data) => {
<html><head><style> const loader = new twing.TwingLoaderFilesystem('./../game/templates')
html,body {margin: 0; overflow: hidden;} const env = new twing.TwingEnvironment(loader)
html, body, #main { background: #222 } return env.render(template, data)
canvas {cursor: none;} }
</style></head><body>
<script>window.GAME_ID = '${req.params.gid}'</script> app.use('/g/:gid', async (req, res, next) => {
<script>window.WS_ADDRESS = '${config.ws.connectstring}'</script> res.send(await render('game.html.twig', {
<script src="/index.js" type="module"></script> GAME_ID: req.params.gid,
</body> WS_ADDRESS: config.ws.connectstring,
</html> }))
`) })
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('/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 === '/') { if (req.path === '/') {
res.send(` const games = [
<html><head><style> ...Object.keys(Game.getAllGames()).map(id => ({
html,body {margin: 0; overflow: hidden;} id: id,
html, body, #main { background: #222 } title: id,
</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>` res.send(await render('index.html.twig', {
})} games,
</body> images: allImages(),
</html> }))
`)
} else { } else {
statics(req, res, next) 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}) => { wss.on('message', async ({socket, data}) => {
try { try {
const proto = socket.protocol.split('|') const proto = socket.protocol.split('|')
@ -76,13 +118,12 @@ wss.on('message', async ({socket, data}) => {
const msgType = msg[0] const msgType = msg[0]
switch (msgType) { switch (msgType) {
case Protocol.EV_CLIENT_INIT: { case Protocol.EV_CLIENT_INIT: {
const name = msg[1]
if (!Game.exists(gameId)) { 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.addSocket(gameId, socket)
Game.store(gameId)
notify( notify(
[Protocol.EV_SERVER_INIT, Game.get(gameId)], [Protocol.EV_SERVER_INIT, Game.get(gameId)],
[socket] [socket]
@ -93,6 +134,7 @@ wss.on('message', async ({socket, data}) => {
const clientSeq = msg[1] const clientSeq = msg[1]
const clientEvtData = msg[2] const clientEvtData = msg[2]
const changes = Game.handleInput(gameId, clientId, clientEvtData) const changes = Game.handleInput(gameId, clientId, clientEvtData)
Game.store(gameId)
notify( notify(
[Protocol.EV_SERVER_EVENT, clientId, clientSeq, changes], [Protocol.EV_SERVER_EVENT, clientId, clientSeq, changes],
Game.getSockets(gameId) 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}`)) app.listen(port, hostname, () => console.log(`server running on http://${hostname}:${port}`))
wss.listen() wss.listen()

410
server/package-lock.json generated
View file

@ -2,6 +2,16 @@
"requires": true, "requires": true,
"lockfileVersion": 1, "lockfileVersion": 1,
"dependencies": { "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": { "accepts": {
"version": "1.3.7", "version": "1.3.7",
"resolved": "https://npm.stroeermediabrands.de/accepts/-/accepts-1.3.7.tgz", "resolved": "https://npm.stroeermediabrands.de/accepts/-/accepts-1.3.7.tgz",
@ -11,6 +21,11 @@
"negotiator": "0.6.2" "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": { "array-flatten": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://npm.stroeermediabrands.de/array-flatten/-/array-flatten-1.1.1.tgz", "resolved": "https://npm.stroeermediabrands.de/array-flatten/-/array-flatten-1.1.1.tgz",
@ -33,11 +48,80 @@
"type-is": "~1.6.17" "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": { "bytes": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://npm.stroeermediabrands.de/bytes/-/bytes-3.1.0.tgz", "resolved": "https://npm.stroeermediabrands.de/bytes/-/bytes-3.1.0.tgz",
"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" "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": { "content-disposition": {
"version": "0.5.3", "version": "0.5.3",
"resolved": "https://npm.stroeermediabrands.de/content-disposition/-/content-disposition-0.5.3.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" "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": { "debug": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://npm.stroeermediabrands.de/debug/-/debug-2.6.9.tgz", "resolved": "https://npm.stroeermediabrands.de/debug/-/debug-2.6.9.tgz",
@ -69,6 +163,14 @@
"ms": "2.0.0" "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": { "depd": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://npm.stroeermediabrands.de/depd/-/depd-1.1.2.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/destroy/-/destroy-1.0.4.tgz",
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" "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": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://npm.stroeermediabrands.de/ee-first/-/ee-first-1.1.1.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" "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": { "escape-html": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://npm.stroeermediabrands.de/escape-html/-/escape-html-1.0.3.tgz", "resolved": "https://npm.stroeermediabrands.de/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
}, },
"esrever": {
"version": "0.2.0",
"resolved": "https://npm.stroeermediabrands.de/esrever/-/esrever-0.2.0.tgz",
"integrity": "sha1-lunSj08bGnZ4TNXUkOquAQ50B7g="
},
"etag": { "etag": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://npm.stroeermediabrands.de/etag/-/etag-1.8.1.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" "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": { "http-errors": {
"version": "1.7.2", "version": "1.7.2",
"resolved": "https://npm.stroeermediabrands.de/http-errors/-/http-errors-1.7.2.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" "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": { "media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://npm.stroeermediabrands.de/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://npm.stroeermediabrands.de/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" "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": { "merge-descriptors": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://npm.stroeermediabrands.de/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "resolved": "https://npm.stroeermediabrands.de/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@ -231,16 +449,62 @@
"mime-db": "1.44.0" "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": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://npm.stroeermediabrands.de/ms/-/ms-2.0.0.tgz", "resolved": "https://npm.stroeermediabrands.de/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" "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": { "negotiator": {
"version": "0.6.2", "version": "0.6.2",
"resolved": "https://npm.stroeermediabrands.de/negotiator/-/negotiator-0.6.2.tgz", "resolved": "https://npm.stroeermediabrands.de/negotiator/-/negotiator-0.6.2.tgz",
"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" "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": { "on-finished": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://npm.stroeermediabrands.de/on-finished/-/on-finished-2.3.0.tgz", "resolved": "https://npm.stroeermediabrands.de/on-finished/-/on-finished-2.3.0.tgz",
@ -249,6 +513,19 @@
"ee-first": "1.1.1" "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": { "parseurl": {
"version": "1.3.3", "version": "1.3.3",
"resolved": "https://npm.stroeermediabrands.de/parseurl/-/parseurl-1.3.3.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" "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": { "proxy-addr": {
"version": "2.0.6", "version": "2.0.6",
"resolved": "https://npm.stroeermediabrands.de/proxy-addr/-/proxy-addr-2.0.6.tgz", "resolved": "https://npm.stroeermediabrands.de/proxy-addr/-/proxy-addr-2.0.6.tgz",
@ -297,6 +579,27 @@
"unpipe": "1.0.0" "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": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://npm.stroeermediabrands.de/safe-buffer/-/safe-buffer-5.1.2.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/setprototypeof/-/setprototypeof-1.1.1.tgz",
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" "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": { "statuses": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://npm.stroeermediabrands.de/statuses/-/statuses-1.5.0.tgz", "resolved": "https://npm.stroeermediabrands.de/statuses/-/statuses-1.5.0.tgz",
"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" "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": { "toidentifier": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://npm.stroeermediabrands.de/toidentifier/-/toidentifier-1.0.0.tgz", "resolved": "https://npm.stroeermediabrands.de/toidentifier/-/toidentifier-1.0.0.tgz",
"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" "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": { "type-is": {
"version": "1.6.18", "version": "1.6.18",
"resolved": "https://npm.stroeermediabrands.de/type-is/-/type-is-1.6.18.tgz", "resolved": "https://npm.stroeermediabrands.de/type-is/-/type-is-1.6.18.tgz",
@ -369,11 +743,34 @@
"mime-types": "~2.1.24" "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": { "unpipe": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://npm.stroeermediabrands.de/unpipe/-/unpipe-1.0.0.tgz", "resolved": "https://npm.stroeermediabrands.de/unpipe/-/unpipe-1.0.0.tgz",
"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" "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": { "utils-merge": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://npm.stroeermediabrands.de/utils-merge/-/utils-merge-1.0.1.tgz", "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", "resolved": "https://npm.stroeermediabrands.de/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" "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": { "ws": {
"version": "7.3.1", "version": "7.3.1",
"resolved": "https://npm.stroeermediabrands.de/ws/-/ws-7.3.1.tgz", "resolved": "https://npm.stroeermediabrands.de/ws/-/ws-7.3.1.tgz",
"integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==" "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=="
} }
} }
} }

3
server/package.json
View file

@ -1,8 +1,11 @@
{ {
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1", "express": "^4.17.1",
"image-size": "^0.9.3", "image-size": "^0.9.3",
"multer": "^1.4.2",
"twing": "^5.0.2",
"ws": "^7.3.1" "ws": "^7.3.1"
} }
} }