mirror of
https://github.com/OMGeeky/andors-trail.git
synced 2026-01-20 02:21:11 +01:00
Refactor content editor - Enable popup to select icon for items, monsters and actor conditions.
This commit is contained in:
Oskar Wiksten
@@ -262,6 +262,25 @@ var ATEditor = (function(ATEditor, model, importExport, exampleData) {
|
||||
};
|
||||
};
|
||||
|
||||
controllers.SelectIconController = function($scope, $routeParams) {
|
||||
var _callback = function() {};
|
||||
$scope.selectedSection = '';
|
||||
$scope.sections = [];
|
||||
_.each([ 'monster', 'item', 'actorcondition' ], function(id) {
|
||||
$scope.sections.push({id: id, imageIDs: ATEditor.tilesets.getIconIDsForSection(id)});
|
||||
});
|
||||
|
||||
this.startSelecting = function(sectionId, callback) {
|
||||
_callback = callback;
|
||||
$scope.selectedSection = sectionId;
|
||||
$scope.$apply();
|
||||
};
|
||||
|
||||
$scope.imageSelected = function(iconID) {
|
||||
if (_callback) { _callback(iconID); }
|
||||
};
|
||||
};
|
||||
|
||||
ATEditor.controllers = controllers;
|
||||
return ATEditor;
|
||||
})(ATEditor, ATEditor.model, ATEditor.importExport, ATEditor.exampleData);
|
||||
|
||||
@@ -66,5 +66,24 @@ var ATEditor = (function(ATEditor, app, tilesets, $) {
|
||||
};
|
||||
});
|
||||
|
||||
app.directive('ngSelectImage', function () {
|
||||
return {
|
||||
link : function(scope, element, attrs) {
|
||||
function openDialog() {
|
||||
var element = angular.element('#selectIconModal');
|
||||
var ctrl = element.controller();
|
||||
ctrl.startSelecting(attrs.ngSelectImage, function(iconID) {
|
||||
element.modal('hide');
|
||||
var s = attrs.ngSelectImageDest || 'iconID';
|
||||
eval("scope." + s + "='" + iconID + "'");
|
||||
//scope.$apply();
|
||||
});
|
||||
element.modal('show');
|
||||
}
|
||||
element.bind('click', openDialog);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return ATEditor;
|
||||
})(ATEditor, ATEditor.app, ATEditor.tilesets, jQuery);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="fieldWithLabel">
|
||||
<label for="iconID">Icon:</label>
|
||||
<span class="field">
|
||||
<div ng-tile-image="obj.iconID" class="at-input-icon"></div>
|
||||
<div ng-tile-image="obj.iconID" class="at-input-icon" ng-select-image="actorcondition" ng-select-image-dest="obj.iconID"></div>
|
||||
<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="fieldWithLabel">
|
||||
<label for="iconID">Icon:</label>
|
||||
<span class="field">
|
||||
<div ng-tile-image="obj.iconID" class="at-input-icon"></div>
|
||||
<div ng-tile-image="obj.iconID" class="at-input-icon" ng-select-image="item" ng-select-image-dest="obj.iconID"></div>
|
||||
<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="fieldWithLabel">
|
||||
<label for="iconID">Icon:</label>
|
||||
<span class="field">
|
||||
<div ng-tile-image="obj.iconID" class="at-input-icon"></div>
|
||||
<div ng-tile-image="obj.iconID" class="at-input-icon" ng-select-image="monster" ng-select-image-dest="obj.iconID"></div>
|
||||
<input type="text" id="iconID" class="at-input-iconID" ng-model="obj.iconID" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -76,10 +76,26 @@
|
||||
|
||||
<form class="form-inline">
|
||||
<div id="center" class="workarea" ng-view></div>
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="selectIconModal" class="modal hide fade" role="dialog" ng-controller="ATEditor.controllers.SelectIconController">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>Select icon</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div ng-repeat="section in sections">
|
||||
<div ng-show="section.id == selectedSection">
|
||||
<div ng-repeat="imageID in section.imageIDs" ng-tile-image="imageID" ng-click="imageSelected(imageID)" class="at-input-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hidden" id="templates">
|
||||
|
||||
@@ -69,63 +69,79 @@ var ATEditor = (function(ATEditor, utils) {
|
||||
});
|
||||
}
|
||||
|
||||
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' ] );
|
||||
var getTilesetsForSection = function(section) {
|
||||
return _.filter(_tilesets, function(tileset) {
|
||||
return _.contains(tileset._usedFor, section);
|
||||
});
|
||||
}
|
||||
var getIconIDsForSection = function(section) {
|
||||
var result = [];
|
||||
_.each(getTilesetsForSection(section), function(tileset) {
|
||||
for(var i = 0; i < tileset._numTiles.y * tileset._numTiles.x; i++) {
|
||||
result.push(createImageID(tileset._name, i));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
add("actorconditions_1", {x:14, y:8}, [ 'actorcondition' ] );
|
||||
add("actorconditions_2", {x:3, y:1}, [ 'actorcondition' ] );
|
||||
add("items_armours", {x:14, y:3}, [ 'item' ] );
|
||||
add("items_armours_3", {x:10, y:4}, [ 'item' ] );
|
||||
add("items_armours_2", {x:7, y:1}, [ 'item' ] );
|
||||
add("items_weapons", {x:14, y:6}, [ 'item' ] );
|
||||
add("items_weapons_3", {x:13, y:5}, [ 'item' ] );
|
||||
add("items_weapons_2", {x:7, y:1}, [ 'item' ] );
|
||||
add("items_jewelry", {x:14, y:1}, [ 'item' ] );
|
||||
add("items_rings_1", {x:10, y:3}, [ 'item' ] );
|
||||
add("items_necklaces_1", {x:10, y:3}, [ 'item' ] );
|
||||
add("items_consumables", {x:14, y:5}, [ 'item' ] );
|
||||
add("items_books", {x:11, y:1}, [ 'item' ] );
|
||||
add("items_misc", {x:14, y:4}, [ 'item' ] );
|
||||
add("items_misc_2", {x:20, y:12}, [ 'item' ] );
|
||||
add("items_misc_3", {x:20, y:12}, [ 'item' ] );
|
||||
add("items_misc_4", {x:20, y:4}, [ 'item' ] );
|
||||
add("monsters_armor1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_demon1", {x: 1, y:1}, [ 'monster' ], {x:64, y:64} );
|
||||
add("monsters_dogs", {x: 7, y:1}, [ 'monster' ] );
|
||||
add("monsters_eye1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_eye2", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_eye3", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_eye4", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_ghost1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_hydra1", {x: 1, y:1}, [ 'monster' ], {x:64, y:64} );
|
||||
add("monsters_insects", {x: 6, y:1}, [ 'monster' ] );
|
||||
add("monsters_liches", {x: 4, y:1}, [ 'monster' ] );
|
||||
add("monsters_mage", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_mage2", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_man1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_men", {x: 9, y:1}, [ 'monster' ] );
|
||||
add("monsters_men2", {x: 10, y:1}, [ 'monster' ] );
|
||||
add("monsters_misc", {x: 12, y:1}, [ 'monster' ] );
|
||||
add("monsters_rats", {x: 5, y:1}, [ 'monster' ] );
|
||||
add("monsters_rogue1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_skeleton1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_skeleton2", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_snakes", {x: 6, y:1}, [ 'monster' ] );
|
||||
add("monsters_cyclops", {x: 1, y:1}, [ 'monster' ], {x:64, y:96} );
|
||||
add("monsters_warrior1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_wraiths", {x: 3, y:1}, [ 'monster' ] );
|
||||
add("monsters_zombie1", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_zombie2", {x: 1, y:1}, [ 'monster' ] );
|
||||
add("monsters_karvis1", {x: 2, y:1}, [ 'monster' ] );
|
||||
add("monsters_karvis2", {x: 9, y:1}, [ 'monster' ] );
|
||||
add("monsters_rltiles1", {x:20, y:8}, [ 'monster' ] );
|
||||
add("monsters_rltiles2", {x:20, y:9}, [ 'monster' ] );
|
||||
add("monsters_rltiles3", {x:10, y:3}, [ 'monster' ] );
|
||||
add("monsters_redshrike1", {x:6, y:1}, [ 'monster' ] );
|
||||
add("monsters_ld1", {x:20, y:12}, [ 'monster' ] );
|
||||
add("monsters_ld2", {x:20, y:12}, [ 'monster' ] );
|
||||
|
||||
ATEditor.tilesets = {
|
||||
getTileset: getTileset
|
||||
,parseImageID: parseImageID
|
||||
,createImageID: createImageID
|
||||
,getIconIDsForSection: getIconIDsForSection
|
||||
};
|
||||
return ATEditor;
|
||||
})(ATEditor, ATEditor.utils);
|
||||
|
||||
Reference in New Issue
Block a user