| @@ -1,6 +1,9 @@ | |||||
| function initGame(game, state) { | function initGame(game, state) { | ||||
| state.info = {}; | state.info = {}; | ||||
| state.info.time = 60 * 60 * 9; | state.info.time = 60 * 60 * 9; | ||||
| state.player.stats = {}; | |||||
| state.player.stats.health = 100; | |||||
| } | } | ||||
| // TODO: format string this lol | // TODO: format string this lol | ||||
| @@ -24,3 +27,9 @@ function updateWorldInfo(state) { | |||||
| timeInfo.textContent = "Time: " + renderTime(state.info.time); | timeInfo.textContent = "Time: " + renderTime(state.info.time); | ||||
| } | } | ||||
| function updatePlayerInfo(state) { | |||||
| const health = document.querySelector("#player-info-health"); | |||||
| health.textContent = "Health: " + state.player.stats.health; | |||||
| } | |||||
| @@ -42,12 +42,17 @@ html, body { | |||||
| flex: 5; | flex: 5; | ||||
| } | } | ||||
| #self-info { | |||||
| #player-info { | |||||
| margin: 10px; | margin: 10px; | ||||
| background: #222; | background: #222; | ||||
| flex: 5; | flex: 5; | ||||
| } | } | ||||
| .info-header { | |||||
| font-size: 36px; | |||||
| text-align: center; | |||||
| } | |||||
| #control-area { | #control-area { | ||||
| display: flex; | display: flex; | ||||
| min-height: 40%; | min-height: 40%; | ||||
| @@ -25,15 +25,15 @@ | |||||
| this is the menu, eventually | this is the menu, eventually | ||||
| </div> | </div> | ||||
| <div id="world-info"> | <div id="world-info"> | ||||
| this is world info | |||||
| <div class="info-header" id="world-info-header">World</div> | |||||
| <div id="world-info-time">Time to get a watch!</div> | <div id="world-info-time">Time to get a watch!</div> | ||||
| </div> | </div> | ||||
| <div id="self-info"> | |||||
| this is your own info | |||||
| <div id="player-info"> | |||||
| <div class="info-header" id="player-info-header">Player</div> | |||||
| <div id="player-info-health"></div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="log"> | <div id="log"> | ||||
| this is the log | |||||
| </div> | </div> | ||||
| <div class="sidebar" id="area-info"> | <div class="sidebar" id="area-info"> | ||||
| <div id="area-name"></div> | <div id="area-name"></div> | ||||
| @@ -31,6 +31,7 @@ function print(lines) { | |||||
| function refresh() { | function refresh() { | ||||
| updateRoom(state); | updateRoom(state); | ||||
| updateWorldInfo(state); | updateWorldInfo(state); | ||||
| updatePlayerInfo(state); | |||||
| } | } | ||||
| // setup the game | // setup the game | ||||
| @@ -57,7 +57,7 @@ function moveToRoom(src, exit, dest, state) { | |||||
| state.world[dest].move(state.world[dest], state); | state.world[dest].move(state.world[dest], state); | ||||
| state.player.location = dest; | state.player.location = dest; | ||||
| updateRoom(state); | |||||
| refresh(); | |||||
| } | } | ||||
| function goToRoom(dest, state) { | function goToRoom(dest, state) { | ||||
| @@ -72,7 +72,8 @@ function goToRoom(dest, state) { | |||||
| } | } | ||||
| state.player.location = dest; | state.player.location = dest; | ||||
| updateRoom(state); | |||||
| refresh(); | |||||
| } | } | ||||
| function updateRoom(state) { | function updateRoom(state) { | ||||