Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix up player rendering, take/drop inventory items
  • Loading branch information
sfoster committed Jul 6, 2015
1 parent e9749eb commit 1a4e7a6
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 22 deletions.
16 changes: 15 additions & 1 deletion src/client/lib/resolve.js
Expand Up @@ -37,12 +37,16 @@ define([
/*
* returns Promise
*/
function resolveResource(resourceId) {
function resolveResource(resourceId, params) {
var loaderPrefix = '',
suffix = '',
fragmentMatch = resourceId.match(/^([^#]+)(#.+)/),
isJson = false;
var resourceRefId = resourceId;
var paramNames;
if (params) {
paramNames = Object.keys(params).join(',');
}

if(fragmentMatch) {
loaderPrefix = 'plugins/property!';
Expand All @@ -67,6 +71,16 @@ define([
// console.log('resolve, ' + loaderPrefix+resourceId+suffix + ' loaded data: ', result);
var expandedResult = resolveObjectProperties(result);
expandedResult.then(function(result) {
// put the resource data into place
if(suffix && !('id' in result)) {
result.id = (suffix.split('#'))[1];
}
if (paramNames) {
result._paramNames = paramNames;
if (params) {
util.mixin(result, params);
}
}
result._resourceId = resourceRefId;
// console.log('resolveResource, got result: ', result);
resolve(result);
Expand Down
105 changes: 88 additions & 17 deletions src/client/player.html
Expand Up @@ -38,6 +38,9 @@
</div>
</section>
<section id="main" class="panel">
<section style="background:#ccc; padding: 6px">
<button onclick="player.score++;hud.updatePlayerInfo(player)">Score++</button>
</section>
<h2>Inventory</h2>
<script type="text/notes">
fill this element with rendered items from the inventory collection
Expand All @@ -52,6 +55,17 @@ <h2>Here</h2>
</ul>
</section>


<script type="text/template" id="hereItemTemplate">
<li class="item" data-id="{id}">{name}
<button class="take">take</button>
</li>
</script>
<script type="text/template" id="inventoryItemTemplate">
<li class="item {equipped}" data-id="{id}">{name}
<button class="drop">drop</button>
</li>
</script>
<script type="text/template" id="itemTemplate">
<li class="item {equipped}">{name}</li>
</script>
Expand All @@ -66,26 +80,26 @@ <h2>Here</h2>
<script src="./config.js"></script>
<script>
require([
'resources/template',
'lib/util',
'lib/resolve',
'resources/template',
'resources/player',
'resources/item',
'plugins/vendor/json!player/'+(config.playerid || 'guest') + '.json',
'text!resources/templates/player.html',
'resources/weapons',
'resources/items',
'plugins/resource!resources/items#hagStone',
], function(template, util, Player, Item, playerData, playerTemplate,
weapons, items, hagStone){
'resources/items'
], function(util, resolve, template, Player, Item, playerData, playerTemplate,
weapons, items){

window.player = playerData = Player.fillDefaults(playerData);
window.tile = {};

var hereItems = tile.here = [
hagStone
];

var viewModel = window.viewModel = {
player: playerData,
player: window.player,
here: hereItems
};

Expand All @@ -105,7 +119,7 @@ <h2>Here</h2>
// and render each item
// render player current weapon

var hud = {
var hud = window.hud = {
init: function() {
this.element = document.getElementById('hud');
this.registerEvents();
Expand All @@ -127,7 +141,7 @@ <h2>Here</h2>
function createTemplateFromScriptNode(node) {
return template(node.innerHTML);
}
var mainUI = {
var mainUI = window.mainUI = {
init: function() {

this.element = document.getElementById('main');
Expand All @@ -137,14 +151,58 @@ <h2>Here</h2>
this.updateHereItems(tile.here);
},
registerEvents: function() {

document.getElementById('hereItems').addEventListener('click', this);
document.getElementById('inventory').addEventListener('click', this);
},
handleEvent: function(evt) {

var id = evt.target.id,
cls = evt.target.className;
if (evt.type == 'click') {
switch (cls) {
case 'take':
var itemId = evt.target.parentNode.dataset.id;
this.takeItem(itemId);
break;
case 'drop':
var itemId = evt.target.parentNode.dataset.id;
this.dropItem(itemId);
break;
}
}
},
takeItem: function(id) {
var fromCollection = hereItems;
var toCollection = player.inventory;
for(var idx = fromCollection.length -1; idx >= 0; idx--) {
if (fromCollection[idx].id === id) {
break;
}
}
if (idx >= -1) {
toCollection.push(fromCollection[idx]);
fromCollection.splice(idx, 1);
}
this.updateInventory(player.inventory);
this.updateHereItems(hereItems);
},
dropItem: function(id) {
var fromCollection = player.inventory;
var toCollection = hereItems;
for(var idx = fromCollection.length -1; idx >= 0; idx--) {
if (fromCollection[idx].id === id) {
break;
}
}
if (idx >= -1) {
toCollection.push(fromCollection[idx]);
fromCollection.splice(idx, 1);
}
this.updateInventory(player.inventory);
this.updateHereItems(hereItems);
},
updateInventory: function(inventory) {
var itemTemplate = createTemplateFromScriptNode(
document.getElementById('itemTemplate')
document.getElementById('inventoryItemTemplate')
);
var container = document.getElementById('inventory');
var itemHTMLs = inventory.map(function(item) {
Expand All @@ -169,11 +227,10 @@ <h2>Here</h2>
},
updateHereItems: function(items) {
var itemTemplate = createTemplateFromScriptNode(
document.getElementById('itemTemplate')
document.getElementById('hereItemTemplate')
);
var container = document.getElementById('hereItems');
var itemHTMLs = items.map(function(item, index) {
console.log('item: ', item)
var html = itemTemplate(util.create(item, {
equipped: false,
index: index
Expand All @@ -183,9 +240,23 @@ <h2>Here</h2>
container.innerHTML = itemHTMLs.join('\n');
}
};

hud.init();
mainUI.init();
var promises = [
resolve.resolveObjectProperties(window.player).then(function(player) {
console.log('resolved player: ', player);
window.player = viewModel.player = player;
}, function(err) {
console.warn('Error resolving player: ', err);
}),
resolve.resolveResource('resources/items#hagStone', { everUsed: false }).then(function(hagStone) {
console.log('resolved hagStone: ', hagStone);
hereItems.push(hagStone);
})
];
Promise.all(promises).then(function() {
console.log('All promises resolved');
hud.init();
mainUI.init();
});

// viewModel.here.subscribe(function(change){
// tile.here = ko.mapping.toJS(viewModel.here);
Expand Down
8 changes: 4 additions & 4 deletions src/client/region.html
Expand Up @@ -238,7 +238,7 @@
if (simGrid[stub.id]) {
if (isTileStub(stub)) {
// resolve stub to actual location entity
console.log('tile %s in sim area, needs loading');
console.log('tile %s in sim area, needs loading', stub.id);
var resourceId = 'location/' + regionId + '/' + stub.id;
var promise = resolve.resolveResource(resourceId).then(function(locn) {
// console.log('resolve location: ', resourceId, locn);
Expand All @@ -258,15 +258,15 @@
loadPromises.push(promise);
} else {
// already loaded, leave it
console.log('tile %s in sim area, but is already loaded', stub);
console.log('tile %s in sim area, but is already loaded', stub.id);
}
} else {
if (isTileStub(stub)) {
console.log('tile %s outside sim area, is stub', stub);
console.log('tile %s outside sim area, is stub', stub.id);
// leave it
} else {
// freeze it
console.log('tile %s loaded but outside sim area', stub);
console.log('tile %s loaded but outside sim area', stub.id);
}
}
});
Expand Down

0 comments on commit 1a4e7a6

Please sign in to comment.