From 5805ec2e02a5e014c6abbf53c1bac7eb838b74d5 Mon Sep 17 00:00:00 2001
From: jak1 <mike.wollmann@gmail.com>
Date: Sun, 1 Aug 2021 22:42:33 +0200
Subject: added basic html UI

---
 client/index.html | 55 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/client/index.html b/client/index.html
index fe27064..1c20e3d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -44,18 +44,51 @@
 
   <!-- Game -->
   <div id="gameDiv" style="display:none;">
-    <canvas id="ctx" width="500" height="500" tabindex="1" style="border:1px solid #000000;"></canvas>
-    <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;">
-        <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)" >WORLD</div>
-        <!-- TODO only show up on permission to use the GM tab. 
-        <div class="chat-tab" onclick="setActiveChatTab('gm', this)"> GM</div> -->
-        <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div>
-        <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div>
+    <div id="game">
+      <canvas id="ctx" width="500" height="500" tabindex="1" style="position:absolute; border:1px solid #000000;"></canvas>
+      <div id="ui" tabindex="2" style="position:absolute; width:502px; height:502px; display:none;">
+        <div id="ui-statusbar" style="position:absolute; border:1px solid #000000; top:50px; left:0px; width:450px; height: 40px;">
+        Status Bar
+        </div>
+        <div id="ui-navigation" style="position:absolute; border:1px solid #000000; top:0px; left:0px; width:450px; height: 40px;">
+        Navigation Bar
+        </div>
+        <div id="ui-menu" style="position:absolute; border:1px solid #000000; top:0px; right:0px; width:40px; height: 40px;">
+        Menu
+        </div>
+        <div id="ui-shortcuts" style="position:absolute; border:1px solid #000000; bottom:0px; right:0px; height:450px; width: 40px;">
+        Shortcut Bar
+        </div>
+        <div id="ui-hook" style="position:absolute; border:1px solid #000000; bottom:210px; left:0px; width:240px; height: 190px;">
+        Storage/NPC(HOOKS)
+        </div>
+        <div id="ui-inventory" style="position:absolute; border:1px solid #000000; bottom:0px; left:0px; width:240px; height: 200px;">
+        Inventory
+        </div>
+        <div id="ui-equip" style="position:absolute; border:1px solid #000000; bottom:0px; left:250px; width:100px; height: 200px;">
+        Equip
+        </div>
+        <div id="ui-spells-quests" style="position:absolute; border:1px solid #000000; bottom:210px; left:250px; width:100px; height: 190px;">
+        Spells/<br>Quests
+        </div>
+        <div id="ui-undefined" style="position:absolute; border:1px solid #000000; bottom:0px; left:360px; width:90px; height: 400px;">
+        ???
+        </div>
+      </div>
+    </div>
+    <div id="chat" style="margin-top:520px;">
+      <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;">
+          <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)" >WORLD</div>
+          <!-- TODO only show up on permission to use the GM tab. 
+          <div class="chat-tab" onclick="setActiveChatTab('gm', this)"> GM</div> -->
+          <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div>
+          <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div>
+        </div>
+        <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div>
+        <form id="chat-form">
+          <input id="chat-input" type="text" style="width:500px;"></input>
+        </form>
       </div>
-      <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div>
-      <form id="chat-form">
-        <input id="chat-input" type="text" style="width:500px;"></input>
-      </form>
     </div>
   </div> 
 
-- 
cgit v1.2.3-70-g09d2