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 2: 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_desliza'>
    <p></p>
    <h3>Selecciona el WIP inicial de todas las estaciones: </h3>
    <input type="range" id="piloto" name="piloto" min="1" max="10" value="4">
    <div class="slider-labels">
     <span class="slider-min">1</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">2</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">3</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">4</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">5</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">6</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">7</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">8</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">9</span>
      <span class="slider-scale">|</span>
     <span class="slider-max">10</span>
    </div>
    
  </div>
  <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...

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,
#iniciarJuego,
#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,
#iniciarJuego:hover,
#reiniciarJuego :hover{
  background-color: #0084e6;
}

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

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

.tabs {
  display: none;
  width:...

JavaScript

const slider = document.getElementById("piloto");
const minLabel = document.querySelector(".slider-min");
const maxLabel = document.querySelector(".slider-max");
const scaleLabel = document.querySelector(".slider-scale");

slider.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};


var inventories_inicial = {
  A: Infinity,
  B: 4,
  C: 4,
  D: 4,
  E: 4,
  F: 4,
}; // Inventario inicial de cada estación

var maxRounds = 20; // Número de rounds
var round = 0; // Ronda actual
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 = {
    A: 0,
    B: 0,
    C: 0,
    D: 0,
    E: 0,
    F: 0,
};
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

var wip_inicial = 0;

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

// Definición de variables iniciales
document.getElementById("iniciarJuego").addEventListener("click", function() {
  // Mostrar todas las pestañas de las estaciones
  
  var valorInicial = parseInt(document.getElementById("piloto").value);
	inventories_inicial.B = valorInicial;
  inventories_inicial.C = valorInicial;
  inventories_inicial.D = valorInicial;
  inventories_inicial.E =...