templates/macros.tera

   1 {# -*- HTML -*- -#}
   2
   3 {% macro header() %}
   4 <body id="main-body"
   5       data-ctoken="{{ctoken}}"
   6       data-us="{{player}}"
   7       data-gen="{{gen}}"
   8       data-sse-url-prefix="{{sse_url_prefix}}"
   9       data-load="{{ load | escape }}"
  10       style="transform-origin: top left;"
  11       >
  12 <style>
  13   html {
  14     background-color: #eef;
  15   }
  16   .footer {
  17     background-color: #ddf;
  18   }
  19   div[id=infopane] {
  20     display: flex;
  21     flex-direction: column;
  22   }
  23   div[class=uos] {
  24     background-color: white;
  25     flex: initial;
  26   }
  27   div[id=uos] {
  28     flex: auto;
  29   }
  30 </style>
  31 {% endmacro header %}
  32
  33 {% macro nick() %}
  34 Hi {{nick | escape}}
  35 {% endmacro nick%}
  36
  37 {% macro wresting() %}
  38 <span id="wresting-warning"></span>
  39 {% endmacro wresting %}
  40
  41 {% macro status() %}
  42 <span id="status">nothing</span>
  43 {% endmacro status %}
  44
  45 {% macro zoom() %}
  46 <span style="white-space: nowrap;"
  47 ><button id="zoom-btn" disabled
  48          onclick="zoom_activate()"
  49 >Zoom</button
  50 ><input id="zoom-val"
  51         type="number" max="1000" min="10" step="5" size="4" value="100"
  52         oninput="zoom_enable()"
  53 >%</span>
  54 {% endmacro status %}
  55
  56 {% macro errors() %}
  57 <pre id="error"></pre>
  58 {% endmacro errors %}
  59
  60 {% macro space() %}
  61     <svg id="space"
  62          xmlns="http://www.w3.org/2000/svg"
  63          viewBox="0 0 {{ table_size[0] }} {{ table_size[1] }}"
  64          width="{{ table_size[0]*scale }}"
  65          height="{{ table_size[1]*scale }}"
  66          >
  67       <rect fill="{{ table_colour }}" x="0" y="0"
  68             width="{{ table_size[0] }}" height="{{ table_size[1] }}"/>
  69       <g id="pieces_marker"></g>
  70 {%- for piece in uses %}
  71       <use id="use{{ piece.id }}" href="#piece{{ piece.id }}"
  72            x="{{ piece.pos[0] }}" y="{{ piece.pos[1] }}"
  73            data-piece="{{ piece.id }}" data-info="{{ piece.info | escape }}" />
  74 {%- endfor %}
  75       <g id="defs_marker"></g>
  76 {%- for piece in defs %}
  77       <defs id="defs{{ piece.0 }}">{{ piece.1 }}</defs>
  78 {%- endfor %}
  79     </svg>
  80 {% endmacro space %}
  81
  82 {% macro infopane() %}
  83 <div id="infopane">
  84   <div id="uos" class="uos">
  85     <div class="uos-mid" id="uos-mid"></div>
  86   </div>
  87   <div class="uos">
  88     <div class="uokey"><strong>Mouse</strong> select/deselect/drag</div>
  89     <div class="uokey"><strong>shift</strong> multiple selection</div>
  90   </div>
  91 </div id="infopane">
  92 {% endmacro infopane %}
  93
  94 {% macro footer() %}
  95   <div class="footer">
  96     <!--
  97          this affects the document's overall scrollbars
  98          which is not what we want.  so get rid of it for now
  99     <div class="footer"; style="
 100          height: 100vw;
 101          width: 200vw;
 102          left: -50vw;
 103          overflow-y: clip;
 104          position: absolute;
 105          z-index: -1;
 106      "><!-- this fills in the rest of the page, including the margins
 107          --x
 108     </div>
 109     -->
 110     <hr>
 111     <address style="max-height: 100vh;">
 112       This server is running Otter, the Online TableTop Environment
 113       Renderer.  Otter and its shape (piece picture) libraries
 114       are <a href="/_/libre">Free Software</a> and come with NO
 115       WARRANTY.
 116   </div>
 117 {% endmacro footer %}