Skills

src/public/css/stocked.css

@@ -43,3 +43,8 @@ input.editable-num.not-editing {
 .horizontal-input-pair input {
     flex-grow: 1;
 }
+div.skill-even {
+}
+div.skill-odd {
+    background: #F5F5F5;
+}

src/views/partials/stocked.erb

@@ -28,6 +28,11 @@
         </div>
         <div class='container'>
           <div class='row'>
+            <div class='col-md-3'>
+              <a href='' ng-click='stocked_uploadCharredModel()'>
+                TODO: Upload charred model
+              </a>
+            </div>
             <div class='col-md-3'>
               <a href='' ng-click='stocked_downloadCharredModel()'>
                 TODO: Download charred model
@@ -38,11 +43,6 @@
                 TODO: Generate Markdown
               </a>
             </div>
-            <div class='col-md-3'>
-              <a href='' ng-click='stocked_generateWikipage()'>
-                TODO: Generate wikipage
-              </a>
-            </div>
           </div>
         </div>
       </div>
@@ -66,7 +66,7 @@
                ng-focus='editField($event, true)' ng-blur='editField($event, false)' />
         <br />
         <div>
-          <span>{{general.CommonTraits}}</span>
+          <span>Common traits: {{general.CommonTraits.join(", ")}}</span>
           <select class='form-control' ng-model='general.selectedTrait' ng-options='t for t in charredTraits'></select>
         </div>
         <div>
@@ -280,6 +280,34 @@
     <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 class='container-fluid'>
+          <div class='row'>
+            <div class='h4 col-md-3'>Skill</div>
+            <div class='h4 col-md-1'>Sorcerous?</div>
+            <div class='h4 col-md-8'>Roots</div>
+            <div class='h4 col-md-2'>Stock specific?</div>
+          </div>
+        </div>
+        <div ng-repeat='skill in skills' class='row' ng-class-even="'skill-even'" ng-class-odd="'skill-odd'">
+          <div class='h4 col-md-3'>
+            <input ng-model="skill.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='h4 col-md-1'><input type="checkbox" ng-model='skill.magic'></div>
+          <div class='h4 col-md-8'>
+            <div class="skill-roots-write">
+              <span ng-repeat="(root,is) in skill.roots">
+                <input type="checkbox" id='{{to_id(skill.name)-to_id(root)}}' ng-model='is'/>
+                <label for='{{to_id(skill.name)-to_id(root)}}'> {{root}} </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class='row'>
+          <div class='h4 col-md-12'><a href='' ng-click='addSkill()'>Add new skill</a></div>
+        </div>
       </div>
     </div>
     <div class='panel-heading'>