JS TetraMaster

An attempt at re-creating Tetra-master (ff9, 11).

by Sam Fereday

HTML

<div id="container"></div>

CSS

body {
  font: 85%/1.4em arial;
}
div {
  box-sizing: border-box;
}
#container {
  border: 2px solid #ccc;
}
.r {
  overflow: auto;
}
.c {
  padding:1em;
  border: 1px solid #333;
  float: left;
  text-align: center;
}
.yours {
  background: #000088;
  color: #fff;
}
.theirs {
  background: #880000;
  color: #fff;
}
.pass {
  opacity: 0.7;
}

JavaScript

// http://www.saltgames.com/article/awareTiles/
// https://en.wikipedia.org/wiki/Mythical_creatures_in_Burmese_folklore
var randomNames = [
"Athura",
"Belu",
"Byala",
"Chinthe",
"Galone",
"Hintha",
"Karawelk",
"Magan",
"Naga"
];

// It all needs a bit of a cleanup.
var Card = function() {
  this.name = "";
};
// Careful, this stuff is shared!
Card.prototype = {
  setName: function(str) {
    this.name = str;
  },
  setScore: function(n) {
    if (n === this.score) return;
    this.score = n;
    // Depending on the score, we do battle with every side taken.
    return this.score;
  }
};

var Space = function(x, y) {
  this.x = x;
  this.y = y;
  this.occupier = null;
};
Space.prototype = {
  blocked: false,
  occupied: false
};

var gridData = []; // Convert to flat array.
var gridX = 3;
var gridY = 3;

function makeGrid() {
  var c;
  for (var i = 0; i < gridX; i++) {
    gridData.push([]);
    for (var j = 0; j < gridY; j++) {
      gridData[i].push(new Space(i, j));
    }
  }
}

function calculateTileIndex(above, below, left, right) {
  var sum = 0;
  if (above && above.occupied) sum += 1;
  if (left && left.occupied) sum += 2;
  if (below && below.occupied) sum += 4;
  if (right && right.occupied) sum += 8;
  return sum;
}

function doBattle(x, y, val) {

  // To Optimize
  var yourOpponent;
  switch (val) {
    case 1: // above
      yourOpponent = gridData[x][y - 1].occupier;
      yourOpponent.direction = "above";
      break;
    case 2: // left
      yourOpponent = gridData[x - 1][y].occupier;
      yourOpponent.direction = "left";
      break;
    case 4: // below
      yourOpponent = gridData[x][y + 1].occupier;
      yourOpponent.direction = "below";
      break;
    case 8: // right
      yourOpponent = gridData[x + 1][y].occupier;
      yourOpponent.direction = "right";
      break;
  }

  return yourOpponent;

}

function startFight(yourCard, theirCard, attackerName, defenderName) {
  // Does the opponent have a blank socket on its underside? If...