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 {
-    <h1>Character {{name}}</h1>
+         font-family: Liberation Sans, Arial;
-    <h3>User: {{username}}</h3>
+     }
-    <p>System: {{data_type}}</h3>
-    <p>Strength: {{sheet.strength}}</p>
-</div>
 
-<div>
+     #attributes {
-    <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
+         padding: 4px;
-</div>
+         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>
+    </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>
 {% 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

@@ -6,57 +6,58 @@ const path = require('path');
 const root = path.resolve(__dirname, '..', '..');
 
 function packPage(page, chunks) {
-  if (!chunks) chunks = [];
+    if (!chunks) chunks = [];
-  return new HtmlWebpackPlugin({
+    return new HtmlWebpackPlugin({
-    template: `${root}/src/templates/${page}`,
+        template: `${root}/src/templates/${page}`,
-    filename: `${root}/static/templates/${page}`,
+        filename: `${root}/static/templates/${page}`,
-    publicPath: '/scripts/dist',
+        publicPath: '/scripts/dist',
-    scriptLoading: 'defer',
+        scriptLoading: 'defer',
-    chunks: chunks,
+        chunks: chunks,
-    inject: false,
+        inject: false,
-    minify: false
+        minify: false
-  });
+    });
 }
 
 module.exports = {
-  entry: {
+    entry: {
-    edit_character: "./src/characters/edit.ts",
+        edit_character: "./src/characters/edit.ts",
-  },
-  optimization: {
-    runtimeChunk: "single",
-    splitChunks: {
-      chunks: 'all',
     },
-  },
+    optimization: {
-  mode: "development",
+        runtimeChunk: "single",
-  output: {
+        splitChunks: {
-    path: path.resolve(__dirname, 'dist'),
+            chunks: 'all',
-    filename: '[name].bundle.js'
+        },
-  },
+    },
-  devtool: 'inline-source-map',
+    mode: "development",
-  module: {
+    output: {
-    rules: [
+        path: path.resolve(__dirname, 'dist'),
-      {
+        filename: '[name].bundle.js'
-        test: /\.ts$/,
+    },
-        include: /src|_proto/,
+    devtool: 'inline-source-map',
-        exclude: /node_modules/,
+    module: {
-        loader: "ts-loader"
+        rules: [
-      }
+            {
+                test: /\.ts$/,
+                include: /src|_proto/,
+                exclude: /node_modules/,
+                loader: "ts-loader"
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".ts", ".js"]
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        packPage('login.html.tera'),
+        packPage('base.html.tera'),
+        packPage('error.html.tera'),
+        packPage('index.html.tera'),
+        packPage('registration.html.tera'),
+        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_macros.html.tera'),
     ]
-  },
-  resolve: {
-    extensions: [".ts", ".js"]
-  },
-  plugins: [
-    new CleanWebpackPlugin(),
-    packPage('login.html.tera'),
-    packPage('base.html.tera'),
-    packPage('error.html.tera'),
-    packPage('index.html.tera'),
-    packPage('registration.html.tera'),
-    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')
-  ]
 };