RE4 Inv JS - v0.0.3

by Tgwizman

HTML

<div id="grid"></div>
<br>
<div id="error"></div>
<input type="button" onclick="display.update()" value="Update Display" />

CSS

html, body {
    margin: 0px;
    padding: 0px;
    background-color: #333;
}

#grid {
    margin: 20px auto;
    padding: 0px;
    width: 363px;
    height: 231px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

.box {
    margin: 0px;
    padding: 0px;
    float: left;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #999;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}

img {
    position: absolute;
}

#error {
    margin: 0px;
    padding: 0px;
    width: 100%;
    color: #F00;
    font-weight: bold;
    text-align: center;
}

JavaScript

/*
RE4 Inv JS - v0.0.3
By Tgwizman (Tyler Keohane)
A Javascript implementation of
Resident Evil 4's Inventory System

Change Log at the bottom. */

// The inventory controller
var console, x, y;

// Items and their spacing in [width,height] format
var items = {
    '36M_Frag': [1, 2],
    'M1911-Detailed_Grip': [3, 2],
    'Tactical_Knife': [4, 1],
    'rifle': [8, 2]
};

// Puts errors on the screen
var error = function(msg) {
    document.querySelector('#error').innerHTML += msg;
};

var inv = {
    width: 11,
    height: 7,
    contents: {},
    addItem: function(gridX, gridY, item) {
        if (items[item]) {
            // If it's not blocked, set the item!
            if (!inv.isBlocked(gridX, gridY, item)) {
                inv.contents[gridX + '-' + gridY] = [item, '0'];
                console.log(inv.contents);
            }
        } else {
            if (item !== "Ignore") {
                error('Error: "' + item + '" is not a valid item!');
            }
        }
        display.update();
    },
    movItem: function(box) {
        console.log(box);
        inv.contents[box] = 'empty';
        display.update();
    },
    isBlocked: function(gridX, gridY, item) {
        // Checks if that space is already used
        var isBlocked = false;
        for (y = 0; y < items[item][1]; y++) {
            for (x = 0; x < items[item][0]; x++) {
                if (document.getElementById('box' + (gridX + x) + '-' + (gridY + y)).item !== '') {
                    error("Error: This space, " + (gridX + x) + "-" + (gridY + y) + " ,is already used!");
                    isBlocked = true;
                }
            }
        }
        return isBlocked;
    }
};

// The display controller
var display = {
    update: function() {
        for (y = 0; y < inv.height; y++) {
            for (x = 0; x < inv.width; x++) {
                document.getElementById('box' + x + '-' + y).item = '';
                document.getElementById('box' + x + '-' + y).innerHTML...