JSFiddle - React, Tailwind, and code Playground

by MrSala

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Simulación de movimiento de piezas</title>
  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    // Simula un clic en la primera pestaña
    document.querySelector('.tab-links li:first-child a').click();
  </script>
</head>
<body>
  <h1>Juego 1: Simulación de línea interdependiente con variabilidad</h1>
  <h2>Ronda de producción <span id="roundNumber">0</span> de <span id="max_round"></span></h2>
  <div id="container">
    <div class="process" id="processA">
      <p><img src="https://cdn-icons-png.flaticon.com/128/3107/3107210.png" alt="chef" width="60" height="60"></p>
      <h3>Estación A</h3>
      <p>Capacidad:</p>
      <p><span id="aResult"><img src="https://cdn-icons-png.flaticon.com/128/8616/8616965.png" alt="bolita" width="30" height="30"></span></p>
      <p>WIP previo A     : <span id="Inventario A: ">Abastecimiento ilimitado</span></p>
    </div>
    <div class="process" id="processB">
      <p><img src="https://cdn-icons-png.flaticon.com/128/3107/3107210.png" alt="chef" width="60" height="60"></p>
      <h3>Estación B</h3>
      <p>Capacidad:</p>
      <p><span id="bResult"><img src="https://cdn-icons-png.flaticon.com/128/8616/8616965.png" alt="bolita" width="30" height="30"></span></p>
      <p>
      WIP previo B:
      </p>
      <p><span id="Inventario B: "></span></p>
      <p><span id="Inv B num: "></span></p>
    </div>
    <div class="process" id="processC">
      <p><img src="https://cdn-icons-png.flaticon.com/128/3107/3107210.png" alt="chef" width="60" height="60"></p>
      <h3>Estación C</h3>
      <p>Capacidad:</p>
      <p><span id="cResult"><img src="https://cdn-icons-png.flaticon.com/128/8616/8616965.png" alt="bolita" width="30" height="30"></span></p>
      <p>
      WIP previo C:
      </p>
      <p><span id="Inventario C: "></span></p>
      <p><span id="Inv C num: "></span></p>
    </div>    
    <div class="process"...

CSS

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #F8F8F8;
  font-size: 13px;
}

h1 {
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  font-size: 17px;
  color: #C70039;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0px;
}

h3 {
  font-size: 14px;
  font-weight: 600;
   ;
  margin-bottom: 5px;
}

#container,
#container_modal{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 0px;
}

#container_boton,
#container_boton_esta{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 30px;
}

.process {
  width: 150px;
  height: 350px;
  background-color: white;
  border: 2px solid #E2E2E2;
  text-align: center;
  padding: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.processt {
  width: 170px;
  height: 350px;
  background-color: white;
  border: 2px solid #E2E2E2;
  text-align: center;
  padding: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}


#rollDiceButton,
#movePiecesButton,
#resultsButton,
#reiniciarJuego {
  margin-top: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-radius: 50px;
  background-color: #0099ff;
  color: #fff;
  font-size: 16px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#rollDiceButton:hover,
#movePiecesButton:hover,
#resultsButton:hover,
#reiniciarJuego :hover{
  background-color: #0084e6;
}

#rollDiceButton:active,
#movePiecesButton:active,
#resultsButton:active,
#reiniciarJuego:active {
  background-color: #0073cc;
}

#rollDiceButton:disabled,
#movePiecesButton:disabled,
#resultsButton:disabled,
#reiniciarJuego:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.tabs {
  display: none;
  width: 100%;
  flex-direction: column;
}

.tab-links {
  display: flex;
  list-style:...

JavaScript

// Definición de variables iniciales
var maxRounds = 10; // Número de rounds
var round = 0; // Ronda actual
var wip_inicial = 4;
var diceResults = {
  A: 0,
  B: 0,
  C: 0,
  D: 0,
  E: 0,
  F: 0,
}; // Resultados del lanzamiento de dados de cada estación
var inventories_inicial = {
  A: Infinity,
  B: wip_inicial,
  C: wip_inicial,
  D: wip_inicial,
  E: wip_inicial,
  F: wip_inicial,
}; // Inventario inicial de cada estación
var inventories = {
  A: Infinity,
  B: inventories_inicial.B,
  C: inventories_inicial.C,
  D: inventories_inicial.D,
  E: inventories_inicial.E,
  F: inventories_inicial.F,
}; // Inventario de cada estación
var terminadas = 0;
let capacidadA = []; // arreglo de capacidades
let capacidadB = []; // arreglo de estaciones
let capacidadC = []; // arreglo de estaciones
let capacidadD = []; // arreglo de estaciones
let capacidadE = []; // arreglo de estaciones
let capacidadF = []; // arreglo de estaciones

let produccionA = []; // arreglo de inventarios
let produccionB = []; // arreglo de inventarios
let produccionC = []; // arreglo de inventarios
let produccionD = []; // arreglo de inventarios
let produccionE = []; // arreglo de inventarios
let produccionF = []; // arreglo de inventarios

let rondas = []; // arreglo de rondas

document.getElementById("max_round").innerHTML = maxRounds;



var spanB = document.getElementById("Inventario B: ");
for (var i = 0; i < inventories_inicial.B; i++) {
    var img = document.createElement("img");
    img.src = "https://cdn-icons-png.flaticon.com/512/9633/9633377.png";
    img.alt = "bolita";
    img.width = 20;
    img.height = 20;
    spanB.appendChild(img);
 }
var spanC = document.getElementById("Inventario C: ");
for (var i = 0; i < inventories_inicial.C; i++) {
    var img = document.createElement("img");
    img.src = "https://cdn-icons-png.flaticon.com/512/9633/9633377.png";
    img.alt = "bolita";
    img.width = 20;
    img.height = 20;
    spanC.appendChild(img);
 }
var spanD =...