--- /dev/null
+{# -*- 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 %}
-<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() }}