JSFiddle - React, Tailwind, and code Playground

by Tony Yem

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>MacroG0D - My first game</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ='https://jsfiddle.net/MacroG0D/9g1130pm/2/show_js' type="text/javascript"> </script>
</head>
<body>
<div id = "storyBoard">
<h1> Star Wars - Healing <br>The Breach:<hr></h1>

<p class="intro">A long time ago, in a galaxy far, far away</p>
<p class="intro2"> Two strange friends started they journey against the evil to save the galaxy.<br>
 All what they had, was the willing to save the world and their great friendship....<br>
 .... </p><br>
<p> Are you ready to start this journey? </p>
</div>
<input type="text" id ="myInput" placeholder="Type the command here" name="myInput" autofocus autocomplete='off'/>
<button id="btn" type="submit"> Enter </button>
</body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;

}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
    margin-top: 2%;
    margin-left: 5em;
    margin-bottom: 2%;
    background-color: #070900;
    background-image: url(http://a.dilcdn.com/bl/wp-content/uploads/sites/6/2015/10/tfa_poster_wide_header-1536x864-959818851016.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150%;


}

h1{
    text-align: center;
    color: #f3fd4e;

}


.intro{
    text-align:center;
    color: #00d2ff;
    font-size: 50px;
}

.intro2{
    text-align:center;
    font-size: 30px;
}

#storyBoard{
    border: .1em solid #f0ff00  ;
    background-color: #000000 ;
    margin-top: 5%;
    margin-left: 4%;
    height: 80%;
    width: 90%;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 2em;
    color: #f3fd4e;
    opacity: .95;
    overflow:auto;
}

#myInput{
    border: .1em solid #adae32;
    background-color: black;
    margin-left: 4%;
    width: 90%;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 3em;

    color: white;

}

#btn{
    visibility: hidden;
    /*font-size: 50px;*/
    background-color: #0E1200;
    width: 3em;
    color: #feff6c;



}

p span {
    color: #323232;
}

#storyBoard{
    scrollbar-face-color: #FFFFFF;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

/* Let's get this party started */
#storyBoard::-webkit-scrollbar {
    width: 12px;
}

/* Track */
#storyBoard::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
#storyBoard::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8);
  ...

JavaScript

$(document).ready(function(){
var machine = new Object();
machine.name = "The machine";

// Creating a Person constructor - with this constuctor we can made a friend or an enemy:
function Person(name, age, race, hp, str, resist, force, friendship, credits, aClass,balance){
/*default*/this.alive = true;
/*1*/      this.name = name;
/*2*/      this.age = age;
/*3*/      this.race = race;
/*4*/      this.hp = hp;
/*5*/      this.str = str;
/*6*/      this.resist = resist;
/**/     //this.socSkl = socSkl; - instead of "socSkl", added attribute "force".
/*7*/      this.force = force;
/*8*/      this.friendship = friendship;
/*9*/      this.credits = credits;
/*10*/     this.aClass = "Jedi";
/*11*/     this.balance = balance;


};

var anonymous = new Object();
anonymous.name = "An anonymous";
// Creating objects from a Person class:
var tony = new Person ("<span style ='color:#f5f5f5;'> Tony, The Creator</span>", 26, "Human",0,0,0,0,50,-1000,"Developer",0);
var phantomorph = new Person("Phantomorph",26,"Cyborg",5,2,6,3,5,0, "Jedi",0);
var disogr = new Person("Disogr",30,"dark Elf",5,1,6,6,5,0, "Jedi",5);
var luke = new Person("Master Jedi, Luke",89,"human",50,250,500,50,7,9000,"Master Jedi",50);
var dendimon = new Person("Dendimon", 28, "unknow",15,2,4,6,4,5,"Sith",-2);
dendimon.secretKey = "May the force be with you";

// This is the user's variable that shows which main character was choosed by user(user value will be defined via selectChar() function):
var user = anonymous;
var fellow;
var userName = function(){
anonymous.name = prompt("Please, enter your personal name", "");
if (anonymous.name === ""){
    anonymous.name = "An anonymous";
}
};


// This is a showText function, it will show needed text on the story board. It takes in two parameters first is a person object and second is a text.
var showText = function(who, str){
  if(str !== ""){
    $("#storyBoard").append("<p><span style='color:#323232;'>" +who.name + ": " + "</span>" + str+"</p>");





/*When a...