game.js

function Game() {
    // Current Sprite Selection from User -- might not be needed
    let currUserSprite;

    // Four numbers that define the transform, i hat and j hat
    const i_x = 1;
    const i_y = 0.5;
    const j_x = -1;
    const j_y = 0.5;

    // Symmetric 2D array to store instances of TileClass
    const tile_arr_size = 12;
    let tileArr = new Array(tile_arr_size).fill(null).map(() => new Array(tile_arr_size).fill(null));
    let playerSprite;
    let playerSprite_curTgc; // the current tgc coordinates that the player is at
    let playerSprite_curTileType; // The tile type that the player is currently sitting on

    // Sprite size
    const w = 64;
    const h = 64;

    // what the current cursor calculation is based off
    let maxWinWidth = 1920;
    let maxWinHeight = 1080;

    // TODO: replace
    let tools = ["Fix Sidewalk", "Add Curb Ramp"];
    let currentToolIndex = 0; // keyPressed() has logic to make sure that index doens't go outisde of tools array bounds

    /*
        0 --> grass block (use for where houses go for now)
        1 --> road tile
        2 --> sidewalk tile
        3 --> sidewalk rotated 180 degrees
        4 --> broken sidewalk
        5 --> broken sidewalk rotated 180 degrees
        6 --> sidewalk corner topLeft (no curb ramp)
        7 --> sidewalk corner botLeft (no curb ramp)
        8 --> sidewalk corner botRight (no curb ramp)
        9 --> sidewalk corner topRight (no curb ramp)
    */

    // Hardcoding tile placement for the first level
    // x and y here are just the grid coordinates
    const startingTileIndex = {
        x: 3,
        y: 0
    };
    const endingTileIndex = {
        x: 3,
        y: 11
    };
    const levelOne = [
        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
        [3, 3, 5, 6, 1, 1, 1, 1, 9, 3, 5, 3],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [3, 5, 3, 7, 1, 1, 1, 1, 8, 3, 3, 3],
        [0, 0, 0, 2, 1, 1, 1, 1, 4, 0, 0, 0],
        [0, 0, 0, 2, 1, 1, 1, 1, 4, 0, 0, 0],
        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
    ]; // Currently 10 by 10


    this.setup = function() {
        // createCanvas(maxWinWidth, maxWinHeight);
        new Canvas(maxWinWidth, maxWinHeight);
        imageMode(CENTER);

        // Create our player sprite
        playerSprite = new Sprite();
        playerSprite.width = w;
        playerSprite.height = h;
        playerSprite.image = 'assets/tile_pngs/grass.png';

        playerSprite_curTgc = startingTileIndex; // An object: {x: _, y: _}
        playerSprite.x = toScreenCoords(playerSprite_curTgc).x;
        playerSprite.y = toScreenCoords(playerSprite_curTgc).y;

        // Now loop through our tile map and draw
        // each tile accoridng to our levelOne matrix
        // mapping
        for (let i = 0; i < tile_arr_size; i++) {
            for (let j = 0; j < tile_arr_size; j++) {
                let tile_type = levelOne[i][j];
                let tsc = toScreenCoords({
                    x: i,
                    y: j
                });

                switch (tile_type) {
                    case 0: // grass block (use for where houses go for now)
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, grassTile, "decoration", "normal");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 1: // road tile
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "vertical");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile, "road", "normal");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 2: // sidewalk tile
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "horizontal");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalk, "sidewalk", "normal");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 3: // sidewalk rotated 180 degrees
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkRotated180, "sidewalk", "rotated180");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 4: // broken sidewalk
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkBroken, "broken_sidewalk", "normal");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 5: // broken sidewalk rotated 180 degrees
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkBrokenRotated180, "broken_sidewalk", "rotated180");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 6: // sidewalk corner topLeft (no curb ramp)
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerTopLeft, "sidewalk_corner", "normal");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 7: // sidewalk corner botLeft (no curb ramp)
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerBotLeft, "sidewalk_corner", "rotated90"); // TODO: Replace with rotated versions
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 8: // sidewalk corner botRight (no curb ramp)
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerBotRight, "sidewalk_corner", "rotated180"); // TODO: Replace with rotated versions
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    case 9: // sidewalk corner topRight (no curb ramp)
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerTopRight, "sidewalk_corner", "rotated270"); // TODO: Replace with rotated versions
                        tileArr[i][j].display(tileArr[i][j].sprite);
                        break;
                    default:
                        // Otherwise, default to road
                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile, "road", "normal");
                        tileArr[i][j].display(tileArr[i][j].sprite);
                }
                // tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile);
                // tileArr[i][j].display(tileArr[i][j].sprite);
            }
        }
    }

    this.draw = function() {
        currUserSprite = sidewalk;
        background('#588dbe');

        translate(width / 2, height / 3);

        // For now, use simple text to show which
        // tool you have selected
        // Top-left corner
        // textAlign(LEFT, TOP);
        textSize(16);
        // fill(255);
        // stroke(0);
        // strokeWeight(4);
        text(`Current Tool: ${tools[currentToolIndex]}`, -300, -10);

        // Draw the player in their current pos

        let curPlayerScreenCords = toScreenCoords(playerSprite_curTgc);
        playerSprite.x = curPlayerScreenCords.x;
        playerSprite.y = curPlayerScreenCords.y;

        let tgc = screenToGridCoords({
            x: mouseX,
            y: mouseY
        });

        for (let i = 0; i < tile_arr_size; i++) {
            for (let j = 0; j < tile_arr_size; j++) {
                tileArr[i][j].display(tileArr[i][j].sprite);

                // hover highlighting
                if (tgc.x == i && tgc.y == j && tileArr[i][j].sprite == roadTile) {
                    tileArr[i][j].display(roadHighlightedTile);

                } else {
                    tileArr[i][j].display(tileArr[i][j].sprite);
                }

            }
        }
    }




    this.mouseClicked = function() {
        let {
            x: tgc_x,
            y: tgc_y
        } = screenToGridCoords({
            x: mouseX,
            y: mouseY
        });
        if (!isValidGridCoords(tgc_x, tgc_y)) {
            return;
        }

        /* Type can either be
            - decoration (grass, house, etc)
            - road
            - sidewalk
            - broken_sidewalk
            - sidewalk_corner
            - sidewalk_corner_curbRamp
        */
        /* Orientation can either be
            - normal (rotated 0 degrees)
            - rotated90
            - rotated180
            - rotated270
        */
        // TODO: Make a fixed_sidewalk sprite
        tile_type = tileArr[tgc_x][tgc_y].type;
        tile_orientation = tileArr[tgc_x][tgc_y].orientation;

        // Depending on what type of tile you clicked on,
        // update the sprite accordingly
        if (tile_type === "broken_sidewalk" && tools[currentToolIndex] === "Fix Sidewalk") {
            // If broken sidewalk is clicked, then
            // repair to make fixed sidewalk
            updateTileType(tgc_x, tgc_y, "sidewalk");

            // Check to see this tile's orientation to make sure we
            // place down the right sprite
            if (tile_orientation === "normal") {
                updateTileSprite(tgc_x, tgc_y, sidewalk);
            } else if (tile_orientation === "rotated180") {
                updateTileSprite(tgc_x, tgc_y, sidewalkRotated180);
            }
        } else if (tile_type === "sidewalk_corner" && tools[currentToolIndex] === "Add Curb Ramp") {
            // If sidewalk corner is clicked, then
            // replace with curb ramp
            updateTileType(tgc_x, tgc_y, "sidewalk_corner_curbRamp");

            // Check to see this tile's orientation to make sure we
            // place down the right sprite
            if (tile_orientation === "normal") {
                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampTopLeft);
            } else if (tile_orientation === "rotated90") {
                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampBotLeft);
            } else if (tile_orientation === "rotated90") {
                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampBotRight);
            } else {
                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampTopRight);
            }
        }
    }



    this.keyPressed = function() {
        if (key === 'r') {
            tileArr = rotateMatrixClockwise(tileArr);
        }

        if (key === 't') {
            // Cycle to the next tool in our tools array (and wrap back around if
            // we have reached the end of our tools array)
            currentToolIndex = (currentToolIndex + 1) % tools.length;

            // TODO: Change the cursor to an image that matches the current tool
            // type can either be predefined image or path to image
            // cursor(type, x, y)
        }
    }

    this.keyReleased = function() {

        // why is the player not showing up?

        // it seems to be a reference issue
        let playerSprite_newTcgCords_x = playerSprite_curTgc.x;
        let playerSprite_newTcgCords_y = playerSprite_curTgc.y;
        if (key === 'w') {
            playerSprite_newTcgCords_y -= 1;
        } else if (key === 's') {
            playerSprite_newTcgCords_y += 1;
        } else if (key === 'a') {
            playerSprite_newTcgCords_x -= 1;
        } else if (key === 'd') {
            playerSprite_newTcgCords_x += 1;
        }

        // Check to make sure that the new coords are valid, if not, then don't
        // allow the player to move to that tile
        let tileType_playerIsOn = tileArr[playerSprite_curTgc.x][playerSprite_curTgc.y].type;
        let tileType_nextTile = tileArr[playerSprite_newTcgCords_x][playerSprite_newTcgCords_y].type;

        // console.log(`\nCurrent tile: ${tileType_playerIsOn}`);
        // console.log(`Next tile: ${tileType_nextTile}`);

        // console.log(`tileType_nextTile !== "broken_sidewalk": ${tileType_nextTile !== "broken_sidewalk"}`);
        // console.log(`tileType_nextTile !== "grass": ${tileType_nextTile !== "grass"}`);
        // console.log(`(tileType_nextTile !== "road" && tileType_playerIsOn !== "sidewalk_corner") : ${(tileType_nextTile !== "road" && tileType_playerIsOn !== "sidewalk_corner") }`);
        // console.log(`(tileType_nextTile !== "sidewalk_corner" && tileType_playerIsOn !== "road"): ${(tileType_nextTile !== "sidewalk_corner" && tileType_playerIsOn !== "road")}`);
        // console.log(`(tileType_nextTile !== "sidewalk" && tileType_playerIsOn !== "road"): ${(tileType_nextTile !== "sidewalk" && tileType_playerIsOn !== "road")}`);


        // check redundancy later here
        if (tileType_nextTile == "road" && tileType_playerIsOn == "sidewalk_corner_curbRamp") {
            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
            return;
        }

        if (tileType_nextTile == "sidewalk_corner_curbRamp" && tileType_playerIsOn == "road") {
            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
            return;
        }

        if (tileType_nextTile == "road" && tileType_playerIsOn == "road") {
            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
            return;
        }

        if (tileType_nextTile == "sidewalk_corner_curbRamp") {
            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
            return;
        }

        // I think we only want to walk on sidwalk no?
        if (tileType_playerIsOn != "road" &&
            (tileType_nextTile == "sidewalk" || tileType_nextTile == "sidewalk_corner")) {
            console.log("The movement has been allowed...");
            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
        }
    }




    function rotateMatrixClockwise(matrix) {
        let rotatedMatrix = new Array(tile_arr_size).fill(null).map(() => new Array(tile_arr_size).fill(null));

        for (let i = 0; i < tile_arr_size; i++) {
            for (let j = 0; j < tile_arr_size; j++) {
                let newX = j;
                let newY = tile_arr_size - 1 - i;
                let tile = matrix[i][j];
                let screenCoord = toScreenCoords({
                    x: newX,
                    y: newY
                });
                rotatedMatrix[newX][newY] = new TileClass(newX, newY, screenCoord.x, screenCoord.y, tile.sprite);
            }
        }
        return rotatedMatrix;
    }

    // Helper function to check if grid coordinates are within bounds
    function isValidGridCoords(tgc_x, tgc_y) {
        return tgc_x >= 0 && tgc_x < tile_arr_size && tgc_y >= 0 && tgc_y < tile_arr_size;
    }

    // Helper function to update tile sprite
    function updateTileSprite(tgc_x, tgc_y, sprite) {
        tileArr[tgc_x][tgc_y].sprite = sprite;
    }

    // Helper function to update tile type
    function updateTileType(tgc_x, tgc_y, type) {
        tileArr[tgc_x][tgc_y].type = type;
    }

    function invertMatrix(a, b, c, d) {
        /*
          Invert a 2d matrix, with a, b, c, and d being
          [ a  b ]
          [ c  d ]
        */
        const det = (1 / (a * d - b * c));

        return {
            a: det * d,
            b: det * -b,
            c: det * -c,
            d: det * a,
        }
    }

    function toGridCoords(screen) {
        const a = i_x * 0.5 * w;
        const b = j_x * 0.5 * w;
        const c = i_y * 0.5 * h;
        const d = j_y * 0.5 * h;

        const inv = invertMatrix(a, b, c, d);

        return {
            // offset mouse cursor to align with block
            x: screen.x * inv.a + screen.y * inv.b - 25.75,
            y: screen.x * inv.c + screen.y * inv.d + 4.15,
        }
    }

    function toScreenCoords(tile) {
        return {
            x: tile.x * i_x * 0.5 * w + tile.y * j_x * 0.5 * w,
            y: tile.x * i_y * 0.5 * h + tile.y * j_y * 0.5 * h,
        }
    }

    // Helper function to convert screen coordinates to grid coordinates
    function screenToGridCoords(screen) {
        let tgc = toGridCoords(screen);
        return {
            x: Math.floor(tgc.x),
            y: Math.floor(tgc.y)
        };
    }


}