2dgame/legacy/vue/app.js

var abby = new Vue({
    el: '#root',
    data: {
        posX: null, // vertical
        posY: null, // horizontal

        isWalking: false,
        spriteName: 'down',

        stepIndicator: false,
        stepCounter: 0,
        speed: 3,

        talkMessage: 'Hi!',
        
        initialPosition: null
    },
    created() {
    },
    methods: {
        move(direction) {
            // set walking to true
            this.isWalking = true;
            this.spriteName = direction + this.step;

            // move abby
            switch (direction) {
                // move up
                case 'up':
                    this.posY = this.posY - this.speed;
                    break;
                // move down
                case 'down':
                    this.posY = this.posY + this.speed;
                    break;
                // move right
                case 'right':
                    this.posX = this.posX + this.speed;
                    break;
                // move left
                case 'left':
                    this.posX = this.posX - this.speed;
                    break;
                // don't move
                default:
                    break;
            }
            // start position
            setTimeout(this.toggleStep(), 44700);
            this.spriteName = direction;
        },
        toggleStep() {
            if (this.stepCounter === 5) {
                this.stepCounter = 0;
                this.stepIndicator = !this.stepIndicator;
            }
            this.stepCounter++;
        },
        toggleSpeed(speed) {
            this.speed = speed;
        },
        talk() {
            var Abby = jQuery('#char')
            Abby.attr('data-original-title', this.talkMessage);

            Abby.tooltip('toggle');

            setTimeout(function(){
                Abby.tooltip('toggle');
            }, 1000);
        },
        settings() {
            console.log('Geschwindigkeit: ' + this.speed);
            console.log('Position: ' + this.posX + ', ' + this.posY);
            console.log('Aktueller Sprite: ' + this.sprite);
            console.log('Nachricht: ' + this.talkMessage);
        }
    },
    mounted() {
    
    	let vue = this;
    	
	    axios.get('/api/position')
		  .then(function (response) {
		    let initialPosition = JSON.parse(response.data.position);
		    vue.posX = initialPosition.x;
		    vue.posY = initialPosition.y;
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
		  
		  vue.$forceUpdate;
    },
    computed: {
        positionAbby: function () {
            return 'left: ' + this.posX + 'px; top: ' + this.posY + 'px;'
        },

        sprite: function () {
            return 'img/sprites/' + this.spriteName + this.step + '.png';
        },

        step: function () {
            if (this.stepIndicator && this.isWalking) {
                return '_0';
            } else if (!this.stepIndicator && this.isWalking) {
                return '_1';
            } else {
                return '';
            }
        }
    },
    watch: {
    	posX() {
    		
			let vue = this;
			
			axios.post('/api/position/store', {
		    	position: '{"x": "' + vue.posX + '", "y: ' + vue.posY + '", "z": 0}'
			  })
			  .then(function (response) {
			    console.log(response);
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
    	},
    	
    	posY() {
    		
			let vue = this;
			
			axios.post('/api/position/store', {
		    	position: '{"x": ' + vue.posX + ', "y": ' + vue.posY + ', "z": 0}'
			  })
			  .then(function (response) {
			    console.log(response);
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
    	}
    }
});


// Check for Keypress
jQuery(document).keydown(function (e) {
    switch (e.keyCode) {
        // W, UP
        case 87:
            abby.move('up');
            break;
        case 38:
            abby.move('up');
            break;

        // A, LEFT
        case 65:
            abby.move('left');
            break;
        case 37:
            abby.move('left');
            break;

        // S, DOWN
        case 83:
            abby.move('down');
            break;
        case 40:
            abby.move('down');
            break;

        // D, RIGHT
        case 68:
            abby.move('right');
            break;
        case 39:
            abby.move('right');
            break;

        // R for Reset
        case 82:
            abby.posX = 14;
            abby.posY = 14;
            break;

        // E for Talk
        case 69:
            abby.talk();
            break;

        // do nothing
        default:
            abby.isWalking = false;
            break;
    }
});

jQuery(document).keyup(function (e) {
    abby.isWalking = false;
});

jQuery(function () {
  $('[data-toggle="tooltip"]').tooltip()
})