Myriad of bug fixes

base64/audioToggle.png.64

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAABwAAAAgCAYAAAABtRhCAAAACXBIWXMAAAC2AAAAtgGUae/yAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAY1JREFUSInt1sFLFVEUx/HPm1faIiQQDd1oQZCURBBIJCphtWvhn9CqhWv/BldCtNaVKC2C1pGi4qalO5EIxCwKTCPQIsgW80J9zry59z3dvR+cxdx7fvM9cxjuuSXnr248wChGS+cAuI7BCuQJeo5vNgpMcBvDGKpEZy1DLLCMm45a9BDtMS8oAl7EPUfVD6ItssgoLeAwMrYxh+fow+7x/QsFwHJAUZtYrsQKPtRKLgJm6QtW8a4SH2PMscAR6ZfUrSQyf68RWD3AhtUENoFN4CnVc7TVUoKneCQdW5+qGWcJvIbXuFsrqRrYJh2q3fgunYchasciekOrK2ECP52cbX+rnu/k+F8In5fgZWByFrCMnRjg44jkLGBPhP8wwXhOm0IVcxHbT3A/wnAlY20bPwL9awkuRwAvZaz9watA/yysC+v/rxwgdOFzgf89WmAyEPimoPpb2MjxLqHjf2IHvhbADtBfAIRWPMM83mJaetSd+rEG8C0Hto+xAFi0rmJKepH9jS3M4MZZQv4BGHWmb7A+bDcAAAAASUVORK5CYII=

base64/infoButton.png.64

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAFuAAABbgGEUF8kAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAxlJREFUWIXFlktPE1EUx8/ceXUe7dDSB52+LNCCPDUlcVFMjDElUhISEgSXiJAYF0riQhcklY0Gg8QEFqKfwY3ErYitn0B0QyGoGBJoARspTFuuCwIJiDAz1PSfnM3cOef/u4/cewhQKdeju+W/ZxMd2ytrYbytnMc7OQ9QZBkAAOQLGwRLfycMzFeD0xYXr12Z/hEbT6utfaIcPZEGvtr7ipLEDQDAaoKSxHU+6JuquNlWr9u46dkDQWisHkMcu6XW+Gggjt0SmgKjcmyQ12Tu7O/yGTwVH/UaHw3aZv5U1n7Vp8rc2h5uoS3SQrHMDyAsUtIabQ2daC73Rjy02ZQstvl+MHbzkuNWtPJ489ggz8r2WbXFCILAQ0NDeHh4GLMsqxqCle0fjj0TQmP1mJbZRCIRvK+BgQFNKyE2B0YOmTt6Ig1aT3tVVRXOZDJYURQcDoc1AZBGIS33dXoOAPig77XW/QQAbLPZsMvl0nUe+Br/JAAAuGP9FtIkqL5kihWkSUh7n9wxkyiHb2Tnv/eCDjEMAzRNQz6f15yLd3IcUnY/o+2VtbAecwCARCIByWQSKIrSlZ/9uRpGOKvU6QWorKwEWZZBEARd+Ti7U4dwoeDVC3BW4ULBh/AuNpYMYBebUKnM94UIRGRKZU4g4hciSPJbyQBIcgkRHDNXKgBSMHxBBqctUSoA1mmNI1O07S0lGYvTQGoQJYnrxuuX3gEAAB/0TYGO+zyVSmGMMZYkSftjVOufAABAAACmUO0LxLHZ/z/vPZFGIW1uvfj00EehKTCqZQZwhhUQm4OP/6IKvYzxXJX7vZZC8XgcLy4uYpIkVeewLsfMP9t0ebDbyzgsmppShJDqfxm7eV6+133y22ONtoZoi1T0zpi2ls2f2pYfQHRddtKOck3bcVIYfM6ZQz2gGsmxQV5sDoyQRiGt15g0CSnxQjDmfj7EaTI/BNLX6eFr/JOUJKoGoSRjiq/1T7hud7lPq0+oBTk3fr9s881sR3Z5NQy5XP2uorgBCMveKE4hhlkGmp7j3La4ub1leuHh1Kaaun8AWRZKPieBmw8AAAAASUVORK5CYII=

base64/noaudio.png.64

@@ -0,0 +1 @@
+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

game.js

@@ -91,6 +91,10 @@ const PAUSED = 5;
 const MAINMENU = 6;
 const TITLE = 7;
 const STARTUP = 8;
+const INFO = 9;
+
+const NORMAL_TEST = 0;
+const EVEN_LENGTH_TEST = 1; //Only generate even length tapes.
 
 var ISTESTING = false;
 var MOUSEOVERTIME = -1
@@ -131,6 +135,7 @@ var BOT_DID_NOT_REACH_EXIT = false
 var TOOLTIPDISPLAYED = undefined
 var MOVEMODE = false
 var STARTDRAG = undefined
+var TEST_RANDOM_TAPE = ""
 
 var MESSAGETIMER = -1
 var EXPECTED = true //True means the bot was supposed to accepted, false means the bot was supposed to be rejected.
@@ -219,11 +224,31 @@ var RESET_BUTTON = {img:ID_RESET,x:-1,y:-1,w:-1,h:-1,cb:resetSimulation,tooltip:
 }
 var DELETE_BUTTON = {img:ID_DELETE,x:-1,y:-1,w:-1,h:-1,cb:toggleDeleteMode,tooltip:"Remove a piece on the field."
 }
-var HOME_BUTTON = {img:ID_HOME,x:-1,y:-1,w:-1,h:-1,cb:goHome,tooltip:"Go back to the level selection menu."
+var HOME_BUTTON = {img:ID_HOME,x:-1,y:-1,w:-1,h:-1,cb:goHome,tooltip:"Go back to the level selection menu.\n\nYour progress will be saved automatically."
 }
 var MOVE_BUTTON = {img:ID_MOVE_BUTTON,x:2,y:2,w:32,h:32,cb:toggleMoveMode,tooltip:"Scroll the view area."
 }
 
+var AUDIO_BUTTON = {
+	bounds:{x:4,y:4,w:40,h:40},
+	cb:()=>{
+		currentSound.muted=!currentSound.muted
+	}
+}
+var INFO_BUTTON = {
+	bounds:{x:4,y:44,w:40,h:40},
+	cb:()=>{
+		gameState=INFO
+	}
+}
+var INFO_HOME_BUTTON = {
+	bounds:{x:4,y:4,w:40,h:40},
+	cb:()=>{
+		goHome()
+	}
+}
+
+
 var MENU = {
 	visible:false,
 	buttons:[CONVEYOR_BUILD_BUTTON,BRANCH_BUILD_BUTTON,WRITER_BUILD_BUTTON,ROTATE_COUNTERCLOCKWISE_BUTTON,ROTATE_CLOCKWISE_BUTTON,DELETE_BUTTON,PLAY_BUTTON,RESET_BUTTON,HOME_BUTTON]
@@ -271,11 +296,7 @@ function runGameSimulation(){
 			if (BOT_QUEUE.length>0) {
 				BOT_TAPE=BOT_QUEUE[0]
 			} else {
-				BOT_TAPE=ConvertNumberToTape(Math.floor(Math.random()*1000))
+				BOT_TAPE=TEST_RANDOM_TAPE
-				if (Math.random()<0.5) {
-					BOT_TAPE=BOT_TAPE.split("").reverse().join("")
-				}
-				EXPECTED=gameStage.accept(BOT_TAPE)
 			}
 			BOT_START_TAPE=BOT_TAPE
 			BOT_X=gameStage.start.x
@@ -424,8 +445,8 @@ var STAGE2 = {
 var STAGE3 = {
 	name:"Balance",
 	objective:"Accept bots with the same number of red and blue.",
-	level:createGrid(15,15,14,7),
+	level:createGrid(15,15,14,14),
-	start:{x:0,y:7},
+	start:{x:0,y:0},
 	accept:(tape)=>{
 			var reds=0;
 			var blues=0;
@@ -567,10 +588,12 @@ function resetGame() {
 	BOT_QUEUE=[]
 	lastGameUpdate=0
 	completedStages={}
+	MENU.visible=false
 }
 
-function decideIfWrongBot(wrongBot,isSupposedToBeAccepted,tape) {
+function decideIfWrongBot(isSupposedToBeAccepted,tape) {
 	var result;
+	var wrongBot=false;
 	switch (typeof(isSupposedToBeAccepted)) {
 		case "string":{
 			if (getSimulatedBotResult(tape)) {
@@ -605,7 +628,7 @@ function decideIfWrongBot(wrongBot,isSupposedToBeAccepted,tape) {
 	}
 }
 
-function generateBotQueue() {
+function generateBotQueue(generator=NORMAL_TEST) {
 	BOT_QUEUE=[]
 	RESULT=true
 	TESTSTEPS=0
@@ -614,17 +637,29 @@ function generateBotQueue() {
 		//Iterate up to...15 RED/BLUE combinations.
 		var MAX_VALUE=1000
 		var startingValue=0
-		while (startingValue<MAX_VALUE) {
+		var tests = []
-			var tape=ConvertNumberToTape(startingValue++)
+		switch (generator) {
-			//console.log(tape)
+			case EVEN_LENGTH_TEST:{
-			var wrongBot=false //Set to true if a bot that's supposed to pass fails, or a bot that's supposed to fail passes.
+				while (tests.length<2000) {
-			var isSupposedToBeAccepted=gameStage.accept(tape)
+					var newTape = ConvertNumberToTape(startingValue++)
-			decideIfWrongBot(wrongBot,isSupposedToBeAccepted,tape)
+					if (newTape.length%2===0) {
-			var reversedTape=tape.split("").reverse().join("")
+						tests.push(newTape)
-			//console.log(tape)
+						tests.push(newTape.split("").reverse().join(""))
-			var wrongBot=false //Set to true if a bot that's supposed to pass fails, or a bot that's supposed to fail passes.
+					}
-			var isSupposedToBeAccepted=gameStage.accept(reversedTape)
+				}
-			decideIfWrongBot(wrongBot,isSupposedToBeAccepted,reversedTape)
+			}
+			default:{
+				for (var i=0;i<MAX_VALUE;i++) {
+					tests.push(ConvertNumberToTape(startingValue++))
+					tests.push(ConvertNumberToTape(startingValue).split("").reverse().join(""))
+				}
+			}
+		}
+		TEST_RANDOM_TAPE = tests[Math.floor(Math.random()*tests.length)]
+		for (var i=0;i<tests.length;i++) {
+			 //Set to true if a bot that's supposed to pass fails, or a bot that's supposed to fail passes.
+			var isSupposedToBeAccepted=gameStage.accept(tests[i])
+			decideIfWrongBot(isSupposedToBeAccepted,tests[i])
 			if (BOT_QUEUE.length>=3) {
 				break;
 			}
@@ -640,7 +675,7 @@ function generateBotQueue() {
 function getSimulatedBotResult(tape) {
 	var simulatedBoard = deepCopy(gameGrid)
 	resetBot(gameStage.start.x,gameStage.start.y,TESTING,tape)
-	const MAX_ITERATIONS=10000
+	const MAX_ITERATIONS=2000
 	var iterations=0
 	while (iterations<MAX_ITERATIONS) {
 		runBot(true)
@@ -655,6 +690,11 @@ function getSimulatedBotResult(tape) {
 		}
 		iterations++
 	}
+	if (BOT_QUEUE.length===0) {
+		BOT_DID_NOT_REACH_EXIT=true
+		RESULT=false
+		BOT_QUEUE.push(tape)
+	}
 	if (iterations===MAX_ITERATIONS) {
 		TESTSTEPS=-1
 	}
@@ -788,6 +828,7 @@ function setupGame() {
 	canvas = document.createElement("canvas");
 	canvas.width=568
 	canvas.height=320
+	canvas.style.height="100%"
 	document.getElementById("game").appendChild(canvas)
 	canvas.addEventListener("mousemove",updateMouse)
 	canvas.addEventListener("mousedown",clickEvent)
@@ -892,6 +933,13 @@ function clickEvent(e) {
 			gameState=MAINMENU
 		}
 	}
+	if (gameState===MAINMENU) {
+		if (MouseOverBounds(AUDIO_BUTTON.bounds)) {AUDIO_BUTTON.cb();return;}
+		if (MouseOverBounds(INFO_BUTTON.bounds)) {INFO_BUTTON.cb();return;}
+	}
+	if (gameState===INFO) {
+		if (MouseOverBounds(INFO_HOME_BUTTON.bounds)) {INFO_HOME_BUTTON.cb();return;}
+	}
 	
 	if (MENU.visible) {
 		for (var button of MENU.buttons) {
@@ -951,9 +999,13 @@ function clickEvent(e) {
 		setMoveMode(true)
 	}
 	
-	if (!MOBILE&&gridModeIsAvailable()&&e.button!==0) {
+	if (!MOBILE&&e.button!==0) {
-		setMoveMode(true)
 		e.preventDefault()
+		if (gridModeIsAvailable()) {
+			setMoveMode(true)
+		} else {
+			setMoveMode(false)
+		}
 	}
 	
 	if (MOVEMODE) {
@@ -1000,7 +1052,9 @@ function deleteObject(coords,def) {
 }
 function placeObject(coords,def) {
 	if (notAForbiddenObject(coords)) {
-		if (gameGrid[coords.y][coords.x].direction!==undefined&&gameGrid[coords.y][coords.x].type&&gameGrid[coords.y][coords.x].type==="BELT"&&BRIDGEDBELT) {
+		if (gameGrid[coords.y][coords.x].direction!==undefined&&gameGrid[coords.y][coords.x].type&&gameGrid[coords.y][coords.x].type==="BELT"
+		&&(gameGrid[coords.y][coords.x].direction===getClockwiseDirection(ITEM_DIRECTION)||gameGrid[coords.y][coords.x].direction===getCounterClockwiseDirection(ITEM_DIRECTION))
+		&&BRIDGEDBELT) {
 			gameGrid[coords.y][coords.x]={...gameGrid[coords.y][coords.x],direction2:ITEM_DIRECTION}
 		} else {
 			var newObj={...def,direction:ITEM_DIRECTION}
@@ -1029,9 +1083,11 @@ function releaseEvent(e) {
 	if (gridModeIsAvailable()&&ITEM_SELECTED===undefined) {
 		setMoveMode(false)
 	}
-	if (!MOBILE&&gridModeIsAvailable()&&e.button!==0) {
+	if (!MOBILE&&e.button!==0) {
-		setMoveMode(false)
 		e.preventDefault()
+		if (gridModeIsAvailable()) {
+			setMoveMode(false)
+		}
 	}
 	
 	if (MOVEMODE) {
@@ -1124,15 +1180,17 @@ function updateMouse(e) {
 
 function getMousePos(e) {
 	var rect = canvas.getBoundingClientRect();
+	var scale = canvas.height/canvas.clientHeight
+	//console.log(scale)
 	if (e.changedTouches) {
 		return {
-		  x: e.changedTouches[0].clientX - rect.left,
+		  x: (e.changedTouches[0].clientX - rect.left) * scale,
-		  y: e.changedTouches[0].clientY - rect.top
+		  y: (e.changedTouches[0].clientY - rect.top) * scale
 		};
 	} else {
 		return {
-		  x: e.clientX - rect.left,
+		  x: (e.clientX - rect.left) * scale,
-		  y: e.clientY - rect.top
+		  y: (e.clientY - rect.top) * scale
 		};
 	}
 }
@@ -1263,11 +1321,32 @@ function draw() {
 				SCENE_DRAW(ctx)
 			}break;
 			case MAINMENU:{
+				ctx.fillStyle="rgb(180,180,180)"
+				ctx.strokeStyle="black"
+				ctx.beginPath()
+					ctx.ellipse(24,24,20,20,0,0,2*Math.PI)
+				ctx.fill()
+				ctx.stroke()
+				ctx.beginPath()
+					ctx.ellipse(24,64,20,20,0,0,2*Math.PI)
+				ctx.fill()
+				ctx.stroke()
+				ctx.drawImage((currentSound.muted)?IMAGE_NOAUDIO_BUTTON:IMAGE_AUDIO_BUTTON,8,8)
+				ctx.drawImage(IMAGE_INFO_BUTTON,8,48)
 				DisplayMenu(canvas.width/2,8,TUTORIALMENU,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 INFO:{
+				ctx.fillStyle="rgb(180,180,180)"
+				ctx.strokeStyle="black"
+				ctx.beginPath()
+					ctx.ellipse(24,24,20,20,0,0,2*Math.PI)
+				ctx.fill()
+				ctx.stroke()
+				ctx.drawImage(IMAGE_DATA[ID_HOME],12,8)
+			}break;
 			case STARTUP:{
 				ctx.fillStyle="black"
 				ctx.fillRect(0,0,canvas.width,canvas.height)

image_data.js

@@ -42,6 +42,9 @@ 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==")
 const [IMAGE_MOVE_BUTTON,ID_MOVE_BUTTON] = addImage("iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADpAAAA6QFUkhRLAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA9VJREFUWIXtV1toXEUY/mbOye7Mf/berMZIGkxtSsWKNY0ltSWKl4iYh7ZQCgGLFCmSFxGkDxGkYgUrCBW1qNQnQbF46Wq0FiKBgLWNISnEXgJqTDSxqdk0u+nZs3vO7PiSxO2aPOxum6d8MC//zHeZ4fxzGAMVgIg6OeezSqnpSnTKgpRyLRGliej0ipsDABEliEgTkZZS7l1Rcynl3gXz+TEZiUQi5WgZpRKi0WhYKZUAECwoB5RSluu635Wqx0slZLPZ3QAumLHwoBkLa9q0/hpj7ARjLB4KhWKl6pWNlksnn6zd+Zh776dvDFaiU/IJ3GysBig7QN7zGsAYZ4yvqSQAK5Vwf++Hj3MhG5G63uWM/nWHWR3NG5HAYUNKv64PHxqobbcrDWAIIbY5jtNXPNHUe/yR7N/TX+VGJwIz3X0cngIA8GhQxzuegq+2eogF81sHthxwi7lEtNm27f91DC9a9AARneGcv7RUWm6J9c7IaGC25xz3rs5A3nMXuCXh/jnFJt/+hKlM7u5gU6NeZrOHLcvqDQaDGwqLJgBEIpGI67qHtNadAAwekD3NQ581FC7MX7c3upNTXalTP3GVmkP9my9AOVnwKhPOpT+Q7O7D7Ld9Pn9N9TvNI98cKXa/uG2fzNuZVqXUIBEdsW37dQA507Ksjlwu9xaA2xZTxSI7pt8/cfYGBcOwRGOd1DqPcFsLwAAzHAQYULW2Bmr6GuxffvOnfx5+Lnt5bHdxAHNNOJSzMwAgAbxCRDu11gdMrfUFAGOFAQzhc8WG+plCAWYYnAu/AMDy2SyQB/JpG3nPgxmywEgCWsMXj2kGdgMXAIwf+iUAX0GphnO+buEjNKWUnYyx1wAEAHTbtv10scjmU+99Pv7ysV1520HtwWfApB8GSSS/6IHz+wTCDzcno3sebTm3cddIMZeIEgDaAWit9cemab6YTqf/MefnvUwmc1QIkeCcH8My7WmEAnPx/e366vEEm/roJJTtQOc8mLEQdM5FoGUTkYiOLcWdx3mt9fOZTObM4skutWq5lmm6/HW1Hp/oV7Nzt1/54EvhzaSYVh7CrVvmwm0tVVyIgwOtzx5dSlMIscNxnB8BqMJ6yRfRfee/t6pcbnL3yul0//CDouFO5a+Lb/cC/OLAuj2zpeqVjdXf8WqAm4WSu4CI9jPG2qpq4jXac7cbocCc8+v4WQCOEKIjmUymbkHO/yClrJt/Eemi0VWOXsnvAs/zUj6fzwXwREF52LbtfSi6ZG4lTCIamt+5klI+tFLGi5BSbiUiRUTvrrj5Aojo1Wg0Gq5E41+gImj+YjLC1wAAAABJRU5ErkJggg==")
+const [IMAGE_AUDIO_BUTTON,ID_AUDIO_BUTTON] = addImage("iVBORw0KGgoAAAANSUhEUgAAABwAAAAgCAYAAAABtRhCAAAACXBIWXMAAAC2AAAAtgGUae/yAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAY1JREFUSInt1sFLFVEUx/HPm1faIiQQDd1oQZCURBBIJCphtWvhn9CqhWv/BldCtNaVKC2C1pGi4qalO5EIxCwKTCPQIsgW80J9zry59z3dvR+cxdx7fvM9cxjuuSXnr248wChGS+cAuI7BCuQJeo5vNgpMcBvDGKpEZy1DLLCMm45a9BDtMS8oAl7EPUfVD6ItssgoLeAwMrYxh+fow+7x/QsFwHJAUZtYrsQKPtRKLgJm6QtW8a4SH2PMscAR6ZfUrSQyf68RWD3AhtUENoFN4CnVc7TVUoKneCQdW5+qGWcJvIbXuFsrqRrYJh2q3fgunYchasciekOrK2ECP52cbX+rnu/k+F8In5fgZWByFrCMnRjg44jkLGBPhP8wwXhOm0IVcxHbT3A/wnAlY20bPwL9awkuRwAvZaz9watA/yysC+v/rxwgdOFzgf89WmAyEPimoPpb2MjxLqHjf2IHvhbADtBfAIRWPMM83mJaetSd+rEG8C0Hto+xAFi0rmJKepH9jS3M4MZZQv4BGHWmb7A+bDcAAAAASUVORK5CYII=")
+const [IMAGE_NOAUDIO_BUTTON,ID_NOAUDIO_BUTTON] = addImage("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")
+const [IMAGE_INFO_BUTTON,ID_INFO_BUTTON] = addImage("iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAFuAAABbgGEUF8kAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAxlJREFUWIXFlktPE1EUx8/ceXUe7dDSB52+LNCCPDUlcVFMjDElUhISEgSXiJAYF0riQhcklY0Gg8QEFqKfwY3ErYitn0B0QyGoGBJoARspTFuuCwIJiDAz1PSfnM3cOef/u4/cewhQKdeju+W/ZxMd2ytrYbytnMc7OQ9QZBkAAOQLGwRLfycMzFeD0xYXr12Z/hEbT6utfaIcPZEGvtr7ipLEDQDAaoKSxHU+6JuquNlWr9u46dkDQWisHkMcu6XW+Gggjt0SmgKjcmyQ12Tu7O/yGTwVH/UaHw3aZv5U1n7Vp8rc2h5uoS3SQrHMDyAsUtIabQ2daC73Rjy02ZQstvl+MHbzkuNWtPJ489ggz8r2WbXFCILAQ0NDeHh4GLMsqxqCle0fjj0TQmP1mJbZRCIRvK+BgQFNKyE2B0YOmTt6Ig1aT3tVVRXOZDJYURQcDoc1AZBGIS33dXoOAPig77XW/QQAbLPZsMvl0nUe+Br/JAAAuGP9FtIkqL5kihWkSUh7n9wxkyiHb2Tnv/eCDjEMAzRNQz6f15yLd3IcUnY/o+2VtbAecwCARCIByWQSKIrSlZ/9uRpGOKvU6QWorKwEWZZBEARd+Ti7U4dwoeDVC3BW4ULBh/AuNpYMYBebUKnM94UIRGRKZU4g4hciSPJbyQBIcgkRHDNXKgBSMHxBBqctUSoA1mmNI1O07S0lGYvTQGoQJYnrxuuX3gEAAB/0TYGO+zyVSmGMMZYkSftjVOufAABAAACmUO0LxLHZ/z/vPZFGIW1uvfj00EehKTCqZQZwhhUQm4OP/6IKvYzxXJX7vZZC8XgcLy4uYpIkVeewLsfMP9t0ebDbyzgsmppShJDqfxm7eV6+133y22ONtoZoi1T0zpi2ls2f2pYfQHRddtKOck3bcVIYfM6ZQz2gGsmxQV5sDoyQRiGt15g0CSnxQjDmfj7EaTI/BNLX6eFr/JOUJKoGoSRjiq/1T7hud7lPq0+oBTk3fr9s881sR3Z5NQy5XP2uorgBCMveKE4hhlkGmp7j3La4ub1leuHh1Kaaun8AWRZKPieBmw8AAAAASUVORK5CYII=")
 
 function addImage(base64){
 	var newImage = new Image()

index.html

@@ -3,7 +3,7 @@
 </head>
 <body style="background-color:gray;cursor:url('cursor.png') 8 8,auto;">
 	<center>
-		<div id="game" style="width:100%"></div>
+		<div id="game" style="width:100%;overflow:hidden;"></div>
 	</center>
 	<script type="text/javascript" src="game.test.js"></script>
 </body>