summaryrefslogtreecommitdiff
path: root/client/js/gfx
diff options
context:
space:
mode:
Diffstat (limited to 'client/js/gfx')
-rw-r--r--client/js/gfx/graphics.js121
-rw-r--r--client/js/gfx/map.js86
-rw-r--r--client/js/gfx/sprite.js7
3 files changed, 156 insertions, 58 deletions
diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js
index e73927e..31565a8 100644
--- a/client/js/gfx/graphics.js
+++ b/client/js/gfx/graphics.js
@@ -1,56 +1,105 @@
import { Sprite } from './sprite.js'
-import { Rotation } from '../logic.js'
+import { ItemType, Rotation } from '../logic.js'
+const draw_players = (data, players, sprites) => {
+ 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
+ }
+ }
+}
+
+const update_player_sprites = (data, players, sprites) => {
+ for (const sprite of sprites) {
+ if (sprite !== undefined) {
+ sprite.destroy()
+ }
+ }
+
+ let new_sprites = Array(players)
+ new_sprites.fill(undefined)
+
+ for (let id of players) {
+ let sprite = new Sprite("/img/pac.png", data.map)
+ sprite.layer(3)
+ sprite.resize(1,1)
+ sprite.show()
+ new_sprites[id] = sprite
+ }
+
+ return new_sprites
+}
+
+const create_map_dot = (data, x, y) => {
+ let dot = new Sprite("/img/dot.png", data.map)
+ dot.move(x, y)
+ dot.resize(.2,.2)
+ dot.show()
+ return dot
+}
+
+const update_item_sprites = (data) => {
+
+ let item_sprites = {}
+
+ for (let item_key in data.map.items) {
+ let item = data.map.items[item_key]
+ switch (item.type) {
+ case ItemType.DOT:
+ item_sprites[item_key] = create_map_dot(data, item.pos[0], item.pos[1])
+ break;
+ }
+ }
+
+ return item_sprites
+}
+
export const startGraphicsUpdater = () => {
- let sprites = []
+ let player_sprites = []
+ let item_sprites = {}
/**
* @type {(data: import("../logic.js").GameState) => void}
*/
return (data) => {
- if (!data.started) return
+ if (!data.map || !data.map.visible) 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)
+ if (player_sprites.length !== players.length) {
+ player_sprites = update_player_sprites(data, players, player_sprites)
+ console.log("updating player sprites")
+ }
- 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 item_key of data.items_eaten) {
+ if (!(item_sprites[item_key])) continue
+ item_sprites[item_key].destroy()
+ delete item_sprites[item_key]
+ delete data.items_eaten[item_key]
}
- 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
- }
+ if (Object.keys(item_sprites).length !== Object.keys(data.map.items).length) {
+ item_sprites = update_item_sprites(data)
+ console.log("updating item sprites")
}
+
+ draw_players(data, players, player_sprites)
+
}
}
diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js
index 0ba7f9c..e629b17 100644
--- a/client/js/gfx/map.js
+++ b/client/js/gfx/map.js
@@ -1,3 +1,5 @@
+import { ItemType, get_item_key } from "../logic.js";
+
const gen_style = (map, style) => {
const css = `
* {
@@ -63,71 +65,71 @@ const place_tile = (container, type) => {
let image_src, class_name;
switch(type) {
case Direction.EMPTY:
- image_src = "/static/empty.png"
+ image_src = "/img/wall_empty.png"
class_name = ""
break
case Direction.WALL_HZ:
- image_src = "/static/wall.png"
+ image_src = "/img/wall_straight.png"
class_name = ""
break
case Direction.WALL_VT:
- image_src = "/static/wall.png"
+ image_src = "/img/wall_straight.png"
class_name = "rotate90"
break
case Direction.TURN_Q1:
- image_src = "/static/turn.png"
+ image_src = "/img/wall_turn.png"
class_name = ""
break
case Direction.TURN_Q2:
- image_src = "/static/turn.png"
+ image_src = "/img/wall_turn.png"
class_name = "rotate270"
break
case Direction.TURN_Q3:
- image_src = "/static/turn.png"
+ image_src = "/img/wall_turn.png"
class_name = "rotate180"
break
case Direction.TURN_Q4:
- image_src = "/static/turn.png"
+ image_src = "/img/wall_turn.png"
class_name = "rotate90"
break
case Direction.TEE_NORTH:
- image_src = "/static/tee.png"
+ image_src = "/img/wall_tee.png"
class_name = "rotate180"
break
case Direction.TEE_EAST:
- image_src = "/static/tee.png"
+ image_src = "/img/wall_tee.png"
class_name = "rotate270"
break
case Direction.TEE_SOUTH:
- image_src = "/static/tee.png"
+ image_src = "/img/wall_tee.png"
class_name = ""
break
case Direction.TEE_WEST:
- image_src = "/static/tee.png"
+ image_src = "/img/wall_tee.png"
class_name = "rotate90"
break
case Direction.CROSS:
- image_src = "/static/cross.png"
+ image_src = "/img/wall_cross.png"
class_name = ""
break
case Direction.DOT:
- image_src = "/static/dot.png"
+ image_src = "/img/wall_dot.png"
class_name = ""
break
case Direction.WALL_END_NORTH:
- image_src = "/static/wall_end.png"
+ image_src = "/img/wall_end.png"
class_name = ""
break;
case Direction.WALL_END_EAST:
- image_src = "/static/wall_end.png"
+ image_src = "/img/wall_end.png"
class_name = "rotate90"
break;
case Direction.WALL_END_SOUTH:
- image_src = "/static/wall_end.png"
+ image_src = "/img/wall_end.png"
class_name = "rotate180"
break;
case Direction.WALL_END_WEST:
- image_src = "/static/wall_end.png"
+ image_src = "/img/wall_end.png"
class_name = "rotate270"
break;
}
@@ -152,11 +154,11 @@ const gen_walls = (width, height, data) => {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
- let north = get_point(width, height, data, x, y-1)
- let south = get_point(width, height, data, x, y+1)
- let east = get_point(width, height, data, x+1, y)
- let west = get_point(width, height, data, x-1, y)
- let current = get_point(width, height, data, x, y)
+ let north = get_point(width, height, data, x, y-1) == 1
+ let south = get_point(width, height, data, x, y+1) == 1
+ let east = get_point(width, height, data, x+1, y) == 1
+ let west = get_point(width, height, data, x-1, y) == 1
+ let current = get_point(width, height, data, x, y) == 1
let point = Direction.EMPTY
@@ -213,11 +215,45 @@ const gen_map = (map, container) => {
place_tile(container, map.walls[y * map.width + x])
}
}
+}
+
+const gen_items = (map) => {
+
+ let width = map.width
+ let height = map.height
+
+ let items = {}
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ let tile = get_point(width, height, map.data, x, y)
+ if (tile != 0) continue
+
+ let item_key = get_item_key(x, y, width)
+ items[item_key] = {type: ItemType.DOT, pos: [x, y]}
+
+ let tile_south = get_point(width, height, map.data, x, y + 1)
+ if (tile_south == 0) {
+ item_key = get_item_key(x, y + .5, width)
+ items[item_key] = {type: ItemType.DOT, pos: [x, y + .5]}
+ }
+
+ let tile_east = get_point(width, height, map.data, x + 1, y)
+ if (tile_east == 0) {
+ item_key = get_item_key(x + .5, y, width)
+ items[item_key] = {type: ItemType.DOT, pos: [x + .5, y]}
+ }
+ }
+ }
+ return items
}
export class Map {
+ static data
+ static walls
+
constructor(width, height, data) {
let last = document.getElementById("container")
@@ -227,6 +263,8 @@ export class Map {
this.height = height
this.data = data
this.walls = gen_walls(width, height, data)
+ this.items = gen_items(this)
+ this.visible = false
}
@@ -250,6 +288,8 @@ export class Map {
}
gen_style(this, style)
+
+ this.visible = true
}
hide() {
@@ -257,5 +297,7 @@ export class Map {
if (container) container.remove()
let style = document.getElementById("style")
if (style) style.remove()
+
+ this.visible = false
}
}
diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js
index 1ed8136..b793d89 100644
--- a/client/js/gfx/sprite.js
+++ b/client/js/gfx/sprite.js
@@ -11,6 +11,7 @@ export class Sprite {
this.y = 0
this.w = 1
this.h = 1
+ this.z = 1
this.d = 0
this.hide()
}
@@ -26,6 +27,7 @@ export class Sprite {
this.element.style.left = `${left}%`
this.element.style.top = `${top}%`
this.element.style.transform = `rotate(${this.d}deg)`
+ this.element.style.zIndex = `${this.z}`
}
move(x, y) {
@@ -40,6 +42,11 @@ export class Sprite {
this.#update_pos()
}
+ layer(z) {
+ this.z = z
+ this.#update_pos()
+ }
+
rotate(d) {
this.d = d
this.#update_pos()
generated by cgit v1.2.3-freya (git 2.51.0) at 2025-09-22 19:13:38 +0000