ColormaticStudios/runic-client
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reconfigure HUD positioning and add a test element to the HUD

Browse Source
This commit is contained in:
zakarya
2023-03-15 12:39:57 -07:00
parent da67f0dc54
commit 8136b7625c
2 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/game.css
View File

@ -1,8 +1,8 @@
body { body {
margin: 0; margin: 0;
height: 100%; height: 100vh;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
body:hover { body:hover {
cursor: default; cursor: default;
@ -10,13 +10,6 @@ body:hover {
canvas.main_canvas { canvas.main_canvas {
position: absolute; position: absolute;
} }
.hud {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.hud_item { .hud_item {
background-color: #555555aa; background-color: #555555aa;
margin: 8px; margin: 8px;
@ -24,6 +17,15 @@ canvas.main_canvas {
border-radius: 4px; border-radius: 4px;
color: white; color: white;
font-family: roboto, sans-serif; font-family: roboto, sans-serif;
width: fit-content;
position: absolute;
display: inline-block;
}
.hud_item.bottom {
bottom: 0px;
}
.hud_item.right {
right: 0px;
} }
div.bar { div.bar {
width: 400px; width: 400px;

21
game.html
View File

@ -7,17 +7,18 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<canvas id="main_canvas" class="main_canvas" width="700" height="700" autofocus></canvas> <canvas id="main_canvas" class="main_canvas" width="700" height="700" autofocus></canvas>
<div class="hud"> <div class="hud_item">
<div class="hud_item"> <div class="bar red_bar">
<div class="bar red_bar"> <div id="health_bar"></div>
<div id="health_bar"></div>
</div>
<br>
<div class="bar green_bar">
<div id="energy_bar"></div>
</div>
</div> </div>
<div class="hud_item" id="player_username">Runic alpha</div> <br>
<div class="bar green_bar">
<div id="energy_bar"></div>
</div>
</div>
<div class="hud_item right" id="player_username">Runic alpha</div>
<div class="hud_item bottom right">
this is a test
</div> </div>
<script src="script/engine.js"></script> <script src="script/engine.js"></script>
<script src="script/client.js"></script> <script src="script/client.js"></script>