JSFiddle - React, Tailwind, and code Playground

by prankol57

HTML

<div id="main">
    <div class="teamColumn" id="redTeam">
         <h1>Red Team</h1>

        <select size="20" class="playersContainer"></select>
    </div>
    <div id="arena">
         <h1>Battlefield</h1>

        <canvas width="350" height="350"></canvas>
    </div>
    <div class="teamColumn" id="blueTeam">
         <h1>Blue Team</h1>

        <select size="20" class="playersContainer"></select>
    </div>
    <div id="loadingInfo">
        <button id="newgame">New Game</button>
        <button id="playpause">Play</button><br />
        <input type="checkbox" id="labels" /> Show labels
    </div>
</div>
<div id="testbot">
    <textarea id="testbotCode" placeholder="testbot code"></textarea>
    <br />
    <input type="checkbox" id="testbotIsRed" />Red Team
    <br />
    <input type="checkbox" id="testbotIsBlue" />Blue Team
    <br />
</div>

CSS

#main {
    padding: 10px;
    text-align: center;
}
#testbot {
    padding: 10px;
    clear: both;
}
.teamColumn {
    width: 25%;
    padding: 0px 10px;
    border: 3px solid;
    border-color: black;
    text-align: center;
    height: 500px;
    overflow: scroll;
    white-space: nowrap;
}
.playersContainer p {
    padding: 0px;
    margin: 0px;
}
#redTeam {
    float: left;
    border-color: red;
    color: red;
    background-color: #ffeeee;
}
#blueTeam {
    float: right;
    border-color: blue;
    color: blue;
    background-color: #ffeeee;
}
#arena {
    display: inline-block;
    width: 40%;
    text-align: center;
}
canvas {
    border: 1px solid black;
}
select {
    width: 100%;
}

JavaScript

$.ajaxSetup({ cache: false });

var redTeam = [],
    blueTeam = [],
    canvas = $("canvas")[0],
    ctx = canvas.getContext("2d"),
    interval,
    moveNum = 0,
    redFlag = {},
    blueFlag = {},
    MAX_STRENGTH = 20,
    FIELD_PADDING = 20,
    DEFENSE_RADIUS = 25,
    paused = true,
    messagesRed = {},
    messagesBlue = {},
    cache;

var debug = true;
var qid = 49028;

/* Testbot code:
var r2 = Math.sqrt(2);
if (this.id === -2 || (this.id === -1 && enemies.length === 0)) {
  if (eFlag.pickedUpBy && eFlag.pickedUpBy.id === this.id) {
    return {
      x: 0,
      y: this.id === -2 ? -2 : 2
    };
  }
  return {
    x: this.x < eFlag.x ? r2 : -r2,
    y: this.y < eFlag.y ? r2 : -r2
  };
} else {
  var e = enemies[0];
  return {
    x: this.x < e.x ? r2 : -r2,
    y: this.y < e.y ? r2 : -r2
  };
}
*/

/* Testbot code 2:
var r2 = Math.sqrt(2);
if (this.id === -1) {
  // red team 1
  // go after flag regardless of what is going on
  if (eFlag.pickedUpBy !== null && eFlag.pickedUpBy.id === this.id) {
    return {
      x: 0,
      y: 2
    };
  }
  return {
    x: this.x < eFlag.x ? r2 : -r2,
    y: this.y < eFlag.y ? r2 : -r2
  };
}
if (this.id === -2) {
  // blue team 1
  // a) go after opposing team members on your side b) get the other flag if no enemies on your side
  var closestEnemy = null;
  for (var i = 0; i < enemies.length; ++i) {
    if (enemies[i].y < HEIGHT/2 && (closestEnemy === null || enemies[i].y < closestEnemy.y)) {
      closestEnemy = enemies[i];
    }
  }
  if (closestEnemy !== null) {
    return {
      x: this.x < closestEnemy.x ? r2 : -r2,
      y: this.y < closestEnemy.y ? r2 : -r2
    };
  }
  if (eFlag.pickedUpBy !== null && eFlag.pickedUpBy.id === this.id) {
    return {
      x: 0,
      y: -2
    };
  }
  return {
    x: this.x < eFlag.x ? r2 : -r2,
    y: this.y < eFlag.y ? r2 : -r2
  };
}
if (this.id === -3) {
  // red team 2
  // a) defend the flag b) if at least half of enemies in jail and no enemies on this side, free...