2021 José Ramirez Simulator

Created for a sample size discussion in a baseball video

by sprtsxplnd

HTML

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
</head>

<body>

  <div id="container">
    <div id="title">
      <h1>
        2021 José Ramirez Simulator
      </h1>
    </div>


    <ul id="list"></ul>

    <p class="titles"><strong>Simulated Stats:</strong></span>

      <div id="totals" style="display: flex">

        <div id="totals-1B" class="flex-box">
          <span style="text-align: center;"><strong>1B</strong>
            <br />
            <span id="1B-total"></span></span>
        </div>

        <div id="totals-2B" class="flex-box">
          <strong>2B</strong>
          <br />
          <span id="2B-total"></span>
        </div>

        <div id="totals-3B" class="flex-box">
          <strong>3B</strong>
          <br />
          <span id="3B-total"></span>
        </div>

        <div id="totals-hr" class="flex-box">
          <strong>HR</strong>
          <br />
          <span id="hr-total"></span>
        </div>

        <div id="totals-k" class="flex-box">
          <strong>K</strong>
          <br />
          <span id="k-total"></span>
        </div>

        <div id="totals-bb" class="flex-box">
          <strong>BB</strong>
          <br />
          <span id="bb-total"></span>
        </div>

        <div id="totals-hbp" class="flex-box">
          <strong>HBP</strong>
          <br />
          <span id="hbp-total"></span>
        </div>

        <div id="totals-sf" class="flex-box">
          <strong>SF</strong>
          <br />
          <span id="sf-total"></span>
        </div>

        <div id="totals-ba" class="flex-box">
          <strong>AVG</strong>
          <br />
          <span id="ba"></span>
        </div>

        <div id="totals-obp" class="flex-box">
          <strong>OBP</strong>
          <br />
          <span id="obp"></span>
    ...

CSS

.flex-box {
  flex: 1;
}

ul {
  list-style-type: none;
}

h1,
span,
ul,
li,
strong {
  font-family: 'VT323', monospace;
  font-size:20px
}

.titles {
  text-align: center;
  margin: 20px;
}

.sneak {
  color: white
}

JavaScript

// variables

let K = 0,
  outs = 0,
  singles = 0,
  doubles = 0,
  triples = 0,
  hrs = 0,
  walks = 0,
  hbp = 0,
  sh = 0,
  sf = 0;

const PA = 20;

// event generator

function generateEvent() {
  let randNum = Math.random().toFixed(3);
  if (randNum <= 0.113) {
    walks++
    return 'walk';
  } else if (randNum <= .250) {
    K++;
    return 'strikeout';
  } else if (randNum <= .366) {
    singles++;
    return 'single';
  } else if (randNum <= .416) {
    doubles++;
    return 'double';
    console.log('double')
  } else if (randNum <= .424) {
    triples++;
    return 'triple';
  } else if (randNum <= .481) {
    hrs++;
    return 'home run';
  } else if (randNum <= .492) {
    hbp++;
    return 'hit by pitch';
  } else if (randNum <= .500) {
    sf++;
    return 'sacrifice fly';
  } else {
    outs++;
    return 'out';
  }
}

// event loop

for (let i = 0; i < PA; i++) {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(`PA ${i + 1}: ${generateEvent()}`));
  ul.appendChild(li);
}

// stat calc

let ba = ((singles + doubles + triples + hrs) / (PA - walks - sf - sh - hbp)).toFixed(3);

let obpRaw = ((singles + doubles + triples + hrs + walks + hbp + sf) / (PA));
let obp = obpRaw.toFixed(3);

let slgRaw = ((singles + (2 * doubles) + (3 * triples) + (4 * hrs)) / (PA - walks - sf - sh - hbp));
let slg = slgRaw.toFixed(3);

let ops = (obpRaw + slgRaw).toFixed(3);

// stat display

let singlesSpan = document.getElementById("1B-total");
singlesSpan.appendChild(document.createTextNode(`${singles}`));

let doublesSpan = document.getElementById("2B-total");
doublesSpan.appendChild(document.createTextNode(`${doubles}`));

let triplesSpan = document.getElementById("3B-total");
triplesSpan.appendChild(document.createTextNode(`${triples}`));

let hrSpan = document.getElementById("hr-total");
hrSpan.appendChild(document.createTextNode(`${hrs}`));

let kSpan =...