Baseball Game

by Neal

HTML

<div id="playArea"></div>

<div id="score"></div>
<div id="move"></div>

<div id="diamond">
    <div id="d1"></div>
    <div id="first"></div>
    <div id="d2"></div>
    <div id="second"></div>
    <div id="d3"></div>
    <div id="third"></div>
    <div id="d4"></div>
    <div id="home"></div>
</div>

CSS

* {
    font-family: Lucida Console, monospace;   
    color: #FFF;
}

#playArea
{
    background-color: #000;
    height: 100%;
    overflow-y: auto;
}

#move {
    position: fixed;
    bottom: 0;
    right: 0;
    background: blue;
    width: 400px;
    height: 50px;
}

#score {
    position: fixed;
    bottom: 50px;
    right: 0;
    background: red;
    width: 200px;
    height: 80px;
    padding: 5px; 
}

div#d1 {
    width:0; height:0;
    position: fixed;
    bottom: 100px;
    right: 280px;
    line-height:0;
    border-top:25px solid transparent;
    border-right:25px solid #AAC32B;
    border-bottom:25px solid #AAC32B;
    border-left:25px solid transparent;
}

div#d2 {
    width:0; height:0;
    position: fixed;
    bottom: 100px;
    right: 230px;
    line-height:0;
    border-top:25px solid transparent;
    border-right:25px solid transparent;
    border-bottom:25px solid #AAC32B;
    border-left:25px solid #AAC32B;
}

div#d3 {
    width:0; height:0;
    position: fixed;
    bottom: 50px;
    right: 280px;
    line-height:0;
    border-top:25px solid #AAC32B;
    border-right:25px solid #AAC32B;
    border-bottom:25px solid transparent;
    border-left:25px solid transparent;
}

div#d4 {
    width:0; height:0;
    position: fixed;
    bottom: 50px;
    right: 230px;
    line-height:0;
    border-top:25px solid #AAC32B;
    border-right:25px solid transparent;
    border-bottom:25px solid transparent;
    border-left:25px solid #AAC32B;
}

div#first {
    width:10px; height:10px;
    position: fixed;
    bottom: 95px;
    right: 230px;
    background: #AAA;
    z-index: 100;
}
div#second {
    width:10px; height:10px;
    position: fixed;
    bottom: 140px;
    right: 275px;
    background: #AAA;
    z-index: 100;
}
div#third {
    width:10px; height:10px;
    position: fixed;
    bottom: 95px;
    right: 320px;
    background: #AAA;
    z-index: 100;
}

JavaScript

var writeDown = {
    delay: 110,
    add: null,
    div: document.getElementById('playArea'),
    log: function() {
        var args = arguments;
        if (args.length == 0) {
            args = [''];
        }
        var div = this.div;
        setTimeout(function() {
            //console.log(args[0]);
            div.innerHTML = args[0] + "<br/>" + div.innerHTML;
        }, this.delay);
        if (this.add == null) {
            this.add = this.delay;
        }
        this.delay += this.add;
    },

    updateDiv: function(msg, div) {
        setTimeout(function() {
            //console.log(msg, div);
            div.innerHTML = msg;
        }, this.delay);
    },

    updateDiv_delay: function(msg, div) {
        setTimeout(function() {
            document.getElementById(div).innerHTML = msg;
        }, this.delay);
    },

    updateDiv_color: function(color, div) {
        setTimeout(function() {
            //console.log(color, div);
            document.getElementById(div).style.background = color;
        }, this.delay);
    }
}


var Diamond = function(d_name, d_id) {

    var name = d_name;
    var diamond = document.getElementById(d_id);

    var bases = {
        first: false,
        second: false,
        third: false,
        home: false
    };

    var players = {
        first: false,
        second: false,
        third: false,
        home: false
    };

    this.clear = function() {
        bases = {
            first: false,
            second: false,
            third: false,
            home: false
        };
        players = {
            first: false,
            second: false,
            third: false,
            home: false
        };
        this.updateBases();
        writeDown.updateDiv('', diamond);
    }

    this.onBase = function(base_amt, PlayerName) {
        var return_runs = 0;
        switch (base_amt) {
        case 0:
            return 0;
            break;
        case 1:
            if (bases.first) {
       ...