493 lines
11 KiB
JavaScript
493 lines
11 KiB
JavaScript
var App = {};
|
|
|
|
var server = '/';
|
|
|
|
|
|
$(function() {
|
|
|
|
|
|
var Player = Backbone.Model.extend({
|
|
idAttribute: 'id_player',
|
|
urlRoot: server + 'player',
|
|
party: function() {
|
|
return CreatureCollection.filter({team: 1});
|
|
},
|
|
creatures: function() {
|
|
return this._creatures;
|
|
}
|
|
});
|
|
|
|
var Creature = Backbone.Model.extend({
|
|
idAttribute: 'id_creature',
|
|
localStorage: new Backbone.LocalStorage('Creature')
|
|
});
|
|
|
|
var CreatureCollection = Backbone.Collection.extend({
|
|
model: Creature,
|
|
localStorage: new Backbone.LocalStorage('CreatureCollection')
|
|
});
|
|
|
|
var Event = Backbone.Model.extend({
|
|
idAttribute: 'id_event',
|
|
urlRoot: server + 'event',
|
|
zones: function() {
|
|
if (!this.__zones) {
|
|
this.__zones = [];
|
|
for (x in this.attributes._zones) {
|
|
this.__zones[this.__zones.length] = new Zone(this.attributes._zones[x]);
|
|
}
|
|
}
|
|
return this.__zones;
|
|
}
|
|
});
|
|
|
|
var EventCollection = Backbone.Collection.extend({
|
|
model: Event
|
|
});
|
|
|
|
var Zone = Backbone.Model.extend({
|
|
idAttribute: 'id_zone',
|
|
urlRoot: server + 'zone',
|
|
quests: function() {
|
|
if (!this.__quests) {
|
|
this.__quests = [];
|
|
for (x in this.attributes._quests) {
|
|
this.__quests[this.__quests.length] = new Quest(this.attributes._quests[x]);
|
|
}
|
|
}
|
|
return this.__quests;
|
|
}
|
|
});
|
|
|
|
var ZoneCollection = Backbone.Collection.extend({
|
|
model: Zone
|
|
});
|
|
|
|
var Quest = Backbone.Model.extend({
|
|
idAttribute: 'id_quest',
|
|
urlRoot: server + 'quest',
|
|
progress: function() {
|
|
var self = this;
|
|
$.getJSON(server + 'quest/' + this.attributes.id_quest + '/progress', function(res, status) {
|
|
if (status == 'success') {
|
|
var quest = res.quest;
|
|
var loot = res.loot;
|
|
for (var x in quest) {
|
|
self.attributes[x] = quest[x];
|
|
}
|
|
self._view.loot = loot;
|
|
self.trigger('change');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
var MainView = Backbone.View.extend({
|
|
id: 'mainView',
|
|
el: $('body'),
|
|
subviews:null,
|
|
subviewsNavigator:null,
|
|
|
|
render:function () {
|
|
var html = this.template();
|
|
this.el.innerHTML = html;
|
|
|
|
App.navigator = new BackStack.StackNavigator({
|
|
el: '#wrapper'
|
|
});
|
|
App.navigator.defaultPushTransition = new BackStack.NoEffect();
|
|
|
|
Backbone.history.start({pushState: true});
|
|
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#root-template').html());
|
|
}
|
|
});
|
|
|
|
var ErrorView = Backbone.View.extend({
|
|
el: $('body'),
|
|
render:function (er) {
|
|
this.el.innerHTML = this.template({
|
|
error: er
|
|
});
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#error-template').html());
|
|
}
|
|
});
|
|
|
|
var UpdateView = Backbone.View.extend({
|
|
className: 'update content',
|
|
el: $('body'),
|
|
render : function() {
|
|
this.el.innerHTML = this.template();
|
|
|
|
var $topLoader = $('#updateLoader').percentageLoader({
|
|
width: 256,
|
|
height: 256,
|
|
controllable: true,
|
|
progress: 0,
|
|
onProgressUpdate: function(val) {
|
|
$topLoader.setValue(Math.round(val * 100.0));
|
|
}
|
|
});
|
|
|
|
this.loader = $topLoader;
|
|
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#update-template').html());
|
|
}
|
|
});
|
|
|
|
var NewsView = Backbone.View.extend({
|
|
className: 'news content',
|
|
model: 'Event',
|
|
render : function() {
|
|
var html = this.template({
|
|
player: App.player,
|
|
events: App.events
|
|
});
|
|
this.$el.html(html);
|
|
},
|
|
events: {
|
|
'click .event-link': 'eventClick'
|
|
},
|
|
eventClick: function(e) {
|
|
var event = App.events.get(
|
|
$(e.toElement).attr('data-id_event')
|
|
);
|
|
App.router.navigate('/event/' + event.attributes.id_event, {trigger: true});
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#news-template').html());
|
|
//_.bindAll(this, 'changeName');
|
|
//this.model.bind('change:name', this.changeName);
|
|
}
|
|
});
|
|
|
|
var CreaturesView = Backbone.View.extend({
|
|
tagName : 'div',
|
|
className: 'creatures content',
|
|
render : function() {
|
|
var html = this.template({
|
|
player: App.player
|
|
});
|
|
this.el.innerHTML = html;
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#creatures-template').html());
|
|
//_.bindAll(this, 'changeName');
|
|
//this.model.bind('change:name', this.changeName);
|
|
}
|
|
});
|
|
|
|
var SettingsView = Backbone.View.extend({
|
|
tagName : 'div',
|
|
className: 'settings content',
|
|
render : function() {
|
|
this.el.innerHTML = this.template();
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#settings-template').html());
|
|
//_.bindAll(this, 'changeName');
|
|
//this.model.bind('change:name', this.changeName);
|
|
}
|
|
});
|
|
|
|
var StoryView = Backbone.View.extend({
|
|
tagName : 'div',
|
|
className: 'story content',
|
|
render : function() {
|
|
this.el.innerHTML = this.template({
|
|
events: App.events
|
|
});
|
|
},
|
|
events: {
|
|
'click .event-link': 'eventClick'
|
|
},
|
|
eventClick: function(e) {
|
|
var event = App.events.get(
|
|
$(e.toElement).attr('data-id_event')
|
|
);
|
|
App.router.navigate('/event/' + event.attributes.id_event, {trigger: true});
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#story-template').html());
|
|
//_.bindAll(this, 'changeName');
|
|
//this.model.bind('change:name', this.changeName);
|
|
}
|
|
});
|
|
|
|
var EventView = Backbone.View.extend({
|
|
tagName : 'div',
|
|
className: 'events content',
|
|
model: 'Event',
|
|
render : function() {
|
|
if (!this.model.attributes.name) {
|
|
return;
|
|
}
|
|
var html = this.template({
|
|
event: this.model,
|
|
});
|
|
this.el.innerHTML = html;
|
|
},
|
|
events: {
|
|
'click .zone-link': 'zoneClick'
|
|
},
|
|
zoneClick: function(e) {
|
|
App.router.navigate('/zone/' + $(e.toElement).attr('data-id_zone'), {trigger: true});
|
|
},
|
|
modelChanged: function() {
|
|
this._view.render();
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#event-template').html());
|
|
this.model.bind('change', this.modelChanged);
|
|
}
|
|
});
|
|
|
|
var ZoneView = Backbone.View.extend({
|
|
className: 'zones content',
|
|
model: 'Zone',
|
|
render : function() {
|
|
if (!this.model.attributes.name) {
|
|
return;
|
|
}
|
|
var html = this.template({
|
|
zone: this.model
|
|
});
|
|
this.el.innerHTML = html;
|
|
},
|
|
events: {
|
|
'click .quest-link': 'questClick'
|
|
},
|
|
questClick: function(e) {
|
|
App.router.navigate('/quest/' + $(e.toElement).attr('data-id_quest'), {trigger: true});
|
|
},
|
|
modelChanged: function() {
|
|
this._view.render();
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#zone-template').html());
|
|
this.model.bind('change', this.modelChanged);
|
|
}
|
|
});
|
|
|
|
var QuestView = Backbone.View.extend({
|
|
className: 'quests content',
|
|
model: 'Quest',
|
|
loot: [],
|
|
render : function() {
|
|
if (!this.model.attributes.name) {
|
|
return;
|
|
}
|
|
|
|
var html = this.template({
|
|
quest: this.model,
|
|
loot: this.loot
|
|
});
|
|
this.el.innerHTML = html;
|
|
},
|
|
events: {
|
|
'click .quest-progress': 'questProgressClick'
|
|
},
|
|
questProgressClick: function(e) {
|
|
this.model.progress();
|
|
},
|
|
modelChanged: function() {
|
|
this._view.render();
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#quest-template').html());
|
|
this.model.bind('change', this.modelChanged);
|
|
}
|
|
});
|
|
|
|
var HomeView = Backbone.View.extend({
|
|
className: 'home content',
|
|
render : function() {
|
|
this.el.innerHTML = this.template();
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#home-template').html());
|
|
//_.bindAll(this, 'changeName');
|
|
//this.model.bind('change:name', this.changeName);
|
|
}
|
|
});
|
|
|
|
var PlayerView = Backbone.View.extend({
|
|
className: 'player content',
|
|
render: function() {
|
|
// prevents triggering model changes prior to stack push
|
|
if (!this.model.attributes.name) {
|
|
return;
|
|
}
|
|
var html = this.template({
|
|
player: this.model
|
|
});
|
|
this.el.innerHTML = html;
|
|
},
|
|
modelChanged: function() {
|
|
this._view.render();
|
|
},
|
|
initialize: function (args) {
|
|
this.template = _.template($('#player-template').html());
|
|
this.model.bind('change', this.modelChanged);
|
|
}
|
|
});
|
|
|
|
var AppRouter = Backbone.Router.extend({
|
|
routes: {
|
|
'event/:id': 'getEvent',
|
|
'player/:id': 'getPlayer',
|
|
'player': 'getPlayer',
|
|
'quest/:id': 'getQuest',
|
|
'zone/:id': 'getZone',
|
|
'me': 'getPlayer',
|
|
'settings': 'getSettings',
|
|
'creatures': 'getCreatures',
|
|
'game': 'getStory',
|
|
'news': 'defaultRoute',
|
|
'home': 'getHome',
|
|
'items': 'getItems',
|
|
'forceupdate': 'getUpdate',
|
|
'*actions': 'defaultRoute',
|
|
}
|
|
});
|
|
|
|
App.router = new AppRouter;
|
|
|
|
App.router.on('route:getItems', function(actions) {
|
|
|
|
var zone = new Zone({id_zone: actions});
|
|
var itemsView = new ItemsView({
|
|
model: zone
|
|
});
|
|
zone._view = zoneView;
|
|
zone.fetch();
|
|
|
|
App.navigator.pushView(zoneView);
|
|
});
|
|
|
|
App.router.on('route:getZone', function(actions) {
|
|
|
|
var zone = new Zone({id_zone: actions});
|
|
var zoneView = new ZoneView({
|
|
model: zone
|
|
});
|
|
zone._view = zoneView;
|
|
zone.fetch();
|
|
|
|
App.navigator.pushView(zoneView);
|
|
});
|
|
|
|
App.router.on('route:getQuest', function(actions) {
|
|
|
|
var quest = new Quest({id_quest: actions});
|
|
var questView = new QuestView({
|
|
model: quest
|
|
});
|
|
quest._view = questView;
|
|
quest.fetch();
|
|
|
|
App.navigator.pushView(questView);
|
|
});
|
|
|
|
App.router.on('route:defaultRoute', function(actions) {
|
|
App.navigator.pushView(NewsView);
|
|
});
|
|
|
|
App.router.on('route:getUpdate', function(actions) {
|
|
localStorage.clear();
|
|
$.getJSON(server + 'start', function(res, status) {
|
|
if (status == 'success') {
|
|
AppUpdate(res);
|
|
}
|
|
});
|
|
});
|
|
|
|
App.router.on('route:getSettings', function(actions) {
|
|
App.navigator.pushView(SettingsView);
|
|
});
|
|
|
|
App.router.on('route:getCreatures', function(actions) {
|
|
App.navigator.pushView(CreaturesView);
|
|
});
|
|
|
|
App.router.on('route:getStory', function(actions) {
|
|
App.navigator.pushView(StoryView);
|
|
});
|
|
|
|
App.router.on('route:getHome', function(actions) {
|
|
App.navigator.pushView(HomeView);
|
|
});
|
|
|
|
App.router.on('route:getEvent', function(actions) {
|
|
var event = new Event({id_event: actions});
|
|
var eventView = new EventView({
|
|
model: event
|
|
});
|
|
event._view = eventView;
|
|
eventView.model.fetch();
|
|
|
|
App.navigator.pushView(eventView);
|
|
});
|
|
|
|
App.router.on('route:getPlayer', function(actions) {
|
|
if (actions) {
|
|
var player = new Player({id_player: actions});
|
|
var playerView = new PlayerView({
|
|
model: player
|
|
});
|
|
player._view = playerView;
|
|
playerView.model.fetch();
|
|
} else {
|
|
var playerView = new PlayerView({
|
|
model: App.player
|
|
});
|
|
}
|
|
App.navigator.pushView(playerView);
|
|
});
|
|
|
|
var AppInit = function(res) {
|
|
localStorage.setItem('version', res.version);
|
|
|
|
var player = res.player;
|
|
var creatures = res.player.creatures;
|
|
delete player.creatures;
|
|
|
|
for (var x in creatures) {
|
|
var creature = new Creature(creatures[x].creature);
|
|
creature.save();
|
|
}
|
|
|
|
App.player = new Player(player);
|
|
App.events = new EventCollection(res.events);
|
|
App.zones = new ZoneCollection();
|
|
|
|
var main = new MainView;
|
|
main.render();
|
|
};
|
|
|
|
var AppUpdate = function(res) {
|
|
AppInit(res);
|
|
};
|
|
|
|
$.getJSON(server + 'config', function(res, status) {
|
|
if (status == 'success') {
|
|
var currentVersion = localStorage.getItem('version');
|
|
if (currentVersion != res.version) {
|
|
// need to update
|
|
AppUpdate(res);
|
|
} else {
|
|
AppInit(res);
|
|
}
|
|
}
|
|
}).error(function() {
|
|
var main = new ErrorView;
|
|
main.render('The server is currently down. Sorry!');
|
|
})
|
|
});
|