game.html

<figure id="game-container">
  <canvas id="game" tabindex="1" width="660" height="440" />
  <div id="status-bar"></div>
  <div id="health-bar"></div>
  <div id="health-text"></div>
  <div id="inventory-use" class="overlay"></div>
  <div id="inventory-drop" class="overlay"></div>
  <div id="upgrade" class="overlay"></div>
  <div id="targeting" class="overlay"></div>
  <div id="overlay-character" class="overlay"></div>
  <div id="messages"></div>
  <div id="message-overlay"></div>
  <div id="game-instructions"></div>
  <div id="focus-instructions">Click game for keyboard focus</div>
</figure>

<style>
    * {
        box-sizing: border-box;
    }
    
    figure#game-container {
        text-align: left;
        display: grid;
        justify-content: center;
        grid-template-columns: 1fr;
        grid-template-areas: "game" "status-bar" "message-area" "instructions";
    }

    #game {
        grid-area: game;
        z-index: 1;
        display: block;
        background: hsl(250, 5%, 35%);
        outline: 1px dotted hsla(150, 50%, 50%, 0.5);
        opacity: 0.7;
    }
    #game:focus {
        outline: none;
        opacity: 1.0;
    }
    
    .overlay {
        grid-area: game;
        z-index: 0;
        height: auto;
        align-self: center;
        padding: 0.5em;
        line-height: 1.0;
        font-family: monospace;
        font-size: 0.8em;
        opacity: 0;
    }
    .overlay.visible {
        z-index: 2;
        pointer-events: none;
        box-shadow: 0 1px 4px -3px white;
        opacity: 1;
    }
    .overlay ul {
        column-count: 2;
        column-gap: 1em;
        column-fill: balance;
    }
    .overlay li {
        list-style-type: none;
    }
    .overlay kbd {
        display: inline-block;
        border: 1px solid hsla(0, 0%, 0%, 0.5);
        padding: 2px 4px;
        font-weight: normal;
    }

    #game-instructions {
        height: 2em;
        grid-area: instructions;
        text-align: center;
    }
    #game-instructions.move {
        background: hsl(240, 10%, 90%);
    }
    #game-instructions.room {
        background: hsl(330, 30%, 80%);
    }
    #game-instructions.wall {
        background: hsl(120, 30%, 80%);
    }
    #game-instructions kbd {
        font-weight: bold;
        background: hsl(150, 0%, 100%);
        color: green;
        border: 2px solid hsla(0, 0%, 0%, 0.2);
        padding: 0 4px;
        margin: 0;
    }
        
    #focus-instructions {
        height: 2em;
        padding: 0 1em;
        grid-area: game;
        text-align: center;
        border: 1px solid black;
        border-radius: 1em;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        background: hsl(60, 100%, 90%);
        color: black;
        opacity: 0.0;
        transition: all 0.2s;
        pointer-events: none;
    }
    #focus-instructions.visible {
        opacity: 0.9;
        z-index: 1;
        justify-self: center;
        align-self: center;
    }

    #messages, #message-overlay {
        grid-area: message-area;
        width: 100%;
        height: 8em;
        font-family: var(--monospace), monospace;
        font-size: 0.8em;
        line-height: 1.0;
    }
    #messages {
        padding: 0.5em 1em;
        background: hsl(250, 5%, 15%);
        color: white;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; /* firefox supports the standard */
    }
    #messages::-webkit-scrollbar { /* but chrome, safari do not, naturally */
        width: 0;
    }
    #messages > div {
        margin-left: 1em;
        margin-bottom: 0.25em;
        text-indent: -1em;
    }
    #messages > div.welcome       { color: hsl(300,  50%,  70%); }
    #messages > div.info               { color: hsl(2200,  10%,  80%); }
    #messages > div.player-attack { color: hsl( 30,  10%,  80%); }
    #messages > div.player-die    { color: hsl(  0, 100%,  50%); }
    #messages > div.enemy-attack  { color: hsl(  0,  50%,  80%); }
    #messages > div.enemy-die     { color: hsl(150,  30%,  70%); }
    #messages > div.warning       { color: hsl( 60,  50%,  70%); }
    #messages > div.error         { color: hsl(  0,  75%,  50%); }
    #messages > div.pick-up       { color: hsl(220,  50%,  80%); }
    #messages > div.healing       { color: hsl(150,  50%,  70%); }

    #message-overlay {
        z-index: 2; /* needed for chrome but not firefox or safari; may be a browser bug */
        height: 0%;
        padding: 0.5em 1em;
        opacity: 0.0;
        pointer-events: none; /* so scroll events go down to the #messages div */
        white-space: pre-wrap;
        background: black;
        color: white;
        transition: all 0.3s;
    }
    #message-overlay.visible {
        height: 100%;
        opacity: 1.0;
        background: hsl(200, 50%, 30%);
        transition: all 0s;
    }

    #status-bar {
        grid-area: status-bar;
        width: 100%;
        background: hsl(0, 50%, 20%);
    }
</style>
<script defer="defer" src="build/_bundle.js"></script>