OMGeeky/andors-trail
1
0
Fork 0
mirror of https://github.com/OMGeeky/andors-trail.git synced 2026-02-15 22:04:41 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

WIP on displaying images in lists in AndorsTrailEditor.

Browse Source
This commit is contained in:
Oskar Wiksten
2012-07-10 08:40:43 +02:00
parent 5b23b29111
commit 33dbfca39f
5 changed files with 94 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
AndorsTrailEdit/AndorsTrailEditor.js
View File

@@ -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 = $("<li>" + obj[dataStore.nameField] + "</li>");
//var item = $("<li>" + obj[dataStore.nameField] + "</li>");
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' ] ));
}

1
AndorsTrailEdit/DataStore.js
View File

@@ -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) {

29
AndorsTrailEdit/ImageSelector.js
View File

@@ -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();
}

4
AndorsTrailEdit/editor.html
View File

@@ -28,6 +28,10 @@
</div>
</div>
<script type="text/template" id="listitem">
<li><img />{{name}}</li>
</script>
<div id="left" class="workarea">
<div id="tools">
<h3><a href="#">Actor conditions</a></h3>

3
AndorsTrailEdit/styles2.css
View File

@@ -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; }