const COLORS = {
  left: "#118c8b",
  right: "#f14d49",
  other: "#bca18d",
}

function Block(x, y, size, type = "other") {
    const FILL_STYLE = COLORS[type];
    return {
        get x() { return x },
        get y() { return y },
        draw(ctx) {
            ctx.fillStyle = FILL_STYLE;
            ctx.fillRect(x, y, size, size);
            ctx.strokeRect(x, y, size, size);
        },
        move(addX, addY) {
            x += addX * size;
            y += addY * size;
        },
    };
}

const b = new Block(x, y, size, type);  // instantiate
// or you no longer need the new token
const b = Block(x, y, size, type);
b.move(1, 0);          // move right
filter(a => a < b.y);  // access getter

const O_PIECE = "####";
const T_PIECE = "### # ";
const BAR_PIECE = "####";
const Z_PIECE = " # ###";
const S_PIECE = " #### ";

const pieceData = [
  createPiece(O_PIECE,2),
  createPiece(T_PIECE,3),
  createPiece(S_PIECE,3),
  createPiece(Z_PIECE,2),
  createPiece(BAR_PIECE,4),
];

function createPiece(layout, width, type = "other") {
    const height = layout.length / width;
    var i = layout.length;
    const build = []
    while(i--) {
        if(layout[i] === "#") {
            const x = i % width;
            const y = i / width | 0;
            build.push([x, y]);
        }
    }
    return {
        builds: [build],
        type,
    };
}

const gMath = {};  // g for game maths
gMath.mod = (n, m) => (n % m + m) % m;
gMath.randInt = (min, max = min + (min = 0)) => Math.floor(Math.random() * (max - min) + min);
gMath.randItem = arr => arr[gMath.randInt(arr.length)];

requestAnimationFrame(mainLoop); // will start the animation loop when execution is idle
var frameCounter = 0;
var gameSpeed = 30; // Render every 30 frame or 1/2 second
var updateRender = true; // when true will re-render the game
function mainLoop(time) { // time is a high resolution time supplied by the DOM

    // call IO code here

    if (frameCounter % gameSpeed === 0) {
        updateGame(); // call the game update
        updateRender = true;
    }

    if (updateRender) {
        updateRender = false;
        draw(); // draw the game
    }


    frameCounter ++;
    requestAnimationFrame(mainLoop);
}

const IO = {
    keys: { // list only the keys you need
        ArrowLeft: false,
        ArrowRight: false,
        ArrowDown: false,
        Escape: false,  // reset or end game
    },
    clear() {
        for(const key of Object.keys(IO.keys) { IO.keys[key] = false }
    },
    keyboard(event) {
        if (IO.keys[event.keyCode] !== undefined) {
            IO.keys[event.keyCode] = event.type === "keydown";
            event.preventDefault();
        }
    }
}
addEventListener("keydown", IO.keyboard);
addEventListener("keyup", IO.keyboard);

const GAME_DOWN = "ArrowDown"; // bind key to action
const GAME_LEFT = "ArrowLeft"; // bind key to action
const GAME_RIGHT = "ArrowRight"; // bind key to action
const KEY_REPEAT_RATE = 20; // every 20 frames 5 times a second
var rightRepeat = 0;
function doInput() {
    // Action while key is down
    if (IO.keys[GAME_LEFT]) {
        /* do stuff */
    }

    // Action only once per key down
    if (IO.keys[GAME_DOWN]) {
        IO.keys[GAME_DOWN] = false; // turn off key.
        /* do stuff */
    }

    // Action repeats on key down
    if (IO.keys[GAME_RIGHT]) {
        if (rightRepeat === 0) {
            rightRepeat = keyRepeatRate;
            /* do stuff */
        }
        rightRepeat--; // count down to next repeat
    } else {
        rightRepeat = 0; // reset repeat
    }

    // when changing levels clear the input state so if the user
    // is holding a key down it does not effect the new level or game
    IO.clear();
}

;((container)=> {
    "use strict";
    /*
       All game code in here

    */
})(document.body);  // the container for your game

const gDOM = {}; // g for game DOM
gDOM.create = (tag, props = {}) => Object.assign(document.createElement(tag), props);
gDOM.append = (parent, ...children) => children.reduce((p, c) => (p.appendChild(c), p), parent);

const styles = `
    tetris--score-display {
        /* add style stuff
    }
    /* and so on */
`;
gDOM.append(container, gDOM.create("style", {innerHTML: styles}));
const canvas = gDOM.create("canvas", {width: gameWidth, height: gameHeight});
const block = gDOM.create("canvas", {width: blockWidth, height: blockHeight});
const score = gDOM.create("div", {textContent: "Score:", className: "tetris--score-display"});
const level = gDOM.create("div", {textContent: "Level:", className: "tetris--level-display"});

const ctx = canvas.getContext("2d");
const bctx = block.getContext("2d");

gDOM.append(container, canvas, block, score, level);

// To set score or level
score.innerText = "Score: " + this.score;  // Note you had this.score.toString() the toString is autonomic
level.innerText = "Level: " + this.level;