initiative tracker minor revamp
This commit is contained in:
parent
69d6ea2742
commit
2f95b1159d
GPG key ID:
87E4D691632DFF15
1 changed files with 88 additions and 76 deletions
|
|
@ -1,89 +1,101 @@
|
|||
<!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;" >
|
||||
<input type="text" id="login-username" placeholder="Username..." >
|
||||
<input type="password" id="login-pass" placeholder="Password..." >
|
||||
<button onclick="onLoginClick()">
|
||||
Login
|
||||
</button>
|
||||
|
||||
<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>
|
||||
<!-- 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 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="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 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 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 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;">
|
||||
<img src="https://rustystriker.dev/molly.jpg" height="200%" >
|
||||
</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>
|
||||
<!-- FLOATY (game view) WINDOWS -->
|
||||
<div id="msg-context-menu" class="chat-message">
|
||||
<ul>
|
||||
<li>Delete (TODO)</li>
|
||||
</ul>
|
||||
</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>
|
||||
<div id="initiative-tracker" style="position: absolute; background-color: #ffffd6; color:black; display: none; flex-direction: column; top: 40px; right: 8px">
|
||||
<div style="background-color: black; color:#ffffd6; margin-top: 0px; margin-bottom: 8px; padding: 0 4px; min-width: 150px; user-select: none; display: flex;"
|
||||
onmousedown="onMoveableDivMouseDown(event, 'initiative-tracker')">
|
||||
<h3 style="flex-grow: 1;">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; color:#ffffd6; font-size: 20px; border: 0;">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
aaaa
|
||||
</div>
|
||||
<div>
|
||||
bbbb
|
||||
</div>
|
||||
<div>
|
||||
cccc
|
||||
</div>
|
||||
<hr style="width: 100%; margin: 0px; align-self: center;" />
|
||||
<div>
|
||||
aaaa
|
||||
</div>
|
||||
</body>
|
||||
<div>
|
||||
bbbb
|
||||
</div>
|
||||
<div>
|
||||
cccc
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue