mikegerwitz
/
lasertank-js
1
0
Fork 0
Code Releases Activity

Added titlebar to entire game "window"

master
Mike Gerwitz 2012-03-24 23:54:00 -04:00
parent 3d3bee68f6
commit abdda72148
2 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
index.html
View File

@ -35,69 +35,72 @@
</noscript> </noscript>
<div id="game" class="game opening"> <div id="game" class="game opening">
<ul id="menubar" class="menu"> <div class="title">LaserTank.js</div>
<li> <div class="body">
<a id="mnu_help" href="#help">Game</a> <ul id="menubar" class="menu">
<ul id="help"> <li>
<li>Nothing to see here</li> <a id="mnu_help" href="#help">Game</a>
</ul> <ul id="help">
</li> <li>Nothing to see here</li>
<li> </ul>
<a id="mnu_help" href="#help">Move</a> </li>
<ul id="help"> <li>
<li>Nothing to see here</li> <a id="mnu_help" href="#help">Move</a>
</ul> <ul id="help">
</li> <li>Nothing to see here</li>
<li> </ul>
<a id="mnu_help" href="#help">Options</a> </li>
<ul id="help"> <li>
<li>Nothing to see here</li> <a id="mnu_help" href="#help">Options</a>
</ul> <ul id="help">
</li> <li>Nothing to see here</li>
<li> </ul>
<a id="mnu_help" href="#help">Editor</a> </li>
<ul id="help"> <li>
<li>Nothing to see here</li> <a id="mnu_help" href="#help">Editor</a>
</ul> <ul id="help">
</li> <li>Nothing to see here</li>
<li> </ul>
<a id="mnu_help" href="#help">Help</a> </li>
<ul id="help"> <li>
<li><a href="#todo">TODO List</a></li> <a id="mnu_help" href="#help">Help</a>
</ul> <ul id="help">
</li> <li><a href="#todo">TODO List</a></li>
</ul> </ul>
</li>
</ul>
<img id="opening" class="opening" src="images/opening.gif" /> <img id="opening" class="opening" src="images/opening.gif" />
<canvas id="render" width="512" height="512"> <canvas id="render" width="512" height="512">
Your web browser does not support the canvas element. Your web browser does not support the canvas element.
</canvas> </canvas>
<div class="hud"> <div class="hud">
&nbsp; &nbsp;
</div> </div>
<div class="control"> <div class="control">
<button id="undo" class="gapl" disabled>Undo</button> <button id="undo" class="gapl" disabled>Undo</button>
<button id="hint" class="gapr" disabled>Hint</button> <button id="hint" class="gapr" disabled>Hint</button>
<button id="savepos" class="full" disabled>Save Position</button> <button id="savepos" class="full" disabled>Save Position</button>
<button id="restpos" class="full" disabled>Restore Position</button> <button id="restpos" class="full" disabled>Restore Position</button>
<button id="new" class="gapl">New</button> <button id="new" class="gapl">New</button>
<button id="restart" class="gapr" disabled>Restart</button> <button id="restart" class="gapr" disabled>Restart</button>
<button id="loadlvl" class="full">Load Level</button> <button id="loadlvl" class="full">Load Level</button>
<button id="prevlvl" class="gapl">&lt;&lt; Lvl</button> <button id="prevlvl" class="gapl">&lt;&lt; Lvl</button>
<button id="nextlvl" class="gapr">Lvl &gt;&gt;</button> <button id="nextlvl" class="gapr">Lvl &gt;&gt;</button>
</div> </div>
</a> </a>
<div class="load"> <div class="load">
<fieldset> <fieldset>
<legend>Load LTG and LVL</legend> <legend>Load LTG and LVL</legend>
<p>This section is temporary and is used during development.</p> <p>This section is temporary and is used during development.</p>
<input type="file" id="ltg" /> <input type="file" id="ltg" />
<input type="file" id="lvl" /> <input type="file" id="lvl" />
</fieldset> </fieldset>
</div>
</div> </div>
</div> </div>

29
style.css
View File

@ -15,6 +15,25 @@ body {
width: 696px; width: 696px;
} }
/* simply ensures that absolute-positioned elements are below the title bar */
.game > div {
position: relative;
}
/* common to all titles (dialog-specific is further down) */
.title {
background-color: #000080;
background-image: -webkit-linear-gradient( left, #000080, #1084d0 );
background-image: -moz-linear-gradient( left, #000080, #1084d0 );
background-image: -ms-linear-gradient( left, #000080, #1084d0 );
background-image: -o-linear-gradient( left, #000080, #1084d0 );
font-weight: bold;
color: white;
padding: 0.4em;
}
/** menu **/ /** menu **/
.game ul.menu, .game ul.menu,
.game ul.menu ul { .game ul.menu ul {
@ -187,17 +206,7 @@ body {
z-index: 2001; z-index: 2001;
} }
.dialog > .body > .title { .dialog > .body > .title {
background-color: #000080;
background-image: -webkit-linear-gradient( left, #000080, #1084d0 );
background-image: -moz-linear-gradient( left, #000080, #1084d0 );
background-image: -ms-linear-gradient( left, #000080, #1084d0 );
background-image: -o-linear-gradient( left, #000080, #1084d0 );
margin: -0.5em -0.5em 0.5em -0.5em; margin: -0.5em -0.5em 0.5em -0.5em;
font-weight: bold;
color: white;
padding: 0.4em;
} }
.dialog .close { .dialog .close {
float: right; float: right;