diff --git a/AndorsTrailEdit/AndorsTrailEditor.js b/AndorsTrailEdit/AndorsTrailEditor.js index 494ac71b2..8c2489f9e 100644 --- a/AndorsTrailEdit/AndorsTrailEditor.js +++ b/AndorsTrailEdit/AndorsTrailEditor.js @@ -17,6 +17,7 @@ IncludeJavascript("Editor_Conversation.js"); IncludeJavascript("Editor_Monster.js"); IncludeJavascript("inc/jquery.dynatree.min.js"); +IncludeJavascript("inc/mustache.js"); var model; @@ -36,7 +37,12 @@ function openTabForObject(obj, dataStore) { function bindObjectsToItemList(itemListDiv, dataStore) { itemListDiv.children().remove(); var addToList = function(obj) { - var item = $("
  • " + obj[dataStore.nameField] + "
    • "); + //var item = $("
  • " + obj[dataStore.nameField] + "
    • "); + var item = $( Mustache.to_html( $('#listitem').html(), { name: obj[dataStore.nameField] } ) ); + if (dataStore.iconField) { + var elem = $( 'img', item ); + imageSelector.setImage( elem , obj[dataStore.iconField] , 0.7); + } item.click(function() { openTabForObject(obj, dataStore); }); itemListDiv.append(item); item.hide().fadeIn('slow'); @@ -110,6 +116,7 @@ function startEditor() { ) ,idField: 'id' ,nameField: 'name' + ,iconField: 'iconID' }) ,quests: new DataStore({ objectTypename: 'quest' @@ -128,6 +135,7 @@ function startEditor() { ) ,idField: 'id' ,nameField: 'name' + ,iconField: 'iconID' }) ,droplists: new DataStore({ objectTypename: 'droplist' @@ -149,12 +157,71 @@ function startEditor() { ) ,idField: 'id' ,nameField: 'name' + ,iconField: 'iconID' }) }; addExampleModelItems(model); + + + imageSelector = new ImageSelector("../AndorsTrail/res/drawable/", $( "#dialog-images" ) ); + imageSelector.add(new TilesetImage("actorconditions_1", {x:14, y:8}, undefined, [ 'conditions' ] )); + imageSelector.add(new TilesetImage("actorconditions_2", {x:3, y:1}, undefined, [ 'conditions' ] )); + imageSelector.add(new TilesetImage("items_armours", {x:14, y:3}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_armours_3", {x:10, y:4}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_armours_2", {x:7, y:1}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_weapons", {x:14, y:6}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_weapons_3", {x:13, y:5}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_weapons_2", {x:7, y:1}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_jewelry", {x:14, y:1}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_rings_1", {x:10, y:3}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_necklaces_1", {x:10, y:3}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_consumables", {x:14, y:5}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_books", {x:11, y:1}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_misc", {x:14, y:4}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_misc_2", {x:20, y:12}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_misc_3", {x:20, y:12}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("items_misc_4", {x:20, y:4}, undefined, [ 'items' ] )); + imageSelector.add(new TilesetImage("monsters_armor1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_demon1", {x: 1, y:1}, {x:64, y:64}, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_dogs", {x: 7, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_eye1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_eye2", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_eye3", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_eye4", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_ghost1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_hydra1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_insects", {x: 6, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_liches", {x: 4, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_mage", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_mage2", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_man1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_men", {x: 9, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_men2", {x: 10, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_misc", {x: 12, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_rats", {x: 5, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_rogue1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_skeleton1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_skeleton2", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_snakes", {x: 6, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_cyclops", {x: 1, y:1}, {x:64, y:96}, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_warrior1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_wraiths", {x: 3, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_zombie1", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_zombie2", {x: 1, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_karvis1", {x: 2, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_karvis2", {x: 9, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_rltiles1", {x:20, y:8}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_rltiles2", {x:20, y:9}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_rltiles3", {x:10, y:3}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_redshrike1", {x:6, y:1}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_ld1", {x:20, y:12}, undefined, [ 'monsters' ] )); + imageSelector.add(new TilesetImage("monsters_ld2", {x:20, y:12}, undefined, [ 'monsters' ] )); + + + $( "#left #tools" ).accordion({ fillSpace: true }); tabs = new EditorTabs( $( "#center #tabs" ) ); @@ -234,60 +301,5 @@ function startEditor() { width: 350, buttons: defaultButtons }); - - imageSelector = new ImageSelector("../AndorsTrail/res/drawable/", $( "#dialog-images" ) ); - imageSelector.add(new TilesetImage("actorconditions_1", {x:14, y:8}, undefined, [ 'conditions' ] )); - imageSelector.add(new TilesetImage("actorconditions_2", {x:3, y:1}, undefined, [ 'conditions' ] )); - imageSelector.add(new TilesetImage("items_armours", {x:14, y:3}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_armours_3", {x:10, y:4}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_armours_2", {x:7, y:1}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_weapons", {x:14, y:6}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_weapons_3", {x:13, y:5}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_weapons_2", {x:7, y:1}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_jewelry", {x:14, y:1}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_rings_1", {x:10, y:3}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_necklaces_1", {x:10, y:3}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_consumables", {x:14, y:5}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_books", {x:11, y:1}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_misc", {x:14, y:4}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_misc_2", {x:20, y:12}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_misc_3", {x:20, y:12}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("items_misc_4", {x:20, y:4}, undefined, [ 'items' ] )); - imageSelector.add(new TilesetImage("monsters_armor1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_demon1", {x: 1, y:1}, {x:64, y:64}, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_dogs", {x: 7, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_eye1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_eye2", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_eye3", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_eye4", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_ghost1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_hydra1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_insects", {x: 6, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_liches", {x: 4, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_mage", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_mage2", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_man1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_men", {x: 9, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_men2", {x: 10, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_misc", {x: 12, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_rats", {x: 5, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_rogue1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_skeleton1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_skeleton2", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_snakes", {x: 6, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_cyclops", {x: 1, y:1}, {x:64, y:96}, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_warrior1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_wraiths", {x: 3, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_zombie1", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_zombie2", {x: 1, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_karvis1", {x: 2, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_karvis2", {x: 9, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_rltiles1", {x:20, y:8}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_rltiles2", {x:20, y:9}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_rltiles3", {x:10, y:3}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_redshrike1", {x:6, y:1}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_ld1", {x:20, y:12}, undefined, [ 'monsters' ] )); - imageSelector.add(new TilesetImage("monsters_ld2", {x:20, y:12}, undefined, [ 'monsters' ] )); - } diff --git a/AndorsTrailEdit/DataStore.js b/AndorsTrailEdit/DataStore.js index 9fbc8208a..71cab3959 100644 --- a/AndorsTrailEdit/DataStore.js +++ b/AndorsTrailEdit/DataStore.js @@ -27,6 +27,7 @@ function DataStore(input) { this.fieldList = input.fieldList; this.nameField = input.nameField ? input.nameField : 'name'; this.idField = input.idField ? input.idField : 'id'; + this.iconField = input.iconField; this.items = []; this.add = function(obj) { diff --git a/AndorsTrailEdit/ImageSelector.js b/AndorsTrailEdit/ImageSelector.js index a4f5b0093..b159c4bf6 100644 --- a/AndorsTrailEdit/ImageSelector.js +++ b/AndorsTrailEdit/ImageSelector.js @@ -48,18 +48,26 @@ function ImageSelector(imagePath, dialog) { return name + ":" + localID; } - var updateImageFromFormField = function(image, formField) { - var img = parseImageID(formField.val()); + this.setImage = function(imageElem, imageID, scale) { + if (!scale) scale = 1; + var img = parseImageID(imageID); var tilesetImage = get(img.name); if (!tilesetImage) { tilesetImage = get(""); } var c = tilesetImage.localIDToCoords(img.localID); - image.css({ + imageElem.css({ "background-image": "url(" +img.path + img.name + ".png)", - "background-position": (-c.x)+"px " + (-c.y)+"px", - "width": tilesetImage._tileSize.x + "px", - "height": tilesetImage._tileSize.y + "px", + "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) { + imageElem.css({ + "background-size": + tilesetImage._tileSize.x * tilesetImage._numTiles.x * scale + "px " + + tilesetImage._tileSize.y * tilesetImage._numTiles.y * scale + "px " + }); + } } this.add = function(tileset) { @@ -85,14 +93,15 @@ function ImageSelector(imagePath, dialog) { }); } - this.imageify = function(img, val, showTilesetTag) { - val.change(function() { updateImageFromFormField(img, val); }); + this.imageify = function(img, elem, showTilesetTag) { + var setImage = this.setImage; + elem.change(function() { setImage(img, elem.val()); }); img.click(function() { - currentInput = val; + currentInput = elem; showImages(showTilesetTag); dialog.dialog("open"); }); - val.change(); + elem.change(); } diff --git a/AndorsTrailEdit/editor.html b/AndorsTrailEdit/editor.html index f5a11c1c9..dfb1fecf5 100644 --- a/AndorsTrailEdit/editor.html +++ b/AndorsTrailEdit/editor.html @@ -28,6 +28,10 @@ + +

    Actor conditions

    diff --git a/AndorsTrailEdit/styles2.css b/AndorsTrailEdit/styles2.css index 60bd7a9e6..f8ac04314 100644 --- a/AndorsTrailEdit/styles2.css +++ b/AndorsTrailEdit/styles2.css @@ -24,7 +24,8 @@ html,body { margin:0; padding:0; height: 100%; font-size: 0.9em; } #screen #left div { } .itemlist { border: 1px #bbb solid; list-style: none; padding: 0px; margin: 0px; line-height: 1.3; margin-bottom: 2ex; } -.itemlist li { cursor: pointer; padding: 0.5ex 1ex 0.5ex 2ex; } +.itemlist li { cursor: pointer; padding: 0.5ex 1ex 0.5ex 1ex; } +.itemlist li img { float: left; margin-right: 0.5ex; } .itemlist li:nth-child(odd) { background-color: #eee; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; } .itemlist li:hover { background-color: #d7d7ff; } .importexport-header { font-weight: bold; padding-top: 1ex; }