html2d/src/elements/hero/hero.element.ts

A Typescript game engine to build HTML5 games for the web using webcomponents.

import { Vector2D, Input2D, KeyCode } from "../../lib/keoom2Dkit"
//@ts-ignore
import template from "./hero.element.html?raw"

export class HeroElement extends HTMLElement {

    speed = 1

    movement = new Vector2D

    held_directions = []

    directions =  {
        up: "up",
        down: "down",
        left: "left",
        right: "right"
    }

    keys = {
        38: this.directions.up,
        87: this.directions.up,
        37: this.directions.left,
        65: this.directions.left,
        39: this.directions.right,
        68: this.directions.right,
        40: this.directions.down,
        83: this.directions.down
    }


    get idle() {
        return this.hasAttribute("idle")
    }
    
    set idle(isIdle) {
        (isIdle) ? this.setAttribute("idle", "") : this.removeAttribute("idle")   
    }

    get attacking() {
        return this.hasAttribute("attacking")
    }
    
    set attacking(isAttacking) {
        (isAttacking) ? this.setAttribute("attacking", "") : this.removeAttribute("attacking")   
    }

    static get observedAttributes() {
        return ["idle", "attacking"]
    }

    constructor() {
        super()
        
        const templateFile = document.createElement("HTMLTemplate")
        templateFile.innerHTML = template
        
        this.attachShadow({mode: "open"}).appendChild(templateFile)

        this.idle = true


        // key up, key down and click etc. should be in a Input handler 

        document.addEventListener("keydown", (e) => {
            let dir = this.keys[e.which]
            if(dir && this.held_directions.indexOf(dir) === -1) {
                this.held_directions.unshift(dir)
            }
        })

        document.addEventListener("keyup", (e) => {
            let dir = this.keys[e.which]
            let index = this.held_directions.indexOf(dir)
            if(index > -1) {
                this.held_directions.splice(index, 1)
            }
        })

        document.addEventListener("click", () => {
            this.idle = false
            this.attacking = true
        })

        this.shadowRoot.querySelector(".attack-animation").addEventListener('animationiteration', () => {
            this.attacking = false
            this.idle = true
        })

        // should be a game-element?
        this.style.display = "block"
        this.style.height = "58px"
        this.style.width = "78px"
        this.style.position = "relative"

        // should be in the image wrapper??
        this.style.overflow = "hidden" 

        // temp to get starting x, refresh if the game size changes? and should be handled by a transform or something this is fugly
        this.movement.x = this.getBoundingClientRect().x -  document.querySelector(".game-wrapper").getBoundingClientRect().x
        this.movement.y = this.getBoundingClientRect().y -  document.querySelector(".game-wrapper").getBoundingClientRect().y

    }

    update() {


        const h = this.speed * Input2D.getAxis("Horizontal")
        console.log(h)

        if (Input2D.getKeyDown(KeyCode.Space))
        {
           console.log("Space key was pressed.")
        }


        let held_direction = this.held_directions[0]
        let currentSpeed = this.speed

        if (this.attacking) {
            currentSpeed = this.speed / 2
        }

        if (held_direction) {
            if (held_direction === this.directions.right) this.movement.x += currentSpeed
            if (held_direction === this.directions.left) this.movement.x -= currentSpeed
            if (held_direction === this.directions.down) this.movement.y += currentSpeed
            if (held_direction === this.directions.up) this.movement.y -= currentSpeed

        }

        
    }

    // should be in a parent class?
    render() {
        this.style.transform = `translate(${this.movement.x}px, ${this.movement.y}px)`
    }
}