diff options
Diffstat (limited to '')
| -rw-r--r-- | client/js/gfx/graphics.js | 56 | ||||
| -rw-r--r-- | client/js/gfx/map.js (renamed from client/js/map.js) | 60 | ||||
| -rw-r--r-- | client/js/gfx/sprite.js | 60 |
3 files changed, 155 insertions, 21 deletions
diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js new file mode 100644 index 0000000..e73927e --- /dev/null +++ b/client/js/gfx/graphics.js @@ -0,0 +1,56 @@ +import { Sprite } from './sprite.js' +import { Rotation } from '../logic.js' + + +export const startGraphicsUpdater = () => { + + let sprites = [] + + /** + * @type {(data: import("../logic.js").GameState) => void} + */ + return (data) => { + + if (!data.started) return + + let players = Object.keys(data.players).filter(k => data.players[k] !== undefined) + + if (sprites.length !== players.length) { + + for (const sprite of sprites) { + if (sprite !== undefined) { + sprite.destroy() + } + } + + sprites = Array(players) + sprites.fill(undefined) + + for (let id of players) { + let sprite = new Sprite("/static/tux.png", data.map) + sprite.show() + sprite.resize(1.5,1.5) + sprites[id] = sprite + } + } + + for (let id of players) { + let pos = data.players[id].pos + sprites[id].move(pos[0], pos[1]) + switch (data.players[id].move_rot) { + case Rotation.NORTH: + sprites[id].rotate(270) + break + case Rotation.EAST: + sprites[id].rotate(0) + break + case Rotation.SOUTH: + sprites[id].rotate(90) + break + case Rotation.WEST: + sprites[id].rotate(180) + break + } + } + } +} diff --git a/client/js/map.js b/client/js/gfx/map.js index e293ad2..0ba7f9c 100644 --- a/client/js/map.js +++ b/client/js/gfx/map.js @@ -1,18 +1,11 @@ -const create_style = (map) => { +const gen_style = (map, style) => { const css = ` * { --scale: 100; --aspect: ${map.width/map.height}; --scaleX: calc(var(--scale) * 1vw); --scaleY: calc(var(--scale) * 1vh); - } - - body { - background-color: #191919; - width: 100vw; - height: 100vh; - display: flex; - } + } #container { width: calc(var(--scaleY) * var(--aspect)); @@ -20,12 +13,15 @@ const create_style = (map) => { margin-top: calc((100vh - var(--scaleY))/2); margin-left: calc(50vw - var(--scaleY)*var(--aspect)/2); position: relative; + vertical-align: top; + line-height: 0; } #container img { display: inline-block; width: ${100/map.width}%; height: ${100/map.height}%; + image-rendering: pixelated; } @media (max-aspect-ratio: ${map.width}/${map.height}) { @@ -37,7 +33,7 @@ const create_style = (map) => { } }`; - map.style.innerHTML = css + style.innerHTML = css } const Direction = { @@ -211,11 +207,10 @@ const gen_walls = (width, height, data) => { return walls } -const gen_map = (map) => { - let walls = gen_walls(map.width, map.height, map.data) +const gen_map = (map, container) => { for (let y = 0; y < map.height; y++) { for (let x = 0; x < map.width; x++) { - place_tile(map.container, walls[y * map.width + x]) + place_tile(container, map.walls[y * map.width + x]) } } @@ -224,20 +219,43 @@ const gen_map = (map) => { export class Map { constructor(width, height, data) { + + let last = document.getElementById("container") + if (last) last.remove() + this.width = width this.height = height this.data = data - this.container = document.body.appendChild(document.createElement("div")) - this.container.id = "container" - this.style = document.body.appendChild(document.createElement("style")) + this.walls = gen_walls(width, height, data) - create_style(this) - gen_map(this) } - destroy() { - this.container.remove() - this.style.remove() + show() { + this.hide() + + let container = document.getElementById("container") + if (!container) { + container = document.createElement("div") + container.id = "container" + document.body.appendChild(container) + } + + gen_map(this, container) + + let style = document.getElementById("style") + if (!style) { + style = document.createElement("style") + style.id = "style" + document.body.appendChild(style) + } + + gen_style(this, style) } + hide() { + let container = document.getElementById("container") + if (container) container.remove() + let style = document.getElementById("style") + if (style) style.remove() + } } diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js new file mode 100644 index 0000000..1ed8136 --- /dev/null +++ b/client/js/gfx/sprite.js @@ -0,0 +1,60 @@ +export class Sprite { + + constructor(image_src, map) { + this.element = document.createElement("img") + this.element.src = image_src + this.element.className = "sprite" + document.getElementById("container").appendChild(this.element) + + this.map = map + this.x = 0 + this.y = 0 + this.w = 1 + this.h = 1 + this.d = 0 + this.hide() + } + + #update_pos() { + let width = 100 / this.map.width * this.w + let height = 100 / this.map.height * this.h + let left = 100 / this.map.width * (this.x + (1 - this.w) / 2) + let top = 100 / this.map.height * (this.y + (1 - this.h) / 2) + + this.element.style.width = `${width}%` + this.element.style.height = `${height}%` + this.element.style.left = `${left}%` + this.element.style.top = `${top}%` + this.element.style.transform = `rotate(${this.d}deg)` + } + + move(x, y) { + this.x = x + this.y = y + this.#update_pos() + } + + resize(w, h) { + this.w = w + this.h = h + this.#update_pos() + } + + rotate(d) { + this.d = d + this.#update_pos() + } + + hide() { + this.element.style.display = "none" + } + + show() { + this.element.style.display = "initial" + } + + destroy() { + this.element.remove() + } + +} |