ts

3 files changed, 0 insertions, 492 deletions

diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js
deleted file mode 100644
index 8ee4a6f..0000000
--- a/client/js/gfx/graphics.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Sprite } from './sprite.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
-        }
-
-        if (data.players[id].moving) {
-            sprites[id].set_img("img/pac.gif")
-        } else {
-            sprites[id].set_img("img/pac.png")
-        }
-    }
-}
-
-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()
-    dot.type = ItemType.DOT
-    return dot
-}
-
-const draw_sprites = (data, item_sprites) => {
-    let items = data.map.items
-
-    let to_remove = []
-    // remove rendered but non existing items
-    for (const item_key in item_sprites) {
-
-        let sprite = item_sprites[item_key]
-        if (!items[item_key]) {
-            sprite.destroy()
-            to_remove.push(item_key)
-        }
-
-    }
-
-    for (const id of to_remove) {
-        delete item_sprites[id]
-    }
-    
-    // add not rendered sprites
-    for (const item_key in items) {
-
-        /** @type {import('../logic.js').Item} */
-        let item = items[item_key]
-        let sprite = item_sprites[item_key]
-
-        if (sprite) {
-            if (item.type === sprite.type)
-                continue
-            sprite.destroy()
-        }
-
-        switch (item.type) {
-            case ItemType.DOT:
-                sprite = create_map_dot(data, ...item.pos)
-                break;
-        }
-
-        item_sprites[item_key] = sprite
-    }
-
-}
-
-export const startGraphicsUpdater = () => {
-    
-    let player_sprites = []
-    let item_sprites = {}
-
-    /**
-	 * @type {(data: import("../logic.js").GameState) => void}
-	 */
-    return (data) => {
-
-        if (!data.map || !data.map.visible) return
-
-        let players = Object.keys(data.players).filter(k => data.players[k] !== undefined)
-
-        if (player_sprites.length !== players.length) {
-            player_sprites = update_player_sprites(data, players, player_sprites)
-            console.log("updating player sprites")
-        }
-
-        draw_sprites(data, item_sprites)
-        draw_players(data, players, player_sprites)
-
-    }
-}
diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js
deleted file mode 100644
index a9ef0ad..0000000
--- a/client/js/gfx/map.js
+++ /dev/null
@@ -1,293 +0,0 @@
-import { ItemType, get_item_key } from "../logic.js";
-
-const update_style = (map, style) => {
-    const css = `
-        * {
-            --scale: 100;
-            --aspect: ${map.width/map.height};
-            --scaleX: calc(var(--scale) * 1vw);
-            --scaleY: calc(var(--scale) * 1vh);
-        } 
-        
-        #container {
-            width: calc(var(--scaleY) * var(--aspect));
-            height: var(--scaleY);
-            margin-top: calc((100vh - var(--scaleY))/2);
-            margin-left: calc(50vw - var(--scaleY)*var(--aspect)/2);
-            position: relative;
-            vertical-align: top;
-            line-height: 0;
-        }
-
-        @media (max-aspect-ratio: ${map.width}/${map.height}) {
-            #container {
-                width: var(--scaleX);
-                height: calc(var(--scaleX) / var(--aspect));
-                margin-left: calc((100vw - var(--scaleX))/2);
-                margin-top: calc(50vh - var(--scaleX)/var(--aspect)/2);
-            }
-        }`;
-
-    style.innerHTML = css
-}
-
-const Direction = {
-    EMPTY: 0,
-    WALL_HZ: 1,
-    WALL_VT: 2,
-    TURN_Q1: 3,
-    TURN_Q2: 4,
-    TURN_Q3: 5,
-    TURN_Q4: 6,
-    TEE_NORTH: 7,
-    TEE_EAST: 8,
-    TEE_SOUTH: 9,
-    TEE_WEST: 10,
-    CROSS: 11,
-    DOT: 12,
-    WALL_END_NORTH: 13,
-    WALL_END_SOUTH: 14,
-    WALL_END_EAST: 15,
-    WALL_END_WEST: 16
-}
-
-/**
- * @param {CanvasRenderingContext2D} context
- */
-const draw_tile = (context, x, y, w, type) => {
-
-    let atlas_index, rotation;
-    switch(type) {
-        case Direction.EMPTY:
-            return
-        case Direction.WALL_HZ:
-            atlas_index = [1, 1]
-            rotation = 0
-            break
-        case Direction.WALL_VT:
-            atlas_index = [1, 1]
-            rotation = 90
-            break
-        case Direction.TURN_Q1:
-            atlas_index = [2, 0]
-            rotation = 0
-            break
-        case Direction.TURN_Q2:
-            atlas_index = [2, 0]
-            rotation = 270
-            break
-        case Direction.TURN_Q3:
-            atlas_index = [2, 0]
-            rotation = 180
-            break
-        case Direction.TURN_Q4:
-            atlas_index = [2, 0]
-            rotation = 90
-            break
-        case Direction.TEE_NORTH:
-            atlas_index = [1, 0]
-            rotation = 180
-            break
-        case Direction.TEE_EAST:
-            atlas_index = [1, 0]
-            rotation = 270
-            break
-        case Direction.TEE_SOUTH:
-            atlas_index = [1, 0]
-            rotation = 0
-            break
-        case Direction.TEE_WEST:
-            atlas_index = [1, 0]
-            rotation = 90
-            break
-        case Direction.CROSS:
-            atlas_index = [0, 0]
-            rotation = 0
-            break
-        case Direction.DOT:
-            atlas_index = [2, 1]
-            rotation = 0
-            break
-        case Direction.WALL_END_NORTH:
-            atlas_index = [0, 1]
-            rotation = 0
-            break;
-        case Direction.WALL_END_EAST:
-            atlas_index = [0, 1]
-            rotation = 90
-            break;
-        case Direction.WALL_END_SOUTH:
-            atlas_index = [0, 1]
-            rotation = 180
-            break;
-        case Direction.WALL_END_WEST:
-            atlas_index = [0, 1]
-            rotation = 270
-            break;
-    }
-
-    let atlas = document.getElementById("atlas")
-    context.save()
-    context.translate((x+.5)*w, (y+.5)*w)
-    context.rotate(rotation * Math.PI / 180)
-    context.drawImage(atlas, atlas_index[0]*w, atlas_index[1]*w, w, w, -w/2, -w/2, w, w)
-    context.restore() 
-}
-
-const get_point = (width, height, data, x, y) => {
-    if (x < 0 || x >= width || y < 0 || y >= height) {
-        return 0
-    } else {
-        return data[y * width + x]
-    }
-}
-
-const gen_walls = (width, height, data) => {
-
-    let walls = Array(width * height)
-    for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-            
-            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
-            
-            if (!current) {
-                walls[y * width + x] = point
-                continue
-            }
-
-            if (north && south && east && west) {
-                point = Direction.CROSS
-            } else if (east && west && north) {
-                point = Direction.TEE_NORTH
-            } else if (east && west && south) {
-                point = Direction.TEE_SOUTH
-            } else if (north && south && east) {
-                point = Direction.TEE_EAST
-            } else if (north && south && west) {
-                point = Direction.TEE_WEST
-            } else if (east && west) {
-                point = Direction.WALL_HZ
-            } else if (north && south) {
-                point = Direction.WALL_VT   
-            } else if (west && south) {
-                point = Direction.TURN_Q1
-            } else if (south && east) {
-                point = Direction.TURN_Q2
-            } else if (east && north) {
-                point = Direction.TURN_Q3
-            } else if (north && west) {
-                point = Direction.TURN_Q4
-            } else if (north) {
-                point = Direction.WALL_END_NORTH
-            } else if (east) {
-                point = Direction.WALL_END_EAST
-            } else if (south) {
-                point = Direction.WALL_END_SOUTH
-            } else if (west) {
-                point = Direction.WALL_END_WEST
-            } else {
-                point = Direction.DOT
-            }
-
-            walls[y * width + x] = point
-
-        }
-    }
-
-    return walls
-}
-
-const update_canvas = (map, canvas) => {
-    let context = canvas.getContext("2d");
-    for (let y = 0; y < map.height; y++) {
-        for (let x = 0; x < map.width; x++) {
-            draw_tile(context, x, y, map.tile_width, 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) {
-
-        this.width = width
-        this.height = height
-        this.data = data
-        this.walls = gen_walls(width, height, data)
-        this.items = gen_items(this)
-        this.visible = false
-        this.tile_width = 32
-
-        canvas.width = this.width * this.tile_width
-        canvas.height = this.height * this.tile_width
-
-
-
-    }
-
-    show() {
-
-        let container = document.getElementById("container")
-        container.style.display = ""
-
-        let canvas = document.getElementById("canvas") 
-        canvas.style.display = ""
-
-        let style = document.getElementById("style")
-
-        update_canvas(this, canvas)
-        update_style(this, style)
-
-        this.visible = true
-    }
-
-    hide() {
-
-        let canvas = document.getElementById("canvas") 
-        canvas.style.display = "none"
-        container.style.display = "none"
-
-        this.visible = false
-    }
-}
diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js
deleted file mode 100644
index 07360f1..0000000
--- a/client/js/gfx/sprite.js
+++ /dev/null
@@ -1,71 +0,0 @@
-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.z = 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)`
-        this.element.style.zIndex = `${this.z}`
-    }
-
-    move(x, y) {
-        this.x = x
-        this.y = y
-        this.#update_pos()
-    }
-
-    resize(w, h) {
-        this.w = w
-        this.h = h
-        this.#update_pos()
-    }
-
-    layer(z) {
-        this.z = z
-        this.#update_pos()
-    }
-
-    set_img(src) {
-        this.element.src = src
-    }
-
-    rotate(d) {
-        this.d = d
-        this.#update_pos()
-    }
-
-    hide() {
-        this.element.style.display = "none"
-    }
-
-    show() {
-        this.element.style.display = "initial"
-    }
-
-    destroy() {
-        this.element.remove()
-    }
-
-}