Files
andors-trail/AndorsTrailEdit/editor.html

260 lines
9.4 KiB
HTML

<!DOCTYPE html>
<html lang="en" ng-app="ateditor">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="inc/ui.dynatree.css" />
<link rel="stylesheet" href="inc/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles2.css" />
<title>Andor's Trail Content Editor</title>
</head>
<body>
<div id="screen">
<div id="top">
<div class="andorsTrailLogo" id="title">
Andor's Trail Content Editor
<span id="version">
v0.7.0dev
</span>
</div>
<div id="buttons">
<a href="#import" class="btn"><i class="icon-upload"></i> Import</a>
<a href="#export" class="btn"><i class="icon-download"></i> Export</a>
</div>
<div class="clearfix"></div>
</div>
<div id="left" class="workarea">
<div id="tools" ng-controller="ATEditor.controllers.NavigationController" ng-init="$('.collapse').collapse()">
<div class="accordion" id="accordion-nav">
<div class="accordion-group" ng-show="previousItems.length > 0">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapse-nav-previous">Recently opened</a>
</div>
<div id="collapse-nav-previous" class="accordion-body collapse">
<div class="accordion-inner">
<ul class="itemlist">
<li ng-repeat="p in previousItems" ng-click="editObj(p.section, p.obj)" fadey>
<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>
</div>
</div>
<div class="accordion-group" ng-repeat="section in sections">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" ng-href="#collapse-nav-{{section.id}}">
{{section.name}}
</a>
</div>
<div id="collapse-nav-{{section.id}}" class="accordion-body collapse">
<div class="accordion-inner">
<div class="tools-buttons">
<button ng-click="addObj(section)" class="btn"><i class="icon-plus-sign"></i> Add</button>
<button ng-click="clear(section)" class="btn"><i class="icon-trash"></i> Clear</button>
</div>
<ul class="itemlist">
<li ng-repeat="obj in section.items" ng-click="editObj(section, obj)" fadey>
<div 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;">
<a ng-click="dupObj(section, obj)" class="btn btn-mini" title="Duplicate"><i class="icon-plus"></i></a>
<a ng-click="delObj(section, obj)" class="btn btn-mini" title="Remove"><i class="icon-trash"></i></a>
</div>
<div style="clear: both;"> </div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<form class="form-inline">
<div id="center" class="workarea" ng-view></div>
</div>
</form>
<div class="hidden" id="templates">
<!-- ========================================================= -->
<!-- Dialogue editor -->
<div id="editDialogue">
<h3>Dialogue</h3>
<fieldset>
<legend>Conversation flow</legend>
<div id="dialogueTree"> </div>
</fieldset>
<fieldset id="dialoguePhrase">
<legend>NPC phrase</legend>
<div class="fieldWithLabel">
<label for="id">Phrase ID:</label>
<input type="text" size="30" id="id" class="field at-input-id"/>
</div>
<div class="fieldWithLabel">
<label for="message">NPC says:</label>
<textarea rows="4" cols="40" id="message"></textarea>
</div>
<div class="fieldWithLabel">
<div><input type="checkbox" id="hasRewards" />Reaching this phrase gives rewards</div>
</div>
<div class="fieldWithLabel" id="hasRewardsDisplay">
<label for="rewards">Rewards</label>
<table class="field" id="rewards">
<thead><tr>
<th>Type</th>
<th>ID</th>
<th>Value</th>
<th></th>
</tr></thead>
<tbody>
</tbody>
</table>
<div id="add">Add</div>
</div>
</fieldset>
<fieldset id="dialoguePhraseReplies">
<legend>Replies</legend>
<div class="fieldWithLabel">
<div><input type="checkbox" id="hasOnlyNextReply" />Phrase leads directly to another phrase without replies</div>
</div>
<div class="fieldWithLabel" id="hasOnlyNextReplyDisplay">
<label for="nextPhraseID">Phrase ID:</label>
<div class="field">
<input type="text" size="30" id="nextPhraseID" class="at-input-id" />
<img src="imgarrowright.png" alt="Follow" id="followNextReply" class="imageButton" title="Open editor for the indicated phrase. Leave empty to automatically generate a new phrase id based on the prefix for this phrase, or supply a new phrase id that should be used." />
</div>
</div>
<div class="fieldWithLabel" id="hasRepliesDisplay">
<label for="replies">Replies</label>
<table class="field" id="replies">
<thead><tr>
<th>Reply</th>
</tr></thead>
<tbody>
</tbody>
</table>
<div id="add">Add</div>
</div>
</fieldset>
<fieldset id="dialogueReply">
<legend>Player reply</legend>
<div class="fieldWithLabel">
<label for="id">Phrase ID:</label>
<input type="text" size="30" id="id" class="field at-input-id" readonly="readonly" />
</div>
<div class="fieldWithLabel">
<label for="text">Player says:</label>
<textarea rows="4" cols="40" id="text"></textarea>
</div>
<div class="fieldWithLabel">
<label for="replyLeadsTo">Reply leads to:</label>
<select class="field" id="replyLeadsTo">
<option value="">NPC phrase</option>
<option value="S">Trading screen</option>
<option value="F">Combat</option>
<option value="X">Conversation ends</option>
<option value="R">NPC is removed from map</option>
</select>
</div>
<div class="fieldWithLabel" id="nextPhraseIDDisplay">
<label for="nextPhraseID">Next phrase ID:</label>
<div class="field">
<input type="text" size="30" id="nextPhraseID" class="at-input-id"/>
<img src="imgarrowright.png" alt="Follow" id="followReply" class="imageButton" title="Open editor for the indicated phrase. Leave empty to automatically generate a new phrase id based on the prefix for this phrase, or supply a new phrase id that should be used." />
</div>
</div>
<div class="fieldWithLabel">
<div><input type="checkbox" id="requiresItems" />Player must have item(s) to select this reply</div>
</div>
<div id="requiresItemsDisplay">
<div class="fieldWithLabel">
<label for="requires_itemID">Required item ID (will be removed from inventory)</label>
<input type="text" size="30" id="requires_itemID" class="field at-input-id"/>
</div>
<div class="fieldWithLabel">
<label for="requires_Quantity">Required item quantity</label>
<input type="text" size="5" id="requires_Quantity" class="field at-input-quantity"/>
</div>
<div class="fieldWithLabel">
<label for="requires_Type">Player should have item in:</label>
<select class="field" id="requires_Type">
<option value="0">Inventory & item will be removed</option>
<option value="1">Inventory</option>
<option value="2">Worn equipment</option>
</select>
</div>
</div>
<div class="fieldWithLabel">
<div><input type="checkbox" id="requiresQuest" />Player must have progressed quest to select this reply</div>
</div>
<div class="fieldWithLabel" id="requiresQuestDisplay">
<label for="requires_Progress">Quest stage required: (questname:stage)</label>
<input type="text" size="30" id="requires_Progress" class="field at-input-id" title="For example, 'mikhail:20' would require that the quest mikhail is at at least stage 20."/>
</div>
</fieldset>
<div class="endSets"> </div>
</div>
<div id="dialog-phrasereward">
<div class="fieldWithLabel">
<label for="rewardType">Type:</label>
<select class="field" id="rewardType">
<option value="0">Quest progress</option>
<option value="1">Droplist</option>
<option value="2">Skill increase</option>
<option value="3">Actor condition</option>
<option value="4">Alignment/faction change</option>
</select>
</div>
<div class="fieldWithLabel">
<label for="rewardID">ID:</label>
<input type="text" size="30" id="rewardID" class="field at-input-id"/>
</div>
<div class="fieldWithLabel">
<label for="value">Value:</label>
<input type="text" size="5" id="value" class="field at-input-quantity"/>
</div>
</div>
<!-- ========================================================= -->
<!-- Select images dialog -->
<div id="dialog-images"> </div>
</div>
<script src="inc/jquery.min.js"></script>
<script src="inc/underscore-min.js"></script>
<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>
<script src="importexport.js"></script>
<script src="model.js"></script>
<script src="exampledata.js"></script>
<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>
</html>