Scouting App

by Grant

HTML

<div style="left:0%">
  <p class="back" onclick="undoWindow()">￩</p>
  <div id="homeScreen">
    <p id="alertText">The Error GUI Has Had An Error!</p>
    <div class="button" onclick="pullWindow('newTeam')" style="top:10%">
      <p>NEW TEAM</p>
    </div>
    <div class="button" onclick="gotoTeam()" class="window" style="top:40%">
      <p>GOTO</p>
    </div>
    <div class="button" onclick="compareTeams()" class="window" style="top:70%">
      <p>COMPARE</p>
    </div>
  </div>

  <div id="newTeam">
    <p><u>Create a team</u></p>
    <p>
      Team Number:
      <input type="number" id="createTeamNumber" min="1" max="9999" placeholder="Team #">
    </p>
    <p>
      Team Name:
      <input type="text" id="createTeamName" placeholder="Team Name">
    </p>
    <br>
    <p>
      <input type="button" id="create" value="Create">
    </p>
  </div>

  <div id="databace" hidden>
    <div class="databace" style="left:10%">
      <br>
      <table id="table" style="width:90%">
        <tr>
          <th>
            Team #
          </th>
          <th>
            Team Name
          </th>
        </tr>
      </table>
      <br>
    </div>
  </div>
  <div id="detail">
    <div class="detailTitle">
      <br>
      <input id="detailTitle">
      <p id="detailID"></p>
    </div>
    <div id="defenses" class="defenses" onclick="pullWindow('addGame');">
      <canvas id="A1"></canvas>
      <p>Portcullis</p>
      <canvas id="A2"></canvas>
      <p>Cheval de Frise</p>
      <canvas id="B1"></canvas>
      <p>Moat</p>
      <canvas id="B2"></canvas>
      <p>Ramparts</p>
      <canvas id="C1"></canvas>
      <p>Drawbridge</p>
      <canvas id="C2"></canvas>
      <p>Sally Port</p>
      <canvas id="D1"></canvas>
      <p>Rock Wall</p>
      <canvas id="D2"></canvas>
      <p>Rough Terrain</p>
      <canvas id="E1"></canvas>
      <p>Low Bar</p>
    </div>
    <div id="addGame">
      <div class="addGame">
        <select id="defSel">
          <option value="-1"...

CSS

table {
  border-collapse: collapse;
  width: 100%;
  margin: auto;
  left: 10vw;
}

th {
  color: white;
  background: linear-gradient(to top, rgba(255, 20, 147, 1), rgba(255, 20, 147, 0));
  border-bottom: 2px solid yellow;
}

tr {
  background: rgba(255, 20, 147, 1)
}

tr:first-child {
  background: transparent
}

* {
  margin: 0px;
  overflow: hidden;
  font-size: 18px;
}

div {
  width: 100%;
  height: 100%;
  transition: left .75s;
  top: 0%;
  left: 100%;
  text-align: center;
  position: absolute;
  z-index: 0;
}

.button {
  position: absolute;
  width: 50%;
  left: 25%;
  height: 20%;
  top: 40%;
  background: lightgreen;
  text-align: center;
  border: solid black 4px;
}

.button p {
  white-space: nowrap;
  width: 100%;
  bottom: 0%;
  font-size: 8vh
}

#homeScreen {
  left: 0%;
  background: blue;
}

#newTeam {
  background: rgba(0, 255, 0, .8);
}

#newTeam p {
  font-size: 7vh;
}

u {
  font-size: 15vh;
}

#newTeam input {
  height: 7%;
}

#databace {
  top: 10%;
}

.databace {
  left: 10%;
  width: 80%;
  overflow: visible;
}

.back {
  position: absolute;
  z-index: 999999;
  font-size: 40vh;
  bottom: 67%
}

table input {
  background: none; //Light Transparent?
  border: none;
}

#detail {
  background: rgba(200, 10, 200, .7);
  overflow: visible;
  z-index: 2;
}

.detailTitle {
  left: 20%;
  width: 60%;
  height: 20%;
}

#detailTitle {
  font-size: 7vh;
  text-align: center;
  background: none;
  border: none;
  border-bottom: black solid 2px;
  width: 100%;
}

canvas {
  position: absolute;
  z-index: -1;
}

.defenses p {
  font-size: 5vh;
  line-height: 175%;
}

.defenses {
  left: 10%;
  height: 80%;
  top: 20%;
  text-align: left;
  width: 30%;
}

.addGame {
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  background: rgba(255, 0, 0, .8);
  z-index: 9999;
}

#gdi {
  left: 0%;
  font-size: 5vh;
}

#alertText {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 5%;
  color: rgba(255, 0, 0,...

JavaScript

teamData = []
windowHistory = []
obj = {}

window.pullWindow = function(id) {
  d(id).hidden = false
  d(id).style.left = "0%"
  windowHistory.push(id)
  if (id == "addGame") {
  	d("defSel").value=-1
    d("defSel").disabled = false
    d("gdi").hidden = true
  }
}

window.pushWindow = function(id) {
  d(id).style.left = "100%"
  //d(id).hidden = true
}

window.undoWindow = function() {
	clearInterval(stop)
  if (windowHistory.length != 0) {
    return pushWindow(windowHistory.pop())
  }
}

window.d = function(id) {
  return document.getElementById(id)
}

d("create").onclick = function() {
  var tn = d("createTeamNumber").value
  if (teamData[tn] != null) {
    Alert("Team " + tn + " already exists!")
    return
  }
  teamData[tn] = new team(tn, d("createTeamName").value)
  teamData[tn].updateTable()
  pushWindow("newTeam")
  d("createTeamName").value = d("createTeamNumber").value = ""
  save()
}

function team(num, name) {
  var val = {
    number: num,
    name: name,
    defenseData: [ //Success, Failure, With
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0]
    ]
  }
  Object.assign(this, val)

  this.updateTable = function() {
    if (d(this.number)) {
      while (d(this.number).firstChild) {
        d(this.number).removeChild(d(this.number).firstChild)
      }
    } else {
      var t = document.createElement("tr")
      t.id = this.number
      t.number = this.number
      d("table").appendChild(t)
    }

    var row = d(this.number)
    row.onclick = function(e) {
      detail(e.target.number)
    }

    var number = row.appendChild(document.createElement("td"))
    number.innerHTML = this.number
    number.number = this.number

    var name = row.appendChild(document.createElement("td"))
    name.innerHTML = this.name
    name.number = this.number
  }

}

function Alert(t) {
  d("alertText").innerHTML = t
  d("alertText").style.color =...