script.js

let canvas = document.getElementById('canvas');
let gameOverText = document.querySelector('.gameover');
let score = document.getElementById('scoreCount');
let streak = document.getElementById('streakCount');
let start = document.getElementById('start');
let themes = document.getElementById('themes');
let menu = document.getElementById('menu');
let context = canvas.getContext('2d'); //webgl

let scrollCounter, cameraY, mode, xSpeed,threshold;
//mode is start, game, game over or  
let current = 1;
//current = current num boxes
let streakGrowth = 0;
let yspeed = 5;
let height = 50;
let subMode
//fall or bouunce


let boxes = [];
boxes[0] = {
    x: canvas.width / 2 - 100,
    y: 300,
    width: 200,
};

let debris = {
    x: 0,
    width: 0,
}

let easyMode = document.getElementById('easy');
let mediumMode = document.getElementById('medium')
let hardMode = document.getElementById('hard')

let gameModes = [easyMode, mediumMode, hardMode];
let gameMode = 0
let difficulty

let bkgblue = document.getElementById('bkgblue');
let bkgdefault = document.getElementById('bkgdefault')
let bkgwhite = document.getElementById('bkgwhite')
let bblue = document.getElementById('bblue');
let bdefault = document.getElementById('bdefault')
let bwhite = document.getElementById('bwhite')

let gameThemes = [bkgblue, bkgdefault, bkgwhite, bblue, bdefault, bwhite];
let gameTheme = 0

let backgroundTheme = 'default'///////////////////////////////////////// be default
let boxesTheme = 'default'///////////////////////////////////////// be default

function setTheme(input, inputBox){
    if (backgroundTheme == 'default'){
        document.body.style.backgroundColor = "#f4e0c9";
    }
    else if (backgroundTheme == 'blue'){
        document.body.style.backgroundColor = "#8fc7cdbf";
    }
    else if (backgroundTheme == 'white'){
        document.body.style.backgroundColor = "#ffffff";
    }
    if (boxesTheme == 'default'){
        context.fillStyle = 'rgb(' + (175 + (input * 10)) + ', ' + (136 + (input * 10)) + ',' + (91 + (input * 10)); // rgb(175, 136, 91)
        context.fillRect(inputBox.x, canvas.height - inputBox.y + cameraY, inputBox.width, height);
    }
    else if (boxesTheme == 'blue'){
        context.fillStyle = 'rgb(' + (20 + (input * 10)) + ', ' + (28 + (input * 10)) + ',' + (100 + (input * 10)); // rgb(20, 28, 100)
        context.fillRect(inputBox.x, canvas.height - inputBox.y + cameraY, inputBox.width, height);
    }
    else if (boxesTheme == 'white'){
        context.fillStyle = 'rgb('+ input * 10 + ',' + input * 10 + ',' + input * 10; // rgb(0, 0, 0)
        context.fillRect(inputBox.x, canvas.height - inputBox.y + cameraY, inputBox.width, height);
    }
    
    context.shadowBlur = 3;
    context.shadowColor = "rgba(0, 0, 0, 0.14)";
    context.shadowOffsetX = 10;
    context.shadowOffsetY = -10
}

function nextTheme() {
    deselectIcon(gameThemes[gameTheme]);
    gameTheme = (gameTheme + 1) % gameThemes.length;
    selectIcon(gameThemes[gameTheme]);
}

function closeTheme() {
    mode = "game";
    themes.style.display = 'none';
}

function confirmTheme() {
    console.log("Mode selected:", gameThemes[gameTheme]);
    if (gameTheme == 0){
        backgroundTheme = 'blue'
    }
    else if (gameTheme == 1){
        backgroundTheme = 'default'
    }
    else if (gameTheme == 2){
        backgroundTheme = 'white'
    }
    else if (gameTheme == 3){
        boxesTheme = 'blue'
    }
    else if (gameTheme == 4){
        boxesTheme = 'default'
    }
    else if (gameTheme == 5){
        boxesTheme = 'white'
    }
}


function newBox() {
    boxes[current] = {
    x: 0,
    y: (current + 10) * height,
    width: boxes[current - 1].width
    };

    boxes[current].x = Math.floor(Math.random() * (canvas.width - boxes[current].width));
}
function gameOver() {
    gameOverText.style.display = 'block';
    mode = 'gameOver';
}

function animate() {
    if (mode != 'gameOver') {

        context.clearRect(0, 0, canvas.width, canvas.height);
        score.innerHTML = current - 1;
        streak.innerHTML = streakGrowth;
        for (let i = 0; i < boxes.length; i++) {
            let box = boxes[i];
            setTheme(i, box);
        }

        context.fillStyle = 'rgb(123, 39, 27)';

        context.fillRect(debris.x, canvas.height - debris.y + cameraY, debris.width, height);

        if (subMode == 'bounce') {
            boxes[current].x += xSpeed;
            if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width) {
                xSpeed = -xSpeed;
            }
            if (xSpeed < 0 && boxes[current].x < 0) {
                xSpeed = -xSpeed;
            }
        }
        if (subMode == 'fall') {//////////////////////////////////////////////////////////////////////////changw streak and threshlod based on mode
            threshold = 0.02 * boxes[current - 1].width;
            boxes[current].y -= yspeed;
            if (boxes[current].y <= boxes[current - 1].y + height) {
                subMode = 'bounce';

                let difference = boxes[current].x - boxes[current - 1].x;
                if (Math.abs(difference) >= boxes[current].width) {
                    gameOver();
                    }
                //check if close to threshold to be perfect
                if (difference < threshold && difference > -threshold) {
                    boxes[current].x = boxes[current - 1].x;
                    streakGrowth++;

                    if (difficulty == 'easy'){
                        if (streakGrowth >= 3) {
                            boxes[current].width += 10;
                        }
                    else if (difficulty == 'medium'){
                        if (streakGrowth >= 5) {
                            boxes[current].width += 10;
                        }
                    }
                    else{
                        if (streakGrowth >= 7) {
                            boxes[current].width += 10;
                        }
                    }
                    }
                }
                //if not perfect there is debris
                else {
                    streakGrowth = 0;
                    debris = {
                        y: boxes[current].y,
                        width: Math.abs(difference),
                    }
            
                    if (boxes[current].x > boxes[current - 1].x) {
                        boxes[current].width -= difference;
                        debris.x = boxes[current].x + boxes[current].width;
                    }
                    else {
                        debris.x = boxes[current].x - difference;
                        boxes[current].width += difference;
                        boxes[current].x = boxes[current - 1].x;
                    }
                    if (xSpeed > 0) {
                        xSpeed += 0.2;
                    }
                    else {
                        xSpeed -= 0.2;
                    }
                }
            
                current++;
                scrollCounter = height;
                if (difficulty == 'easy'){
                    if ((current - 1) > 0 && (current - 1) % 5 === 0){
                    boxes[current-1].width += 10;
                    scoreboostAnimation()
                    //add animation
                    }
                }
                else if (difficulty == 'medium'){
                    if ((current - 1) > 0 && (current - 1) % 10 === 0){
                    boxes[current-1].width += 10;
                    scoreboostAnimation()
                    //add animation
                    }
                }
                else{
                    if ((current - 1) > 0 && (current - 1) % 20 === 0){
                    boxes[current-1].width += 10;
                    scoreboostAnimation()
                    //add animation
                    }
                }
                
                newBox();
            }
        }
        
        debris.y -= yspeed;
        if (scrollCounter) {
            cameraY++;
            scrollCounter--;
        }
    }
    window.requestAnimationFrame(animate);
}
function scoreboostAnimation(){
    canvas.classList.add("scoreboost" + difficulty)

    setTimeout(() => {
    canvas.classList.remove("scoreboost" + difficulty);
    }, 1000); // Removes class after some seconds 
}

function restart() {
    gameOverText.style.display = 'none';
    boxes.splice(1, boxes.length - 1);
    subMode = 'bounce';
    mode = 'game'
    cameraY = 0;
    scrollCounter = 0;
    xSpeed = 2;
    current = 1;
    newBox();
    debris.y = 0;
}
//game methods
function drop() {
    if(mode == 'gameOver') {
        restart();
    }
    else {
        if (subMode == 'bounce'){
            subMode = 'fall';
        }
    }
}
function openMenu() {
    mode = 'menu'
    menu.style.display = 'flex';
}
function openThemes() {
    mode = 'themes'
    themes.style.display = 'flex';
}

let selectedIcon = undefined

function selectIcon(element){
    element.classList.add("selected");
    selectedIcon = element
}
function deselectIcon(element){
    element.classList.remove("selected");
    selectedIcon = undefined
}

//mode methods
function nextMode() {
    deselectIcon(gameModes[gameMode]);
    gameMode = (gameMode + 1) % gameModes.length;
    selectIcon(gameModes[gameMode]);
}

function confirmMode() {
    console.log("Mode selected:", gameModes[gameMode]);
    if (gameMode == 0){
        difficulty = 'easy'
    }
    else if (gameMode == 1){
        difficulty = 'medium'
    }
    else{
        difficulty = 'hard'
    }
    mode = "game";
    start.style.display = 'none'
    restart();
}

function chooseGameMode() {
    if (mode !== 'start') return;
    gameMode = 0
    selectIcon(gameModes[gameMode]);
}
function chooseGameTheme() {
    gameTheme = 0
    selectIcon(gameThemes[gameTheme]);
}
//menu methods
function resumeGame() {
    mode = "game";
    menu.style.display = 'none';
}
function changeMode() {
    mode = "start";
    menu.style.display = 'none';
    start.style.display = 'flex';
}

function inputRouter(type) {
    if (mode === "start") {
        if (type === "single") nextMode();
        if (type === "double") openMenu();//menu
        if (type === "hold")   confirmMode();
    }
    else if (mode === "game") {
      // GAME MODE
        if (type === "single") drop();
        if (type === "double") openMenu();//menu
        if (type === "hold")   openThemes();
    }
    else if (mode === "gameOver") {
        if (type === "single") drop();
    }
    else if (mode === "themes") {//themes
        if (type === "single") nextTheme();
        if (type === "double") closeTheme();
        if (type === "hold")   confirmTheme();
    }
    else if (mode === "menu"){
        //     // PAUSE MENU
        if (type === "single") resumeGame();
        //if (type === "double") restartGame();
        if (type === "hold")   changeMode();
    }
}

let holdThreshold = 500;
let doublePressThreshold = 300;

let lastKeyUpTime = 0;
let pressTimer = null;
let keyState = {
    held: false,
}

function keyInput() {
    document.addEventListener('keydown', (event) => {
        if (event.repeat) return;

        pressTimer = setTimeout(() => {
            keyState.held = true;
            inputRouter("hold");
        }, holdThreshold);
    });

    document.addEventListener('keyup', (event) => {
        clearTimeout(pressTimer);

        if (keyState.held) {
            keyState.held = false;
            return;
        }

        const now = Date.now();

        if (now - lastKeyUpTime < doublePressThreshold) {
            lastKeyUpTime = 0;
            inputRouter("double");
        } else {
            lastKeyUpTime = now;
            inputRouter("single");
        }
    });
}


mode = 'start';

chooseGameMode();
chooseGameTheme();
keyInput();
animate();

//game designed to play with one key, spacebar Hold for menu,