Reformatted level select screen

base64/checkmark.png.64

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAACXBIWXMAAACVAAAAlQGr+O8LAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA0JJREFUSIml1l9oU1ccB/DvOTe2TSPae5ObP/1nervKiqBuDn0RfJuCID7YB58UHOxhqzLtg7S1HLD+QzGyMjaD4IsP4oOMTfBF8C9WQY2yMUS2JFubOJObpHFtbU3OPT5o60lMu+R6337f7+98uIeEEIKPeAbZt9tiiP/wmhb5XNZhBU3Hx6ApZHY+cERa52YqCAII/EztgoyxhizNrpOzZrTkfUsC52yjr0hqV5REPylBeeC3gYGjv9tGTWFunSLTZG6mgkCDeh8AbKGnGdNSNLVWztpEW94HNWwbHbfGe2M03iZnfuF/3M9OP7ON5pTcpgIK8zMFhSrU0fdzjQ9j3xkJmiy5ervVnvMUtbBtNI/8vjGMqXIWgC9yaPhUzDaaJuYGi4j5WYECN1fvyDs1ocPswMa/6dhqOQtaK0x1iT8sZzWhz5H+Ko2UU868whcZHDySsIVe6ulRTGKuE+R9psABjS+7Xb5bNfqoW98RpbFuOeu0gi/c9aVXrwnNkOyOl+SlImc69MjAwNEX5buO/qHeAwUyq5UXar37TH//sTQAnOzrc43SJ5/LfR3q0FRUb1V6AUeWZjZcd9zsKQmFgs2FL2cAHAaA9NLJPX8pUUPe6eDBZCttOVsJpc3cG/IL/39yWCQcEyK/fv7qyGyewUzJQQ88kf2MZSuiQ4fPjBq842F5kSf5VYyxxpOMeZ8rqc/krh51ULl6vRIIvPugvES/7BKNllzEaXzFa5jbkxjfFyfxgNwZ3PhHn1XPLYoaCf5Tl9X1h1xMkimaQ25LBpmNHMWSQ27hfnzwxIn8oujX4XDBL3w3aNk3bBrTXySVxBo5a0ADNOK+thA4jwKAXmg6bljGv3L5VHn26ThJLpczgxvxoPCdrwodPBJKtFotd+VygkwQAVFywAM18g1jk1WhABCA70cvvFMLLTvhFMuhXV0M/ABlLHTN4MFHCy13ciPaPOG8UBMKADrXf3XCKSota0KL7A+FXtWMtufqv1/JO5+W5y64LA9xX/k/sCK6d2Rk1iv8t0lZ1cmNPwMmvWgLBYAmRT9uiI6SnzRVNEX2jozMVoNW/Nc3fOhUrJftvueijWvfLjmoB55fqgEB4A0kVBrydGAbIQAAAABJRU5ErkJggg==

game.js

@@ -243,6 +243,8 @@ function runGameSimulation(){
 		ISTESTING=true
 		BOT_PREVX=-100
 		BOT_PREVY=-100
+		BOT_TAPE=""
+		BOT_START_TAPE=""
 		generateBotQueue()
 		//console.log(BOT_QUEUE)
 		setTimeout(()=>{
@@ -459,19 +461,19 @@ var EASYMENU={
 	title:"Beginner Stages",
 	levels:[STAGE1,STAGE2],
 	cols:1,
-	width:568*0.3
+	width:568*0.33
 }
 var MEDIUMMENU={
 	title:"Intermediate Stages",
 	levels:[STAGE1,STAGE2],
 	cols:1,
-	width:568*0.3
+	width:568*0.33
 }
 var HARDMENU={
 	title:"Advanced Stages",
 	levels:[STAGE1,STAGE2],
 	cols:1,
-	width:568*0.3
+	width:568*0.33
 }
 
 var gameGrid = []
@@ -1124,8 +1126,8 @@ function draw() {
 			}break;
 			case MAINMENU:{
 				DisplayMenu(canvas.width/2,8,TUTORIALMENU,ctx)
-				DisplayMenu((canvas.width*0.33)*0+(canvas.width*0.15)+(canvas.width*0.03),108,EASYMENU,ctx)
-				DisplayMenu((canvas.width*0.33)*1+(canvas.width*0.15)+(canvas.width*0.03),108,MEDIUMMENU,ctx)
+				DisplayMenu((canvas.width*0.33)*0+(canvas.width*0.15)+(canvas.width*0.01),108,EASYMENU,ctx)
+				DisplayMenu((canvas.width*0.33)*1+(canvas.width*0.15)+(canvas.width*0.02),108,MEDIUMMENU,ctx)
 				DisplayMenu((canvas.width*0.33)*2+(canvas.width*0.15)+(canvas.width*0.03),108,HARDMENU,ctx)
 			}break;
 			case STARTUP:{
@@ -1298,7 +1300,9 @@ function RenderGameInfo(ctx) {
 			ctx.fillText("Original Tape",canvas.width*0.75-canvas.width*0.25,20)
 			RenderTape(canvas.width*0.75-canvas.width*0.25+8,16,canvas.width*0.25-16,ctx,BOT_START_TAPE)
 		}
-		RenderTape(canvas.width*0.75+8,16,canvas.width*0.25-16,ctx,BOT_TAPE)
+		if (BOT_START_TAPE!=="") {
+			RenderTape(canvas.width*0.75+8,16,canvas.width*0.25-16,ctx,BOT_TAPE)
+		}
 		
 		
 		if (gameState===RUNNING||gameState===REVIEWING||gameState===FINISH||gameState===PAUSED) {
@@ -1668,10 +1672,10 @@ function DisplayMenu(x,y,menu,ctx) {
 	ctx.moveTo(x-menu.width/2+4,y+18)
 	ctx.lineTo(x+menu.width/2-4,y+18)
 	ctx.stroke()
-	ctx.font="16px 'Zilla Slab', serif"
-	ctx.fillStyle="white"
-	ctx.textAlign = "center"
 	for (var i=0;i<menu.levels.length;i++) {
+		ctx.font="16px 'Zilla Slab', serif"
+		ctx.fillStyle="white"
+		ctx.textAlign = "left"
 		var col = i % menu.cols
 		var row = Math.floor(i / menu.cols)
 		var colWidth = menu.width/menu.cols
@@ -1686,7 +1690,14 @@ function DisplayMenu(x,y,menu,ctx) {
 			ctx.fillRect(levelBoxBounds.x,levelBoxBounds.y,levelBoxBounds.w,levelBoxBounds.h)
 		}
 		ctx.fillStyle="white"
-		ctx.fillText(menu.levels[i].name,x+col*colWidth-((menu.cols!==1)?colWidth/2:0),y+16+24+24*row)
+		if (LevelIsBeat(menu.levels[i].name)) {
+			drawImage(x+col*colWidth+16-((menu.cols!==1)?colWidth:colWidth/2)-8,y+32+24*row,ID_COMPLETE_STAR,ctx,0,0.5)
+		}
+		ctx.fillText(menu.levels[i].name,x+col*colWidth-((menu.cols!==1)?colWidth/2:0)+20-colWidth/2,y+16+24+24*row)
+		ctx.font="12px 'Profont','Courier New', serif"
+		ctx.fillStyle="white"
+		ctx.textAlign = "center"
+		ctx.fillText(completedStages[menu.levels[i].name].score,x+col*colWidth-((menu.cols!==1)?colWidth/2:0)+colWidth/2-16,y+16+24+24*row)
 	}
 }
 

image_data.js

@@ -40,6 +40,7 @@ const [IMAGE_GEAR,ID_GEAR] = addImageUTF8("gear.svg")
 const [IMAGE_SIG,ID_SIG] = addImageUTF8("SigsWorks.svg")
 const [IMAGE_TITLE,ID_TITLE] = addImageUTF8("THE GREAT CONVERSION_old.png")
 const [IMAGE_COLORTITLE,ID_COLORTITLE] = addImageUTF8("THE GREAT CONVERSION_color.png")
+const [IMAGE_CHECKMARK,ID_CHECKMARK] = addImage("iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAACXBIWXMAAACVAAAAlQGr+O8LAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA0JJREFUSIml1l9oU1ccB/DvOTe2TSPae5ObP/1nervKiqBuDn0RfJuCID7YB58UHOxhqzLtg7S1HLD+QzGyMjaD4IsP4oOMTfBF8C9WQY2yMUS2JFubOJObpHFtbU3OPT5o60lMu+R6337f7+98uIeEEIKPeAbZt9tiiP/wmhb5XNZhBU3Hx6ApZHY+cERa52YqCAII/EztgoyxhizNrpOzZrTkfUsC52yjr0hqV5REPylBeeC3gYGjv9tGTWFunSLTZG6mgkCDeh8AbKGnGdNSNLVWztpEW94HNWwbHbfGe2M03iZnfuF/3M9OP7ON5pTcpgIK8zMFhSrU0fdzjQ9j3xkJmiy5ervVnvMUtbBtNI/8vjGMqXIWgC9yaPhUzDaaJuYGi4j5WYECN1fvyDs1ocPswMa/6dhqOQtaK0x1iT8sZzWhz5H+Ko2UU868whcZHDySsIVe6ulRTGKuE+R9psABjS+7Xb5bNfqoW98RpbFuOeu0gi/c9aVXrwnNkOyOl+SlImc69MjAwNEX5buO/qHeAwUyq5UXar37TH//sTQAnOzrc43SJ5/LfR3q0FRUb1V6AUeWZjZcd9zsKQmFgs2FL2cAHAaA9NLJPX8pUUPe6eDBZCttOVsJpc3cG/IL/39yWCQcEyK/fv7qyGyewUzJQQ88kf2MZSuiQ4fPjBq842F5kSf5VYyxxpOMeZ8rqc/krh51ULl6vRIIvPugvES/7BKNllzEaXzFa5jbkxjfFyfxgNwZ3PhHn1XPLYoaCf5Tl9X1h1xMkimaQ25LBpmNHMWSQ27hfnzwxIn8oujX4XDBL3w3aNk3bBrTXySVxBo5a0ADNOK+thA4jwKAXmg6bljGv3L5VHn26ThJLpczgxvxoPCdrwodPBJKtFotd+VygkwQAVFywAM18g1jk1WhABCA70cvvFMLLTvhFMuhXV0M/ABlLHTN4MFHCy13ciPaPOG8UBMKADrXf3XCKSota0KL7A+FXtWMtufqv1/JO5+W5y64LA9xX/k/sCK6d2Rk1iv8t0lZ1cmNPwMmvWgLBYAmRT9uiI6SnzRVNEX2jozMVoNW/Nc3fOhUrJftvueijWvfLjmoB55fqgEB4A0kVBrydGAbIQAAAABJRU5ErkJggg==")
 
 function addImage(base64){
 	var newImage = new Image()

index.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&display=swap');
+@font-face {
+	font-family: 'Zilla Slab';
+	src: url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&display=swap')
+}
+@font-face {
+	font-family: 'Profont';
+	src: url('ProFontWindows.ttf')  format('truetype');
+}

index.html

@@ -1,7 +1,7 @@
 <head>
+	<link rel="stylesheet" href="index.css">
 </head>
-<body style="@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&display=swap');
-background-color:gray;cursor:url('cursor.png') 8 8,auto;">
+<body style="background-color:gray;cursor:url('cursor.png') 8 8,auto;">
 	<center>
 		<div id="game" style="width:100%"></div>
 	</center>