different game ids per game

This commit is contained in:
Zutatensuppe 2020-11-08 14:49:34 +01:00
parent 3917c591b0
commit d8f9f856e6
4 changed files with 39 additions and 15 deletions

View file

@ -7,6 +7,7 @@ import Camera from './Camera.js'
import EventAdapter from './EventAdapter.js' import EventAdapter from './EventAdapter.js'
import WsClient from './WsClient.js' import WsClient from './WsClient.js'
if (!GAME_ID) throw '[ GAME_ID not set ]'
if (!WS_ADDRESS) throw '[ WS_ADDRESS not set ]' if (!WS_ADDRESS) throw '[ WS_ADDRESS not set ]'
function createCanvas(width = 0, height = 0) { function createCanvas(width = 0, height = 0) {
@ -207,6 +208,7 @@ function imageToBitmap(img) {
} }
async function loadImageToBitmap(imagePath) { async function loadImageToBitmap(imagePath) {
console.log(imagePath)
const img = new Image() const img = new Image()
await new Promise((resolve) => { await new Promise((resolve) => {
img.onload = resolve img.onload = resolve
@ -421,11 +423,11 @@ function setupNetwork(me) {
async function main () { async function main () {
// todo: maybe put in protocols, same as `me()` // todo: maybe put in protocols, same as `me()`
let gameId = 'asdfbla' // uniqId() let gameId = GAME_ID // uniqId()
let me = initme() let me = initme()
let cursorGrab = await loadImageToBitmap('./grab.png') let cursorGrab = await loadImageToBitmap('/grab.png')
let cursorHand = await loadImageToBitmap('./hand.png') let cursorHand = await loadImageToBitmap('/hand.png')
let conn = setupNetwork(me + '|' + gameId) let conn = setupNetwork(me + '|' + gameId)
conn.send(JSON.stringify({ type: 'init' })) conn.send(JSON.stringify({ type: 'init' }))
@ -926,7 +928,8 @@ async function main () {
// if it improves performance: // if it improves performance:
// 1. background // 1. background
// 2. tiles // 2. tiles
// 3. players // 3. (moving tiles)
// 4. (players)
// (currently, if a player moves, everthing needs to be // (currently, if a player moves, everthing needs to be
// rerendered at that position manually, maybe it is faster // rerendered at that position manually, maybe it is faster
// when using layers) // when using layers)

View file

@ -3,6 +3,7 @@ import WebSocketServer from './WebSocketServer.js'
import express from 'express' import express from 'express'
import { createPuzzle } from './puzzle.js' import { createPuzzle } from './puzzle.js'
import config from './config.js' import config from './config.js'
import { uniqId, choice } from './util.js'
// desired number of tiles // desired number of tiles
// actual calculated number can be higher // actual calculated number can be higher
@ -14,7 +15,6 @@ const IMAGES = [
'/example-images/saechsische_schweiz.jpg', '/example-images/saechsische_schweiz.jpg',
'/example-images/132-2048x1365.jpg', '/example-images/132-2048x1365.jpg',
] ]
const IMAGE_URL = IMAGES[0]
const games = {} const games = {}
@ -22,16 +22,32 @@ const port = config.http.port
const hostname = config.http.hostname const hostname = config.http.hostname
const app = express() const app = express()
const statics = express.static('./../game/') const statics = express.static('./../game/')
app.use('/g/:gid', (req, res, next) => {
res.send(`
<html><head><style>
html,body {margin: 0; overflow: hidden;}
html, body, #main { background: #222 }
canvas {cursor: none;}
</style></head><body>
<script>window.GAME_ID = '${req.params.gid}'</script>
<script>window.WS_ADDRESS = '${config.ws.connectstring}'</script>
<script src="/index.js" type="module"></script>
</body>
</html>
`)
})
app.use('/', (req, res, next) => { app.use('/', (req, res, next) => {
if (req.path === '/') { if (req.path === '/') {
res.send(` res.send(`
<html><head><style> <html><head><style>
html,body {margin: 0; overflow: hidden;} html,body {margin: 0; overflow: hidden;}
html, body, #main { background: #222 } html, body, #main { background: #222 }
canvas {cursor: none;}
</style></head><body> </style></head><body>
<script>window.WS_ADDRESS = '${config.ws.connectstring}'</script> <a href="/g/${uniqId()}">New game :P</a>
<script src="index.js" type="module"></script> ${Object.keys(games).map(k => {
return `<a href="/g/${k}">Game ${k}</a>`
})}
</body> </body>
</html> </html>
`) `)
@ -58,7 +74,7 @@ wss.on('message', async ({socket, data}) => {
switch (parsed.type) { switch (parsed.type) {
case 'init': { case 'init': {
// a new player (or previous player) joined // a new player (or previous player) joined
games[gid] = games[gid] || {puzzle: await createPuzzle(TARGET_TILES, IMAGE_URL), players: {}} games[gid] = games[gid] || {puzzle: await createPuzzle(TARGET_TILES, choice(IMAGES)), players: {}}
games[gid].players[uid] = {id: uid, x: 0, y: 0, down: false} games[gid].players[uid] = {id: uid, x: 0, y: 0, down: false}

View file

@ -6,10 +6,11 @@ import { choice } from './util.js'
const TILE_SIZE = 64 const TILE_SIZE = 64
async function createPuzzle(targetTiles, image) { async function createPuzzle(targetTiles, image) {
const imgFile = './../game' + image const imgPath = './../game' + image
const imgUrl = './' + image const imgUrl = image
// load bitmap, to determine the original size of the image // load bitmap, to determine the original size of the image
let dim = sizeOf(imgFile) let dim = sizeOf(imgPath)
// determine puzzle information from the bitmap // determine puzzle information from the bitmap
let info = determinePuzzleInfo(dim.width, dim.height, targetTiles) let info = determinePuzzleInfo(dim.width, dim.height, targetTiles)

View file

@ -1,4 +1,7 @@
// get a unique id
export const uniqId = () => Date.now().toString(36) + Math.random().toString(36).substring(2)
// get a random int between min and max (inclusive) // get a random int between min and max (inclusive)
export const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min export const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
@ -19,7 +22,8 @@ export const shuffle = (array) => {
} }
export default { export default {
randomInt, uniqId,
choice, randomInt,
shuffle, choice,
shuffle,
} }