bugs and loops

by brico

HTML

<script src="http://fonts.googleapis.com/css?family=Oxygen:400,700,300"></script>
<div id="program">
    <h2 class="wob">PROGRAM</h2>
    <table id="instructions">
        <tr>
            <th class="wob" colspan=2>BEFORE</th>
            <th class="wob" colspan=2>AFTER</th>
            <th class="wob">MOVE</th>
        </tr>
    </table>
    <form id="in">
        <input/>
        <input/>
        <input/>
        <input/>
        <input/>
        <button>GO</button>
    </form>
    <p class="wob clear foot">BUGS & LOOPS the computer game</p>

</div>
<div id="gameboard">
    <h2 class="wob">THE COMPUTER</h2>
    <ul id="pointer">
        <li class="wob">POINTER</li>
    </ul>
    <ul id="tape">
        <li class="wob">TAPE</li>
    </ul>
    <p class="wob clear foot">BUGS & LOOPS the computer game</p>
</div>

SCSS

h2, .foot {
    margin: 0;
    padding: 10px;
}
table {
    margin: 10px;
    border-collapse: collapse;
}
th, td {
    border: 2px solid blue;
}
#gameboard, #program {
    border: 1px solid #ddd;
    margin: 5px 5px 25px;
    padding: 0;
    li {
        list-style: none;
        border: 2px solid blue;
        height: 30px;
        & + li {
            border-top: none;
        }
    }
}
#pointer, #tape {
    width: 100px;
    float: left;
}
.wob {
    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    display: block;
    background: blue;
    color: white;
}
table .wob {
    display: table-cell;
}
.clear {
    clear: both;
}

JavaScript

(function () {
    var pointer = {
            id: "#pointer",
            color: undefined,
            position: 3,
            put: function () {
                var i;
                for (i = 0; i < 7; i++) {
                    if (i === this.position) {
                        $(this.id).append("<li>" + String(this.color));
                    } else {
                        $(this.id).append("<li>");
                    }
                }
            }
        },
        program = {
            id: "#instructions",
            instructions: [
                ["R", "G", "Y", "O", "U"], // tmp
                ["R", "O", "Y", "O", "U"] // tmp
            ],
            put: function () {
                var outs = "";
                $(this.instructions).each(function (i, v) {
                    var outrow = "<tr>";
                    $(v).each(function (i, v) {
                        outrow += "<td>" + v + "</td>";
                    });
                    outrow += "</tr>";
                    outs += outrow
                });
                $(this.id).append(outs);
            }
                
        },
        tape = {
            id: "#tape",
            contents: [
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined,
                undefined
            ],
            put: function () {
                var that = this;
                $(this.contents).each(function (i, v) {
                    $(that.id).append("<li>" + String(v));
                });
            }
        };
    tape.put();
    pointer.put();
    program.put();

}());