diff options
| author | jak1 <mike.wollmann@gmail.com> | 2021-08-01 22:42:33 +0200 |
|---|---|---|
| committer | jak1 <mike.wollmann@gmail.com> | 2021-08-01 22:42:33 +0200 |
| commit | 5805ec2e02a5e014c6abbf53c1bac7eb838b74d5 (patch) | |
| tree | 5069e3b0159866e113d75b76200c7dd2fe128e5e | |
| parent | e097415b9561f2b480c3976dd892d56e5b6b9aab (diff) | |
| download | thepixelworld-5805ec2e02a5e014c6abbf53c1bac7eb838b74d5.tar.gz thepixelworld-5805ec2e02a5e014c6abbf53c1bac7eb838b74d5.tar.bz2 thepixelworld-5805ec2e02a5e014c6abbf53c1bac7eb838b74d5.tar.xz thepixelworld-5805ec2e02a5e014c6abbf53c1bac7eb838b74d5.zip | |
added basic html UI
| -rw-r--r-- | client/index.html | 55 |
1 files 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> |