templates/macros.tera

   1 {# -*- HTML -*- -#}
   2 <!-- Copyright 2020u Ian Jackson
   3      SPDX-License-Identifier: AGPL-3.0-or-later
   4      There is NO WARRANTY. -->
   5
   6 {% macro header() %}
   7 <body id="main-body"
   8       data-ctoken="{{ctoken}}"
   9       data-us="{{player}}"
  10       data-gen="{{gen}}"
  11       data-sse-url-prefix="{{sse_url_prefix}}"
  12       data-load="{{ load | escape }}"
  13       style="transform-origin: top left;"
  14       >
  15 <style>
  16   html {
  17     background-color: #eef;
  18   }
  19   .footer {
  20     background-color: #ddf;
  21   }
  22   div[id=infopane] {
  23     display: flex;
  24     flex-direction: column;
  25     background-color: white;
  26     overflow-y: scroll;
  27   }
  28   div[class=uos] {
  29     flex: initial;
  30   }
  31   div[id=uos] {
  32     flex: auto;
  33   }
  34   div[class=somepane] {
  35     flex: auto;
  36     display: flex;
  37     flex-direction: column;
  38   }
  39   div[id=player_list_columns] {
  40   }
  41 </style>
  42 {% endmacro header %}
  43
  44 {% macro nick() %}
  45 Hi {{nick | escape}}
  46 {% endmacro nick%}
  47
  48 {% macro wresting() %}
  49 <span id="wresting-warning"></span>
  50 {% endmacro wresting %}
  51
  52 {% macro status() %}
  53 {%- if fake_rng %}<strong>FAKING RANDOMNESS!</strong>{% endif %}
  54 {%- if fake_time %}<strong>FAKING TIME!</strong>{% endif %}
  55 <span id="status">nothing</span>
  56 {% endmacro status %}
  57
  58 {% macro zoom() %}
  59 <span style="white-space: nowrap;"
  60 ><button id="zoom-btn" disabled
  61          onclick="zoom_activate()"
  62 >Zoom</button
  63 ><input id="zoom-val"
  64         type="number" max="1000" min="10" step="5" size="4" value="100"
  65         oninput="zoom_enable()"
  66 >%</span>
  67 {% endmacro status %}
  68
  69 {% macro errors() %}
  70 <pre id="error"></pre>
  71 {% endmacro errors %}
  72
  73 {% macro space() %}
  74     <style id="space-cursor-style">
  75     </style>
  76     <svg xmlns="http://www.w3.org/2000/svg"
  77          id="space" {{ space_attrs }} >
  78       <rect fill="{{ table_colour }}" x="0" y="0"
  79             id="table_rect" {{ rect_attrs }} />
  80       <g id="pieces_marker"></g>
  81 {%- for piece in uses %}
  82       <use id="use{{ piece.id }}" href="#piece{{ piece.id }}"
  83            x="{{ piece.pos[0] }}" y="{{ piece.pos[1] }}"
  84            data-piece="{{ piece.id }}" data-info="{{ piece.info | escape }}" />
  85 {%- endfor %}
  86       <g id="defs_marker"></g>
  87 {%- for piece in defs %}
  88       <defs id="defs{{ piece.0 }}">{{ piece.1 }}</defs>
  89 {%- endfor %}
  90       <g id="movehist_marker"></g>
  91       <g id="movehist_end"></g>
  92       <use href="#rectsel_path" stroke-width="1.0 "stroke="purple"/>
  93       <use href="#rectsel_path" stroke-width="0.5" stroke="#fcf"  />
  94       <defs id ="static_defs">
  95       <g id="rectsel_path"><path fill="none" stroke-dasharray="1 1" d=""/></g>
  96       </defs>
  97     </svg>
  98 {% endmacro space %}
  99
 100 {% macro infopane() %}
 101 <div id="infopane">
 102
 103  <div id="pane_help" class="somepane">
 104   <div id="uos" class="uos">
 105     <div class="uos-mid" id="uos-mid"></div>
 106   </div>
 107   <div class="uos">
 108     <div class="uokey"><strong>Mouse</strong> select/deselect/drag
 109                        <strong>shift</strong> multiple selection</div>
 110     <div class="uokey"><strong>0-9</strong> special selection</div>
 111     <div class="uokey">Show
 112       <strong>H</strong> this help
 113       <strong>U</strong> players
 114       <strong>B</strong> bundles
 115     </div>
 116   </div>
 117  </div>
 118
 119  <div id="pane_players" class="somepane" style="display:none">
 120   <div id="player_list_columns">
 121 <div><strong>Players</strong> (<strong>H</strong>/<strong>U</strong>: return to help)</div>
 122   <div id="player_list">
 123 {{ player_info_pane }}
 124   </div>
 125   </div>
 126  </div>
 127
 128  <div id="pane_bundles" class="somepane" style="display:none">
 129   <div id="bundle_list_columns">
 130 <div><strong>Bundles</strong> (<strong>H</strong>/<strong>B</strong>: return to help)</div>
 131   <div id="bundle_list">
 132 {{ bundles_info_pane }}
 133   </div>
 134   </div>
 135  </div>
 136
 137 </div id="infopane">
 138 {% endmacro infopane %}
 139
 140 {% macro footer() %}
 141   <div class="footer">
 142     <!--
 143          this affects the document's overall scrollbars
 144          which is not what we want.  so get rid of it for now
 145     <div class="footer"; style="
 146          height: 100vw;
 147          width: 200vw;
 148          left: -50vw;
 149          overflow-y: clip;
 150          position: absolute;
 151          z-index: -1;
 152      "><!-- this fills in the rest of the page, including the margins
 153          --x
 154     </div>
 155     -->
 156     <hr>
 157     <address style="max-height: 100vh;">
 158       This server is running Otter, the Online TableTop Environment
 159       Renderer.  Otter and its shape (piece picture) libraries
 160       are <a href="/_/libre">Free Software</a> and come with NO
 161       WARRANTY.
 162   </div>
 163 {% endmacro footer %}