JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<div>
  <div>
    <div class="container" id="ItemEditor">
      <h4>Item Information</h4>
      <div class="innerContainer">

        <div class="containerItem">
          <label for="ItemName">Name:</label>
          <input type="text" id="ItemName" placeholder="Enter the name" />
        </div>

        <div class="containerItem">
          <label for="ItemType">Type:</label>
          <select id="ItemType">
            <option value="ItemType.Material">Material</option>
            <option value="ItemType.Gear">Gear</option>
            <option value="ItemTypePotion"> Potion</option>
            <option value="ItemType.Food">Food</option>
          </select>
        </div>

        <div class="containerItem">
          <label for="ItemQuantity">quantity:</label>
          <input type="text" id="ItemQuantity" placeholder="Enter the quantity" />
        </div>

        <div class="containerItem">
          <label for="ItemWeight">weight:</label>
          <input type="text" id="ItemWeight" placeholder="Enter the weight" />
        </div>

        <div class="containerItem">
          <label for="ItemPrice">price:</label>
          <input type="text" id="ItemPrice" placeholder="Enter the price" />
        </div>

        <div class="containerItem">
          <label for="ItemStackable">Stackable:</label>
          <input type="text" id="ItemStackable" placeholder="Enter the stackable" />
        </div>

        <div class="containerItem">
          <label for="ItemMaxQuantity">Max Quantity:</label>
          <input type="text" id="ItemMaxQuantity" placeholder="Enter the maxQuantity" />
        </div>


      </div >
      <div class="innerContainer">
      
      </div>
      <button>
        Create button
      </button>
    </div>

    <div class="container" id="MaterialEditor">
      <h4>Material Information</h4>
      <div class="innerContainer">
        <div class="containerItem">
          <label for="text">Name:</label>
          <input type="text"...

CSS

.container {
  border: 1px solid black;
  padding: 10px;
  min-height: 200px;
  margin-bottom: 10px;
}

div {}

.innerContainer {
  border: 1px solid red;
  margin: 8px;
  min-height: 150px;
}

.containerItem {
  border: 1px solid orange;
  margin: 6px;
}

TypeScript

declare var map_json;
interface mapTile {
  b_t: string;
  b_i: number;
  i: number;
  j: number;
}

interface IBase {
  walkable: boolean;
}

interface ICharacter {
  walkable: boolean;
  name: string;
  hp: number;
  lvl: number;
  //Change to IItem instead of string
  loot: Array<string>;
  attack: number;
  defense: number;
  aggressive: boolean;
  type: CharacterType;
}

interface INpc extends ICharacter {
  inventory: Array<IItem>;
}

interface IItem {
  type: ItemType;
  quantity: number;
  name: string;
  weight: number;
  price: number;
  stackable: boolean;
  maxQuantity: number;
}

interface IWeapon {
  range: number;
}
interface IMaterial extends IItem {
  materialType: MaterialType;
  quantity: number;
  name: string;
}
interface IPotion extends IItem {
  healthModifier: number;
  attackModifier: number;
  defenceModiefier: number;
}

//TODO 1)
interface IMaterial extends IItem {
  stateOfMatter: boolean;
}
//TODO 2) I HAVE to CREATe BOOLEAN FOR MATERIAL AND CONTAINER (FOR LIQUIDS = Bottle, else = Backpack)
interface IGear extends IItem {
  gearType: GearType;
  healthModifier: number;
  attackModifier: number;
  defenceModiefier: number;
}

enum CharacterType {
  Npc,
  Monster,
  Boss,
  Player,
}

// TODO 0)
enum ItemType {
  Gear,
  Potion,
  Material,
  Food,
}
enum MaterialType {
  Metal,
  Crystal,
  Wood,
  Water,
  Fish,
  Crops,
}
enum GearType {
  Helmet,
  Armor,
  Legs,
  Boots,
  Shield,
  Neckles,
  Ring,
  Weapon,
}

class Character implements ICharacter {
  walkable: boolean;
  name: string;
  hp: number;
  lvl: number;
  loot: Array<string>;
  attack: number;
  defense: number;
  aggressive: boolean;
  type: CharacterType;

  constructor(
    _name: string,
    _walkable: boolean,
    _hp: number,
    _lvl: number,
    _loot: string[],
    _attack: number,
    _defense: number,
    _aggressive: boolean,
    _type: CharacterType
  ) {
    this.name = _name;
    this.walkable = _walkable;
    this.hp = _hp;
    this.lvl = _lvl;
   ...