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;
  min-height: 7em;
  border: 1px solid #333;
  float: left;
  text-align: center;
  cursor: pointer;
}

.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 = "";
  this.score = 0;
  this.passToOpposite = false;
  this.hostile = false;
  this.stats = {};
  this.isPlaced = false;
};
// 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;
  },
  setToPass: function(b) {
    this.passToOpposite = b;
  },
  setHostile: function(b) {
    this.hostile = b;
  },
  setStats: function(obj) {
    this.stats = obj;
  },
  setIsPlaced: function(b) {
    this.isPlaced = b;
  }
};

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

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

function makeGrid() {
  var c;
  for (var i = 0; i < gridY; i++) {
    gridData.push([]);
    for (var j = 0; j < gridX; 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) {
	console.log(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: //...