chiark / gitweb /
wip refactor for landscape optionality
authorIan Jackson <ijackson@chiark.greenend.org.uk>
Wed, 25 Nov 2020 21:03:29 +0000 (21:03 +0000)
committerIan Jackson <ijackson@chiark.greenend.org.uk>
Wed, 25 Nov 2020 21:03:29 +0000 (21:03 +0000)
Signed-off-by: Ian Jackson <ijackson@chiark.greenend.org.uk>
templates/macros.tera [new file with mode: 0644]
templates/session.tera

diff --git a/templates/macros.tera b/templates/macros.tera
new file mode 100644 (file)
index 0000000..3b3be04
--- /dev/null
@@ -0,0 +1,66 @@
+{# -*- HTML -*- -#}
+
+{% macro header() %}
+<body id="main-body"
+      data-ctoken="{{ctoken}}"
+      data-us="{{player}}"
+      data-gen="{{gen}}"
+      data-sse-url-prefix="{{sse_url_prefix}}"
+      data-load="{{ load | escape }}">
+{% endmacro header %}
+
+{% macro nick() %}
+Hi {{nick | escape}}
+{% endmacro nick%}
+
+{% macro wresting() %}
+<span id="wresting-warning"></span>
+{% endmacro wresting %}
+
+{% macro status() %}
+<span id="status">nothing</span>
+{% endmacro status %}
+
+{% macro errors() %}
+<pre id="error"></pre>
+{% endmacro errors %}
+
+{% macro space() %}
+    <svg id="space"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 {{ table_size[0] }} {{ table_size[1] }}"
+        width="0 0 {{ table_size[0]*6 }}" height="{{ table_size[1]*6 }}"
+        >
+      <rect fill="green" x="0" y="0"
+           width="{{ table_size[0] }}" height="{{ table_size[1] }}"/>
+      <g id="pieces_marker"></g>
+{%- for piece in uses %}
+      <use id="use{{ piece.id }}" href="#piece{{ piece.id }}"
+          x="{{ piece.pos[0] }}" y="{{ piece.pos[1] }}"
+          data-piece="{{ piece.id }}" data-info="{{ piece.info | escape }}" />
+{%- endfor %}
+      <g id="defs_marker"></g>
+{%- for piece in defs %}
+      <defs id="defs{{ piece.0 }}">{{ piece.1 }}</defs>
+{%- endfor %}
+    </svg>
+{% endmacro space %}
+
+{% macro uos() %}
+  <div id="uos" class="uos">
+    <div class="uos-mid" id="uos-mid"></div>
+  </div>
+  <div class="uos">
+    <div class="uokey"><strong>Mouse</strong> select/deselect/drag</div>
+    <div class="uokey"><strong>shift</strong> multiple selection</div>
+  </div>
+{% endmacro uos %}
+
+{% macro footer() %}
+<hr>
+<address>
+This server is running Otter, the Online TableTop Environment
+Renderer.  Otter and its shape (piece picture) libraries
+are <a href="/_/libre">Free Software</a> and come with NO
+WARRANTY.
+{% endmacro footer %}
index 1745485a7deccfb8bebfcef417f5c9a6efb12d13..7a2b19f5785eb96cfed6a9ceccaa2c5e29bcba7f 100644 (file)
@@ -1,9 +1,5 @@
-<body id="main-body" {# -*- HTML -*- -#}
-      data-ctoken="{{ctoken}}"
-      data-us="{{player}}"
-      data-gen="{{gen}}"
-      data-sse-url-prefix="{{sse_url_prefix}}"
-      data-load="{{ load | escape }}">
+{% import "macros" as m %}{# -*- HTML -*- -#}
+{{ m::header() }}
 <style>
   div[class=uos] { display: flex; flex-wrap: wrap; }
   div[class|=uokey] {
   div[class=uokey-r] {
     align-self: end;
   }
+  .uos {
+    height: 100px;
+  }
+  .uos-mid {
+    margin-left: auto;
+    margin-top: auto;
+  }
 </style>
-<div id="main">
-<div id="topblock">
-Hi {{nick | escape}} | <span id="wresting-warning"></span> |
-<span id="status">nothing</span>
-<pre id="error"></pre>
-</div>
-    <svg id="space"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 {{ table_size[0] }} {{ table_size[1] }}"
-        width="0 0 {{ table_size[0]*6 }}" height="{{ table_size[1]*6 }}"
-        >
-      <rect fill="green" x="0" y="0"
-           width="{{ table_size[0] }}" height="{{ table_size[1] }}"/>
-      <g id="pieces_marker"></g>
-{%- for piece in uses %}
-      <use id="use{{ piece.id }}" href="#piece{{ piece.id }}"
-          x="{{ piece.pos[0] }}" y="{{ piece.pos[1] }}"
-          data-piece="{{ piece.id }}" data-info="{{ piece.info | escape }}" />
-{%- endfor %}
-      <g id="defs_marker"></g>
-{%- for piece in defs %}
-      <defs id="defs{{ piece.0 }}">{{ piece.1 }}</defs>
-{%- endfor %}
-    </svg>
-<div id="botblock">
-<p>
-  <div id="uos" class="uos" style="height: 100px;">
-    <div class="uos-mid" id="uos-mid" style="margin-left: auto; margin-top: auto;"></div>
-  </div>
-  <div class="uos">
-    <div class="uokey"><strong>Mouse</strong> select/deselect/drag</div>
-    <div class="uokey"><strong>shift</strong> multiple selection</div>
-  </div>
+{{ m::nick() }}
+|
+{{ m::wresting() }}
+|
+{{ m::status() }}
+{{ m::errors() }}
+
+{{ m::space() }}
+<p>{{ m::uos() }}
+
 <p>
   <div style="overflow-y: scroll; height: 200px;">
-  <table id="log">
-{% for ent in log %}
-    <tr><td>{{ ent.logent.logent.html | safe }}</td><td class="logts">{{ent.when}}</td></tr>
-{%- endfor %}
-  </table>
+    <table id="log">
+      {% for ent in log %}
+      <tr><td>{{ ent.logent.logent.html | safe }}</td><td class="logts">{{ent.when}}</td></tr>
+      {%- endfor %}
+    </table>
   </div>
-</div>
-</div>
 
-<hr>
-<address>
-This server is running Otter, the Online TableTop Environment
-Renderer.  Otter and its shape (piece picture) libraries
-are <a href="/_/libre">Free Software</a> and come with NO
-WARRANTY.
+{{ m::footer() }}