181 lines
No EOL
9.9 KiB
HTML
181 lines
No EOL
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="./style.css">
|
|
<script src="./tavern.js"></script>
|
|
<script src="./app.js"></script>
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<!-- GAME SERVER CLOSED PAGE -->
|
|
<div id="game-closed-screen" style="display: none; justify-content: center; width: 100%; height: 100%;">
|
|
<div style="display: flex; justify-content: center; flex-direction: column; gap: 4px;">
|
|
<h1>Disconnected from game server</h1>
|
|
<p>
|
|
This could be either because the game server got shutdown,
|
|
internet is out,
|
|
or you got kicked for some reason
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- LOGIN PAGE -->
|
|
<div id="login-screen" style="display: flex; justify-content: center; width: 100%; height: 100%;">
|
|
<div style="display: flex; justify-content: center; flex-direction: column; gap: 4px;">
|
|
<input type="text" id="login-username" placeholder="Username...">
|
|
<input type="password" id="login-pass" placeholder="Password...">
|
|
<div></div>
|
|
<button onclick="onLoginClick()">
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- GAME VIEW PAGE -->
|
|
<div id="game" style="display: none; width: 100%; height: 100%;">
|
|
<div id="side-panel">
|
|
<div style="display: flex; flex-direction: column; width: calc(100% - 15px); height: 100%;">
|
|
<div id="chat-history">
|
|
</div>
|
|
<div id="chat-input" style="width: 100%; flex-grow: 1; margin: 10px 0; display:flex;">
|
|
<textarea id="newmsg-content" placeholder="Message..." spellcheck="true"
|
|
style="resize:none; height: auto; flex-grow: 1; min-width:0px;"></textarea>
|
|
<!-- it looks better without the button :( -->
|
|
<!-- <button style="height: fit-content; align-self: center; margin: 0 4px;" onclick="sendChatMessage()">Send</button> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="game-view"
|
|
style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;">
|
|
<div id="scene-list">
|
|
</div>
|
|
<div id="dice-roll-popup"
|
|
style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
|
|
<div style="display:flex; width: auto; justify-content: center; flex-direction: column;">
|
|
<div
|
|
style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
|
|
<h3 id="dice-roll-title" style="align-self: center;">
|
|
THIS IS THE ROLL DISPLAY
|
|
</h3>
|
|
<div id="dice-roll-holder"
|
|
style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px;">
|
|
|
|
</div>
|
|
<div style="display: flex;">
|
|
<button style="flex-grow: 1; margin: 4px;"
|
|
onclick="document.getElementById('dice-roll-popup').style.display = 'none';">Cancel</button>
|
|
<button style="flex-grow: 1; margin: 4px;" onclick="rollPopup()">Roll</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="create-scene-popup"
|
|
style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
|
|
<div style="display:flex; width: auto; justify-content: center; flex-direction: column;">
|
|
<div
|
|
style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
|
|
<h3 id="dice-roll-title" style="align-self: center;">
|
|
Create scene
|
|
</h3>
|
|
<div style="display: grid; grid-template-columns: auto auto; gap: 16px; margin-top: 8px;">
|
|
<p>Title:</p>
|
|
<input type="text" id="create-scene-title">
|
|
<button
|
|
onclick="document.getElementById('create-scene-popup').style.display = 'none'">Cancel</button>
|
|
<button onclick="createSceneAndHidePopup()">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row; gap: 4px;">
|
|
<button style="background-color: #ffffd6;" onclick="showHideDiv('settings-window')"><b>s</b></button>
|
|
<button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
|
|
<button id="admin-panel-button" style="background-color: #ffffd6;"
|
|
onclick="showHideDiv('admin-panel')">Admin</button>
|
|
</div>
|
|
<div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
|
|
<img id="map-background" onload="updateGrid()" onerror="alert('Failed loading map')">
|
|
<svg id="map-grid" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; left: 0px">
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- FLOATY (game view) WINDOWS -->
|
|
<div id="msg-context-menu" class="chat-message">
|
|
<ul>
|
|
<li>Delete (TODO)</li>
|
|
</ul>
|
|
</div>
|
|
<div id="initiative-tracker" style="position: absolute; background-color: #ffffd6; color:black; display: none;
|
|
flex-direction: column; top: 40px; right: 8px; padding: 8px; border-radius: 8px;">
|
|
<div style="min-width: 150px; user-select: none; display: flex;"
|
|
onmousedown="onMoveableDivMouseDown(event, 'initiative-tracker');">
|
|
<h3 style="flex-grow: 1; margin: 8px 0;">Initiative</h3>
|
|
<!-- it looks bad, for now just click the 'open initiative tracker' button again -->
|
|
<button class="exit-button"
|
|
onclick="document.getElementById('initiative-tracker').style.display = 'none';">
|
|
X
|
|
</button>
|
|
</div>
|
|
<hr style="width: 100%; margin: 0px; align-self: center;" />
|
|
<div>
|
|
aaaa
|
|
</div>
|
|
<div>
|
|
bbbb
|
|
</div>
|
|
<div>
|
|
cccc
|
|
</div>
|
|
</div>
|
|
<div id="settings-window" style="position: absolute; background-color: #ffffd6; color:black; display: none;
|
|
flex-direction: column; top: 40px; right: 8px; padding: 8px; border-radius: 8px;">
|
|
<div style="min-width: 150px; user-select: none; display: flex;"
|
|
onmousedown="onMoveableDivMouseDown(event, 'settings-window')">
|
|
<h3 style="flex-grow: 1; margin: 8px 0;">Settings</h3>
|
|
<!-- it looks bad, for now just click the 'open initiative tracker' button again -->
|
|
<button class="exit-button"
|
|
onclick="document.getElementById('settings-window').style.display = 'none';">
|
|
X
|
|
</button>
|
|
</div>
|
|
<hr style="width: 100%; margin: 0px; align-self: center;" />
|
|
<div style="display: grid; grid-template-columns: auto auto; gap: 16px; margin-top: 8px;">
|
|
<div>Grid width</div>
|
|
<input id="settings-grid-width" type="number" onchange="updateGridWidth(event.target.value)"
|
|
style="width: 55px;">
|
|
<div>Grid color</div>
|
|
<input id="settings-grid-color" type="color" onchange="updateGridColor(event.target.value)">
|
|
<div>Grid type</div>
|
|
<select id="settings-grid-type" onchange="updateGridDashType(event.target.selectedIndex)"
|
|
style="width: 140px;">
|
|
<option value="0" selected>Solid</option>
|
|
<option value="1">Cross</option>
|
|
<option value="2">Hollow cross</option>
|
|
<option value="3">Large hollow cross</option>
|
|
<option value="4">Squire</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="admin-panel" style="position: absolute; background-color: #ffffd6; color:black; display: none;
|
|
flex-direction: column; top: 40px; right: 8px; padding: 8px; border-radius: 8px;">
|
|
<div style="min-width: 150px; user-select: none; display: flex;"
|
|
onmousedown="onMoveableDivMouseDown(event, 'admin-panel')">
|
|
<h3 style="flex-grow: 1; margin: 8px 0;">Admin</h3>
|
|
<!-- it looks bad, for now just click the 'open initiative tracker' button again -->
|
|
<button class="exit-button" onclick="document.getElementById('admin-panel').style.display = 'none';">
|
|
X
|
|
</button>
|
|
</div>
|
|
<hr style="width: 100%; margin: 0px; align-self: center;" />
|
|
<div style="display: grid; grid-template-columns: auto auto; gap: 16px; margin-top: 8px;">
|
|
<button onclick="tavern.save()">Save</button>
|
|
<button onclick="tavern.shutdown()">Shutdown</button>
|
|
<select id="admin-kick-name"></select>
|
|
<button onclick="tavern.kick(document.getElementById('admin-kick-name').value)">Kick</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |