States Test

by black strings

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- tell the browser to use es module so import file can be used -->
    <script type="module" src="main.js" defer></script>
    <div id="uiParent">

    </div>
</body>

</html>

CSS

body {
    background-color: #202020;
}

.bar {
    width: 100%;
    height: 1rem;
    background-color: #616161;
}

.progress-container {
    width: 100%;
    background-color: #000000;
    border-radius: 10px;
    overflow: hidden;
    height: 5px;
    border: 1px solid #000000;
}

/* Progress Bar */
.progress-bar {
    width: 100%; /* Change this to update progress */
    height: 100%;
    background-color: #151e15; /* Green */
    text-align: center;
    line-height: 5px;
    color: white;
    font-weight: bold;
    transition: width 1s ease-in-out; /* Smooth animation */
}

TypeScript

class BaseState {

    stateName;
    manager;
    keyboardEvent;

    decideNextState = () => {};

    initialTime = 10;
    timer;
    timerEndUnsub;
    timerTickEventUnsub;
    stateEvent;

    constructor(stateName, manager) {
        if(!manager && !stateName) {
            console.error('manager not set');
        } else {
            this.manager = manager;
            this.stateName = stateName;
        }
        this.stateEvent = new PubSub();
    }

    // auto call on switching state in the manager
    enter() {
        console.log(`entering ${this.stateName}`);

        this.#setupKeyboardNextState();

        this.#setupTimer();
    }

    exit() {
        this.timerEndUnsub();
        this.timerTickEventUnsub();
        console.log(`exiting ${this.stateName}`);
        this.timer.stopTimer();
        document.removeEventListener('keydown', this.keyboardEvent);
    }

    getInitialTime() {
        return this.initialTime;
    }

    getRemainingTime() {
        if(this.timer) {
            return this.timer?.getTimeRemaining();
        } else {
            return this.initialTime;
        }
    }

    setInitialTime(val) {
        this.initialTime = val;
    }

    #setupKeyboardNextState() {
        if(this.decideNextState){
            this.keyboardEvent = (event) => {
                if (event.key === ' ') {
                    //console.log('Space key pressed');
                    this.decideNextState();
                }
            }
            document.addEventListener('keydown', this.keyboardEvent);
        } else {
            console.error(`{this.stateName} decideNextState null`);
        }
    }

    #setupTimer() {
        // this.timer = new Timer(this.initialTime, this.onTimerUpdateCallback);
        this.timer = new Timer(this.initialTime);
        this.timer.startTimer();
        this.timerEndUnsub = this.timer.timerEvent.on('timerup', () => {
            if(this.decideNextState) {
                this.decideNextState();
         ...