function resetHighScoreText() {
    return "High score: " + heightToScore(window.localStorage.getItem("maxHeight"));
}

function collectableText() {
    return "Coins: " + window.localStorage.getItem("collectableNumber");
}

class Menu extends Gui {
    constructor(canvas) {
        super(canvas);

        this.context.font = "90px Dimbo";
        this.context.fillStyle = 'rgb(255, 255, 255)';
        this.context.strokeStyle = 'rgb(0, 0, 0)';
        this.addButton(new GuiButton(this.context, "Escalator", 0.5, 0.25, Type.StrokeFill));

        this.context.font = "30px Dimbo";
        this.addButton(new GuiButton(this.context, "New Game", 0.5, 0.5, Type.StrokeFill, () => {
            this.status = Status.Finished;
            this.after = Screens.Game;
        }));

        this.addButton(new GuiButton(this.context, resetHighScoreText, 0.5, 0.6, Type.StrokeFill));
        this.addButton(new GuiButton(this.context, collectableText, 0.5, 0.7, Type.StrokeFill));

        this.addButton(new GuiButton(this.context, "Exit", 0.5, 0.8, Type.StrokeFill, () => {
            this.status = Status.Finished;
            this.after = Screens.Exit;
        }));
    }

    drawBackground() {
        this.context.fillStyle = 'rgb(255, 0, 0)';
        this.context.beginPath();
        this.context.rect(0, 0, this.width(), this.height());
        this.context.fill();
    }
}