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>
</head>
<body>
  <h1>Simulación de proceso de producción</h1>
  <div id="container">
  <h2>Ronda <span id="roundNumber">1</span></h2>
    <div class="process" id="processA">
      <h2>Estación A</h2>
      <p>Dado A: <span id="aResult">0</span></p>
      <p>Inventario A: <span id="Inventario A: ">Inf</span></p>
    </div>
    <div class="process" id="processB">
      <h2>Estación B</h2>
      <p>Dado B: <span id="bResult">0</span></p>
      <p>Inventario B: <span id="Inventario B: ">4</span></p>
    </div>
    <div class="process" id="processC">
      <h2>Estación C</h2>
      <p>Dado C: <span id="cResult">0</span></p>
      <p>Inventario C: <span id="Inventario C: ">4</span></p>
      <p>Terminadas <span id="Salidas C: ">0</span></p>
    </div>
    <div id="arrows">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
    <button id="rollDiceButton">Lanzar Dados</button>
    <button id="movePiecesButton">Mover Piezas</button>
    </div>
</body>
<footer>
  <span>"Creado por: Salita"</span>
</footer>
</html>

CSS

body {
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

#container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}

.process {
  width: 150px;
  height: 200px;
  background-color: lightgray;
  border: 1px solid gray;
  text-align: center;
  padding: 20px;
  position: relative;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid gray;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

#arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

#rollDiceButton,
#movePiecesButton {
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

// Definición de variables iniciales
var maxRounds = 20; // Corregido: se agregó la declaración de la variable maxRounds
var round = 1; // Ronda actual
var diceResults = { A: 0, B: 0, C: 0 }; // Resultados del lanzamiento de dados de cada estación
var inventories = { A: Infinity, B: 4, C: 4 }; // Inventario inicial de cada estación
var outputs = { A: 0, B: 0, C: 0 }; // Contador de salidas de cada estación
var terminadas = 0;

// Función para lanzar el dado y actualizar los resultados
function rollDice() {
  diceResults.A = Math.floor(Math.random() * 6) + 1; // Dado para A (1 al 6)
  diceResults.B = Math.floor(Math.random() * 6) + 1; // Dado para B (1 al 6)
  diceResults.C = Math.floor(Math.random() * 6) + 1; // Dado para C (1 al 6)
}

// Función para mover piezas entre estaciones
function movePieces() {
  // Mover piezas de A a B
  var piecesToMoveAB = Math.min(inventories.A, diceResults.A);  
  

  // Mover piezas de B a C
  var piecesToMoveBC = Math.min(inventories.B, diceResults.B);
  inventories.B = inventories.B + piecesToMoveAB - piecesToMoveBC;
  if (inventories.B > 0) {
  	 inventories.B = inventories.B
  }
  else {
  inventories.B = 0  
  }

  // Actualizar contador de salidas de C
  var piecesToMoveCOut = Math.min(inventories.C, diceResults.C);
  terminadas = terminadas + piecesToMoveCOut
  inventories.C = inventories.C + piecesToMoveBC - piecesToMoveCOut;
  if (inventories.C > 0) {
  	 inventories.C = inventories.C
  }
  else {
  inventories.C = 0  
  }

}

// Función para mostrar resultados al usuario
function showResultsMove() {
  round = round + 1
  document.getElementById("roundNumber").innerHTML = "" + round ;
  document.getElementById("Inventario A: ").innerHTML = + inventories.A;
  document.getElementById("Inventario B: ").innerHTML = + inventories.B;
  document.getElementById("Inventario C: ").innerHTML = + inventories.C;
  document.getElementById("Salidas C: ").innerHTML = + terminadas;
}


// Función para avanzar a la siguiente...