TetraTest

Before converting to typescript, get a feel for a core set up here.

by Sam Fereday

HTML

<div id="output"></div>

CSS

.grid {
  width: 192px;
  height: 192px;
  border: 1px solid #ccc;
}

.sq {
  width: 64px;
  height: 64px;
  background: #eee;
  float: left;
  position: relative;
}
.sq.occupied {
  background: #333;
}
.sq:hover {
  background: #fff;
}
.sq.occupied:hover {
  background: #880000;
}

.sq.blue {
  background: #0000ff;
}
.sq.red {
  background: #ff0000;
}

.sq span {
  position: absolute;
  color: #fff;
  font-family: arial;
  padding: 0.1em;
}
.top {
  top: 0;
  left: 28px;
}
.right {
  right: 0;
  top: 22px;
}
.bottom {
  bottom: 0;
  left: 28px;
}
.left {
  left: 0;
  top: 22px;
}

JavaScript

// For cards, we'll just use t, r, b and l for now
// Double check your instantiations here also.
// Grid square
var Square = {
	x: 0,
  y: 0,
  stats: {
  	left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  element: null,
	isOccupied: false,
  isBlock: false,
  create: function(x, y)
  {
  	var ns = Object.create(Square);
    ns.x = x;
    ns.y = y;
    ns.element = document.createElement("div");
    ns.element.className = "sq";
    ns.element.onclick = function() {
    	// Would usually 'place' a card here, but we'll do this for now.
    	if(!ns.isOccupied) {
	      this.className += " occupied";
        ns.isOccupied = true;
        ns.stats = {
          left: Math.floor((Math.random() * 4) + 1),
          right: Math.floor((Math.random() * 4) + 1),
          top: Math.floor((Math.random() * 4) + 1),
          bottom: Math.floor((Math.random() * 4) + 1)
        }
        ns.element.innerHTML += "<span class='top'>" + ns.stats.top + "</span>";
        ns.element.innerHTML += "<span class='right'>" + ns.stats.right + "</span>";
				ns.element.innerHTML += "<span class='bottom'>" + ns.stats.bottom + "</span>";
        ns.element.innerHTML += "<span class='left'>" + ns.stats.left + "</span>";
        scoreNeighbours(ns);
      }
    }
  	return ns;
  }
}

// Grid web
var Grid = {
	w: 3,
  h: 3,
  gridPoints: [],
  create: function()
  {
  	return Object.create(Grid);
  },
  addSquare: function(item)
  {
  	Grid.gridPoints.push(item);
  }
}

// Some cards (not yet implemented)
// http://www.saltgames.com/article/awareTiles/
var Card = {
	name: "",
  // Bitwise corner scoring
  bitValue: 0,
  /*
  	none: 0,
  	top: 1,
    right: 2,
    bottom: 4,
    left: 8
  */
  create: function()
  {
  	return Object.create(Card);
  }
}

// Players
var Player = {
	name: "",
  you: false, // Can only be one or the other
	create: function()
  {
  	return Object.create(Player);
  }
}

// Draw grid (careful of flipping)
var grid = Grid.create();
grid.element =...