fyogametable/js/DPad2D.js

Fyo Game Table API

var FYO = FYO || {};

(function () {
    'use strict';

    function DPad2D(connector, options) {
        options = options || {};

        this.connector = connector;

        this.element = null;
        this.camera = null;
        this.scene = null;
        this.renderer = null;
        this.mouseX = 0; this.mouseY = 0;
        this.windowHalfX = window.innerWidth / 2;
        this.windowHalfY = window.innerHeight / 2;
        this.thumbObj = null;

        this.x = 0;
        this.y = 0;

        this.events = new FYO.EventManager();

        if (options.onmoved) {
            this.events.on('moved', options.onmoved);
        }

        navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate || function () { };

        this.Init(options);
    }

    DPad2D.prototype = {

        element: null,
        camera: null,
        scene: null,
        renderer: null,
        mouseX: 0, mouseY: 0,
        windowHalfX: window.innerWidth / 2,
        windowHalfY: window.innerHeight / 2,
        thumbObj: null,
        events: null,

        on: function (e, f) {
            return this.events.on(e, f);
        },

        remove: function (e, f) {
            return this.events.remove(e, f);
        },

        clear: function (e) {
            return this.events.clear(e);
        },

        Reposition: function (x, y, w, h) {
            var style = 'position: absolute; top: ' + y + 'px;';
            style += 'left: ' + x + 'px;';
            style += 'right: ' + (x + w) + 'px;';
            style += 'bottom: ' + (y + h) + 'px;';
            style += 'width: ' + w + 'px;';
            style += 'height: ' + h + 'px;';
            style += 'padding: 30px;';

            this.element.setAttribute('style', style);
            this.onWindowResize();
        },

        Init: function (options) {
            var self = this;

            this.element = document.createElement('div');

            // TODO: (garrett) This needs to be abstracted out like the button
            if (options.side) {
                this.element.setAttribute('style', 'padding: 30px; position: absolute; top: 0; left: 50%; right: 0; bottom: 30%;');
            } else {
                this.element.setAttribute('style', 'padding: 30px; position: absolute; top: 0; left: 0; right: 50%; bottom: 0;');
            }

            var containerParent = document.body;
            if (options.container) {
                containerParent = document.getElementById(options.container);
            }
            containerParent.appendChild(this.element);


            this.elementHalfX = this.element.clientWidth / 2;
            this.elementHalfY = this.element.clientHeight / 2;

            this.image = document.createElement('div');
            var style = 'background: url(\'' + (options.image || '/fyogametable/assets/imgs/DPad_2D.png') + '\') no-repeat center center;';
            style += 'background-size: contain; width: 100%; height: 100%;'
            this.image.setAttribute('style', style);

            this.element.appendChild(this.image);
            this.element.addEventListener('mousemove', function (e) { self.onMouseMove(e); }, false);
            this.element.addEventListener('mouseleave', function (e) { self.onMouseLeave(e); }, false);
            this.element.addEventListener('touchmove', function (e) { self.onTouchMove(e); }, false);
            this.element.addEventListener('touchstart', function (e) { self.onTouchStart(e); }, false);
            this.element.addEventListener('touchend', function (e) { self.onTouchDone(e); }, false);
            //
            window.addEventListener('resize', function (e) { self.onWindowResize(e); }, false);
        },

        onWindowResize: function () {
            this.elementHalfX = this.element.clientWidth / 2;
            this.elementHalfY = this.element.clientHeight / 2;
        },
        onMouseMove: function (event) {
            event.preventDefault();
            this.mouseX = event.offsetX;
            this.mouseY = event.offsetY;
            this._update();
        },
        onMouseLeave: function (event) {
            event.preventDefault();
            this.mouseX = this.elementHalfX;
            this.mouseY = this.elementHalfY;
            this._update();
        },
        onTouchStart: function (event) {
            event.preventDefault();
            navigator.vibrate(10);
            var rect = this.element.getBoundingClientRect();
            for (var i = 0; i < event.touches.length; i++) {
                // determine if touch is within rect
                var touch = event.touches[i];

                if (touch.pageX >= rect.left && touch.pageX <= rect.right && touch.pageY >= rect.top && touch.pageY <= rect.bottom) {
                    this.mouseX = touch.pageX - rect.left;
                    this.mouseY = touch.pageY - rect.top;
                    this._update();
                }
            }
        },
        onTouchMove: function (event) {
            event.preventDefault();
            var rect = this.element.getBoundingClientRect();
            for (var i = 0; i < event.touches.length; i++) {
                // determine if touch is within rect
                var touch = event.touches[i];

                if (touch.pageX >= rect.left && touch.pageX <= rect.right && touch.pageY >= rect.top && touch.pageY <= rect.bottom) {
                    this.mouseX = touch.pageX - rect.left;
                    this.mouseY = touch.pageY - rect.top;
                    this._update();
                }
            }
        },
        onTouchDone: function (event) {
            event.preventDefault();
            this.mouseX = this.elementHalfX;
            this.mouseY = this.elementHalfY;
            this._update();
            navigator.vibrate(10);
        },

        _update: function () {

            var prevX = this.x;
            var prevY = this.y;

            var _y = (this.mouseY - this.elementHalfY) / this.elementHalfY;
            var _x = (this.mouseX - this.elementHalfX) / this.elementHalfX;
            this.x = -Math.sin(_x);
            this.y = Math.sin(_y);
            var len = Math.sqrt((this.x * this.x + this.y * this.y));
            if (len > 1) {
                this.x /= len;
                this.y /= len;
            }



            if (Math.abs(this.y) > Math.abs(this.x)) {
                this.y = this.y > 0 ? 1 : -1;
                this.x = 0;
            } else if (Math.abs(this.x) > Math.abs(this.y)) {
                this.x = this.x > 0 ? 1 : -1;
                this.y = 0;
            } else {
                this.x = 0;
                this.y = 0;
            }

            if (prevX != this.x || prevY != this.y) {
                navigator.vibrate(10);
            }


            this.events.trigger('moved', {
                x: -this.x,
                y: -this.y
            });
        }
    };

    FYO.DPad2D = DPad2D;
})();