reduce size of game json files
This commit is contained in:
Zutatensuppe
parent
c6899a615b
commit
b6a3cfd8ba
9 changed files with 380 additions and 149 deletions
19
game/Game.js
19
game/Game.js
|
|
@ -1,6 +1,23 @@
|
|||
import GameCommon from './../common/GameCommon.js'
|
||||
|
||||
export default {
|
||||
createGame: GameCommon.setGame,
|
||||
newGame: GameCommon.newGame,
|
||||
getActivePlayers: GameCommon.getActivePlayers,
|
||||
handleInput: GameCommon.handleInput,
|
||||
getPlayerBgColor: GameCommon.getPlayerBgColor,
|
||||
getPlayerColor: GameCommon.getPlayerColor,
|
||||
getPlayerName: GameCommon.getPlayerName,
|
||||
changePlayer: GameCommon.changePlayer,
|
||||
setPlayer: GameCommon.setPlayer,
|
||||
setTile: GameCommon.setTile,
|
||||
getImageUrl: GameCommon.getImageUrl,
|
||||
setPuzzleData: GameCommon.setPuzzleData,
|
||||
getTableWidth: GameCommon.getTableWidth,
|
||||
getTableHeight: GameCommon.getTableHeight,
|
||||
getPuzzleWidth: GameCommon.getPuzzleWidth,
|
||||
getPuzzleHeight: GameCommon.getPuzzleHeight,
|
||||
getTilesSortedByZIndex: GameCommon.getTilesSortedByZIndex,
|
||||
getFirstOwnedTile: GameCommon.getFirstOwnedTile,
|
||||
getTileDrawOffset: GameCommon.getTileDrawOffset,
|
||||
getTileDrawSize: GameCommon.getTileDrawSize,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Geometry from '../common/Geometry.js'
|
||||
import Graphics from './Graphics.js'
|
||||
import Util from './../common/Util.js'
|
||||
|
||||
async function createPuzzleTileBitmaps(img, tiles, info) {
|
||||
var tileSize = info.tileSize
|
||||
|
|
@ -76,9 +77,10 @@ async function createPuzzleTileBitmaps(img, tiles, info) {
|
|||
return path
|
||||
}
|
||||
|
||||
for (let tile of tiles) {
|
||||
for (let t of tiles) {
|
||||
const tile = Util.decodeTile(t)
|
||||
const srcRect = srcRectByIdx(info, tile.idx)
|
||||
const path = pathForShape(info.shapes[tile.idx])
|
||||
const path = pathForShape(Util.decodeShape(info.shapes[tile.idx]))
|
||||
|
||||
const c = Graphics.createCanvas(tileDrawSize, tileDrawSize)
|
||||
const ctx = c.getContext('2d')
|
||||
|
|
@ -192,7 +194,7 @@ async function createPuzzleTileBitmaps(img, tiles, info) {
|
|||
}
|
||||
|
||||
function srcRectByIdx(puzzleInfo, idx) {
|
||||
const c = puzzleInfo.coords[idx]
|
||||
const c = Util.coordByTileIdx(puzzleInfo, idx)
|
||||
return {
|
||||
x: c.x * puzzleInfo.tileSize,
|
||||
y: c.y * puzzleInfo.tileSize,
|
||||
|
|
|
|||
107
game/game.js
107
game/game.js
|
|
@ -27,18 +27,6 @@ function addCanvasToDom(canvas) {
|
|||
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')
|
||||
|
|
@ -141,8 +129,8 @@ function addMenuToDom(previewImageUrl) {
|
|||
scoresTitleEl.appendChild(document.createTextNode('Scores'))
|
||||
|
||||
const scoresListEl = document.createElement('table')
|
||||
const updateScores = (players) => {
|
||||
const activePlayers = getActivePlayers(players)
|
||||
const updateScores = (gameId) => {
|
||||
const activePlayers = Game.getActivePlayers(gameId)
|
||||
const scores = activePlayers.map(p => ({
|
||||
name: p.name,
|
||||
points: p.points,
|
||||
|
|
@ -188,15 +176,6 @@ function initme() {
|
|||
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 = []
|
||||
|
|
@ -279,20 +258,12 @@ async function main() {
|
|||
}
|
||||
|
||||
const game = await Communication.connect(gameId, CLIENT_ID)
|
||||
Game.createGame(GAME_ID, game);
|
||||
Game.newGame(game)
|
||||
|
||||
const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(game.puzzle)
|
||||
const puzzle = game.puzzle
|
||||
const players = game.players
|
||||
|
||||
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)
|
||||
const {bgColorPickerEl, playerColorPickerEl, nameChangeEl, updateScores} = addMenuToDom(Game.getImageUrl(gameId))
|
||||
updateScores(gameId)
|
||||
|
||||
// Create a dom and attach adapters to it so we can work with it
|
||||
const canvas = addCanvasToDom(Graphics.createCanvas())
|
||||
|
|
@ -303,21 +274,21 @@ async function main() {
|
|||
const viewport = new Camera(canvas)
|
||||
// center viewport
|
||||
viewport.move(
|
||||
-(puzzle.info.table.width - viewport.width) /2,
|
||||
-(puzzle.info.table.height - viewport.height) /2
|
||||
-(Game.getTableWidth(gameId) - viewport.width) /2,
|
||||
-(Game.getTableHeight(gameId) - viewport.height) /2
|
||||
)
|
||||
|
||||
const evts = new EventAdapter(canvas, viewport)
|
||||
|
||||
bgColorPickerEl.value = players[CLIENT_ID].bgcolor
|
||||
bgColorPickerEl.value = Game.getPlayerBgColor(gameId, CLIENT_ID)
|
||||
bgColorPickerEl.addEventListener('change', () => {
|
||||
evts.addEvent(['bg_color', bgColorPickerEl.value])
|
||||
})
|
||||
playerColorPickerEl.value = players[CLIENT_ID].color
|
||||
playerColorPickerEl.value = Game.getPlayerBgColor(gameId, CLIENT_ID)
|
||||
playerColorPickerEl.addEventListener('change', () => {
|
||||
evts.addEvent(['player_color', playerColorPickerEl.value])
|
||||
})
|
||||
nameChangeEl.value = players[CLIENT_ID].name
|
||||
nameChangeEl.value = Game.getPlayerName(gameId, CLIENT_ID)
|
||||
nameChangeEl.addEventListener('change', () => {
|
||||
evts.addEvent(['player_name', nameChangeEl.value])
|
||||
})
|
||||
|
|
@ -330,28 +301,25 @@ async function main() {
|
|||
for(let [changeType, changeData] of evChanges) {
|
||||
switch (changeType) {
|
||||
case 'player': {
|
||||
if (changeData.id !== CLIENT_ID) {
|
||||
players[changeData.id] = changeData
|
||||
const p = Util.decodePlayer(changeData)
|
||||
if (p.id !== CLIENT_ID) {
|
||||
Game.setPlayer(gameId, p.id, p)
|
||||
RERENDER = true
|
||||
}
|
||||
} break;
|
||||
case 'tile': {
|
||||
puzzle.tiles[changeData.idx] = changeData
|
||||
const t = Util.decodeTile(changeData)
|
||||
Game.setTile(gameId, t.idx, t)
|
||||
RERENDER = true
|
||||
} break;
|
||||
case 'data': {
|
||||
puzzle.data = changeData
|
||||
Game.setPuzzleData(gameId, 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()) {
|
||||
|
|
@ -360,12 +328,9 @@ async function main() {
|
|||
// -------------------------------------------------------------
|
||||
const type = evt[0]
|
||||
if (type === 'move') {
|
||||
const pos = { x: evt[1], y: evt[2] }
|
||||
RERENDER = true
|
||||
changePlayer(pos)
|
||||
|
||||
if (_last_mouse_down && !getFirstOwnedTile(puzzle, CLIENT_ID)) {
|
||||
if (_last_mouse_down && !Game.getFirstOwnedTile(gameId, CLIENT_ID)) {
|
||||
// move the cam
|
||||
const pos = { x: evt[1], y: evt[2] }
|
||||
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)
|
||||
|
|
@ -382,13 +347,13 @@ async function main() {
|
|||
if (viewport.zoomIn()) {
|
||||
const pos = { x: evt[1], y: evt[2] }
|
||||
RERENDER = true
|
||||
changePlayer(pos)
|
||||
Game.changePlayer(gameId, CLIENT_ID, pos)
|
||||
}
|
||||
} else if (type === 'zoomout') {
|
||||
if (viewport.zoomOut()) {
|
||||
const pos = { x: evt[1], y: evt[2] }
|
||||
RERENDER = true
|
||||
changePlayer(pos)
|
||||
Game.changePlayer(gameId, CLIENT_ID, pos)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -414,7 +379,7 @@ async function main() {
|
|||
|
||||
// CLEAR CTX
|
||||
// ---------------------------------------------------------------
|
||||
ctx.fillStyle = players[CLIENT_ID].bgcolor || '#222222'
|
||||
ctx.fillStyle = Game.getPlayerBgColor(gameId, CLIENT_ID) || '#222222'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
if (DEBUG) Debug.checkpoint('clear done')
|
||||
// ---------------------------------------------------------------
|
||||
|
|
@ -423,12 +388,12 @@ async function main() {
|
|||
// DRAW BOARD
|
||||
// ---------------------------------------------------------------
|
||||
pos = viewport.worldToViewport({
|
||||
x: (puzzle.info.table.width - puzzle.info.width) / 2,
|
||||
y: (puzzle.info.table.height - puzzle.info.height) / 2
|
||||
x: (Game.getTableWidth(gameId) - Game.getPuzzleWidth(gameId)) / 2,
|
||||
y: (Game.getTableHeight(gameId) - Game.getPuzzleHeight(gameId)) / 2
|
||||
})
|
||||
dim = viewport.worldDimToViewport({
|
||||
w: puzzle.info.width,
|
||||
h: puzzle.info.height,
|
||||
w: Game.getPuzzleWidth(gameId),
|
||||
h: Game.getPuzzleHeight(gameId),
|
||||
})
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, .5)'
|
||||
ctx.fillRect(pos.x, pos.y, dim.w, dim.h)
|
||||
|
|
@ -438,15 +403,15 @@ async function main() {
|
|||
|
||||
// DRAW TILES
|
||||
// ---------------------------------------------------------------
|
||||
for (let tile of tilesSortedByZIndex()) {
|
||||
for (let tile of Game.getTilesSortedByZIndex(gameId)) {
|
||||
const bmp = bitmaps[tile.idx]
|
||||
pos = viewport.worldToViewport({
|
||||
x: puzzle.info.tileDrawOffset + tile.pos.x,
|
||||
y: puzzle.info.tileDrawOffset + tile.pos.y,
|
||||
x: Game.getTileDrawOffset(gameId) + tile.pos.x,
|
||||
y: Game.getTileDrawOffset(gameId) + tile.pos.y,
|
||||
})
|
||||
dim = viewport.worldDimToViewport({
|
||||
w: puzzle.info.tileDrawSize,
|
||||
h: puzzle.info.tileDrawSize,
|
||||
w: Game.getTileDrawSize(gameId),
|
||||
h: Game.getTileDrawSize(gameId),
|
||||
})
|
||||
ctx.drawImage(bmp,
|
||||
0, 0, bmp.width, bmp.height,
|
||||
|
|
@ -459,18 +424,18 @@ async function main() {
|
|||
|
||||
// DRAW PLAYERS
|
||||
// ---------------------------------------------------------------
|
||||
for (let p of getActivePlayers(players)) {
|
||||
const cursor = await getPlayerCursor(p)
|
||||
const pos = viewport.worldToViewport(p)
|
||||
for (let player of Game.getActivePlayers(gameId)) {
|
||||
const cursor = await getPlayerCursor(player)
|
||||
const pos = viewport.worldToViewport(player)
|
||||
ctx.drawImage(cursor,
|
||||
Math.round(pos.x - cursor.width/2),
|
||||
Math.round(pos.y - cursor.height/2)
|
||||
)
|
||||
if (p.id !== CLIENT_ID) {
|
||||
if (player.id !== CLIENT_ID) {
|
||||
ctx.fillStyle = 'white'
|
||||
ctx.font = '10px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(p.name + ' (' + p.points + ')',
|
||||
ctx.fillText(player.name + ' (' + player.points + ')',
|
||||
Math.round(pos.x),
|
||||
Math.round(pos.y) + cursor.height
|
||||
)
|
||||
|
|
@ -480,7 +445,7 @@ async function main() {
|
|||
|
||||
// DRAW PLAYERS
|
||||
// ---------------------------------------------------------------
|
||||
updateScores(players)
|
||||
updateScores(gameId)
|
||||
if (DEBUG) Debug.checkpoint('scores done')
|
||||
// ---------------------------------------------------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -38,12 +38,16 @@ export default {
|
|||
<div id="app">
|
||||
<h1>Running games</h1>
|
||||
<div v-for="g in games">
|
||||
<a :href="'/g/' + g.id">{{g.title}}</a>
|
||||
<a :href="'/g/' + g.id">
|
||||
<img :src="g.imageUrl" style="width: 150px; display: inline-block; margin: 5px;" />
|
||||
<br />
|
||||
{{g.tilesFinished}}/{{g.tilesTotal}} pieces, {{g.players}} players
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1>New game</h1>
|
||||
<div>
|
||||
<label>Tiles: </label>
|
||||
<label>Pieces: </label>
|
||||
<input type="text" v-model="tiles" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue