mikegerwitz
/
lasertank-js
1
0
Fork 0
Code Releases Activity
lasertank-js/index.html

138 lines
4.7 KiB
HTML
Raw Normal View History

Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
<!DOCTYPE html>
<html>
<head>
<title>LaserTank.js</title>
<link rel="stylesheet" type="text/css" href="style.css" />
Added favicon
2012-03-25 18:54:06 -04:00
<link rel="shortcut icon" href="favicon.ico" />
Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
</head>
<body>
Added noscript dialog to index page It is important that users understand that this game is free software. The same issues exist for proprietary software in the browser.
2012-03-24 19:39:11 -04:00
<noscript>
<div id="noscript" class="dialog show">
<div class="body">
Added title support to dialogs
2012-03-24 21:03:07 -04:00
<div class="title">Please enable JavaScript</div>
Added noscript dialog to index page It is important that users understand that this game is free software. The same issues exist for proprietary software in the browser.
2012-03-24 19:39:11 -04:00
<p>
<strong>Oops; it looks like JavaScript is not enabled.</strong> I do
applaud you for being a cautious user. Unfortunately, you aren't
going to get very far without it on this page.
</p>
<p>
There is no need for concern here &mdash; <strong>this game is
<a href="http://www.gnu.org/philosophy/free-sw.html">free
software</a></strong>, so you can rest assured that we will have
full respect for your freedoms and your privacy. Should you wish to
take a gander before enabling JavaScript, you may find the full
source code on <a
href="https://gitorious.org/lasertank-js">Gitorious</a> (I encourage
you to take a look either way).
</p>
<p>
Enjoy! (No, I'm sorry, you cannot close this dialog without enabling
JavaScript; too many people would simply close it without reading
this message. Should you be so inclined, feel free to inspect the
<tt>&lt;noscript&gt;</tt> element on this page and remove it.)
</p>
</div>
</div>
</noscript>
Began adding opening image to game screen - Note that this is stretched to fit the full size of the board
2012-03-21 22:44:44 -04:00
<div id="game" class="game opening">
Added titlebar to entire game "window"
2012-03-24 23:54:00 -04:00
<div class="title">LaserTank.js</div>
All game content will now appear below the menu bar I prefer the original look, but that is non-standard.
2012-03-25 00:05:33 -04:00
<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>
Added menu to top of game "window" (non-functional)
2012-03-21 21:51:47 -04:00
All game content will now appear below the menu bar I prefer the original look, but that is non-standard.
2012-03-25 00:05:33 -04:00
<div class="container">
Added titlebar to entire game "window"
2012-03-24 23:54:00 -04:00
<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>
Added control buttons (not yet functional) - Pixel precision for padding/margins, but button size left to window system
2012-03-21 23:22:53 -04:00
Added titlebar to entire game "window"
2012-03-24 23:54:00 -04:00
<div class="hud">
&nbsp;
</div>
Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
Added titlebar to entire game "window"
2012-03-24 23:54:00 -04:00
<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>
Added control buttons (not yet functional) - Pixel precision for padding/margins, but button size left to window system
2012-03-21 23:22:53 -04:00
Added titlebar to entire game "window"
2012-03-24 23:54:00 -04:00
<div class="load">
<fieldset>
<legend>Load LTG and LVL</legend>
<p>This section is temporary and is used during development.</p>
Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
Added titlebar to entire game "window"
2012-03-24 23:54:00 -04:00
<input type="file" id="ltg" />
<input type="file" id="lvl" />
</fieldset>
</div>
Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
</div>
</div>
Initial menu concept One of the only remaining portions of the UI at this point (disregarding missing functionality) was the menu bar. At this point, I had to make a number of choices, among them: - Do I mimic the original Windows UI, or provide a more native experience? - Do I support pre-{CSS3,ES5,HTML5} environments, or take advantage of each? The menu bar in this commit has the boxy style of the classic Windows theme -- not because I like it, but because it is representative of the original game, which was available only for that operating system. The same style is applied to the color of the "window" div in which the game is contained, as well as any dialogs. However, the buttons displayed on the screen are in the style native to the user's environment. With Gecko and Webkit offering the ability to style elements (including menu bars, etc) in a way that looks native[1], the question naturally arises -- do we provide more of a native port look, or a true clone look? Should the latter be the case, it may be more appropriate to style the buttons as boxes. The next decision was whether or not to support environments that do not provide many of the common CSS3, ES5 and HTML5 features. Initially, the project wished to use CSS sprites in order to support older browsers, however with the move to the canvas element, it seems unnecessary to provide such compatibility. Consider also the push by organizations like Mozilla and Google to automatically upgrade users' browsers, helping to ensure they have the newest available features. Also consider that supporting older environments only discourages users to upgrade, feeding the challenges that web developers already face in creating cross-browser software. With all of that, the decision was made to simply use the features provided by ECMAScript 5, CSS3 and HTML5, using browser extensions where necessary (for unstandardized features, e.g. -prefix-foo in CSS). It is rare that I get to work intimately with these newer features, as I find myself most often having to maintain compatibility with older environments. This will be an exciting chance to be able to explore these features and to showcase them for others who wish to see them used in a complete piece of software. That said, LaserTank is a fairly old game and, as such, is unlikely to take advantage of features like CSS transitions (animations are handled by timers and rendered to the canvas and there is not much else to transition), as that would take away from the retro feel of the original game. With the menu implementation, I attempted to limit myself to CSS as much as possible in order to reduce the amount of code that had to be written for the display of the menus and dialogs. The menus display using the :hover selector and the dialogs with the new :target selector. JavaScript is used to to register click events on the menu so that moving the mouse to another menu item will have it automatically displayed, keeping each of the menus hidden until a click. JavaScript is also used to determine when the menu should be hidden on mouseout. The menu does not function exactly like the menu in Windows, but it will be functional for now. I would like to worry about such issues after the bulk of the game logic has been developed. This commit's implementation is conceptual; it will be refactored shortly. [1] https://developer.mozilla.org/en/CSS/-moz-appearance
2012-03-24 19:13:12 -04:00
<div id="todo" class="dialog">
<div class="body">
Added title support to dialogs
2012-03-24 21:03:07 -04:00
<div class="title">TODO</div>
Initial menu concept One of the only remaining portions of the UI at this point (disregarding missing functionality) was the menu bar. At this point, I had to make a number of choices, among them: - Do I mimic the original Windows UI, or provide a more native experience? - Do I support pre-{CSS3,ES5,HTML5} environments, or take advantage of each? The menu bar in this commit has the boxy style of the classic Windows theme -- not because I like it, but because it is representative of the original game, which was available only for that operating system. The same style is applied to the color of the "window" div in which the game is contained, as well as any dialogs. However, the buttons displayed on the screen are in the style native to the user's environment. With Gecko and Webkit offering the ability to style elements (including menu bars, etc) in a way that looks native[1], the question naturally arises -- do we provide more of a native port look, or a true clone look? Should the latter be the case, it may be more appropriate to style the buttons as boxes. The next decision was whether or not to support environments that do not provide many of the common CSS3, ES5 and HTML5 features. Initially, the project wished to use CSS sprites in order to support older browsers, however with the move to the canvas element, it seems unnecessary to provide such compatibility. Consider also the push by organizations like Mozilla and Google to automatically upgrade users' browsers, helping to ensure they have the newest available features. Also consider that supporting older environments only discourages users to upgrade, feeding the challenges that web developers already face in creating cross-browser software. With all of that, the decision was made to simply use the features provided by ECMAScript 5, CSS3 and HTML5, using browser extensions where necessary (for unstandardized features, e.g. -prefix-foo in CSS). It is rare that I get to work intimately with these newer features, as I find myself most often having to maintain compatibility with older environments. This will be an exciting chance to be able to explore these features and to showcase them for others who wish to see them used in a complete piece of software. That said, LaserTank is a fairly old game and, as such, is unlikely to take advantage of features like CSS transitions (animations are handled by timers and rendered to the canvas and there is not much else to transition), as that would take away from the retro feel of the original game. With the menu implementation, I attempted to limit myself to CSS as much as possible in order to reduce the amount of code that had to be written for the display of the menus and dialogs. The menus display using the :hover selector and the dialogs with the new :target selector. JavaScript is used to to register click events on the menu so that moving the mouse to another menu item will have it automatically displayed, keeping each of the menus hidden until a click. JavaScript is also used to determine when the menu should be hidden on mouseout. The menu does not function exactly like the menu in Windows, but it will be functional for now. I would like to worry about such issues after the bulk of the game logic has been developed. This commit's implementation is conceptual; it will be refactored shortly. [1] https://developer.mozilla.org/en/CSS/-moz-appearance
2012-03-24 19:13:12 -04:00
<p>...quite a bit. </p>
<p>
This dialog will ultimately contain a useful TODO list. As it stands,
LTG and LVL file loading is complete, but no game logic has been
implemented.
</p>
<a href="#" class="close button">Close</a>
</div>
</div>
Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
<!-- these will be concatenated and minified at some point -->
<script src="scripts/ease.min.js"></script>
<script src="scripts/main.js"></script>
<script src="lib/TileDfn.js"></script>
<script src="lib/ClassicTileDfn.js"></script>
<script src="lib/LtgLoader.js"></script>
<script src="lib/TileMasker.js"></script>
<script src="lib/MapSet.js"></script>
<script src="lib/Map.js"></script>
<script src="lib/ClassicMap.js"></script>
<script src="lib/MapRender.js"></script>
<script src="lib/FileLoader.js"></script>
Refactored menu bar logic into ui/MenuBar
2012-03-24 23:09:20 -04:00
<script src="lib/ui/MenuBar.js"></script>
Began adding index.html, which will hold the actual game This essentially is a simplified demo page, styled to begin looking like the actual game.
2012-03-21 00:48:31 -04:00
<script src="scripts/game.js"></script>
</body>
</html>