JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<p>
	<h2>Final Score:</h2>
  <span class="t1">
    Team 1 <input id="t1" name="t1" type="text" value="14"><br>
  </span>
  <span class="t2">
  	Team 2 <input id="t2" name="t2" type="text" value="10"><br>
  </span>
  <br>
  <span class="t2">
  	Loser Penalty <input id="penalty" name="penalty" type="text" value="7"><br>
  </span>

</p>

Algorithm:
<select name="algorithm" id="algorithm">
  <option value="TeamTeam">Team + Team</option>
  <!-- <option value="TeamTeamWin7">Team + Team + 7pt Win Bonus</option> -->
  <option value="TeamTeamSpread">Team + Team + Spread</option>
  <!-- <option value="TeamTeamSpreadWin7">Team + Team + Spread + 7pt Win Bonus</option> -->
  <option value="TeamTeamSpreadWrong">Team + Team + Wrong Spread</option>
  <!-- <option selected value="TeamTeamSpreadWrongWin7">Team + Team + Wrong Spread + 7pt Win Bonus</option> -->
  <option value="TeamTeamSpread2">Team + Team + Spread/2</option>
  <option value="OverUnderSpread">Over/Under + Spread</option>
  <!-- <option value="OverUnderSpreadWin7">Over/Under + Spread + 7pt Win Bonus</option> -->
  <option value="OverUnder">Over/Under</option>
  <option value="Spread">Spread</option>
  <option value="SpreadWrong">Wrong Spread</option>
  <option value="Circular">Circular</option>
  <!-- <option value="CircularWin7">Circular + 7pt Win Bonus</option> -->
</select>

<p>
	<h2>Prediction Range:</h2>
  <span class="t1">
  	Team 1 min <input id="t1_min" name="t1_min" type="text" value="0"><br>
  	Team 1 max <input id="t1_max" name="t1_max" type="text" value="30"><br>
  </span>
  <span class="t2">
  	Team 2 min <input id="t2_min" name="t2_min" type="text" value="0"><br>
	  Team 2 max <input id="t2_max" name="t2_max" type="text" value="30"><br>
  </span>
</p>

<table>
</table>

CSS

tr {
  background: #666;
}
td, th {
  min-width: 2em;
  padding: 4px;
  background: #fff;
  whitespace: no-wrap;
}
.t1 { color: blue; }
.t2 { color: green; }

th:not(:first-child) {
  color: green;
}
td:first-child {
  color: blue;
}

JavaScript

var algorithms;
function init() {
	algorithms = {
		TeamTeam: calculateTeamTeam,
		TeamTeamWin7: calculateTeamTeamWin7,
		TeamTeamSpread: calculateTeamTeamSpread,
		TeamTeamSpreadWin7: calculateTeamTeamSpreadWin7,
		TeamTeamSpreadWrong: calculateTeamTeamSpreadWrong,
		TeamTeamSpreadWrongWin7: calculateTeamTeamSpreadWrongWin7,
		TeamTeamSpread2: calculateTeamTeamSpread2,
		OverUnderSpread: calculateOverUnderSpread,
		OverUnderSpreadWin7: calculateOverUnderSpreadWin7,
		Spread: calculateSpread,
		SpreadWrong: calculateSpreadWrong,
		OverUnder: calculateOverUnder,
		Circular: calculateCircular,
		CircularWin7: calculateCircularWin7,
	};

	$('input, select').on('blur change', calculate);

	calculate();
}

function calculate() {
	//get input values
	var T1 = parseInt($('#t1').val());
	var T2 = parseInt($('#t2').val());
	var t1Min = parseInt($('#t1_min').val());
	var t2Min = parseInt($('#t2_min').val());
	var t1Max = parseInt($('#t1_max').val());
	var t2Max = parseInt($('#t2_max').val());
	var penalty = parseInt($('#penalty').val());
	var algorithmName = $('#algorithm').val();

	var algorithm = algorithms[algorithmName];

	var scores = [];
	for (var prediction1 = t1Min; prediction1 <= t1Max; prediction1++) {
		scores[prediction1] = [];
		for (var prediction2 = t2Min; prediction2 <= t2Max; prediction2++) {
			scores[prediction1][prediction2] = algorithm(T1, T2, prediction1, prediction2) +  + addWinBonus(T1, T2, prediction1, prediction2, penalty);
		}
	}

	//console.log(scores);

	redraw(scores);
}

function redraw(scores) {
	var table = $('table').empty();
	var row = ['<span class="t1">Team1</span> \\\\ <span class="t2">Team2</span>'];
	var content = '<tr>';
	for (var p1 in scores) {
  	for (var p2 in scores[p1]) {
			row.push(p2);
		}
    break;
	}
	content += row.map(function(v){ return '<th>' + v + '</th>'}).join('');

	content += '</tr>';



	for (var p1 in scores) {
		row = [];
		for (var p2 in scores[p1]) {
			//first column is p2 
			if (row.length == 0)...