JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stage">
  <h1>Arena X</h1>
  <h3>The ultimate fighting tournament</h3>
  <img src="" width="300" height="267">
  <p id="output"></p>
  <input id="input" type="text"> 
  <button>enter</button> 
  <button>attack</button> 
  <button>Special Attack</button>
</div>

CSS

button
{
    font-family: Helvetica;
    font-size: 20px;
    color: #00ff00;
    padding: 10px 20px;
    border: 2px solid #000;
    cursor: pointer;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    background:-webkit-linear-gradient(top, #a3a3a3, #000);
    background:-moz-linear-gradient(top, #a3a3a3, #000);
    background: linear-gradient(top, #a3a3a3, #000);
}
button:hover
{
    background: -webkit-linear-gradient(top, #acc7a3, #506651);
    background: -moz-linear-gradient(top, #acc7a3, #506651);
    background: linear-gradient(top, #acc7a3, #506651);
}

button: active
{
    background: -webkit-linear-gradient(top, #858565, #c5c9a9);
    background: -moz-linear-gradient(top, #858565, #c5c9a9);
    background: linear-gradient(top, #858565, #c5c9a9);
}

JavaScript

//Create the map
var map = [];

map[0] = "Fans are packed into the arena";
map[1]= "A bouncer is blocking the exit";
map[2]= "Maybe your fans have some good advice they'd like to share?";
map[3]= "You can talk to the ref, if you'd like";
map[4]= "This is the fighting arena";
map[5]= "I'm your biggest fan!";
map[6]= "A row of bleachers";
map[7]= "An oddly familiar bouncer is blocking the exit";
map[8]= "A fan is sitting on the bleachers";

//Set the player's start location
var mapLocation = 4;

//Set the images
var images = [];

images[0] = "Bleach1.png";
images[1] = "Door1.png";
images[2] = "Bleach2.png";
images[3] = "ref.png";
images[4] = "";
images[5] = "girl.png";
images[6] = "Bleach3.png";
images[7] = "Door2.png";
images[8] = "Bleach4.png";

//Set the blocked path messages
var blockedPathMessages = [];

blockedPathMessages[0] = "Talk to fans after the match!";
blockedPathMessages[1] = "Sorry buddy, you can't leave.";
blockedPathMessages[2] = "Talk to fans after the match!";
blockedPathMessages[3] = "Warm-up later";
blockedPathMessages[4] = "Wait until the announcer calls your name to fight";
blockedPathMessages[5] = "Can't go here while opponent is warming up!";
blockedPathMessages[6] = "Talk to fans after the match!";
blockedPathMessages[7] = "Sorry buddy, you can't leave.";
blockedPathMessages[8] = "Talk to fans after the match!";

//Set the blocked path messages
var helpMessages = [];

helpMessages[0] = "Maybe your fans will give you items or advice.";
helpMessages[1] = "";
helpMessages[2] = "Maybe your fans will give you items or advice.";
helpMessages[3] = "Make sure you have your weapon ready to go.";
helpMessages[4] = "Fight by using your weapon";
helpMessages[5] = "";
helpMessages[6] = "Maybe your fans will give you items or advice.";
helpMessages[7] = "";
helpMessages[8] = "Maybe your fans will give you items or advice.";

//Create the objects and set their locations
var items = ["water", "food", "dragon blade"];
var itemLocations = [6, 2, 8];

//An...