From 3ba7917455949e2eed8f81c49a6b607e294636e1 Mon Sep 17 00:00:00 2001
From: projectmoon <projectmoon@agnos.is>
Date: Tue, 5 Jan 2021 21:42:38 +0000
Subject: [PATCH] Implement a bit more of the view character template.

---
 .../characters/view_character.html.tera       | 153 ++++++++++++++++--
 .../view_character_macros.html.tera           |  13 ++
 static/scripts/webpack.config.js              |  97 +++++------
 3 files changed, 205 insertions(+), 58 deletions(-)
 create mode 100644 src/templates/characters/view_character_macros.html.tera

diff --git a/src/templates/characters/view_character.html.tera b/src/templates/characters/view_character.html.tera
index c37ff75..93ef9b6 100644
--- a/src/templates/characters/view_character.html.tera
+++ b/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>
-<div>
-    <h1>Character {{name}}</h1>
-    <h3>User: {{username}}</h3>
-    <p>System: {{data_type}}</h3>
-    <p>Strength: {{sheet.strength}}</p>
-</div>
+    <style type="text/css">
+     body {
+         font-family: Liberation Sans, Arial;
+     }
 
-<div>
-    <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
-</div>
+     #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>
+    </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 %}
diff --git a/src/templates/characters/view_character_macros.html.tera b/src/templates/characters/view_character_macros.html.tera
new file mode 100644
index 0000000..fdd3fce
--- /dev/null
+++ b/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 %}
diff --git a/static/scripts/webpack.config.js b/static/scripts/webpack.config.js
index 98236b7..6363218 100644
--- a/static/scripts/webpack.config.js
+++ b/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 = [];
-  return new HtmlWebpackPlugin({
-    template: `${root}/src/templates/${page}`,
-    filename: `${root}/static/templates/${page}`,
-    publicPath: '/scripts/dist',
-    scriptLoading: 'defer',
-    chunks: chunks,
-    inject: false,
-    minify: false
-  });
+    if (!chunks) chunks = [];
+    return new HtmlWebpackPlugin({
+        template: `${root}/src/templates/${page}`,
+        filename: `${root}/static/templates/${page}`,
+        publicPath: '/scripts/dist',
+        scriptLoading: 'defer',
+        chunks: chunks,
+        inject: false,
+        minify: false
+    });
 }
 
 module.exports = {
-  entry: {
-    edit_character: "./src/characters/edit.ts",
-  },
-  optimization: {
-    runtimeChunk: "single",
-    splitChunks: {
-      chunks: 'all',
+    entry: {
+        edit_character: "./src/characters/edit.ts",
     },
-  },
-  mode: "development",
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].bundle.js'
-  },
-  devtool: 'inline-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        include: /src|_proto/,
-        exclude: /node_modules/,
-        loader: "ts-loader"
-      }
+    optimization: {
+        runtimeChunk: "single",
+        splitChunks: {
+            chunks: 'all',
+        },
+    },
+    mode: "development",
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].bundle.js'
+    },
+    devtool: 'inline-source-map',
+    module: {
+        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')
-  ]
 };