Buttons, Constraints, Locations

Added toggle buttons, added constraint data, redefined locations into a grid format.

index.html

@@ -41,5 +41,13 @@
 			<img src="images/06.png">
 		</div>
 	</div>
+	<div class="interface">
+		<table style="width:100%;height:20px;border-spacing:0px;position:absolute;z-index:-2;"><tr><td style="width:1px;background-color:rgba(255, 255, 255, 1);"></td><td style="width:1px;background-color:rgba(255, 200, 150, 1)"></td><td style="width:1px;background-color:rgba(255, 125, 50, 1);"> </td><td style="width:1px;background-color:rgba(255, 0, 0, 1);"> </td></tr></table><b>Obtainable Difficulty</b>
+		<table style="table-layout:fixed;"><tr>
+		<td><img onclick="activateItem(this)" src="./images/buttons/carrot_bomb.png" id="CarrotBomb" class="off"></td><td><img onclick="activateItem(this)" src="./images/buttons/piko_hammer.png" id="PikoHammer" class="off"></td><td><img onclick="activateItem(this)" src="./images/buttons/sliding_powder.png" id="SlidingPowder" class="off"></td><td><img onclick="activateItem(this)" src="./images/buttons/rabi_slippers.png" id="RabiSlippers" class="off"></td></tr><tr>
+		<td><img  onclick="activateItem(this)" src="./images/buttons/carrot_shooter.png" id="CarrotShooter" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/bunny_whirl.png" id="BunnyWhirl" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/bunny_amulet.png" id="BunnyAmulet" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/wall_jump.png" id="WallJump" class="off"></td></tr><tr>
+		<td><img  onclick="activateItem(this)" src="./images/buttons/bunny_strike.png" id="BunnyStrike" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/air_dash.png" id="AirDash" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/hammer_roll.png" id="HammerRoll" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/fire_orb.png" id="FireOrb" class="off"></td></tr><tr>
+		<td><img  onclick="activateItem(this)" src="./images/buttons/light_orb.png" id="LightOrb" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/water_orb.png" id="WaterOrb" class="off"></td><td><img  onclick="activateItem(this)" src="./images/buttons/air_jump.png" id="AirJump" class="off"></td></tr>
+	</div>
 </body>
 </html>

scripts/main.js

@@ -13,7 +13,8 @@ var lastClick;
 
 function justLoaded(){
 	hideAll();
-	drawMarkers();
+	UpdateConstraints();
+	//drawMarkers();
 	showSection(0);
 }
 
@@ -101,11 +102,27 @@ function info(){
 	}
 }
 
-function Location(x, y){
-	this.x = x;
-	this.y = y;
+class Location{
+	difficulty=DifficultyLevel.BEGINNER;
+	constructor(x, y, gridObj, itemName) {
+		this.x = x*gridObj.xgrid+gridObj.xoffset;
+		this.y = y*gridObj.ygrid+gridObj.yoffset;
 		this.canReach = false;
 		this.elem = "";
+		this.itemName = itemName;
+		this.gridObj = gridObj;
+		constraints[itemName]=NONE;
+	}
+}
+
+class GridlineObj{
+	constructor(xoffset,yoffset,xgrid,ygrid) {
+		this.xoffset=xoffset;
+		this.yoffset=yoffset;
+		this.xgrid=xgrid;
+		this.ygrid=ygrid;
+	}
+	
 }
 
 function toggleItem(e){

style.css

@@ -26,8 +26,8 @@ button:active{
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 32px;
-	height: 32px;
+	/*width: 32px;
+	height: 32px;*/
     border: none;
     padding: 0px 0px;
 	z-index: 2;
@@ -37,8 +37,8 @@ button:active{
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 32px;
-	height: 32px;
+	/*width: 32px;
+	height: 32px;*/
     border: none;
     padding: 0px 0px;
 	z-index: 2;
@@ -46,6 +46,45 @@ button:active{
 	outline-offset: -1.5px;
 }
 
+.markerc{
+	position: absolute;
+	top: 0;
+	left: 0;
+	/*width: 32px;
+	height: 32px;*/
+    border: none;
+    padding: 0px 0px;
+	z-index: 2;
+	outline: rgba(255, 200, 150, 1) solid 2px;
+	outline-offset: -1.5px;
+}
+
+.markerd{
+	position: absolute;
+	top: 0;
+	left: 0;
+	/*width: 32px;
+	height: 32px;*/
+    border: none;
+    padding: 0px 0px;
+	z-index: 2;
+	outline: rgba(255, 125, 50, 1) solid 2px;
+	outline-offset: -1.5px;
+}
+
+.markere{
+	position: absolute;
+	top: 0;
+	left: 0;
+	/*width: 32px;
+	height: 32px;*/
+    border: none;
+    padding: 0px 0px;
+	z-index: 2;
+	outline: rgba(255, 0, 0, 1) solid 2px;
+	outline-offset: -1.5px;
+}
+
 .tooltip {
 	font-family: helvetica, arial, sans-serif;
     position: absolute;
@@ -61,7 +100,7 @@ button:active{
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 720px;
+	/*width: 720px;*/
 	padding-top: 0px;
 	padding-left: 0px;
 	display: none;
@@ -84,9 +123,14 @@ img{
 }
 .map-container{
 	position: relative;
-	max-width: 720px;
+	/*max-width: 720px;*/
 	max-height: 480px;
 }
+.interface{
+	position:absolute;
+	display: inline-block;
+	left: 745px;
+}
 a{
 	background-color: #ffffcc;
 	font-family: helvetica, arial, sans-serif;
@@ -135,15 +179,9 @@ a{
 	opacity: 0.5;
 	filter: grayscale(100%);
 }
-table{
-	position: relative;
-	width: 600px;
-	height: 28px;
-	margin-top: 10px;
-	margin-bottom: -13px;
-}
-td{
-	width: 32px;
-	height: 32px;
-	padding-top: 5px;
+.off{
+	filter: grayscale(100%);
+}
+.on{
+	filter: grayscale(0%);
 }