const barAcrossWid = 1;
const music = document.getElementById('music');
var playMusic = false
function playM() {
    music.play();
}
music.playbackRate = 1;
//00005f
//Held
var holdPeice = 1;
//var keysprssedR = false;
//var keysprssedL = false;
var keysprssedU = false;
var keysprssedSpc = false;
var keysprssedLkey = false;
var keysprssedH = false;
//We
const weights = [1,1,1,1,1,1,1];
//Colors
const winGrad = 'linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red)';
const gradC = ['violet', 'indigo', 'blue', 'green', 'yellow', 'orange', 'red'];
var levelC = ["#000000", "#770000", "#007700", "#000077", "#777700", "#007777", "#770077", "#777777", "#999999", "#444444"]
var backColor = "#000000";
var fallingBlocksBack = "#00ffff"
var brickColor = "#222222";
var brickHighlight = "#333333";
var pileColor = "#a206c3";
var blockColors = ['#bbff00', '#00ffdd', '#00653b', '#5500ff', '#ff0033', '#ffffff', '#00ff00'];
var loseColor = "#ffa69d";
//End of colors
var numPauses = 0
const pauseB = document.getElementById('pause');
document.body.style.backgroundColor = backColor;
//Event
function keys (event) {
    if ((event.key == "d")) {
	moveR();
    }
    if ((event.key == "a")) {
	moveL();
    }
    if (event.key == "s") {
	mDown();
	points += 5;
	score.innerHTML = "Score! Points: " + points;
	sleep(20)
    }
    if ((event.key == "w") && !keysprssedU) {
	teleport(block);
	keysprssedU = true;
    }
    if ((event.key == "ArrowRight")) {
	moveR();
    }
    if ((event.key == "ArrowLeft")) {
	moveL();
    }
    if (event.key == "ArrowDown") {
	mDown();
	points += 5;
	score.innerHTML = "Score! Points: " + points;
	sleep(20)
    }
    if ((event.key == "ArrowUp") && !keysprssedU) {
	teleport(block);
	keysprssedU = true;
    }
    if ((event.key == " ") && !keysprssedSpc) {
	rotateBlock('r');
	keysprssedSpc = true;
    }
    if ((event.key == "l") && !keysprssedLkey) {    
	rotateBlock('l')
	keysprssedLkey = true;
    }
    if ((event.key == "h") && !keysprssedH) {
	hold();
	keysprssedH = true;
    }
}
function keysUp (event) {
    if ((event.key == "w") && keysprssedU) {
	keysprssedU = false;
    }
    if ((event.key == "ArrowUp") && keysprssedU) {
	keysprssedU = false;
    }
    if ((event.key == " ") && keysprssedSpc) {
	keysprssedSpc = false;
    }
    if ((event.key == "l") && keysprssedLkey) {    
	keysprssedLkey = false;
    }
    if ((event.key == "h") && keysprssedH) {
	keysprssedH = false;
    }
}
//Score!
var points = 0;
var rows = 0;
//Dealing with blocks
var block = 0;
var heldPI = false;
//You LOSE
function reload() {
    location.reload();
}
function win() {
    let x = document.body.lastElementChild;
    clearInterval(downInt);
    document.removeEventListener('keydown', keys);
    block = 0;
    while (x) {
	document.body.removeChild(x);
	x = document.body.lastElementChild;
    }
    document.body.style.backgroundImage = winGrad;
    document.body.style.color = 'transparent';
    var loseState = document.createElement('H1');
    var endScore = document.createElement('H1');
    var reloadB = document.createElement('button');
    reloadB.innerHTML = "Play again!"
    reloadB.setAttribute('onclick', 'reload()');
    var homeB_end = document.createElement('a')
    homeB_end.href = "../"
    homeB_end.innerHTML = "HOME"
    homeB_end.style.backgroundColor = "white"
    homeB_end.style.padding = "5px"
    loseState.innerText = "You win!";
    loseState.style.position = "inline";
    loseState.style.color = "white";
    endScore.innerHTML = "Score: " + points;
    endScore.style.position = "inline";
    endScore.style.color = "white";
    let high = localStorage.getItem('clay_blocks_highscore')
    if (high == null) {
	high = 0;
    }
    if (high < points) {
	localStorage.setItem('clay_blocks_highscore', points);
    }
    document.body.appendChild(endScore);
    document.body.appendChild(loseState);
    document.body.appendChild(reloadB);
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(homeB_end);
}
function Lose() {
    let lv = pile.lv;
    let x = document.body.lastElementChild;
    clearInterval(downInt);
    document.removeEventListener('keydown', keys);
    block = 0;
    while (x) {
	document.body.removeChild(x);
	x = document.body.lastElementChild;
    }
    document.body.style.backgroundColor = loseColor
    var loseState = document.createElement('H1');
    var endScore = document.createElement('H2');
    var reloadB = document.createElement('button');
    reloadB.innerHTML = "Retry!"
    reloadB.setAttribute('onclick', 'reload()');
    var homeB_end = document.createElement('a')
    homeB_end.href = "../";
    homeB_end.innerHTML = "HOME";
    homeB_end.style.backgroundColor = "white";
    homeB_end.style.padding = "5px";
    loseState.innerText = "Game over :(";
    loseState.style.position = "inline";
    loseState.style.color = "white";
    endScore.innerHTML = "Score: " + points;
    endScore.style.position = "inline";
    endScore.style.color = "white";
    var endRows = document.createElement('p');
    endRows.innerHTML = "Rows: " + rows;
    endRows.style.position = "inline";
    endRows.style.color = "black";
    var endLevel = document.createElement('p');
    endLevel.innerHTML = "Level: " + lv;
    endLevel.style.position = "inline";
    endLevel.style.color = "black";
    var endPauses = document.createElement('p');
    endPauses.innerHTML = "Number of pauses: " + numPauses;
    endPauses.style.position = "inline";
    endPauses.style.color = "black";
    document.body.appendChild(loseState);
    document.body.appendChild(endScore);
    document.body.appendChild(endRows);
    document.body.appendChild(endLevel);
    document.body.appendChild(endPauses)
    let high = localStorage.getItem('clay_blocks_highscore')
    if (high < points) {
	localStorage.setItem('clay_blocks_highscore', points);
    }
    if (high == null) {
	high = 0;
    }
    var highScoreH = document.createElement('H3');
    highScoreH.innerText = "High Score: " + high;
    highScoreH.style.position = "inline";
    highScoreH.style.color = "white";
    document.body.appendChild(highScoreH)
    document.body.appendChild(reloadB);
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(homeB_end);
}
function howTP() {
    pause()
    const holdHow = document.createElement('div');
    holdHow.style.position = "fixed";
    holdHow.style.left = "0cm";
    holdHow.style.top = "0cm";
    holdHow.style.height = "100vh";
    holdHow.style.width = "100vw";
    holdHow.style.textAlign = "center";
    holdHow.style.backgroundColor = "white";
    holdHow.style.zIndex = "1000"
    const howToP = document.createElement('p');
    howToP.innerText = "Press space to rotate, left and right arrows to move the piece left and right, the down arrow to move the piece down faster, and the up arrow to immediately make it go all the way to the bottom. Press the 'h' key to swap your current piece with the held piece. Have fun!"
    howToP.style.top = "3cm";
    howToP.style.margin = ".5cm"
    holdHow.appendChild(howToP)
    const returnB = document.createElement('button');
    returnB.innerHTML = "Return to game";
    returnB.addEventListener('click', function() {
	holdHow.remove();
	unPause();
    });
    holdHow.appendChild(returnB);
    document.body.appendChild(holdHow);
}
function restart() {
    location.reload()
}
function fallingBlocks() {
    let x = document.body.children;
    let i = 0;
    while (x[i]) {
	x[i].style.display = 'none';
	i++;
    }
    removeShape();
    if (playMusic) {
	music.pause();
    }
    fallingBlocksD.style.display = 'block';
    document.body.style.backgroundColor = fallingBlocksBack;
    setTimeout(() => {
	if (playMusic == true) {
	    music.play();
	}
	let x = document.body.children;
	let i = 0;
	while (x[i]) {
	    if ((x[i].tagName != 'SCRIPT') && (x[i].id != 'formDiv') && (x[i].id != 'inPL') && (x[i].id != 'inP') && (x[i].id != 'sub')) {
		x[i].style.display = 'block';
	    }
	    i++;
	}
	makeShape(c);
	fallingBlocksD.style.display = 'none';
	document.body.style.backgroundColor = backColor;
    }, 2000);
}
class Pile {
    constructor() {
	this.value = []
	this.lv = 0;
	this.name = "pile";
	for (let i = 0; i < 20; i++) {
	    this.value.push([]);
	    for (let y = 0; y < 10; y++) {
		this.value[i].push(0) 
	    }
	}
    }
    addTo(len) {
	for (let i = 1; i < block.value.length; i++) {
	    for (let y = 0; y < block.value[i].length; y++) {
		if (block.value[i][y] == 1) {
		    this.value[i + block.y - 1][block.x + y - 1] = 1;
		}
	    }
	}
	this.updatePileScreen();
	this.getRidOfRows();
    }
    getRidOfRows() {
	let vals = 0;
	for (let i = 0; i < 20; i++) {
	    let x = true;
	    for (let y = 0; y < 10; y++) {
		if (this.value[i][y] != 1) {
		    x = false;
		}
	    }
	    if (x == true) {
		vals += 1;
		this.value.splice(i,1)
		this.value.unshift([0,0,0,0,0,0,0,0,0,0])
		points += 100*vals;
		rows += 1;
		score.innerText = "Score! Points: " + points;
		score.style.fontSize = '150%';
		setTimeout(() => {score.style.fontSize = '100%';}, 250);
		rowsP.innerText = "Rows: " + rows;
		rowsP.style.fontSize = '150%';
		setTimeout(() => {rowsP.style.fontSize = '100%';}, 250);
		
	    }	
	}
	if (vals == 4) {
	    fallingBlocks();
	}
	this.updatePileScreen();
	if (Math.floor(rows/10) > this.lv) {
	    this.lv += 1;
	    levelP.innerHTML = "Level: " + this.lv;
	    backColor = levelC[Math.floor(rows/10) % 10];
	    if (vals != 4) {
		document.body.style.backgroundColor = backColor;
	    }
	    if (Math.floor(Math.floor(rows/10)/10) == 1) {
		win();
	    }
	    clearInterval(downInt);
	    downInt = setInterval(mDown, (1000*((3/4)**this.lv)));
	    if (playMusic) {
		music.playbackRate = music.playbackRate*4/3;
	    }
	}
	/* if (Math.floor(rows) > this.lv) {
	   this.lv += 1;
	   levelP.innerHTML = "Level: " + this.lv;
	   backColor = levelC[Math.floor(rows)];
	   if (vals != 4) {
	   document.body.style.backgroundColor = backColor;
	   }
	   if (Math.floor(rows/10) == 1) {
	   win();
	   }
	   clearInterval(downInt);
	   downInt = setInterval(mDown, (1000*((3/4)**this.lv)))
	   music.playbackRate = music.playbackRate*4/3
	   } */
    }
    updatePileScreen(bk = 0) {
	if (bk == 0) {
	    let i = 0
	    while (i < 200) {
		var pix = document.getElementById('px' + i);
		pix.style.backgroundColor = brickColor;
		i++;
	    }
	}
	if (bk != 0) {
	    let l = [];
	    for (let i = 0; i < bk.value[1].length; i++) {
		for (let y = 1; y < bk.value.length; y++) {
		    if (bk.value[y][i] == 1) {
			l.push(i);
			break;
		    }
		}
	    }
	    for (let i = bk.x - 1; i < 10; i++) {
		if (l.includes(i - bk.x + 1)) {
		    for (let y = 0; y < 20; y++) {
			try {
			    document.getElementById('px' + (y*10 + i)).style.backgroundColor = brickHighlight;
			}
			finally {
			    continue;
			}
		    }
		}
	    }
	}
	for (let i = 0; i < this.value.length; i++) {
	    for (let y = 0; y < 10; y++) {
		if (this.value[i][y] == 1) {
		    let pxn = document.getElementById('px'+ ((i + 20 - this.value.length)*10 + y));
		    pxn.style.backgroundColor = pileColor;
		} 
	    }
	}
	
    }
    
}
var pile = new Pile();
//Rotating the arrays for shapes
function rotateR(m) {
    matrix = m.slice(1);
    let v = matrix[0].map((val, index) => matrix.map(row => row[index]).reverse())
    v.unshift(m[0])				
    return v;
}
function rotateL(m) {
    matrix = m.slice(1);
    let v = matrix[0].map((val, index) => matrix.map(row => row[row.length-1-index]));
    v.unshift(m[0]);				
    return v;
}
function weightRand(x) {
    let l = []
    for (let i = 0; i < x.length; i++) {
	for (let y = 0; y < x[i]; y++) {
	    l.push(i);
	}
    }
    let n = Math.floor(Math.random()*(l.length));
    return l[n];
}
//Defining what a block is

class Block {
    constructor(val, color, startY = 0) {
	this.color = color;
	this.value = val;
	this.name = "block";
	this.x = 5;
	this.y = startY;
    }
    moveDown(z, u) {
	let move = true;
	for (let i = this.value.length - 1; i > 0; i -= 1) {
	    for (let y = 0; y < this.value[1].length; y++) {
		if (this.value[this.value.length - i][y] == 1) {
		    if (((this.y - i + this.value.length) < 20) && ((this.x + y - 1) < 10)) {
			if (pile.value[this.y - i + this.value.length][this.x + y - 1] == 1) {
			    pile.addTo(this.value.length - 1);
			    removeShape();
			    makeShape(g);
			    g = weightRand(weights);
			    nextP.innerHTML = htmlShape(g, 'Next piece');
			    move = false;
			    return;
			}
		    } else {
			pile.addTo(this.value.length - 1);
			removeShape();
			makeShape(g);
			g = weightRand(weights);
			nextP.innerHTML = htmlShape(g, 'Next piece');
			move = false;
			return;
		    }
		}
	    }
	}
	if (move == true) {
	    this.y = this.y+z;
	    if (u == true) {
		this.updateScreen();
	    }
	}
	return move;
    }
    moveLeft() {
	let move = true;
	for (let y = 0; y < this.value[1].length; y++) {
	    for (let i = 1; i < this.value.length; i++) {
		if (this.value[i][y] == 1) {
		    if ((this.x + y < 2) || (pile.value[this.y + i - 1][this.x + y - 2] == 1)) {
			move = false;
			return;
		    }
		}
	    }
	}
	if (move == true) {
	    this.x = this.x-1;
	    this.updateScreen();
	    return 0;
	}
    }
    moveRight() {
	let move = true;
	for (let y = this.value[1].length - 1; y >= 0; y -= 1) {
	    for (let i = 1; i < this.value.length; i++) {
		if (this.value[i][y] == 1) {
		    if ((this.x + y > 9) || (pile.value[this.y + i - 1][this.x + y] == 1)) {
			return;
		    }
		}
	    }
	}
	this.x = this.x+1;
	this.updateScreen();
	return;
    }
    rotate(rl = 'r') {
	if (rl == 'r') {  
	    let a = rotateR(this.value);
	    for (let i = 1; i < a.length; i++) {
		for (let y = 0; y < a[i].length; y++) {
		    if (a[i][y] == 1) {
			if ((this.y+i-1 < 0) || (this.y+i-1 > 19) || (this.x+y-1 < 0) || (this.x+y-1 > 9)) {
			    return;
			}
			else if (pile.value[this.y+i-1][this.x+y-1] == 1) {
			    return;
			}
		    }
		}
	    }
	    this.value = a;
	} else if (rl == 'l') {
	    let a = rotateL(this.value);
	    for (let i = 1; i < a.length; i++) {
		for (let y = 0; y < a[i].length; y++) {
		    if (a[i][y] == 1) {
			if ((this.y+i-1 < 0) || (this.y+i-1 > 19) || (this.x+y-1 < 0) || (this.x+y-1 > 9)) {
			    return;
			}
			else if (pile.value[this.y+i-1][this.x+y-1] == 1) {
			    return;
			}
		    }
		}
	    }
	    this.value = a;
	}
    }
    updateScreen() {
	let i = 0
	while (i < 200) {
	    var pix = document.getElementById('px' + i);
	    pix.style.backgroundColor = brickColor;
	    i++;
	}
	pile.updatePileScreen(this);
	for (let i = 1; i < (this.value.length); i++) {
	    for (let y = 0; y < (this.value[1].length); y++) {
		if (this.value[i][y] == 1) {
		    let n = document.getElementById("px" + ((this.y+i-1)*10 + (this.x + y-1)));
		    n.style.backgroundColor = this.color;
		}
	    }
	}

    }
}
//Extending it
class Square extends Block {
    constructor(color) {
	super([["sq"],[1,1],[1,1]], color, 0);
    }	
}
class Line extends Block {
    constructor(color) {
	super([["ln"],[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], color, -1);
    }
}
class RElbow extends Block {
    constructor(color) {
	super([["rEl"],[1,1,0],[1,0,0],[1,0,0]], color, 0);
    }
}
class LElbow extends Block {
    constructor(color) {
	super([["lEl"],[1,1,0],[0,1,0],[0,1,0]], color, 0);
    }
}
class TriShape extends Block {
    constructor(color) {
	super([["tri"],[0,1,0],[1,1,0],[0,1,0]], color, 0);
    }
}
class Rurve extends Block {
    constructor(color) {
	super([["rve"],[0,1,1],[1,1,0],[0,0,0]], color, 0);
    }
}
class Lurve extends Block {
    constructor(color) {
	super([["lve"],[1,1,0],[0,1,1],[0,0,0]], color, 0);
    }
}
//Creating blocks ...
function makeShape(typ) {
    c = typ;
    if (typ == 0) {
	block = new Square(blockColors[typ]); 
    }
    if (typ == 1) {
	block = new Line(blockColors[typ]);
    }
    if (typ == 2) {
	block = new RElbow(blockColors[typ]);
    }
    if (typ == 3) {
	block = new LElbow(blockColors[typ]);
    }
    if (typ == 4) {
	block = new TriShape(blockColors[typ]);
    }
    if (typ == 5) {
	block = new Rurve(blockColors[typ]);
    }
    if (typ == 6) {
	block = new Lurve(blockColors[typ]);
    }
    heldPI = false;
    for (let i = 1; i < block.value.length; i++) {
	let n = false;
	for (let y = 0; y < block.value[i].length; y++) {
	    if (block.value[i][y] == 1) {
		if (pile.value[block.y - i - 1 + block.value.length][block.x + y - 1] == 1) {
		    Lose();
		    n = true;
		    break;
		}
	    }
	}
	if (n == true) {
	    break;
	}
    }
    block.updateScreen();
}

// ... and removing them
function removeShape() {
    block = 0;
}
//Moving them
function moveR() {
    block.moveRight();
}
function moveL() {
    block.moveLeft();
}
function teleport(x) {
    let m = true;
    for (let i = 0; i<20; i++) {
	if (m == true) {
	    m = x.moveDown(1, false);
	    points += 5;
	    score.innerText = "Score! Points: " + points;
	    score.style.fontSize = '150%';
	    setTimeout(() => {score.style.fontSize = '100%';}, 250);
	}
	block.updateScreen();
    }
}
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
function softD(x) {
    let m = true;
    for (let i = 0; i<20; i++) {
	if (m == true) {
	    m = x.moveDown(1, true);
	    points += 5;
	    score.innerText = "Score! Points: " + points;
	    score.style.fontSize = '150%';
	    setTimeout(() => {score.style.fontSize = '100%';}, 250);
	}
	sleep(100*((3/4)**pile.lv))
    }
}
function hold() {
    if (heldPI == false) {
	removeShape();
	heldP.innerHTML = htmlShape(c, 'Held piece');
	let n = c;
	makeShape(holdPeice);
	holdPeice = n;
	heldPI = true;
    }
}
//Rotating them
function rotateBlock(rl) {
    block.rotate(rl);
    block.updateScreen();
}

let Wh = ((window.innerHeight - 5 - barAcrossWid*38)/20);

let i = 0;
while (i < 200) {
    var pix = document.createElement('div');
    pix.setAttribute('id', 'px' + i);
    pix.setAttribute('class', 'pixel');
    pix.style.width = (Wh*24/25) + "px";
    pix.style.height = (Wh*24/25) + "px";
    pix.style.position = "fixed";
    pix.style.left = ((i-Math.floor(i/10)*10)*Wh + 5).toString() + "px";
    pix.style.top = (Math.floor(i/10)*Wh + barAcrossWid*37).toString() + "px";
    pix.style.backgroundColor = brickColor;
    var div = document.getElementById("game");
    div.appendChild(pix);
    i++;
}

const score = document.createElement('p');
score.innerHTML = "Score! Points: " + points;
score.style.position = 'fixed';
score.style.left = (Wh*10 + 10) + 'px';
score.style.top = (6.25 + barAcrossWid).toString() + 'cm';
score.style.color = "#00ffdd";
const levelP = document.createElement('p');
levelP.innerHTML = "Level: " + pile.lv;
levelP.style.position = 'fixed';
levelP.style.left = (Wh*10 + 10) + 'px';
levelP.style.top = (7.75 + barAcrossWid).toString() + 'cm';
levelP.style.color = "#ff00dd";
document.body.appendChild(levelP)
const rowsP = document.createElement('p');
rowsP.innerHTML = "Rows: " + rows;
rowsP.style.position = 'fixed';
rowsP.style.left = (Wh*10 + 10) + 'px';
rowsP.style.top = (7 + barAcrossWid).toString() + 'cm';
rowsP.style.color = "#99ccbb";
document.body.appendChild(score);
document.body.appendChild(rowsP);
document.body.appendChild(levelP);
const fallingBlocksD = document.createElement('H1');
fallingBlocksD.innerHTML = 'Falling Blocks!';
let s = ""
for (let i = 0; i < gradC.length; i++) {
    s += ', ' + gradC[i];
}
fallingBlocksD.style.backgroundImage = 'linear-gradient(to left' + s + ')';
fallingBlocksD.style.webkitBackgroundClip = 'text';
fallingBlocksD.style.color = 'transparent';
fallingBlocksD.style.position = 'absolute';
fallingBlocksD.style.left = '100px';
fallingBlocksD.style.top = '50px';
fallingBlocksD.style.display = 'none';
fallingBlocksD.style.fontSize = "400%";
fallingBlocksD.style.fontFamily = 'monospace';
var g = weightRand(weights);
var c = 1;
const pVals = [[[1,1],[1,1]],[[1,1,1,1]],[[1,1],[1,0],[1,0]],[[1,1],[0,1],[0,1]],[[0,1],[1,1],[0,1]],[[0,1,1],[1,1,0]],[[1,1,0],[0,1,1]]]
var nextP = document.createElement('p');
function htmlShape(d, text) {
    let t = text + ': <br>';
    for (let i = 0; i < pVals[d].length; i++) {
	let y = ['&nbsp;&nbsp;','[]']
	for (let z = 0; z < pVals[d][i].length; z++) { 
	    t += y[pVals[d][i][z]];
	}
	t += '<br>';
    }
    t += '</span>'
    return t;
}
nextP.innerHTML = htmlShape(g, 'Next piece');
nextP.style.position = 'fixed';
nextP.style.top = (.125 + barAcrossWid).toString() + 'cm';
nextP.style.left = (Wh*10 + 10) + 'px';
nextP.style.color = 'white';
nextP.style.fontFamily = 'Courier New';
nextP.style.fontSize = '140%';
document.body.appendChild(nextP);
var heldP = document.createElement('p');
heldP.innerHTML = htmlShape(1, 'Held piece');
heldP.style.position = 'fixed';
heldP.style.top = (3 + barAcrossWid).toString() + 'cm';
heldP.style.left = (Wh*10 + 10) + 'px';
heldP.style.color = 'white';
heldP.style.fontFamily = 'Courier New';
heldP.style.fontSize = '140%';
document.body.appendChild(heldP);
document.body.appendChild(fallingBlocksD);
function mDown() {
    block.moveDown(1, true);
}
var downInt = 0
function start() {
    makeShape(1);
    block.updateScreen();
    downInt = setInterval(mDown, 1000);
    document.addEventListener('keydown', keys);
    document.addEventListener('keyup', keysUp);
}
function getRandomHexColor() {
    let color = Math.floor(Math.random() * 16777215).toString(16);
    while (color.length < 6) {
	color = "0" + color;
    }
    return "#" + color;
}
function form() {
    var clrs = [];
    const Cclr = 0;
    var clcks = 0;
    const formD = document.getElementById('formDiv');
    formD.style.display = 'block';
    formD.style.position = 'fixed';
    formD.style.bottom = '0';
    formD.style.height = '100vh';
    formD.style.width = '100vw';
    formD.style.zIndex = '20';
    formD.style.backgroundColor = '#000000'
    formD.style.right = '0';
    const nextS = document.createElement('button');
    nextS.innerHTML = "Next";
    nextS.addEventListener('click', () => {
	var rad = document.getElementsByName('scheme');
	var rad_value;
	for(var i = 0; i < rad.length; i++){
	    if(rad[i].checked){
		rad_value = rad[i].value;
	    }
	}
	console.log(rad_value)
	if (rad_value == null) {
	    alert("You need to choose a theme");
	} else {
	    if (document.getElementById('check').checked == true) {
		playMusic = true
		playM();
	    }
	}
	if (rad_value == "A") {
	    formDiv.remove();
	    start();
	}
	if (rad_value == "B") {
	    backColor = "#396eff";
	    document.body.style.backgroundColor = "#396eff";
	    fallingBlocksBack = "#00ffff";
	    brickColor = "#ff75ff";
	    pileColor = "#ffff92";
	    brickHighlight = "#dd30dd"
	    loseColor = "#ff8300";
	    levelC = ["#00cd86", "#ff00d2", "#ffc13c", "#00008f", "#2fe600", "#b3ffff", "#ffb3b6", "#000000", "#808090", "#82ffbe"];
	    formDiv.remove();
	    start();
	}
	if (rad_value == "C") {
	    backColor = getRandomHexColor();
	    document.body.style.backgroundColor = getRandomHexColor();
	    fallingBlocksBack = getRandomHexColor();
	    brickColor = getRandomHexColor();
	    pileColor = getRandomHexColor();
	    brickHighlight = getRandomHexColor();
	    loseColor = getRandomHexColor();
	    levelC = [getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor(), getRandomHexColor()];
	    formDiv.remove();
	    start();
	}
    });
    formD.appendChild(nextS)
}
form();
window.addEventListener("resize", () => {
    formDiv.style.width = "100%";
    formDiv.style.height = "100%";
});
var downIntCur = 0
function pause() {
    numPauses += 1;
    //block.updateScreen();
    downIntCur = downInt;
    clearInterval(downInt)
    document.removeEventListener('keydown', keys);
    pauseB.innerHTML = "PLAY";
    pauseB.setAttribute('onclick', 'unPause()');
    if (playMusic) {
	music.pause()
    }
}
function unPause() {
    console.log(pile)
    console.log(pile.lv, (1000*((3/4)**pile.lv)))
    downInt = setInterval(mDown, (1000*((3/4)**pile.lv)));
    document.addEventListener('keydown', keys);
    document.addEventListener('keyup', keysUp);
    pauseB.innerHTML = "PAUSE";
    pauseB.setAttribute('onclick', 'pause()');
    if (playMusic) {
	music.play()
    }
}
