Hoplite Layout

by gdarussian

HTML

<section>
    <h1>
        Hoplite Layout
    </h1>
</section>

<section>
    <h3 id="level"></h3>
    <div class="rightAligned">
        <input type="button" value="Generate Level" id="btnGenerateLevel" /><br />
        <input type="button" value="Clear Level" id="btnClearLevel" /><br />
        <input type="button" value="Reset Level" id="btnResetLevel" /><br />
        <input type="button" value="Reset Game" id="btnResetGame" /><br />
    </div>
    <canvas id="board" width="245" height="325">
        <p>Your browser doesn't support canvas.</p>
    </canvas>
    <div id="stats"></div>
    <div class="size" id="menuDiv">
        <ul class="list" id="menuList"></ul>
    </div>
</section>

<section>
    <div id="debug"></div>
</section>

CSS

canvas {
    background-color: black;
}
body {
  margin: 1em;
  font-size: 85%;
  font-family: arial, helvetica, sans-serif;
}
.slider {
  width: 50;
  height: 20;
}
input[type="button"] {
    width: 120px;
}
p {
  font-size: 1em;
  margin: 0 0 .8em 0;
}

.rightAligned {
  position: absolute;
  right: 55px;
}
.rightAligned2 {
  position: absolute;
  right: 30px;
}
html>body {
  font-size: 12px;
}
h1 {
  font-weight: bold;
  font-size: big;
}
th {
  text-align: left;
  padding: 1px 5px 0 0;
}

section {
  font-size: 1em;
  border: 3px solid white;
  margin: 10px 0 0 0;
  padding: 5px;
  vertical-align: middle;
  box-shadow: 0px 0px 20px 3px #d3d3d3;
  border-radius:4px;
  background-color:#ffffff;
}

.fuzzyContainer {
  border: 3px solid white;
  border-radius: 10px;
  background: #eee;
  padding: 5px;
  box-shadow: 0 0 0 1px hsl(0, 0%, 80%), 0 0 0 2px hsl(0, 0%, 90%);
}
.size { position:relative }
.size>ul.list { 
    display:none;
	position:absolute; z-index:999;
	width:100px;
	margin:0; padding:5px; list-style:none;
	background:#fff; color:#333;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
	padding:2px;
	border-bottom: solid 1px #ccc;
}
.size>ul.list li:hover {
	background:#EC6603; color:#fff;
}
.size>ul.list li:last-child { border:none }

JavaScript

function Board(graphicsContext)
{
	this.gc = graphicsContext;
    this.Redraw();
}

Board.prototype.Redraw = function()
{
    Debug("Redrawing Board");
    this.tiles = [];
    for (var col = 0; col < 9; col++)
    {
        Debug("Drawing Col " + col);
        var colArray = [];
        this.tiles.push(colArray);
        for (var row = 0; row < this.GetColSize(col); row++)
        {
            Debug("Drawing Col " + col + ", Row " + row);
            colArray.push(TILE_TYPES.Tile);
            this.gc.fillStyle = TILE_COLOR;
            this.gc.strokeStyle = "black";
            this.DrawTile(row, col, 0);
        }
    }
    Debug("Drawing Exit");
    this.SetTile(DEFAULT_EXIT_POS, TILE_TYPES.Exit);
    Debug("Drawing Player");
    if (engine)
        this.SetTile(engine.player.pos, TILE_TYPES.Player);
    else
        this.SetTile(DEFAULT_PLAYER_POS, TILE_TYPES.Player);
};

Board.prototype.SetTile = function(pos, type)
{
    this.tiles[pos.col][pos.row] = type;
    this.DrawOverlay(pos, type);
};

Board.prototype.DrawOverlay = function(pos, type)
{
    Debug("Drawing Overlay for " + type + " @ " + pos.ToString());
    var col = pos.col;
    var row = pos.row;
    if (type == TILE_TYPES.Lava)
    {
        this.gc.fillStyle = LAVA_COLOR;
        this.DrawTile(row, col, 0);
    }
    else if (type != "DEBUG")
    {
        this.gc.fillStyle = TILE_COLOR;
        this.DrawTile(row, col, 0);
    }
    if (type == TILE_TYPES.Tile)
        return;
    
    this.MoveToTile(row, col, true);
    var text = type;
    if (type == "DEBUG")
    {
        if (DEBUG_FOCUS_TILE)  
            text = pos.Minus(DEBUG_FOCUS_TILE).ToString();
        else
            text = pos.ToString();
    }
    Debug("Drawing " + text + " for " + type + " @ " + pos.ToString());
    var size = this.gc.measureText(text);
    var x = type == "DEBUG" ? 1 : (TILE_SIZE - Math.floor(size.width)) / 2-1;
    var y = TILE_SIZE_WITH_BORDER / 2 + (type == "Lava" ? 1 : 0);
    this.gc.textBaseline =...