From f9e0a3e5911df8e3467f6a96313e59ea11033485 Mon Sep 17 00:00:00 2001 From: Oskar Wiksten Date: Tue, 29 Jan 2013 14:20:57 +0100 Subject: [PATCH] Refactor content editor - display icons of items, monsters and actor conditions. --- AndorsTrailEdit/datastore.js | 3 +- AndorsTrailEdit/directives.js | 28 +++-- AndorsTrailEdit/edit_actorcondition.html | 8 +- AndorsTrailEdit/edit_droplist.html | 2 +- AndorsTrailEdit/edit_item.html | 8 +- AndorsTrailEdit/edit_itemcategory.html | 2 +- AndorsTrailEdit/edit_monster.html | 8 +- AndorsTrailEdit/editor.html | 7 +- AndorsTrailEdit/exampledata.js | 13 +-- AndorsTrailEdit/iconselector.js | 28 +++++ AndorsTrailEdit/styles2.css | 5 +- AndorsTrailEdit/tilesets.js | 131 +++++++++++++++++++++++ AndorsTrailEdit/utils.js | 13 +++ 13 files changed, 226 insertions(+), 30 deletions(-) create mode 100644 AndorsTrailEdit/iconselector.js create mode 100644 AndorsTrailEdit/tilesets.js diff --git a/AndorsTrailEdit/datastore.js b/AndorsTrailEdit/datastore.js index e8aad827c..ee1a2d6f0 100644 --- a/AndorsTrailEdit/datastore.js +++ b/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) { diff --git a/AndorsTrailEdit/directives.js b/AndorsTrailEdit/directives.js index b609d5356..3de960180 100644 --- a/AndorsTrailEdit/directives.js +++ b/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); diff --git a/AndorsTrailEdit/edit_actorcondition.html b/AndorsTrailEdit/edit_actorcondition.html index 64de7ca3d..e827bffdf 100644 --- a/AndorsTrailEdit/edit_actorcondition.html +++ b/AndorsTrailEdit/edit_actorcondition.html @@ -1,8 +1,12 @@ -

Actor condition

+

Actor condition - {{obj.name}}

General
-
+ + +
+ +
diff --git a/AndorsTrailEdit/edit_droplist.html b/AndorsTrailEdit/edit_droplist.html index c461aabe5..6513714c8 100644 --- a/AndorsTrailEdit/edit_droplist.html +++ b/AndorsTrailEdit/edit_droplist.html @@ -1,4 +1,4 @@ -

Droplist

+

Droplist - {{obj.id}}

General
diff --git a/AndorsTrailEdit/edit_item.html b/AndorsTrailEdit/edit_item.html index 02449f3c1..dacb30dae 100644 --- a/AndorsTrailEdit/edit_item.html +++ b/AndorsTrailEdit/edit_item.html @@ -1,8 +1,12 @@ -

Item

+

Item - {{obj.name}}

General
-
+ + +
+ +
diff --git a/AndorsTrailEdit/edit_itemcategory.html b/AndorsTrailEdit/edit_itemcategory.html index d999aba6c..fcbf74627 100644 --- a/AndorsTrailEdit/edit_itemcategory.html +++ b/AndorsTrailEdit/edit_itemcategory.html @@ -1,4 +1,4 @@ -

Item Category

+

Item Category - {{obj.name}}

General
diff --git a/AndorsTrailEdit/edit_monster.html b/AndorsTrailEdit/edit_monster.html index d77062752..1d722829f 100644 --- a/AndorsTrailEdit/edit_monster.html +++ b/AndorsTrailEdit/edit_monster.html @@ -1,8 +1,12 @@ -

Monster / NPC

+

Monster / NPC - {{obj.name}}

General
-
+ + +
+ +
diff --git a/AndorsTrailEdit/editor.html b/AndorsTrailEdit/editor.html index 5740a62b8..77289ea6b 100644 --- a/AndorsTrailEdit/editor.html +++ b/AndorsTrailEdit/editor.html @@ -35,7 +35,8 @@
  • - {{getName(p.section, p.obj)}} + + {{getName(p.section, p.obj)}}
@@ -56,7 +57,7 @@
  • - + {{getName(section, obj)}}
    @@ -241,6 +242,7 @@ + @@ -250,6 +252,7 @@ + diff --git a/AndorsTrailEdit/exampledata.js b/AndorsTrailEdit/exampledata.js index 53f7c2d7f..e6512da9b 100644 --- a/AndorsTrailEdit/exampledata.js +++ b/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); diff --git a/AndorsTrailEdit/iconselector.js b/AndorsTrailEdit/iconselector.js new file mode 100644 index 000000000..0f83d59bd --- /dev/null +++ b/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); diff --git a/AndorsTrailEdit/styles2.css b/AndorsTrailEdit/styles2.css index 05ca66a07..ff2d9e998 100644 --- a/AndorsTrailEdit/styles2.css +++ b/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; } diff --git a/AndorsTrailEdit/tilesets.js b/AndorsTrailEdit/tilesets.js new file mode 100644 index 000000000..e373e3542 --- /dev/null +++ b/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); diff --git a/AndorsTrailEdit/utils.js b/AndorsTrailEdit/utils.js index 9a05e2235..44d12d76b 100644 --- a/AndorsTrailEdit/utils.js +++ b/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;