Skip to content

Commit

Permalink
Added a Q&D UI for display of Battle view's view-model.
Browse files Browse the repository at this point in the history
  • Loading branch information
juraj committed Jun 14, 2013
1 parent d65a4be commit 29264de
Show file tree
Hide file tree
Showing 10 changed files with 163 additions and 45 deletions.
109 changes: 93 additions & 16 deletions res/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,19 +77,19 @@ div.menu {
margin: 10px 0px 0px 0px;
padding: 4px;
}
div.menu div.link {
float: left;
margin: 0px 4px 0px 0px;
}
div.menu div.link a {
padding: 5px;
cursor: pointer;
border: 1px solid #444444;
}
div.menu div.link:hover a {
padding: 4px;
border: 2px solid #444444;
}
div.menu div.link {
float: left;
margin: 0px 4px 0px 0px;
}
div.menu div.link a {
padding: 5px;
cursor: pointer;
border: 1px solid #444444;
}
div.menu div.link:hover a {
padding: 4px;
border: 2px solid #444444;
}

/* Battle view markup (TEMP)
* ---------------------------------------------------------------------------------------------------------------------- */
Expand All @@ -100,6 +100,83 @@ div.timers {
padding: 4px;
border: 1px solid #444444;
}
div.timer {
color: #990000;
}
div.timers div.timer {
color: #990000;
}

div.grid {
float: left;
}
div.grid div.grid_row {
clear: both;
float: left;
}
div.grid div.grid_row:nth-child(odd) {
margin-left: 23px;
}

div.grid div.grid_row div.tile {
float: left;
width: 44px;
height: 44px;
margin-bottom: -8px;
margin-right: 0px;

background: url('../graphics/battle/tile.png') top left no-repeat;
cursor: pointer;
font-size: 9px;
}
div.grid div.grid_row div.tile:hover {
background-position: bottom left;
}

div.grid div.grid_row div.tile div.unit {
float: left;
width: 32px;
height: 38px;

margin-left: 6px;
margin-top: -8px;

background: url('../graphics/battle/ofzza.gif') top left no-repeat;
}

div.grid div.grid_row div.tile div.info {
position: relative;
display: none;
float: left;
left: 48px;
top: 48px;
padding: 2px;

border: 1px solid #444444;
background-color: #ffffff;
}
div.grid div.grid_row div.tile:hover div.info {
display: block;
width: 200px;
}
div.grid div.grid_row div.tile:hover div.info div.header {
clear: both;
float: left;
font-size: 11px;
text-decoration: bold;
}
div.grid div.grid_row div.tile:hover div.info div.details {
clear: both;
float: left;
margin-top: 8px;
margin-left: 10px;
}
div.grid div.grid_row div.tile:hover div.info div.details div.title {
clear: both;
float: left;
font-size: 9px;
margin-bottom: 2px;
text-decoration: underline;
}
div.grid div.grid_row div.tile:hover div.info div.details div.detail {
clear: both;
float: left;
font-size: 9px;
}
Binary file added res/graphics/battle/ofzza.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/graphics/battle/sprite.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/graphics/battle/tile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/graphics/battle/tile.psd
View file
Binary file not shown.
Binary file added res/graphics/battle/tile_skewed.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added res/graphics/battle/tile_skewed.psd
View file
Binary file not shown.
35 changes: 13 additions & 22 deletions res/js/bt_game_battle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@ bt.events.define(bt.services.battleService, 'Error');
// "Service call successfull" event
bt.events.define(bt.services.battleService, 'Updated');

// "Battle field initialized" event
bt.events.define(bt.services.battleService, 'BattleFieldInitialized');
// "Battle field updated" event
bt.events.define(bt.services.battleService, 'BattleFieldUpdated');

// Initialize 'battle view' game functionality
// ---------------------------------------------------------------------------------------------------------------------
Expand Down Expand Up @@ -151,27 +155,18 @@ bt.game.battle = {
bt.game.battle.timers._playTime = bt.game.battle.timers._parseServerTime(data.ply);
bt.game.battle.timers._lastQueryTime = new Date();
// Fire event
bt.services.battleService.Called.dispatch({
message: 'Response from "BattleService.timeLeft()".',
data : data
});
bt.services.battleService.Called.dispatch({ message: 'Response from "BattleService.timeLeft()".', data : data });
// Update timers
bt.game.battle.timers.update();
} else {
// Fire event
bt.services.battleService.Error.dispatch({
message: 'Error calling "BattleService.timeLeft()"!',
data : data
});
bt.services.battleService.Error.dispatch({ message: 'Error calling "BattleService.timeLeft()"!', data : data });
}
},
// Fail callback
function(data) {
// Fire event
bt.services.battleService.Error.dispatch({
message: 'Error calling "BattleService.timeLeft()"!',
data : data
});
bt.services.battleService.Error.dispatch({ message: 'Error calling "BattleService.timeLeft()"!', data : data });
}
);
});
Expand Down Expand Up @@ -219,21 +214,17 @@ bt.game.battle.model = {
service.initialState(
// On successfull load callback
function(data) {
// Fire event
bt.services.battleService.Error.dispatch({
message: 'Response from "BattleService.init_state().',
data : data
});
// Fire events
bt.services.battleService.Called.dispatch({ message: 'Response from "BattleService.init_state().', data : data });
bt.services.battleService.BattleFieldInitialized.dispatch({ message: 'Response from "BattleService.init_state().', data : data });
bt.services.battleService.BattleFieldUpdated.dispatch({ message: 'Response from "BattleService.init_state().', data : data });
// Initialize view-model's battleField from response
bt.game.battle.model.battleField = new bt.model.definitions.battle.battleField(data);
},
// On error callback
function(data) {
// Fire event
bt.services.battleService.Error.dispatch({
message: 'Error calling "BattleService.init_state()"!',
data : data
});
// Fire events
bt.services.battleService.Error.dispatch({ message: 'Error calling "BattleService.init_state()"!', data : data });
}
);
});
Expand Down
4 changes: 2 additions & 2 deletions res/js/model/bt_model_battle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ bt.model.definitions.battle = {
// Extend location from passed object
if ((angular.isDefined(obj.location)) && (obj.location.length == 2)) {
this.location = {
x : obj.location[0],
y : obj.location[1]
x : obj.location[1],
y : obj.location[0]
}
} else if ((angular.isDefined(obj.location)) && (angular.isDefined(obj.location.x)) && (angular.isDefined(obj.location.y))) {
this.location = {
Expand Down
60 changes: 55 additions & 5 deletions res/partials/views/battle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,60 @@ <h3>Timers:</h3>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>

<div class="grid">
<div class="grid_row" ng-repeat=" tileRow in bt.game.battle.model.battleField.grid.tilesByY ">
<div class="tile" ng-repeat=" tile in tileRow ">

<div ng-if=" tile.contents.length ">
<div class="unit"></div>
</div>

<div class="info">
<div class="header">Tile @ {{ tile.location.x }}x{{ tile.location.y }}</div>
<div class="details">
<div class="title">Composition:</div>
<div class="detail">Fire: {{ tile.comp.Fire }}</div>
<div class="detail">Earth: {{ tile.comp.Earth }}</div>
<div class="detail">Ice: {{ tile.comp.Ice }}</div>
<div class="detail">Wind: {{ tile.comp.Wind }}</div>
</div>
<div class="details" ng-repeat=" unit in tile.contents ">
<div class="title">Unit: {{ unit.name }}</div>
<div class="detail">Type: {{ unit._type }}</div>
<div class="detail">Owner: {{ unit.owner }}</div>
<div class="detail">Sex: {{ unit.sex }}</div>
<div class="detail">Composition: E:{{ unit.comp.Earth }} F:{{ unit.comp.Fire }} I:{{ unit.comp.Ice }} W:{{ unit.comp.Wind }}</div>
<div class="detail">Element: {{ unit.element }}</div>
<div class="details">
<div class="title">Stats:</div>
<div class="detail">Value: {{ unit.general.value }}</div>
<div class="detail">Attack: {{ unit.general.attack }}</div>
<div class="detail">Defense: {{ unit.general.defense }}</div>
<div class="detail">Magic value: {{ unit.magic.value }}</div>
<div class="detail">Magic attack: {{ unit.magic.attack }}</div>
<div class="detail">Magic defense: {{ unit.magic.defense }}</div>
<div class="detail">Physical value: {{ unit.physical.value }}</div>
<div class="detail">Physical attack: {{ unit.physical.attack }}</div>
<div class="detail">Physical defense: {{ unit.physical.defense }}</div>
</div>
<div class="details">
<div class="title">Weapon: {{ unit.weapon._type }}</div>
<div class="detail">Element: {{ unit.weapon._dStone.element }}</div>
<div class="detail">Composition: E:{{ unit.weapon._dStone.comp.Earth }} F:{{ unit.weapon._dStone.comp.Fire }} I:{{ unit.weapon._dStone.comp.Ice }} W:{{ unit.weapon._dStone.comp.Wind }}</div>
</div>
<div class="details">
<div class="title">Weapon bonus:</div>
<div class="detail">Composition: E:{{ unit.weaponBonus._dStone.comp.Earth }} F:{{ unit.weaponBonus._dStone.comp.Fire }} I:{{ unit.weaponBonus._dStone.comp.Ice }} W:{{ unit.weaponBonus._dStone.comp.Wind }}</div>
</div>
</div>
</div>


</div>
</div>
</div>
<div style="clear: both;"></div>

</p>
</div>

0 comments on commit 29264de

Please sign in to comment.