Added pockets to the bag widget

Currently the pockets are all manually specified, but it may be useful to do this automatically in the future.
varkor · Mar 18, 2016 · 0dc6b84 · 0dc6b84
1 parent 5a15957
commit 0dc6b84
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 8 deletions.
diff --git a/battle/battle.css b/battle/battle.css
@@ -54,6 +54,11 @@ button {
 	font: normal 12pt "Helvetica Neue";
 	-webkit-user-select: none;
 }
+.flow-grid button {
+	width: auto; height: auto;
+	color: auto; background: auto;
+	margin: auto;
+}
 button.small {
 	width: 40pt;
 	font-size: 16pt;

diff --git a/battle/battle.html b/battle/battle.html
@@ -408,8 +408,8 @@
 					}
 				});
 
-				document.body.appendChild(Widgets.Party.interface.canvas);
-				document.body.appendChild(Widgets.Bag.interface.canvas);
+				document.body.appendChild(Widgets.Party.interface.element);
+				document.body.appendChild(Widgets.Bag.interface.element);
 			}
 		};
 		</script>

diff --git a/battle/images/static/items/Mega Bracelet.png b/battle/images/static/items/Mega Bracelet.png
diff --git a/battle/scripts/functions/objects.js b/battle/scripts/functions/objects.js
@@ -1,6 +1,6 @@
 "use strict";
 
-let DataObject = {
+var DataObject = {
 	new : function () {
 		var object = {
 			data : {},
@@ -48,7 +48,7 @@ let DataObject = {
 	}
 };
 
-let FunctionObject = {
+var FunctionObject = {
 	objects : [],
 	initialised : false,
 	new : function (object, details) {

diff --git a/battle/scripts/objects/unique/Widgets.js b/battle/scripts/objects/unique/Widgets.js
@@ -404,7 +404,10 @@ Widgets.Bag = {
 		columns : 5,
 		contrainToBounds : false,
 		selection : "multiple",
-		margin : 5,
+		margin : {
+			all : 5,
+			top : 35
+		},
 		spacing : 6,
 		listeners : {
 			"cell:click" (index, data) {
@@ -471,4 +474,50 @@ Widgets.Bag = {
 		}
 	}
 };
-BattleContext.defaultDelegates.Bag = Widgets.Bag.BattleContextDelegate;
+BattleContext.defaultDelegates.Bag = Widgets.Bag.BattleContextDelegate;
+
+var style = document.createElement("style");
+style.appendChild(document.createTextNode(`
+	.flow-grid div {
+		position: absolute;
+		left: 5px; top: 5px;
+		height: 25px;
+	}
+	.flow-grid button {
+		padding: 0 10px;
+		margin-right: 5px;
+		height: 100%;
+		font-size: 10px;
+		color: hsl(0, 0%, 60%);
+		background: hsl(0, 0%, 30%);
+		border: none; outline: none;
+		border-radius: 2px;
+		cursor: pointer;
+	}
+	.flow-grid button.selected {
+		color: hsl(0, 0%, 80%);
+		background: hsl(0, 0%, 40%);
+	}
+`));
+Widgets.Bag.interface.element.appendChild(style);
+
+var buttons = document.createElement("div");
+Widgets.Bag.interface.element.appendChild(buttons);
+
+foreach([
+	{ category: "all", predicate: null },
+	{ category: "key", predicate: item => ["Key Stone", "Mega Stone"].includes(Items._(item.item).category) },
+	{ category: "balls", predicate: item => Items._(item.item).category === "Ball" },
+	{ category: "berries", predicate: item => Items._(item.item).category === "Berry" }
+	], ({ category, predicate }) => {
+	var button = document.createElement("button");
+	button.addEventListener("click", () => {
+		buttons.querySelector("button.selected").classList.remove("selected");
+		button.classList.add("selected");
+		console.log()
+		Widgets.Bag.interface.filter(predicate);
+	});
+	button.appendChild(document.createTextNode(category.toUpperCase()));
+	buttons.appendChild(button);
+});
+buttons.querySelector("button").classList.add("selected");
diff --git a/battle/scripts/processing/initialise.js b/battle/scripts/processing/initialise.js
@@ -1,2 +1,4 @@
-Settings = DataObject.new();
-Scenes = DataObject.new();
+"use strict";
+
+var Settings = DataObject.new();
+var Scenes = DataObject.new();