Permalink
Browse files

Better looking static site

  • Loading branch information...
1 parent 4357e31 commit cd3bf8b6c3a8120be9f66098e90d91663c2df5a9 @dhotson committed Sep 9, 2012
Showing with 139 additions and 17 deletions.
  1. +96 −0 assets/deathmatch.css
  2. BIN assets/dthmtch.png
  3. BIN assets/mouse.png
  4. +24 −8 index.html
  5. +12 −9 lib/deathmatch.coffee
  6. +7 −0 vendor/bigscreen.min.js
View
@@ -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;
+}
+
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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>
View
@@ -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'
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit cd3bf8b

Please sign in to comment.