Bunch of Stocked fleshed out

stocked
Daniel Asher Resnick 3 years ago
parent 06f581fb78
commit 0df9eb8bca
  1. 5
      src/app.rb
  2. 45
      src/public/css/stocked.css
  3. 2
      src/public/js/burning.js
  4. 1769
      src/public/js/stocked.js
  5. 42
      src/public/js/stocked/editable-input.js
  6. 2
      src/views/index.erb
  7. 220
      src/views/partials/stocked.erb
  8. 6
      src/views/partials/stocked/editableInput.erb

@ -33,6 +33,11 @@ get /\/([\w]+)_partial/ do
erb "partials/#{partial}".to_sym erb "partials/#{partial}".to_sym
end end
get /\/stocked\/([\w]+)_partial/ do
partial = params['captures'].first
erb "partials/stocked/#{partial}".to_sym
end
get '/namegen/:gender' do get '/namegen/:gender' do
if params['gender'] == 'female' if params['gender'] == 'female'
['Ada', 'Belle', 'Carmen', 'Desdemona', 'Edie'].sample ['Ada', 'Belle', 'Carmen', 'Desdemona', 'Edie'].sample

@ -0,0 +1,45 @@
a.panel-title:link,.panel-title a:link { text-decoration: none; }
a.panel-title:visited,.panel-title a:visited { text-decoration: none; }
a.panel-title:hover,.panel-title a:hover { text-decoration: underline; }
a.panel-title:active,.panel-title a:active { text-decoration: underline; }
input.editable-name {
color: #333;
display: inline;
width: 12em;
}
input.editable-line {
color: #333;
}
input.editable-num {
color: #333;
display: inline;
width: 3em;
}
input.editable-name.not-editing {
background: #F5F5F5;
font-weight: bold;
}
input.editable-line.not-editing {
background: #F5F5F5;
}
input.editable-num.not-editing {
background: #F5F5F5;
}
.add-skills-traits-container {
margin-top: 1em;
margin-bottom: 1em;
}
.horizontal-input-pair {
display: flex;
align-items: center;
gap: 0.5em;
}
.horizontal-input-pair label {
margin-bottom: 0;
}
.horizontal-input-pair input {
flex-grow: 1;
}

@ -61,7 +61,7 @@ burningModule.config(function($routeProvider) {
when('/', {controller: BurningCtrl, templateUrl:'/main_partial'}). when('/', {controller: BurningCtrl, templateUrl:'/main_partial'}).
when('/config', {controller: ConfigCtrl, templateUrl:'/config_partial'}). when('/config', {controller: ConfigCtrl, templateUrl:'/config_partial'}).
when('/help', {controller: ConfigCtrl, templateUrl:'/help_partial'}). when('/help', {controller: ConfigCtrl, templateUrl:'/help_partial'}).
when('/stocked', {controller: ConfigCtrl, templateUrl:'/stocked_partial'}). when('/stocked', {controller: StockedCtrl, templateUrl:'/stocked_partial'}).
otherwise({redirectTo:'/'}); otherwise({redirectTo:'/'});
}); });

File diff suppressed because it is too large Load Diff

@ -0,0 +1,42 @@
function EditableInputController($scope, $element, $attrs) {
console.log($scope);
console.log($element);
var ctrl = this;
ctrl.isEditing = false;
ctrl.handleModeChange = function() {
if (ctrl.isEditing) {
ctrl.onUpdate({value: ctrl.modelValue});
ctrl.modelValueCopy = ctrl.modelValue;
}
ctrl.isEditing = !ctrl.isEditing;
};
ctrl.reset = function() {
ctrl.modelValue = ctrl.modelValueCopy;
};
ctrl.$onInit = function() {
// Make a copy of the initial value to be able to reset it later
ctrl.modelValueCopy = ctrl.modelValue;
// Set a default inputType
if (!ctrl.inputType) {
ctrl.inputType = 'text';
}
};
}
export function register(module) {
console.log(module);
module.component('editableInput', {
templateUrl: '/stocked/editableInput_partial',
controller: EditableInputController,
bindings: {
modelValue: '<',
inputID: '<',
inputType: '@?',
onUpdate: '&'
}
});
}

@ -3,6 +3,7 @@
<head> <head>
<link href='/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <link href='/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href='/css/style.css' rel='stylesheet' type='text/css'> <link href='/css/style.css' rel='stylesheet' type='text/css'>
<link href='/css/stocked.css' rel='stylesheet' type='text/css'>
<script src='/js/server_settings.js'></script> <script src='/js/server_settings.js'></script>
<script src='/js/angular.min.js'></script> <script src='/js/angular.min.js'></script>
<script src='/js/angular-resource.js'></script> <script src='/js/angular-resource.js'></script>
@ -14,6 +15,7 @@
<script src='/js/burning-service.js'></script> <script src='/js/burning-service.js'></script>
<script src='/js/burning-modal.js'></script> <script src='/js/burning-modal.js'></script>
<script src='/js/burning-serialize.js'></script> <script src='/js/burning-serialize.js'></script>
<script src='/js/stocked.js'></script>
<script src='/js/burning.js'></script> <script src='/js/burning.js'></script>
<title>Charred - The Burning Wheel Gold Character Burner</title> <title>Charred - The Burning Wheel Gold Character Burner</title>
</head> </head>

@ -1,5 +1,5 @@
<div class='container'> <div class='container' ng-controller='StockedCtrl'>
<h2 id='intro'>Stocked</h2> <h1 id='intro'>Stocked</h1>
<div class='well'> <div class='well'>
Stocked (Stock&middot;ed) Stocked (Stock&middot;ed)
<br> <br>
@ -10,11 +10,10 @@
</ol> </ol>
</div> </div>
<div class='panel panel-default'> <div class='panel panel-default'>
<div class='panel-heading'> <div class='panel-heading' >
<h4 class='panel-title'> <h4 class='panel-title'>
<a data-target='#collapse_tools' data-toggle='collapse' href=''> <a href='' ng-click='collapseBody("#collapse_tools")'>▸</a>
Tools Tools
</a>
</h4> </h4>
</div> </div>
<div class='panel-collapse collapse in' id='collapse_tools'> <div class='panel-collapse collapse in' id='collapse_tools'>
@ -31,17 +30,17 @@
<div class='row'> <div class='row'>
<div class='col-md-3'> <div class='col-md-3'>
<a href='' ng-click='stocked_downloadCharredModel()'> <a href='' ng-click='stocked_downloadCharredModel()'>
Download charred model TODO: Download charred model
</a> </a>
</div> </div>
<div class='col-md-3'> <div class='col-md-3'>
<a href='' ng-click='stocked_generateMarkdown()'> <a href='' ng-click='stocked_generateMarkdown()'>
Generate Markdown TODO: Generate Markdown
</a> </a>
</div> </div>
<div class='col-md-3'> <div class='col-md-3'>
<a href='' ng-click='stocked_generateWikipage()'> <a href='' ng-click='stocked_generateWikipage()'>
Generate wikipage TODO: Generate wikipage
</a> </a>
</div> </div>
</div> </div>
@ -50,38 +49,219 @@
</div> </div>
<div class='panel-heading'> <div class='panel-heading'>
<h4 class='panel-title'> <h4 class='panel-title'>
<a data-target='#collapse_general' data-toggle='collapse' href=''> <a href='' ng-click='collapseBody("#collapse_general")'>▸</a>
General General
</a>
</h4> </h4>
</div> </div>
<div class='panel-collapse collapse in' id='collapse_general'> <div class='panel-collapse collapse in' id='collapse_general'>
<div class='panel-body'> <div class='panel-body'>
Name, common traits, stride, etc. TODO: Name, common traits, stride, etc.
</div> </div>
</div> </div>
<div class='panel-heading'> <div class='panel-heading'>
<h4 class='panel-title'> <h4 class='panel-title'>
<a data-target='#collapse_settings' data-toggle='collapse' href=''> <a href='' ng-click='collapseBody("#collapse_settings")'>▸</a>
Settings Settings
</a>
</h4> </h4>
</div> </div>
<div class='panel-collapse collapse in' id='collapse_settings'> <div class='panel-collapse collapse in' id='collapse_settings'>
<div class='panel-body'> <div class='panel-body'>
Some settings will go here <a ng-click='collapseBody(".collapse_all_settings", $event)' href=''>
collapse/expand all settings
</a>
<div class='list-group'> <div class='list-group'>
<div class='list-group-item'> <div ng-repeat="setting in settings" class='list-group-item'>
Foo <div class='panel-heading'>
<a href='' class="panel-title" ng-click='collapseBody("#collapse_" + to_id(setting.name))'>▸</a>
<input class='form-control input-lg not-editing editable-name'
ng-model="setting.name" ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
</div>
<div class='panel-collapse collapse in collapse_all_settings' id='collapse_{{to_id(setting.name)}}'>
<div class='panel-body'>
<div class="panel">
<div class="panel-body">
<a ng-click='collapseBody(".collapse_all_"+to_id(setting.name), $event)' href=''>
collapse/expand all paths in setting
</a>
<div class='container-fluid'>
<div class='row'>
<div class='h4 col-md-3'>Lifepath</div>
<div class='h4 col-md-1'>Time</div>
<div class='h4 col-md-1'>Res</div>
<div class='h4 col-md-3'>Stat</div>
<div class='h4 col-md-4'>Leads</div>
</div>
</div>
</div>
<div ng-repeat="path in setting.lifepaths">
<div class='panel-heading'>
<div class='container-fluid'>
<div class='row'>
<div class="col-md-3">
<a href='' class="panel-title" ng-click='collapseBody("#collapse_" + to_id(path.name))'>▸</a>
<input ng-model="path.name"
class='form-control input-lg not-editing editable-name'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
</div>
<div class="col-md-1">
<input type="number" ng-model="path.time"
class='not-editing editable-num'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
<span>yrs</span>
</div>
<div class="col-md-1">
<input type="number" ng-model="path.res"
class='not-editing editable-num'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
</div>
<div class="col-md-3">
<input type="number" ng-model="path.stat.M"
class='not-editing editable-num'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
<span>M</span>
<input type="number" ng-model="path.stat.P"
class='not-editing editable-num'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
<span>P</span>
<input type="number" ng-model="path.stat.PM"
class='not-editing editable-num'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
<span>P/M</span>
</div>
<div class='h5 col-md-4 path-leads'>
<div class="path-leads-read">
<i>{{path.leads().join(", ")}}</i>
<a href='' ng-click='editLeads($event)'>Edit</a>
</div>
<div class="path-leads-write" hidden="hidden">
<div ng-repeat="setting in settings">
<input type="checkbox" id='{{to_id(path.name)}}-to-{{to_id(setting.name)}}'
ng-model='path.leads_dict[setting.name]' value='{{to_id(setting.name)}}' />
<label for='{{to_id(path.name)}}-to-{{to_id(setting.name)}}'>
{{setting.name}}
</label>
</div>
<a href='' ng-click='readLeads($event)'>Done</a>
</div>
</div>
</div>
</div>
</div>
<div class='panel-collapse collapse in collapse_all_{{to_id(setting.name)}}' id='collapse_{{to_id(path.name)}}'>
<div class='panel-body'>
<span ng-if='$first'>TODO: Born/common traits</span>
<div>
<b><i>Skills:</i></b>
<span ng-if='path.skills.lpSkills.length > 0' ng-click='editPoints($event)'>
{{StockedUtil.pluralize(path.skills.lpPoints, "pt")}}:
</span>
<div style="display: inline;" ng-repeat='skill in path.skills.lpSkills track by $index'>
{{skill}}<a href='' ng-click='path.skills.removeSkill($index)'>[X]</a><!--
--><span ng-if='!$last'>,</span></div><!--
--><span ng-if='path.skills.lpSkills.length > 0 && path.skills.generalPoints > 0'>;</span>
<span ng-if='path.skills.generalPoints > 0'>{{StockedUtil.pluralize(path.skills.generalPoints, "pt")}}: General</span>
</div>
<div>
<b><i>Traits:</i></b>
<span ng-if='path.traits.lpTraits.length == 0'>—</span>
<span ng-if='path.traits.lpTraits.length > 0' ng-click='editPoints($event)'>
{{StockedUtil.pluralize(path.traits.points, "pt")}}:
</span>
<div style="display: inline;" ng-repeat='trait in path.traits.lpTraits track by $index'>
{{trait}}<a href='' ng-click='path.traits.removeTrait($index)'>[X]</a><!--
--><span ng-if='!$last'>,</span></div>
</div>
<div ng-if="path.requires" class="horizontal-input-pair">
<label for="{{to_id(path.name)}}-requires"><b><i>Requires: </i></b></label>
<input ng-model="path.requires" id="{{to_id(path.name)}}-requires"
class='form-control not-editing editable-line'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
</div>
<div ng-if="path.restrict" class="horizontal-input-pair">
<label for="{{to_id(path.name)}}-restrict"><b><i>Restrictions: </i></b></label>
<input ng-model="path.restrict" id="{{to_id(path.name)}}-restrict"
class='form-control not-editing editable-line'
ng-click="$event.stopPropagation()"
ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
</div>
<div class="add-skills-traits-container" class="container">
<div class='row'>
<div class='col-md-3'>
<select class='form-control' ng-model='path.selectedSkill' ng-options='s for s in charredSkills'></select>
</div>
<div class='col-md-1'>
<a href='' ng-click='path.skills.addSkill(path.selectedSkill)'>Add skill</a>
</div>
<div class='col-md-2'>
<a href='' ng-click=''>TODO: Add new skill</a>
</div>
<div class='col-md-3'>
<select class='form-control' ng-model='path.selectedTrait' ng-options='t for t in charredTraits'></select>
</div>
<div class='col-md-1'>
<a href='' ng-click='path.traits.addTrait(path.selectedTrait)'>Add trait</a>
</div>
<div class='col-md-2'>
<a href='' ng-click=''>TODO: Add new trait</a>
</div>
</div>
</div>
<span>WISHLIST: requires expression</span>
</div>
</div>
</div>
<div class='panel panel-default'>
<a href='/#/stocked'>+ TODO: Add new lifepath</a>
</div>
</div>
</div> </div>
<div class='list-group-item'>
Bar
</div> </div>
</div> </div>
<div class='panel panel-default'> <div class='panel panel-default'>
<a href='/#/stocked'>+ Add new setting</a> <a href='/#/stocked'>+ TODO: Add new setting</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class='panel-heading'>
<h4 class='panel-title'>
<a href='' ng-click='collapseBody("#collapse_skills")'>▸</a>
Skills
</h4>
</div>
<div class='panel-collapse collapse in' id='collapse_skills'>
<div class='panel-body'>
TODO: The stock's skill list and adding a new one
</div>
</div>
<div class='panel-heading'>
<h4 class='panel-title'>
<a href='' ng-click='collapseBody("#collapse_traits")'>▸</a>
Traits
</h4>
</div>
<div class='panel-collapse collapse in' id='collapse_traits'>
<div class='panel-body'>
TODO: The stock's trait list and adding a new one
</div>
</div>
</div>

@ -0,0 +1,6 @@
<span ng-if='$ctrl.label' for='{{$ctrl.inputID}}'>{{$ctrl.label}}</span>
<span ng-switch='$ctrl.isEditing'>
<input ng-switch-when="true" ng-model='$ctrl.modelValue' ng-blur='$ctrl.handleModeChange()'
id='{{$ctrl.inputID}}' type='{{$ctrl.inputType}}' class="editable-input editing">
<span ng-switch-default class="editable-input">{{$ctrl.modelValue}}</span>
</span>
Loading…
Cancel
Save