Implement dragging grid controls

base64/move.png.64

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

game.js

@@ -128,6 +128,9 @@ var LAST_MOUSE_Y=0;
 var DRAG_X = -1
 var DRAG_Y = -1
 var BOT_DID_NOT_REACH_EXIT = false
+var TOOLTIPDISPLAYED = undefined
+var MOVEMODE = false
+var STARTDRAG = undefined
 
 var MESSAGETIMER = -1
 var EXPECTED = true //True means the bot was supposed to accepted, false means the bot was supposed to be rejected.
@@ -218,12 +221,18 @@ var DELETE_BUTTON = {img:ID_DELETE,x:-1,y:-1,w:-1,h:-1,cb:toggleDeleteMode,toolt
 }
 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 MOVE_BUTTON = {img:ID_MOVE_BUTTON,x:2,y:2,w:32,h:32,cb:toggleMoveMode,tooltip:"Scroll the view area."
+}
 
 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]
 }
 
+function toggleMoveMode() {
+	setMoveMode(!MOVEMODE)
+}
+
 function saveLevelData() {
 	completedStages[gameStage.name].data=deepCopy(gameGrid)
 	localStorage.setItem("game",JSON.stringify(completedStages))
@@ -233,12 +242,16 @@ function goHome() {
 	saveLevelData()
 	MENU.visible=false
 	BRIDGEDBELT=false
+	setMoveMode(false)
+	GRID_X=20
+	GRID_Y=20
 	ITEM_SELECTED=undefined
 	for (var button of MENU.buttons) {
 		if (button.submenu_buttons) {
 			button.lastselected=button.default
 		}
 	}
+	gameGrid=[]
 	gameState=MAINMENU
 }
 
@@ -406,6 +419,27 @@ var STAGE2 = {
 			return true;
 		}
 	}
+var STAGE3 = {
+	name:"Balance",
+	objective:"Accept bots with the same number of red and blue.",
+	level:createGrid(15,15,14,7),
+	start:{x:0,y:7},
+	accept:(tape)=>{
+			var reds=0;
+			var blues=0;
+			for (var i=0;i<tape.length;i++) {
+				switch (tape[i]) {
+					case RED:{
+						reds++;
+					}break;
+					case BLUE:{
+						blues++;
+					}break;
+				}
+			}
+			return blues===reds;
+		}
+	}
 var TUTORIAL1 = {
 	name:"Conveyors!",
 	objective:"To convert your robots, you must send them from the entrance to the exit. Select a belt and send robots to where they truly belong.",
@@ -470,7 +504,7 @@ var EASYMENU={
 }
 var MEDIUMMENU={
 	title:"Intermediate Stages",
-	levels:[STAGE1,STAGE2],
+	levels:[STAGE3,STAGE2],
 	cols:1,
 	width:568*0.33
 }
@@ -819,6 +853,19 @@ function mouseOverButton(canvas,e,button) {
 			getMousePos(e).y<=button.y+button.h)
 }
 
+function setMoveMode(mode) {
+	MOVEMODE=mode
+	if (MOVEMODE) {
+		document.body.style.cursor="move"
+	} else {
+		if (DELETEMODE) {
+			document.body.style.cursor="url('delete_cursor.png') 8 8,auto"
+		} else {
+			document.body.style.cursor="url('cursor.png') 8 8,auto"
+		}
+	}
+}
+
 function clickEvent(e) {
 	//console.log(MENU.buttons)
 	if (e instanceof TouchEvent) {
@@ -830,6 +877,7 @@ function clickEvent(e) {
 	var mousepos = getMousePos(e)
 	LAST_MOUSE_X=mousepos.x
 	LAST_MOUSE_Y=mousepos.y
+	MOUSEOVERTIME=-1
 	
 	MOUSEDOWN=true
 	
@@ -876,17 +924,39 @@ function clickEvent(e) {
 								index++;
 							}
 						}
-						ITEM_SELECTED=button.lastselected
+						if (ITEM_SELECTED===button.lastselected&&!MOVEMODE) {
+							if (!MOBILE) {
+								ITEM_SELECTED=undefined
+							}
+						} else {
+							ITEM_SELECTED=button.lastselected
+						}
 						//console.log(button)
+						setMoveMode(false)
 						return
 					}
 				}
 			}
 		}
+		
+		if (mouseOverButton(canvas,e,MOVE_BUTTON)&&!DELETEMODE) {
+			MOVE_BUTTON.cb()
+			return
+		}
+	}
+	
+	if (gridModeIsAvailable()&&ITEM_SELECTED===undefined) {
+		setMoveMode(true)
+	}
+	
+	if (MOVEMODE) {
+		//Cannot handle building until out of move mode.
+		STARTDRAG=getMousePos(e)
+		return;
 	}
 	
 	//console.log(getGridCoords(getMousePos(e)))
-	if (ITEM_SELECTED!==undefined||DELETEMODE) {
+	if ((ITEM_SELECTED!==undefined||DELETEMODE)&&!MOVEMODE) {
 		var clickCoords = getGridCoords(getMousePos(e))
 		if (coordsInBounds(clickCoords)) {
 			modifyBoard(clickCoords,ITEM_SELECTED)
@@ -944,6 +1014,15 @@ function releaseEvent(e) {
 	if (e instanceof TouchEvent) {
 		e.preventDefault()
 	}
+	
+	if (gridModeIsAvailable()&&ITEM_SELECTED===undefined) {
+		setMoveMode(false)
+	}
+	
+	if (MOVEMODE) {
+		STARTDRAG=undefined
+	}
+	
 	var mousepos = getMousePos(e)
 	LAST_MOUSE_X=mousepos.x
 	LAST_MOUSE_Y=mousepos.y
@@ -1010,6 +1089,12 @@ function updateMouse(e) {
 	LAST_MOUSE_X=mousepos.x
 	LAST_MOUSE_Y=mousepos.y
 	
+	if (MOVEMODE&&STARTDRAG!==undefined) {
+		GRID_X+=mousepos.x-STARTDRAG.x
+		GRID_Y+=mousepos.y-STARTDRAG.y
+		STARTDRAG=mousepos
+	}
+	
 	if (DRAGGING) {
 		var clickCoords = getGridCoords(getMousePos(e))
 		if (coordsInBounds(clickCoords)) {
@@ -1757,10 +1842,12 @@ function DisplayMenu(x,y,menu,ctx) {
 			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"
+		if (LevelIsBeat(menu.levels[i].name)) {
-		ctx.fillStyle="white"
+			ctx.font="12px 'Profont','Courier New', serif"
-		ctx.textAlign = "center"
+			ctx.fillStyle="white"
-		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)
+			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)
+		}
 	}
 }
 
@@ -1914,7 +2001,7 @@ function RenderMenu(ctx) {
 					if (MOUSEOVERTIME===-1) {
 						MOUSEOVERTIME=new Date().getTime()
 					} else 
-					if (new Date().getTime()-MOUSEOVERTIME>=500) {
+					if (MOBILE&&new Date().getTime()-MOUSEOVERTIME>=4000 || !MOBILE&&new Date().getTime()-MOUSEOVERTIME>=1000) {
 						mouseOverButton = button
 					}
 				}
@@ -1932,9 +2019,17 @@ function RenderMenu(ctx) {
 		if (!mousedOver) {
 			MOUSEOVERTIME=-1
 		}
+		
+		if (gridModeIsAvailable()) {
+			AddButton(MOVE_BUTTON.img,MOVE_BUTTON.x,MOVE_BUTTON.y,ctx,MOVE_BUTTON,MOVE_BUTTON.cb)
+		}
 	}
 }
 
+function gridModeIsAvailable() {
+	return (gameGrid.length>5||(gameGrid.length>0&&gameGrid[0].length>5))&&!DELETEMODE
+}
+
 function AddButton(img,x,y,ctx,button,dir=0) {
 	ctx.fillStyle="#b5b5b5"
 	ctx.fillRect(x,y,32,32)

image_data.js

@@ -41,6 +41,7 @@ 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==")
+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==")
 
 function addImage(base64){
 	var newImage = new Image()