JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<!DOCTYPE html>
<html>
    <body>

        <div style="width:40%;" id="narrative"></div>

        <div id="actions" style="top:100px; right:100px; position:fixed;">
            <label>Actions</label>
            <button id="wakeup" type="button" class="hidden" onclick="WakeUp()" >Wake Up</button>
        </div>

        <div id="nav" style="top:200px; right:100px; position:fixed;">
            <label>Navigate</label>
        </div>

        <div id="inventory" style="top:300px; right:100px; position:fixed;">
            <label>Inventory</label>
        </div>

        <div id="globalMenu" style="top:400px; right:100px; position:fixed;">
            <label>Menu</label>
        </div>
            
    </body>

</html>

CSS

.hidden {
            display: none;
        }
        
        .visible {
            z-index: -1;
        }

JavaScript

gameRooms = {
    Graveyard: {
        description: 'The graveyard is small, enclosed by tall walls. The tombstones are weathered and worn. The names are hard to make out. An abandoned shed sits in one corner. A closed door leads into the castle.',
        name: "Graveyard",
        navButtons: [
            {
                name: "Go Inside",
                state: "locked",
                func: function () {
                    ChangeRoom( gameRooms.MainHall );
                },
                id: "tomainhall",
            },
            {
                name: "Enter Shed",
                state: "unlocked",
                func: function () {
                    ChangeRoom(gameRooms.Shed);
                },
                id: "toshed",
            }
        ],

        actionButtons: [
            {
                name: "Look Around",
                func: function () { LookAround() },
                id: "lookaround",
            },
            {
                name: "Check Empty Grave",
                func: function () { CheckContents( gameInteractables.EmptyGrave ) },
                id: "checkemptygrave",
            },
            {
                name: "Check Other Graves",
                func: function () { CheckContents( gameInteractables.OtherGraves ) },
                id: "checkothergraves",
            },
            {
                name: "Check Back Door",
                func: function () { CheckContents( gameInteractables.BackDoor ) },
                id: "checkbackdoor",
            },
        ]
    },

    Shed: {
        description: 'You are in an old shed. Gravekeeping and gardening tools lay about. A Chest sits in the corner.',
        name: "Shed",
        navButtons: [
            {
                name: "Go Outside",
                state: "locked",
                func: function () {
                    ChangeRoom( gameRooms.Graveyard );
                },
                id: "tograveyard",
            },
        ],

    ...