Permalink
Browse files

added footer and reset css

  • Loading branch information...
1 parent de1fb57 commit a7d12687b8cb699a97d6897a5495d8c8d3643079 @MrJaba MrJaba committed May 9, 2010
Showing with 182 additions and 12 deletions.
  1. +2 −2 controllers/game_controller.rb
  2. +16 −5 public/css/bomberman.css
  3. +45 −0 public/css/reset.css
  4. +106 −0 public/css/typography.css
  5. +11 −3 public/index.html
  6. +2 −2 public/javascripts/game.js
@@ -1,4 +1,3 @@
-require 'ruby-debug'
class GameController < Cramp::Controller::Websocket
periodic_timer :push_states, :every => 0.1
periodic_timer :push_bombs, :every => 0.1
@@ -8,6 +7,7 @@ class << self
attr_accessor :player_states
attr_accessor :bomb_positions
end
+ TIMEOUT = 20
@player_states = {}
@bomb_positions = {}
@@ -73,7 +73,7 @@ def cleanup
end
def timed_out?(player_state)
- (Time.now - player_state[:last_message_time]) > 20
+ (Time.now - player_state[:last_message_time]) > TIMEOUT
end
def update_last_message_time(uuid)
View
@@ -1,5 +1,10 @@
-body {
- background:url('/images/retro-tv.jpg') no-repeat 25% 5%;
+
+
+#container{
+ background:url('/images/retro-tv.jpg') no-repeat 25% 5%;
+ width:948px;
+ height:650px;
+ float:left;
}
#map {
@@ -8,13 +13,13 @@ body {
#canvas{
position:relative;
- float:left;
- top:10%;
- left:19%;
+ top:12%;
+ left:17%;
}
#score-holder{
float:right;
+ clear:right;
}
#score-holder h3{
@@ -39,3 +44,9 @@ body {
background-color:red;
}
+#footer{
+ float:left;
+ margin-left:25%;
+ margin-top:2%;
+ clear:left;
+}
View
@@ -0,0 +1,45 @@
+/* --------------------------------------------------------------
+
+ reset.css
+ * Resets default browser CSS.
+
+-------------------------------------------------------------- */
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, code,
+del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-weight: inherit;
+ font-style: inherit;
+ font-size: 100%;
+ font-family: inherit;
+ vertical-align: baseline;
+}
+
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+ display:block;
+}
+
+body {
+ line-height: 1.5;
+}
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table { border-collapse: separate; border-spacing: 0; }
+caption, th, td { text-align: left; font-weight: normal; }
+table, td, th { vertical-align: middle; }
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after, q:before, q:after { content: ""; }
+blockquote, q { quotes: "" ""; }
+
+/* Remove annoying border on linked images. */
+a img { border: none; }
View
@@ -0,0 +1,106 @@
+/* --------------------------------------------------------------
+
+ typography.css
+ * Sets up some sensible default typography.
+
+-------------------------------------------------------------- */
+
+/* Default font settings.
+ The font-size percentage is of 16px. (0.75 * 16px = 12px) */
+html { font-size:100.01%; }
+body {
+ font-size: 75%;
+ color: #222;
+ background: #fff;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+
+/* Headings
+-------------------------------------------------------------- */
+
+h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }
+
+h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
+h2 { font-size: 2em; margin-bottom: 0.75em; }
+h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
+h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
+h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
+h6 { font-size: 1em; font-weight: bold; }
+
+h1 img, h2 img, h3 img,
+h4 img, h5 img, h6 img {
+ margin: 0;
+}
+
+
+/* Text elements
+-------------------------------------------------------------- */
+
+p { margin: 0 0 1.5em; }
+p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
+p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
+
+a:focus,
+a:hover { color: #000; }
+a { color: #009; text-decoration: underline; }
+
+blockquote { margin: 1.5em; color: #666; font-style: italic; }
+strong { font-weight: bold; }
+em,dfn { font-style: italic; }
+dfn { font-weight: bold; }
+sup, sub { line-height: 0; }
+
+abbr,
+acronym { border-bottom: 1px dotted #666; }
+address { margin: 0 0 1.5em; font-style: italic; }
+del { color:#666; }
+
+pre { margin: 1.5em 0; white-space: pre; }
+pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
+
+
+/* Lists
+-------------------------------------------------------------- */
+
+li ul,
+li ol { margin: 0; }
+ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 3.333em; }
+
+ul { list-style-type: disc; }
+ol { list-style-type: decimal; }
+
+dl { margin: 0 0 1.5em 0; }
+dl dt { font-weight: bold; }
+dd { margin-left: 1.5em;}
+
+
+/* Tables
+-------------------------------------------------------------- */
+
+table { margin-bottom: 1.4em; width:100%; }
+th { font-weight: bold; }
+thead th { background: #c3d9ff; }
+th,td,caption { padding: 4px 10px 4px 5px; }
+tr.even td { background: #e5ecf9; }
+tfoot { font-style: italic; }
+caption { background: #eee; }
+
+
+/* Misc classes
+-------------------------------------------------------------- */
+
+.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
+.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
+.hide { display: none; }
+
+.quiet { color: #666; }
+.loud { color: #000; }
+.highlight { background:#ff0; }
+.added { background:#060; color: #fff; }
+.removed { background:#900; color: #fff; }
+
+.first { margin-left:0; padding-left:0; }
+.last { margin-right:0; padding-right:0; }
+.top { margin-top:0; padding-top:0; }
+.bottom { margin-bottom:0; padding-bottom:0; }
View
@@ -11,6 +11,8 @@
<script src="javascripts/sprite.js" type="text/javascript"></script>
<script src="javascripts/movement.js" type="text/javascript"></script>
<link rel="Stylesheet" href="/css/bomberman.css" type="text/css" media="screen"/>
+ <link rel="Stylesheet" href="/css/reset.css" type="text/css" media="screen"/>
+ <link rel="Stylesheet" href="/css/typography.css" type="text/css" media="screen"/>
</head>
<body>
@@ -24,12 +26,18 @@
<tr><td>StoneBlock</td><td>StoneBlock</td><td>StoneBlock</td><td>StoneBlock</td><td>StoneBlock</td><td>StoneBlock</td><td>StoneBlock</td></tr>
</table>
- <canvas id="canvas"></canvas>
+ <div id="container">
+ <canvas id="canvas"></canvas>
+ </div>
<div id="score-holder">
<h3>Score</h3>
- <ul id="scores">
- </ul>
+ <ul id="scores"></ul>
+ </div>
+
+ <div id="footer">
+ <div>Created By MrJaba, Code available on github:<a href="http://github.com/MrJaba/Websocket-Bomberman">Websocket Bomberman</a></div>
+ <div>Requires an HTML5 compatible browser.</div>
</div>
</body>
@@ -11,8 +11,8 @@ MrJaba.Bomberman = function(){
function initCanvas(){
var c = canvasNode();
- c.width = (MrJaba.Bomberman.map.length * MrJaba.Bomberman.Images.tileWidth());
- c.height = (MrJaba.Bomberman.map.length * MrJaba.Bomberman.Images.tileHeight());
+ c.width = (MrJaba.Bomberman.map.length * MrJaba.Bomberman.Images.tileWidth() * 0.6 );
+ c.height = (MrJaba.Bomberman.map.length * MrJaba.Bomberman.Images.visibleTileHeight());
draw();
return c;
}

0 comments on commit a7d1268

Please sign in to comment.