Better looking static site

dhotson · Sep 9, 2012 · cd3bf8b · cd3bf8b
1 parent 4357e31
commit cd3bf8b
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 17 deletions.
diff --git a/assets/deathmatch.css b/assets/deathmatch.css
@@ -0,0 +1,96 @@
+html {
+  margin: 0;
+
+  background: #EEEEEE url(white_brick_wall.png) repeat top left;
+
+  /* Text selection is mostly annoying.. */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+#canvas {
+  cursor: none;
+  position: absolute;
+  top: 15px;
+  left: 235px;
+  z-index: 100;
+}
+
+h1 {
+  display: block;
+  width: 200px;
+  height: 50px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: url(dthmtch.png);
+  text-indent: -999px;
+  margin: 0;
+}
+
+.lesson {
+  position: absolute;
+  left: 20px;
+  top: 100px;
+  width: 200px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  text-align: center;
+  line-height: 40px;
+  background-color: #f3f3f3;
+  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 7px rgba(0,0,0,0.1);
+  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 7px rgba(0,0,0,0.1);
+  -o-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 7px rgba(0,0,0,0.1);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 7px -2px rgba(0,0,0,0.1);
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+.classy {
+  font-family: Georgia;
+  font-style: italic;
+}
+
+.keys {
+  display: inline-block;
+}
+
+.key {
+  display: inline-block;
+  position: relative;
+  margin: 3px 4px 3px 0;
+  text-transform: uppercase;
+  border: 1px solid #aaa;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  vertical-align: center;
+  background-color: #f6f6f6;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e0e0e0)); /* Safari 4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #f6f6f6, #e0e0e0); /* Chrome 10+, Safari 5.1+, iOS 5+ */
+  background-image: -moz-linear-gradient(top, #f6f6f6, #e0e0e0); /* Firefox 3.6-15 */
+  background-image: -o-linear-gradient(top, #f6f6f6, #e0e0e0); /* Opera 11.10-12.00 */
+  background-image: linear-gradient(to bottom, #f6f6f6, #e0e0e0); /* Firefox 16+, IE10, Opera 12.50+ */
+  border-radius: 3px;
+  -webkit-box-shadow: 0 1px 0 rgb(255,255,255) inset, 0 1px 0 #CCC, 0 2px 0 #AAA, 0 2px 3px rgba(0,0,0,0.2);
+  -moz-box-shadow: 0 1px 0 rgb(255,255,255) inset, 0 1px 0 #CCC, 0 2px 0 #AAA, 0 2px 3px rgba(0,0,0,0.2);
+  -o-box-shadow: 0 1px 0 rgb(255,255,255) inset, 0 1px 0 #CCC, 0 2px 0 #AAA, 0 2px 3px rgba(0,0,0,0.2);
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 1px 0 #CCC, 0 2px 0 #AAA, 0 2px 3px rgba(0,0,0,0.2);
+  z-index: 50;
+}
+
+.mouse {
+  display: inline-block;
+  width: 20px;
+  height: 30px;
+  background: url(mouse.png);
+  text-indent: -999px;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+
diff --git a/assets/dthmtch.png b/assets/dthmtch.png
diff --git a/assets/mouse.png b/assets/mouse.png
diff --git a/index.html b/index.html
@@ -1,13 +1,29 @@
-<html>
-<head><title></title></head>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>DTHMT.CH</title>
+  <link rel="stylesheet" href="assets/deathmatch.css" type="text/css" />
+  <meta charset="utf-8" />
+</head>
 <body>
-<style>
-body {
-  margin: 0;
-}
-</style>
-<canvas id="canvas"></canvas>
+<h1 title="Deathmatch">DTHMT.CH</h1>
+<div class="lesson">
+<p>
+<span class="keys">
+<span class="key w">w</span><br />
+<span class="key a">a</span>
+<span class="key s">s</span>
+<span class="key d">d</span>
+</span>
+to move</p>
+<p><span class="mouse">Mouse</span> to point and shoot</p>
+<p><span class="key">f</span> to fullscreen</p>
+<p class="classy">Go forth and vanquish your foes.</p>
+</div>
+
+<canvas id="canvas" width="800" height="600"></canvas>
 <script src="vendor/raf.js"></script>
+<script src="vendor/bigscreen.min.js"></script>
 <script src="lib/deathmatch.js"></script>
 </body>
 
diff --git a/lib/deathmatch.coffee b/lib/deathmatch.coffee
@@ -1,15 +1,13 @@
-name = document.cookie || (document.cookie = prompt("Enter name"))
+name = localStorage['name'] || (localStorage['name'] = prompt("Enter name"))
 
 canvas = document.getElementById 'canvas'
 
 # window.addEventListener 'resize', ->
 #   canvas.width = document.width
 #   canvas.height = document.height
 
-canvas.width = 800 # document.width
-canvas.height = 600 # document.height
-canvas.style.background = '#EEEEEE url(assets/white_brick_wall.png) repeat top left'
-canvas.style.cursor = 'none'
+# canvas.width = 800 # document.width
+# canvas.height = 600 # document.height
 
 ctx = canvas.getContext '2d'
 
@@ -24,8 +22,8 @@ right = false
 
 crosshair = { x: 0, y: 0 }
 window.addEventListener 'mousemove', (event) ->
-  crosshair.x = event.clientX
-  crosshair.y = event.clientY
+  crosshair.x = event.clientX - canvas.offsetLeft
+  crosshair.y = event.clientY - canvas.offsetTop
 
 keyIgnorer = (event) ->
   if event.keyCode in [37..40]
@@ -50,10 +48,15 @@ window.addEventListener 'keyup', (event) ->
 window.addEventListener 'mousedown', (event) ->
   ws.send(JSON.stringify({
     type: 'shoot',
-    x: event.clientX,
-    y: event.clientY,
+    x: event.clientX - canvas.offsetLeft,
+    y: event.clientY - canvas.offsetTop,
   }))
 
+# F to fullscreen
+window.addEventListener 'keydown', (event) ->
+  kc = event.keyCode
+  if kc == 70 and BigScreen.enabled then BigScreen.toggle()
+
 # setInterval((->
 #   keys = []
 #   if up then ws.send 'up'

diff --git a/vendor/bigscreen.min.js b/vendor/bigscreen.min.js