add info panel displaying game's state

This commit is contained in:
Gwenhael Le Moine 2011-07-06 23:28:36 +02:00
parent 5a24e218d1
commit e939026242
3 changed files with 10 additions and 4 deletions

View file

@ -8,4 +8,4 @@
.gstar #blackboard .cube_selected{background-image:url(../themes/HP48/tex_cube_selected.png);color:red} .gstar #blackboard .cube_selected{background-image:url(../themes/HP48/tex_cube_selected.png);color:red}
.gstar #blackboard .gift{background-image:url(../themes/HP48/tex_gift.png);color:yellow} .gstar #blackboard .gift{background-image:url(../themes/HP48/tex_gift.png);color:yellow}
.gstar #blackboard .void{background-image:url(../themes/HP48/tex_empty.png);} .gstar #blackboard .void{background-image:url(../themes/HP48/tex_empty.png);}
.gstar aside{float:left;height:140px;padding:20px;background:#ddd}

View file

@ -24,14 +24,12 @@
<body> <body>
<div id="container"> <div id="container">
<header> <header>
Star5
</header> </header>
<div id="main" role="main"> <div id="main" role="main">
</div> </div>
<footer> <footer>
©Gwh
</footer> </footer>
</div> </div>

View file

@ -128,6 +128,14 @@ function format_level( state, text ) {
return myReplacer( state.board ); return myReplacer( state.board );
} }
function format_infos( state ) {
var infos = "<h1>Star5</h1><br />";
infos += "Level " + (state.level+1) + " of " + levels.length + "<br />";
infos += count_gifts( state ) + " gifts left<br />";
infos += state.distance_travelled + " meters travelled";
return infos;
}
function load_level( levelset, nb ) { function load_level( levelset, nb ) {
state.level = nb; state.level = nb;
state.board = levelset[ state.level ]; state.board = levelset[ state.level ];
@ -137,7 +145,7 @@ function load_level( levelset, nb ) {
} }
function display_level( state, elt ) { function display_level( state, elt ) {
var starhtml = '<div class="gstar"><p id="blackboard">' + format_level( state, false ) + '</p></div>'; var starhtml = '<div class="gstar"><div id="blackboard">' + format_level( state, false ) + '</div><aside id="infos">' + format_infos( state ) + '</aside></div>';
$( elt ).html( starhtml ); $( elt ).html( starhtml );
} }