fc_player

YUI.add('fc_cone', function(Y)
{
    Y.ConeIcon = Y.Base.create("coneIcon", Y.Shape, [Y.Circle], {}, {
        ATTRS: {
            radius: {
                value: 5
            },
            stroke: {
                weight: 2,
                color: '#fff'
            }
        }
    });
});

main

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

// Create the namespace for the whole app.
var FC = {
    // Define how many pixels there are per meter. We're drawing a 105m FC.pitch, which is
    // about average for pro FC.pitches. 480 allows for a 10px border.
    // @TODO Make the 480 come from the height of the div.
    MULTIPLYER: 480/105,
    init: function() {
        this.PITCH_WIDTH = 68 * this.MULTIPLYER;
        this.PITCH_LENGTH = 104 * this.MULTIPLYER;

        // Goal Area dimensions
        this.BOX_WIDTH = 40.32 * this.MULTIPLYER;
        this.BOX_HEIGHT = 16.5 * this.MULTIPLYER;

        return this;
    },
    activeControl: null
}.init();

YUI().use('graphics', 'node', 'fc_pitch', 'fc_cone', 'fc_player',  function(Y) {

    FC.Y = Y;

    Y.one('#controls').on('click', function(e) {
        // Highlight the chosen item.

        if(activeControl != null) {
            activeControl.setStyle('background', null);
        }

        e.target.setStyle('background', '#aaa');

        activeControl = e.target;
    });

    FC.pitch = new FC.PitchObject(Y);
    FC.pitch.draw();

    // When the canvas is clicked, add one of the current
    // control items to it.
    Y.one('#canvas').on('click', function(e) {
        newThing = FC.pitch.addShape({
            type: Y.ConeIcon,
            x: e.pageX,
            y: e.pageY
        });
    });

});

pitch

YUI.add('fc_pitch', function(Y)
{
   FC.PitchObject = function(Y) {

   this.pitch = new Y.Graphic({ render: "#canvas" });

   this.draw = function() {

        var border = this.pitch.addShape({
            type: "rect",
            width: FC.PITCH_WIDTH,
            height: FC.PITCH_LENGTH,
            stroke: { weight: 2, color: "#ffFFFF"},
            x: 10,
            y: 10
        });

        var halfway = this.pitch.addShape({
            type: "path",
            stroke: {
                weight: 2,
            color: "#ffffff"
            }
        });

        halfway.moveTo(10, 250);
        halfway.lineTo(FC.PITCH_WIDTH + 10, 250);
        halfway.end();

        var goalArea1 = this.pitch.addShape({
            type: "rect",
            height: FC.BOX_HEIGHT,
            width: FC.BOX_WIDTH,
            x: 10 + (FC.PITCH_WIDTH / 2) - (FC.BOX_WIDTH / 2),
            y: 10,
            stroke: {
                weight: 2,
            color: "#fff"
            }
        });

        var goalArea2 = this.pitch.addShape({
            type: "rect",
            height: FC.BOX_HEIGHT,
            width: FC.BOX_WIDTH,
            x: 10 + (FC.PITCH_WIDTH / 2) - (FC.BOX_WIDTH / 2),
            y: FC.PITCH_LENGTH - FC.BOX_HEIGHT + 10,
            stroke: {
                weight: 2,
            color: "#fff"
            }
        });

        var centerCircle = this.pitch.addShape({
            type: "circle",
            radius: 9.5 * FC.MULTIPLYER,
            x: FC.PITCH_WIDTH / 2 - (9.5 * FC.MULTIPLYER / 2) - 10,
            y: FC.PITCH_LENGTH / 2 - (9.5 * FC.MULTIPLYER / 2) - 10,
            stroke: {
                weight: 2,
            color: "#fff"
            }
        });
    };

    this.addShape = function(shapeData){
        this.pitch.addShape(shapeData);
    };

}});