101 lines
No EOL
4.8 KiB
HTML
101 lines
No EOL
4.8 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()">
|
|
<!-- 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 style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 5;">
|
|
floating<br>stuff
|
|
</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: 50%; 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;">
|
|
|
|
</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
|
|
style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row;">
|
|
<button style="background-color: #ffffd6;"><b>s</b></button>
|
|
<button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
|
|
</div>
|
|
<div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
|
|
<img src="https://rustystriker.dev/molly.jpg" height="200%">
|
|
</div>
|
|
</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 onclick="document.getElementById('initiative-tracker').style.display = 'none';"
|
|
style="height: fit-content; align-self: center; background-color: transparent; font-size: 20px; border: 0;">
|
|
X
|
|
</button>
|
|
</div>
|
|
<hr style="width: 100%; margin: 0px; align-self: center;" />
|
|
<div>
|
|
aaaa
|
|
</div>
|
|
<div>
|
|
bbbb
|
|
</div>
|
|
<div>
|
|
cccc
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |