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

29
style.css
View File

@ -15,6 +15,25 @@ body {
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 **/
.game ul.menu,
.game ul.menu ul {
@ -187,17 +206,7 @@ body {
z-index: 2001;
}
.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;
font-weight: bold;
color: white;
padding: 0.4em;
}
.dialog .close {
float: right;