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 {
margin: 0;
height: 100%;
height: 100vh;
overflow: hidden;
position: relative;
position: relative;
}
body:hover {
cursor: default;
@ -10,13 +10,6 @@ body:hover {
canvas.main_canvas {
position: absolute;
}
.hud {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.hud_item {
background-color: #555555aa;
margin: 8px;
@ -24,6 +17,15 @@ canvas.main_canvas {
border-radius: 4px;
color: white;
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 {
width: 400px;

21
game.html
View File

@ -7,17 +7,18 @@
</head>
<body onload="init()">
<canvas id="main_canvas" class="main_canvas" width="700" height="700" autofocus></canvas>
<div class="hud">
<div class="hud_item">
<div class="bar red_bar">
<div id="health_bar"></div>
</div>
<br>
<div class="bar green_bar">
<div id="energy_bar"></div>
</div>
<div class="hud_item">
<div class="bar red_bar">
<div id="health_bar"></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>
<script src="script/engine.js"></script>
<script src="script/client.js"></script>