Refactor content editor - display icons of items, monsters and actor conditions.

AndorsTrailEdit/datastore.js

@@ -4,7 +4,6 @@ var ATEditor = (function(ATEditor, _) {
 		var defaultOptions = {
 			nameField: 'name'
 			,idField: 'id'
-			,iconIDField: 'iconID'
 		};
 		_.defaults(options, defaultOptions);
 
@@ -20,7 +19,7 @@ var ATEditor = (function(ATEditor, _) {
 		this.hasObjectWithId = function(id) { 
 			return _.some(this.items, function(obj) { return obj[options.idField] === id; });
 		};
-		this.hasIcon = function() { return iconIDField; };
+		this.hasIcon = function() { return _.toBool(options.iconIDField); };
 		this.getIcon = function(obj) { return obj[options.iconIDField]; };
 		this.getId = function(obj) { return obj[options.idField]; };
 		this.getName = function(obj) { 

AndorsTrailEdit/directives.js

@@ -1,4 +1,4 @@
-var ATEditor = (function(ATEditor, app, $) {
+var ATEditor = (function(ATEditor, app, tilesets, $) {
 	
 	// Copied from http://jsfiddle.net/p69aT/
 	//  -> originally from https://groups.google.com/forum/?fromgroups=#!topic/angular/7XVOebG6z6E
@@ -41,16 +41,30 @@ var ATEditor = (function(ATEditor, app, $) {
 
 	app.directive('ngTileImage', function () {
 		return function(scope, element, attrs) {
-			element.css('display', 'none');
+			var scale = attrs.ngTileImageScale;
+			if (!scale) scale = 1;
+			
 			scope.$watch(attrs.ngTileImage, function(value) {
-				if (value) {
-					element.fadeIn(400);
-				} else {
-					element.fadeOut(300);
+				var img = tilesets.parseImageID(value);
+				var tileset = tilesets.getTileset(img.tilesetName);
+				var c = tileset.localIDToCoords(img.localID);
+				element.css({
+					"background-image": "url(" +img.path + img.tilesetName + ".png)", 
+					"background-position": (-c.x)*scale+"px " + (-c.y)*scale+"px",
+					"width": tileset._tileSize.x * scale + "px",
+					"height": tileset._tileSize.y * scale + "px",
+					"cursor": "pointer"
+				});
+				if (scale && (scale != 1)) {
+					element.css({
+						"background-size": 
+							tileset._tileSize.x * tileset._numTiles.x * scale + "px "
+							+ tileset._tileSize.y * tileset._numTiles.y * scale + "px "
+					});
 				}
 			});
 		};
 	});
 	
 	return ATEditor;
-})(ATEditor, ATEditor.app, jQuery);
+})(ATEditor, ATEditor.app, ATEditor.tilesets, jQuery);

AndorsTrailEdit/edit_actorcondition.html

@@ -1,8 +1,12 @@
-<h3>Actor condition</h3>
+<h3>Actor condition - {{obj.name}}</h3>
 <fieldset>
 	<legend>General</legend>
 	<div class="fieldWithLabel">
-		<div id="actorconditionimage" class="field"><input type="hidden" id="iconID" ng-model="obj.iconID" /></div>
+		<label for="iconID">Icon:</label>
+		<span class="field">
+			<div ng-tile-image="obj.iconID" class="at-input-icon"></div>
+			<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
+		</span>
 	</div>
 	<div class="fieldWithLabel">
 		<label for="id">Internal ID:</label>

AndorsTrailEdit/edit_droplist.html

@@ -1,4 +1,4 @@
-<h3>Droplist</h3>
+<h3>Droplist - {{obj.id}}</h3>
 <fieldset>
 	<legend>General</legend>
 	<div class="fieldWithLabel">

AndorsTrailEdit/edit_item.html

@@ -1,8 +1,12 @@
-<h3>Item</h3>
+<h3>Item - {{obj.name}}</h3>
 <fieldset>
 	<legend>General</legend>
 	<div class="fieldWithLabel">
-		<div id="itemimage" class="field"><input type="hidden" id="iconID" ng-model="obj.iconID" /></div>
+		<label for="iconID">Icon:</label>
+		<span class="field">
+			<div ng-tile-image="obj.iconID" class="at-input-icon"></div>
+			<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
+		</span>
 	</div>
 	<div class="fieldWithLabel">
 		<label for="name">Display name:</label>

AndorsTrailEdit/edit_itemcategory.html

@@ -1,4 +1,4 @@
-<h3>Item Category</h3>
+<h3>Item Category - {{obj.name}}</h3>
 <fieldset>
 	<legend>General</legend>
 	<div class="fieldWithLabel">

AndorsTrailEdit/edit_monster.html

@@ -1,8 +1,12 @@
-<h3>Monster / NPC</h3>
+<h3>Monster / NPC - {{obj.name}}</h3>
 <fieldset>
 	<legend>General</legend>
 	<div class="fieldWithLabel">
-		<div id="monsterimage" class="field"><input type="hidden" ng-model="obj.iconID" /></div>
+		<label for="iconID">Icon:</label>
+		<span class="field">
+			<div ng-tile-image="obj.iconID" class="at-input-icon"></div>
+			<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
+		</span>
 	</div>
 	<div class="fieldWithLabel">
 		<label for="id">Internal id:</label>

AndorsTrailEdit/editor.html

@@ -35,7 +35,8 @@
 					<div class="accordion-inner">
 						<ul class="itemlist">
 							<li ng-repeat="p in previousItems" ng-click="editObj(p.section, p.obj)" fadey>
-								<img />{{getName(p.section, p.obj)}}
+								<img ng-tile-image="p.obj.iconID" ng-tile-image-scale="0.7" ng-show="p.section.hasIcon()" />
+								{{getName(p.section, p.obj)}}
 							</li>
 						</ul>
 					</div>
@@ -56,7 +57,7 @@
 						<ul class="itemlist">
 							<li ng-repeat="obj in section.items" ng-click="editObj(section, obj)" fadey>
 								<div style="float: left;">
-									<img style="float: left;"/>
+									<img ng-tile-image="obj.iconID" ng-tile-image-scale="0.7" ng-show="section.hasIcon()" />
 									{{getName(section, obj)}}
 								</div>
 								<div style="float: right;">
@@ -241,6 +242,7 @@
 <script src="inc/angular.min.js"></script>
 <script src="inc/bootstrap/js/bootstrap.min.js"></script>
 <script src="utils.js"></script>
+<script src="tilesets.js"></script>
 <script src="fieldlist.js"></script>
 <script src="datastore.js"></script>
 <script src="defaults.js"></script>
@@ -250,6 +252,7 @@
 <script src="controllers.js"></script>
 <script src="app.js"></script>
 <script src="directives.js"></script>
+<script src="iconselector.js"></script>
 <script src="legacyimport.js"></script>
 
 </body>

AndorsTrailEdit/exampledata.js

@@ -1,17 +1,10 @@
-var ATEditor = (function(ATEditor, model, _, $) {
+var ATEditor = (function(ATEditor, model, utils, _, $) {
 	
 	var http;
 	var resources = {};
 	
 	function loadUrlFromGit(relativeUrl, successCallback, errorCallback) {
-		var url = document.location.href;
-		var idx = url.lastIndexOf('#');
-		if (idx > 0) {
-			url = url.substring(0, idx);
-		}
-		url = url.substring(0, url.lastIndexOf('/'));
-		url = url.substring(0, url.lastIndexOf('/'));
-		url = url + "/" + relativeUrl;
+		var url = utils.getUrlRelativeToBaseSrcDir(relativeUrl);
 		http.get(url)
 		.success(function(data, status, headers, config) {
 			successCallback(data);
@@ -87,4 +80,4 @@ var ATEditor = (function(ATEditor, model, _, $) {
 	};
 	
 	return ATEditor;
-})(ATEditor, ATEditor.model, _, jQuery);
+})(ATEditor, ATEditor.model, ATEditor.utils, _, jQuery);

AndorsTrailEdit/iconselector.js

@@ -0,0 +1,28 @@
+var ATEditor = (function(ATEditor, tilesets) {
+
+	this.setImage = function(imageElem, imageID, scale) {
+		if (!scale) scale = 1;
+		var img = tilesets.parseImageID(imageID);
+		var tilesetImage = tilesets.getTileset(img.name);
+		var c = tilesetImage.localIDToCoords(img.localID);
+		imageElem.css({
+			"background-image": "url(" +img.path + img.name + ".png)", 
+			"background-position": (-c.x)*scale+"px " + (-c.y)*scale+"px",
+			"width": tilesetImage._tileSize.x * scale + "px",
+			"height": tilesetImage._tileSize.y * scale + "px",
+			"cursor": "pointer"
+		});
+		if (scale && (scale !== 1)) {
+			imageElem.css({
+				"background-size": 
+					tilesetImage._tileSize.x * tilesetImage._numTiles.x * scale + "px "
+					+ tilesetImage._tileSize.y * tilesetImage._numTiles.y * scale + "px "
+			});
+		}
+	}
+	
+	ATEditor.iconselector = {
+		setImage: setImage
+	};
+	return ATEditor;
+})(ATEditor, ATEditor.tilesets);

AndorsTrailEdit/styles2.css

@@ -10,11 +10,13 @@ html, body 					{ margin:0; padding:0; }
 
 .hidden 					{ display: none; }
 
-.at-input-id, .at-input-name	
+.at-input-id, .at-input-name
 							{ width: 200px; }
 .at-input-stat, .at-input-stat-minmax, .at-input-quantity, .at-input-chance, .at-input-magnitude, .at-input-duration
 							{ width: 50px; }
 .at-input-gold				{ width: 80px; }
+.at-input-iconID			{ width: 120px; }
+.at-input-icon				{ display: inline-block; vertical-align: top; }
 
 .workarea h3 				{ font-size: 18px; margin: 0 0 0 5px; }
 .workarea legend 			{ font-size: 16px; margin: 0 0 5px 0; }
@@ -27,6 +29,7 @@ html, body 					{ margin:0; padding:0; }
 .itemlist li img			{ float: left; margin-right: 0.5ex; }
 .itemlist li:nth-child(odd)	{ background-color: #eee; }
 .itemlist li:hover			{ background-color: #d7d7ff; cursor: pointer; }
+.itemlist li img			{ float: left; }
 
 .fieldWithLabel label 		{ margin-top: 1.1ex; }
 .fieldWithLabel table		{ border-collapse: collapse; margin-bottom: 1ex; }	

AndorsTrailEdit/tilesets.js

@@ -0,0 +1,131 @@
+var ATEditor = (function(ATEditor, utils) {
+
+	function TilesetImage(options) {
+		var defaultOptions = {
+			numTiles: { x: 1, y: 1 }
+			,tileSize: { x: 32, y: 32 }
+			,usedFor: []
+		};
+		_.defaults(options, defaultOptions);
+		
+		this._name = options.name;
+		this._numTiles = options.numTiles;
+		this._tileSize = options.tileSize;
+		this._usedFor = options.usedFor;
+		
+		this.localIDToCoords = function(localID) {
+			return {
+				x: (localID % this._numTiles.x) * this._tileSize.x,
+				y: Math.floor(localID / this._numTiles.x) * this._tileSize.y
+			}
+		}
+		this.coordsToLocalID = function(x, y) {
+			return Math.floor(x / this._tileSize.x) 
+					+ this._numTiles.x * Math.floor(y / this._tileSize.y)
+		}
+	}
+
+	var defaultImagePath = utils.getUrlRelativeToBaseSrcDir("AndorsTrail/res/drawable/");
+	
+	var defaultimage = {
+		tilesetName: 'defaultimage', 
+		localID: 0, 
+		path: ''
+	};
+	var defaultTileset = new TilesetImage({name: defaultimage.tilesetName });
+	
+	var _tilesets = {};
+	_tilesets[defaultimage.tilesetName] = defaultTileset;
+	
+	var getTileset = function(name) { 
+		var result = _tilesets[name];
+		if (!result) { return defaultTileset; }
+		return result;
+	}
+
+	var parseImageID = function(str) {
+		if (!str || str == "") return defaultimage;
+		var v = str.split(":");
+		if (v.length < 1) return defaultimage;
+		return {
+			tilesetName: v[0], 
+			localID: v[1], 
+			path: defaultImagePath
+		};
+	}
+	
+	var createImageID = function(tilesetName, localID) {
+		if (!tilesetName) return "";
+		return tilesetName + ":" + localID;
+	}
+	
+	
+	var add = function(tilesetName, numTiles, usedFor, tileSize) { 
+		_tilesets[tilesetName] = new TilesetImage({
+			name: tilesetName
+			,numTiles: numTiles
+			,tileSize: tileSize
+			,usedFor: usedFor
+		}); 
+	}
+	
+	add("actorconditions_1", {x:14, y:8}, [ 'conditions' ] );
+	add("actorconditions_2", {x:3, y:1}, [ 'conditions' ] );
+	add("items_armours", {x:14, y:3}, [ 'items' ] );
+	add("items_armours_3", {x:10, y:4}, [ 'items' ] );
+	add("items_armours_2", {x:7, y:1}, [ 'items' ] );
+	add("items_weapons", {x:14, y:6}, [ 'items' ] );
+	add("items_weapons_3", {x:13, y:5}, [ 'items' ] );
+	add("items_weapons_2", {x:7, y:1}, [ 'items' ] );
+	add("items_jewelry", {x:14, y:1}, [ 'items' ] );
+	add("items_rings_1", {x:10, y:3}, [ 'items' ] );
+	add("items_necklaces_1", {x:10, y:3}, [ 'items' ] );
+	add("items_consumables", {x:14, y:5}, [ 'items' ] );
+	add("items_books", {x:11, y:1}, [ 'items' ] );
+	add("items_misc", {x:14, y:4}, [ 'items' ] );
+	add("items_misc_2", {x:20, y:12}, [ 'items' ] );
+	add("items_misc_3", {x:20, y:12}, [ 'items' ] );
+	add("items_misc_4", {x:20, y:4}, [ 'items' ] );
+	add("monsters_armor1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_demon1", {x: 1, y:1}, [ 'monsters' ], {x:64, y:64} );
+	add("monsters_dogs", {x: 7, y:1}, [ 'monsters' ] );
+	add("monsters_eye1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_eye2", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_eye3", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_eye4", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_ghost1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_hydra1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_insects", {x: 6, y:1}, [ 'monsters' ] );
+	add("monsters_liches", {x: 4, y:1}, [ 'monsters' ] );
+	add("monsters_mage", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_mage2", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_man1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_men", {x: 9, y:1}, [ 'monsters' ] );
+	add("monsters_men2", {x: 10, y:1}, [ 'monsters' ] );
+	add("monsters_misc", {x: 12, y:1}, [ 'monsters' ] );
+	add("monsters_rats", {x: 5, y:1}, [ 'monsters' ] );
+	add("monsters_rogue1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_skeleton1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_skeleton2", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_snakes", {x: 6, y:1}, [ 'monsters' ] );
+	add("monsters_cyclops", {x: 1, y:1}, [ 'monsters' ], {x:64, y:96} );
+	add("monsters_warrior1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_wraiths", {x: 3, y:1}, [ 'monsters' ] );
+	add("monsters_zombie1", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_zombie2", {x: 1, y:1}, [ 'monsters' ] );
+	add("monsters_karvis1", {x: 2, y:1}, [ 'monsters' ] );
+	add("monsters_karvis2", {x: 9, y:1}, [ 'monsters' ] );
+	add("monsters_rltiles1", {x:20, y:8}, [ 'monsters' ] );
+	add("monsters_rltiles2", {x:20, y:9}, [ 'monsters' ] );
+	add("monsters_rltiles3", {x:10, y:3}, [ 'monsters' ] );
+	add("monsters_redshrike1", {x:6, y:1}, [ 'monsters' ] );
+	add("monsters_ld1", {x:20, y:12}, [ 'monsters' ] );
+	add("monsters_ld2", {x:20, y:12}, [ 'monsters' ] );
+	
+	ATEditor.tilesets = {
+		getTileset: getTileset
+		,parseImageID: parseImageID
+		,createImageID: createImageID
+	};
+	return ATEditor;
+})(ATEditor, ATEditor.utils);

AndorsTrailEdit/utils.js

@@ -106,6 +106,18 @@ var ATEditor = (function(ATEditor, _) {
 		return b ? true : false;
 	};
 	
+	function getUrlRelativeToBaseSrcDir(relativeUrl) {
+		var url = document.location.href;
+		var idx = url.lastIndexOf('#');
+		if (idx > 0) {
+			url = url.substring(0, idx);
+		}
+		url = url.substring(0, url.lastIndexOf('/'));
+		url = url.substring(0, url.lastIndexOf('/'));
+		url = url + "/" + relativeUrl;
+		return url;
+	}
+	
 	ATEditor.utils = {
 		deepClone: deepClone
 		,removeDefaults: removeDefaults
@@ -115,6 +127,7 @@ var ATEditor = (function(ATEditor, _) {
 		,hasValues: hasValues
 		,convertStringsToIntegers: convertStringsToIntegers
 		,convertIntegersToStrings: convertIntegersToStrings
+		,getUrlRelativeToBaseSrcDir: getUrlRelativeToBaseSrcDir
 	};
 	
 	return ATEditor;