JSFiddle - React, Tailwind, and code Playground

Mafia Card Game Stat Block Generator

by skibulk

HTML

<table>
  <tr>
    <td></td>
    <td id="S1">E</td>
    <td id="S2">R</td>
    <td id="S3">M</td>
    <td id="S4">P</td>
  </tr>
  <tr>
    <td>MY</td>
    <td id="MY1">MY1</td>
    <td id="MY2">MY2</td>
    <td id="MY3">MY3</td>
    <td id="MY4">MY4</td>
  </tr>
  <tr style="display: none;">
    <td>X</td>
    <td id="X1">X1</td>
    <td id="X2">X2</td>
    <td id="X3">X3</td>
    <td id="X4">X4</td>
  </tr>
  <tr>
    <td><button id="A">A</button></td>
    <td id="A1">A1</td>
    <td id="A2">A2</td>
    <td id="A3">A3</td>
    <td id="A4">A4</td>
  </tr>
  <tr>
    <td><button id="B">B</button></td>
    <td id="B1">B1</td>
    <td id="B2">B1</td>
    <td id="B3">B3</td>
    <td id="B4">B4</td>
  </tr>
  <tr style="display: none;">
    <td>AX</td>
    <td id="AX1">AX1</td>
    <td id="AX2">AX2</td>
    <td id="AX3">AX3</td>
    <td id="AX4">AX4</td>
  </tr>
  <tr style="display: none;">
    <td>BX</td>
    <td id="BX1">BX1</td>
    <td id="BX2">BX2</td>
    <td id="BX3">BX3</td>
    <td id="BX4">BX4</td>
  </tr>
</table>

CSS

td {
  width: 80px;
  padding: 5px;
  text-align: center;
}

.gain {
  color: green;
}

.lose {
  color: red;
}

JavaScript

// TO DO: the deck should be stacked against you. Statistically, the minuses should be greater than the pluses, so the game won't last forever.

(function() {
  "use strict";

  var options = [
    {formula:"X",   multiply:0, add:2},
    {formula:"X",  multiply:0, add:4},
    {formula:"X",  multiply:0, add:8},
  ];
  
  var mys = [20, 20, 20, 20];
  
  var xs;

  updateView();
  
  function updateView(){
    insertValues(mys, "MY");

    xs = [];

    for (var i = 0; i < 4; i++) {
      xs.push(Math.ceil(Math.random() * 5));
    }

    insertValues(xs, "X");
    
    setupRow("A");
    setupRow("B");
  }

  function setupRow( rowPrefix )
  {
  	var rowOptions = [];
    
    // 1 = gain, 0 = no change, -1 = lose
    // One column will contain a semi-random state with
  	// 10% chance of 1, 10% chance of -1, 80% chance of 0
  	var randomState = Math.floor(Math.random() * 10) - 1; // -1 to 8
    if( randomState > 1 ) randomState = 0;
    var states = [1, 0, -1, randomState];
    shuffleArray(states);
    
    var i, el, elx, op;
    for (i = 0; i < 4; i++) {
      el = document.getElementById(rowPrefix + (i + 1));
      elx = document.getElementById(rowPrefix + "X" + (i + 1));
      
      // Random option
      op = options[Math.floor(Math.random() * options.length)];
      op = Object.create(op);
      op.state = states[i];
      op.change = calculate(op.state, op.multiply, xs[i], op.add);
      rowOptions.push( op );

      switch ( op.state ) {
        case 1:
          // el.innerHTML = "<span class='gain'>Gain</span>";
          el.innerHTML = "<span class='gain'>" + op.formula + "</span>";
		      elx.innerHTML = op.change;
          break;
        case -1:
          // el.innerHTML = "<span class='lose'>Lose</span>";
          el.innerHTML = "<span class='lose'>" + op.formula + "</span>";
		      elx.innerHTML = op.change;
          break;
        default:
          el.innerHTML = "-";
          elx.innerHTML = "-";
      }
    }
    
   ...