diff --git a/common/GameCommon.js b/common/GameCommon.js index 109f170..6744f0b 100644 --- a/common/GameCommon.js +++ b/common/GameCommon.js @@ -223,6 +223,14 @@ const getTileDrawSize = (gameId) => { return GAMES[gameId].puzzle.info.tileDrawSize } +const getStartTs = (gameId) => { + return GAMES[gameId].puzzle.data.started +} + +const getFinishTs = (gameId) => { + return GAMES[gameId].puzzle.data.finished +} + const getMaxGroup = (gameId) => { return GAMES[gameId].puzzle.data.maxGroup } @@ -624,5 +632,7 @@ export default { getFirstOwnedTile, getTileDrawOffset, getTileDrawSize, + getStartTs, + getFinishTs, handleInput, } diff --git a/game/Game.js b/game/Game.js index 1bc2a05..27f654e 100644 --- a/game/Game.js +++ b/game/Game.js @@ -20,4 +20,6 @@ export default { getFirstOwnedTile: GameCommon.getFirstOwnedTile, getTileDrawOffset: GameCommon.getTileDrawOffset, getTileDrawSize: GameCommon.getTileDrawSize, + getStartTs: GameCommon.getStartTs, + getFinishTs: GameCommon.getFinishTs, } diff --git a/game/game.js b/game/game.js index ca851b4..eb37876 100644 --- a/game/game.js +++ b/game/game.js @@ -27,7 +27,8 @@ function addCanvasToDom(canvas) { return canvas } -function addMenuToDom(previewImageUrl) { +function addMenuToDom(gameId) { + const previewImageUrl = Game.getImageUrl(gameId) function row (...elements) { const row = document.createElement('tr') for (let el of elements) { @@ -139,7 +140,7 @@ function addMenuToDom(previewImageUrl) { scoresTitleEl.appendChild(document.createTextNode('Scores')) const scoresListEl = document.createElement('table') - const updateScores = (gameId) => { + const updateScores = () => { const activePlayers = Game.getActivePlayers(gameId) const scores = activePlayers.map(p => ({ name: p.name, @@ -158,6 +159,46 @@ function addMenuToDom(previewImageUrl) { } } + const timerStr = () => { + const started = Game.getStartTs(gameId) + const ended = Game.getFinishTs(gameId) + + const icon = ended ? '🏁' : '⏳' + + const from = started; + const to = ended || Util.timestamp() + + const MS = 1 + const SEC = MS * 1000 + const MIN = SEC * 60 + const HOUR = MIN * 60 + const DAY = HOUR * 24 + + let diff = to - from + const d = Math.floor(diff / DAY) + diff = diff % DAY + + const h = Math.floor(diff / HOUR) + diff = diff % HOUR + + const m = Math.floor(diff / MIN) + diff = diff % MIN + + const s = Math.floor(diff / SEC) + + return `${icon} ${d}d ${h}h ${m}m ${s}s` + } + + const timerCountdownEl = document.createElement('div') + timerCountdownEl.innerText = timerStr() + setInterval(() => { + timerCountdownEl.innerText = timerStr() + }, 1000) + + const timerEl = document.createElement('div') + timerEl.classList.add('timer') + timerEl.appendChild(timerCountdownEl) + const scoresEl = document.createElement('div') scoresEl.classList.add('scores') scoresEl.appendChild(scoresTitleEl) @@ -165,6 +206,7 @@ function addMenuToDom(previewImageUrl) { document.body.appendChild(settingsOverlay) document.body.appendChild(previewOverlay) + document.body.appendChild(timerEl) document.body.appendChild(menuEl) document.body.appendChild(scoresEl) @@ -272,8 +314,8 @@ async function main() { const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(game.puzzle) - const {bgColorPickerEl, playerColorPickerEl, nameChangeEl, updateScores} = addMenuToDom(Game.getImageUrl(gameId)) - updateScores(gameId) + const {bgColorPickerEl, playerColorPickerEl, nameChangeEl, updateScores} = addMenuToDom(gameId) + updateScores() // Create a dom and attach adapters to it so we can work with it const canvas = addCanvasToDom(Graphics.createCanvas()) @@ -455,7 +497,7 @@ async function main() { // DRAW PLAYERS // --------------------------------------------------------------- - updateScores(gameId) + updateScores() if (DEBUG) Debug.checkpoint('scores done') // --------------------------------------------------------------- diff --git a/game/style.css b/game/style.css index 5cab9d8..7a02eaf 100644 --- a/game/style.css +++ b/game/style.css @@ -29,6 +29,16 @@ a:hover { color: var(--link-hover-color); } box-shadow: 0 0 10px 0 rgba(0,0,0,.7); } +.timer { + position: absolute; + left: 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%; diff --git a/server/Game.js b/server/Game.js index 283c600..ce0711d 100644 --- a/server/Game.js +++ b/server/Game.js @@ -69,4 +69,6 @@ export default { get: GameCommon.get, getSockets: GameCommon.getSockets, handleInput: GameCommon.handleInput, + getStartTs: GameCommon.getStartTs, + getFinishTs: GameCommon.getFinishTs, } diff --git a/server/index.js b/server/index.js index c93f6ac..2f1647a 100644 --- a/server/index.js +++ b/server/index.js @@ -78,8 +78,8 @@ app.use('/', async (req, res, next) => { const games = [ ...Game.getAllGames().map(game => ({ id: game.id, - started: game.puzzle.data.started, - finished: game.puzzle.data.finished, + started: Game.getStartTs(game.id), + finished: Game.getFinishTs(game.id), tilesFinished: Game.getFinishedTileCount(game.id), tilesTotal: Game.getTileCount(game.id), players: Game.getActivePlayers(game.id).length,