Implement a bit more of the view character template.

src/templates/characters/view_character.html.tera

@@ -1,15 +1,148 @@
+
+{% import "characters/view_character_macros" as macros %}
 {% extends "base" %}
 
 {% block content %}
-<h1>Core Sheet</h1>
+    <style type="text/css">
-<div>
+     body {
+         font-family: Liberation Sans, Arial;
+     }
+
+     #attributes {
+         padding: 4px;
+         border-collapse: collapse;
+     }
+
+     #attributes .attributes-section {
+         border: 1px solid gray;
+         border-collapse: collapse;
+         display: table-cell;
+     }
+
+     .attribute {
+         margin: 0;
+         padding: 0;
+         display: flex;
+     }
+
+     .attribute label {
+         display: inline-block;
+         float: left;
+         clear: left;
+         width: 10em;
+         text-align: right;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .attribute div.value {
+         min-width: 1.5em;
+         max-width: 4em;
+         text-align: center;
+         display: inline-block;
+         float: left;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
+     #skills {
+         padding: 4px;
+         border-collapse: collapse;
+     }
+
+     #skills .skills-section {
+         border: 1px solid gray;
+         border-collapse: collapse;
+         display: table-cell;
+     }
+
+     .skill {
+         margin: 0;
+         padding: 0;
+         display: flex;
+     }
+
+     .skill label {
+         display: inline-block;
+         float: left;
+         clear: left;
+         width: 10em;
+         text-align: right;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .skill div.value {
+         min-width: 1.5em;
+         max-width: 4em;
+         display: inline-block;
+         text-align: center;
+         float: left;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+    </style>
+
+    <h1>Core Sheet</h1>
+    <div>
         <h1>Character {{name}}</h1>
         <h3>User: {{username}}</h3>
         <p>System: {{data_type}}</h3>
-    <p>Strength: {{sheet.strength}}</p>
+    </div>
-</div>
 
-<div>
+    <div>
+        <h1>Core Sheet</h1>
+        <div>
+            <h1>Name: <input type="text" value="{{name}}" /></h1>
+            <p>System: {{data_type}}</p>
+            <div id="attributes">
+                <div class="attributes-section" id="mentalAttributes">
+                    {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
+                    {{ macros::attribute(name="Wits", value=sheet.wits) }}
+                    {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
+                </div>
+
+                <div class="attributes-section" id="physicalAttributes">
+                    {{ macros::attribute(name="Strength", value=sheet.strength) }}
+                    {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
+                    {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
+                </div>
+
+                <div class="attributes-section" id="socicalAttributes">
+                    {{ macros::attribute(name="Presence", value=sheet.presence) }}
+                    {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
+                    {{ macros::attribute(name="Composure", value=sheet.composure) }}
+                </div>
+            </div>
+
+            <div id="skills">
+                <div class="skills-section" id="mentalSkills">
+                    {% for skill_name, skill in sheet.mentalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+
+                <div class="skills-section" id="physicalSkills">
+                    {% for skill_name, skill in sheet.physicalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+
+                <div class="skills-section" id="socialSkills">
+                    {% for skill_name, skill in sheet.socialSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+
+        <div>
             <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
-</div>
+        </div>
 {% endblock content %}

src/templates/characters/view_character_macros.html.tera

@@ -0,0 +1,13 @@
+{% macro attribute(name, value) %}
+    <div class="attribute">
+        <label for="{{name}}">{{name}}:</label>
+        <div class="value" id="{{name}}">{{value}}</div>
+    </div>
+{% endmacro attribute %}
+
+{% macro skill(name, value) %}
+    <div class="skill">
+        <label for="{{name}}">{{name}}:</label>
+        <div class="value" id="{{name}}">{{value}}</div>
+    </div>
+{% endmacro skill %}

static/scripts/webpack.config.js

@@ -57,6 +57,7 @@ module.exports = {
         packPage('characters/edit_character.html.tera', ['edit_character']),
         packPage('characters/edit_character_macros.html.tera'),
         packPage('characters/new_character.html.tera'),
-    packPage('characters/view_character.html.tera')
+        packPage('characters/view_character.html.tera'),
+        packPage('characters/view_character_macros.html.tera'),
     ]
 };