all repos — felt @ main

virtual tabletop for dungeons and dragons (and similar) using Go, MongoDB, and websockets

static/index.html (raw)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Felt</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="shortcut icon" href="./favicon.png"/>
    <link href="./leaflet.css?v=1.9.4" rel="stylesheet" />
    <link href="./style.css?v=0.2.2" rel="stylesheet" />
  </head>
  <body>
  <noscript><div id="noscript_container">
    <img src="./logo.svg" alt="FELT VIRTUAL TABLETOP"/>
    <p><a href="https://hacklab.nilfm.cc/felt">Felt</a> is a virtual tabletop webapp; therefore, the frontend is written in Javascript</p>
    <p>Enable Javascript in your browser to get your game on!</p></div>
  </noscript>
  <div id="map"></div>
  
  <div id="err_wrapper" style='display:none'><button id="err_close" onclick="closeErr()">x</button><div id="err_div"></div></div>
  
  <nav>
  <section id="user_section">
  <details class="ui_win" open><summary>identity</summary>
    <label for="name_entry">username</label>
    <input id="name_entry" onblur="saveName()">
  </details><br/>
  
  <details class="ui_win"><summary>goto</summary>
  <form id="table_modal" onsubmit="return false">
    <label>table.name<br><input id="input_table_name"></label><br>
    <label>table.passcode<br><input id="input_table_pass"></label><br>
    <button type="submit" id="table_join" onclick="dial();">Join</button>
    <button id="table_leave" style="display:none;" onclick="leave()">Leave</button>
  </form>
  </details><br/>

  <div id="tabletop" style="display:none;">
  <details id="dice_win" class="ui_win"><summary>dice</summary>
    <select id="num_dice">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
    <label for="dice_faces">d</label>
    <select id="dice_faces">
      <option>4</option>
      <option selected>6</option>
      <option>8</option>
      <option>10</option>
      <option>12</option>
      <option>20</option>
    </select>
    <input id="dice_note"><button id="dice_submit" onclick="rollDice()">Roll</button>
    <div id="dice_log"></div>
  </details><br/>
  
  <details class="ui_win"><summary>status</summary><pre id="aux"></pre></details><br/>
  
  <details class="ui_win"><summary>token select</summary>
    <button id="token_preview_clear" onclick="dismissPreview()" style="display: none;">Dismiss Preview</button>
    <div id="token_preview"></div>
    <input hidden id="token_preview_id"/>
    <ul id="token_select" class="single_btn_list"></ul>
  </details><br/>
  </div>

  </section>
  
  <section id="admin_section">
    <details class="ui_win admin_win"><summary>admin</summary>
  <form id="admin_modal" onsubmit="return false">
    <label>pass<input type="password" id="input_admin_pass"></label>
    <button type="submit" id="admin_login" onclick="doLogin();">Login</button>
  </form>
  </details>
  <br/>
  
  <div id="admin_ui" style="display:none;">
    <details id="admin_table_win" class="ui_win admin_win"><summary>table</summary>
      <button onclick="setTableCreateFormVisible(true)">New Table</button>
      <form onsubmit="return false" id="table_creation_form" style="display:none;">
        <label>Name<input id="new_table_name"/></label><br/>
        <label>Passcode<input id="new_table_pass" type="password"/></label><br/>
        <button type="submit" onclick="createTable()">Create</button>
        <button onclick="setTableCreateFormVisible(false)">Cancel</button>
      </form>
      <div id="table_management"></div>
    </details><br/>
    
    <div id="token_management">
    <details id="admin_token_win" class="ui_win admin_win"><summary>tokens</summary>
      <button onclick="setTokenCreateFormVisible(true)">New Token</button>
      <form onsubmit="return false" id="token_creation_form" style="display:none;">
        <label>Sprite<select id="sprite_dropdown" onchange="previewSprite(this)"></select></label><br/>
        <label>Name<input id="token_name"/></label><br/>

        <label>Width<input type="number" id="token_width" min="1" max="9999" step="1" onchange="previewSprite(this)"/></label><label id="aspect_lock_label" for="token_aspect_lock">w:h locked</label><input type="checkbox" checked id="token_aspect_lock" onchange="toggleAspectLock()"/><br/>
        <label>Height<input type="number" id="token_height" min="1" step="1" max="9999" onchange="previewSprite(this)"/></label><br/>
        <label>cX<input type="number" id="token_cx" min="0" max="9999" step="1" onchange="previewSprite(this)"/></label><br/>
        <label>cY<input type="number" id="token_cy" min="0" max="9999" step="1" onchange="previewSprite(this)"/></label><br/>
        <button type="submit" onclick="createToken()">Create</button>
        <button onclick="setTokenCreateFormVisible(false)">Cancel</button>
      </form>
      <div id="token_admin_preview"></div>
      <ul id="token_list" class="two_btn_list"></ul>
    </details><br/>
    
    <details id="admin_sprite_win" class="ui_win admin_win"><summary>sprites</summary>
      <div id="sprite_zone"></div>
    </details>
    </div>
    
  </div>
  </section>
  
  <details class="ui_win" id="theme_accordion"><summary>theme</summary>
      <form id="theme_cfg" onsubmit="return false">
        <label>bg color<input type="color" id="bg_col_input"/></label>
        <label>bg opacity<input type="range" id="bg_col_opacity" min="0" max="255"/></label>
        <label>fg color<input type="color" id="fg_col_input"/></label>
        <label>fg opacity<input type="range" id="fg_col_opacity" min="0" max="255"/></label>
        <label>main color<input type="color" id="main_col_input"/></label>
        <label>main opacity<input type="range" id="main_col_opacity" min="0" max="255"/></label>
        <label>sub color<input type="color" id="sub_col_input"/></label>
        <label>sub opacity<input type="range" id="sub_col_opacity" min="0" max="255"/></label>
        <label>error color<input type="color" id="err_col_input"/></label>
        <label>error opacity<input type="range" id="err_col_opacity" min="0" max="255"/></label>
        <button onclick="setTheme()">Apply</button><button onclick="resetTheme(defaultTheme)">Reset</button>
      </form>
    </details>
    <div id="lag" style="display:none;">lag...</div>
    <div class="ui_win" id="felt_info"><a href="https://hacklab.nilfm.cc/felt">felt v0.2.7</a> (<a href="https://hacklab.nilfm.cc/felt/raw/main/LICENSE">license</a>) | built with <a href="https://leafletjs.com">leaflet</a> (<a href="https://hacklab.nilfm.cc/felt/raw/main/LEAFLET_LICENSE">license</a>) </div>
</nav>
</body>
    <script>L_DISABLE_3D = window.location.hash.toLowerCase() === "#no3d";</script>
    <script src="./leaflet.js?v=1.9.4" type="text/javascript"></script>
    <script src="./util.js?v=0.2.6" type="text/javascript"></script>
    <script src="./map.js?v=0.2.6" type="text/javascript"></script>
    <script src="./socket.js?v=0.2.6" type="text/javascript"></script>
    <script src="./dice.js?v=0.2.6" type="text/javascript"></script>
    <script src="./admin.js?v=0.2.6" type="text/javascript"></script>
</html>