From cd3bf8b6c3a8120be9f66098e90d91663c2df5a9 Mon Sep 17 00:00:00 2001 From: Dennis Hotson Date: Sun, 9 Sep 2012 21:56:01 +1000 Subject: [PATCH] Better looking static site --- assets/deathmatch.css | 96 ++++++++++++++++++++++++++++++++++++++++ assets/dthmtch.png | Bin 0 -> 6208 bytes assets/mouse.png | Bin 0 -> 794 bytes index.html | 32 ++++++++++---- lib/deathmatch.coffee | 21 +++++---- vendor/bigscreen.min.js | 7 +++ 6 files changed, 139 insertions(+), 17 deletions(-) create mode 100644 assets/deathmatch.css create mode 100644 assets/dthmtch.png create mode 100644 assets/mouse.png create mode 100644 vendor/bigscreen.min.js diff --git a/assets/deathmatch.css b/assets/deathmatch.css new file mode 100644 index 0000000..998a9e9 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..a1a61f77642d02efd832c108082e1dcb7c0bbe53 GIT binary patch literal 6208 zcmV-G7{BL?EnA(8FWQhbW?9;ba!ELWdL_~cP?peYja~^ zaAhuUa%Y?FJQ@H17rjYDK~#90-JN@|U3GQGKkM9^_v7pYl7I;*BtQbW5F{EDQjmv$ zD0r(CpQtFcMr?|;I%8W~+B(yYb*5^oV};sQM`CvJP6AE?P6cKG zll(IgP@vC0+kvNndsWi`A|R411Wt*m6Ns&<>4OdZoClnkQ@*B}{=D6fBFXE4Q91S3 ztERthQSSucY+y{o=O?P^&Vum=K_s~Zm=5d*4q(@Df5Y!HfmaSkUriWLO@DL@+C?O} z5_lu90O$e60qd|i_B3#ZYI=8zddCAx3Yx!9HQmvs-}%7&+_5zY$Tna`L5Gd#2krpA z4}4QKJy=vhB>58XhY@{*;(MxTZ$m$~V>i7W9#>7zY4@W@k^qQ@3c`c~;7VY%Nb--zZe&AI0T7X@h;((>)?DCwBFUX1$q>~> zM8=EAa7>b1h{#kCX*EfU>LDUCM5K8FhScp6k>f;UEUg9Pc;LF&b{pEC=zreW;^)y` zW~zt`>k5A?Ad;L6{1SLqiRu+#Ktz(V*D4|tMI?Apsfb7~@OyN=n`C$`aF6T4*`Q7W z-c6kP77Ypa~j21;k zyI@`ejE`-9B;hLJ4+-BjnlS+S&%kR`H7(i3SXDhBB5l>{MpUqyx{Bcw5P;KxRU*l3 z|9?KPR#l%F#y(nMG7{4Lt+e`^SZxFdjUBExT3_M4!Pj}QJW&8fg`{w zRee6T{Sn4ju!DG6tbqQ*s(QPKoK~g*Ro&s6LeMj=sOoK)kPNr_GY9yQNHPl8>=UTe zMMYpMCg`WfR#ep^E*wjMLSsWy-Ccgu`)Ds90DlrYE)lr^stR1)rbq?GR#bI^h`c$r z{gHx5^2gYDwG(_sRk!$aI;q?^PrFVo)y5~V7`*;fRGjIFGQ-}#(XPx0jq)U zwJCcZa6(R7{j@jhJt!gzfi6{jzQh?$fO~u;o|JFl9fAqiO&>+RfB<|1cz2t)*TBYYfNK#H&#Q^S^HJH*AnhcRE= zXS~cbY`#A1X5J{M>O(%ZMIq(8fnBctgiMNUs_7aL*#)eG>W_hcEvPdVPELj%m7kVeIdYiu@P!-^+VQd;DD;Wko_nk7pv-W5t$k}!2yoAaP(4aTW`jC zYy!-pSU}z>l6*on-JVxSL?)@~y&}o=z;XFa$|%3?aoG9mBYuC61EvD~et&NQip-?% zR87-X_cs=*ipZo{(6ua}_$qkm4KOet*r%#@**vR$(XJ=G!^`!n>N*j*46299jLUc1 zUxt*exN!6mct{tKmjSN>7OJLS0lpqk?P{ow7LoS@3;f~r0B-_Lu!koFlfdA@(F}^0bqA)}6`euA{1!_C+RRjlc8Bvuj24jvn4e^l-``&B z+;Z6O?`s3v0ifajcI0C*>t)xwDYmZdfWz;Bfy;rNs`{)?;)$y1X4UkgSwU6Z?&B+C zsYFCB!FJn+L&{e~0Csn zV1n^eRqbo~Z7yaUh_>dqA1EP0KW(Uc1*Y0PN3nnad`KiIoO~k5`M}Eq+8cwZy$}2S zTtfXGWxHbFPH?1xQCNOT7}o|7xd@w>K@U(> zcVX0)R#=FwK>a2CNUQ2+kSOd?)jLFFI#fdhWIFIpOy3>?5$Og_hU$j{`yZ{Uw`c#T z>U|AuEx_*Ywy>ruM^yE{0{d+V_sg6Q)zuXHJRVg|f70~ba#gLhDL)FIJ7r*J7wI8T zW2ykPm`UNnu>=zo*Lw%<2KE(HT_}>wY4QC;Y+{zRN;G1lub|OnNL4-T_hA{4E2pad z!gt~+gzX?;hxK;25+?5jem}6SygtWbyW&VvQqBPGCT#pe7SM*3!dHLwaZJ76 z!FJ;3Bl_+UNrs#Y`~m(NTRn6bmpWtRn%y}h_d9mXnR#gbaAdfzySfOI3>w`XQJLJQceGWbpgYL-@*_ zA!7>6Bu+rC5J?94RU$H8Ro7zvrMy^{X0+|oJn?j?>Y9l5O2e&;Z-(j=3eD3&bEX;6 z2`fWYpK_x`kYl_8tn*0`(Ja~)$kes7Vk@fZ;RdS7 zk)rZVbyxdM7vcm&fWep&bJofP%sCc=yd7_k-``f}zhQ@nyaV%c7wsMZ&&9UyCg2_* z$kEq~2C7M}A1XseRxCv|@fCA1rd|vHMNxAnHZxjP^-lkDYHa__aCL1d#Rh{R@D21u z;2R~VCa=LvkDG}<|6J#hafrw(p?W%SL1Y_wD%RtEE-S@dih&qi=deH15K2w76Vg?; zC75%z3^o8O{ESqHZtCZV5UNQt2B_0B=0J5PW{+1r_u?=tLh37 z83om80p){M@g^k1QB7_YN%qwLwdd^5IFHr@_>FT_X-o-vMxT2&mtqqr#8bKY zGlrp&kF8KfKn~W=y+Kryxh47-L}un)Lc+Y6qK6J>4H;a>mN3G!ZxOi~+XZ(}(g%Z?dYHuctaM)3!pAEWqk$}V+BaTqa zQpoFbr>Y){G(bb3s%u==Tfkzkqc zqGKwAs^00>G7{>^WL>85qm(?W0&wwW) z+P;Ni^)t_kH42Lp840S%6ig%O=NJiySg1r_2UL?NR4}#Vwz6jsReeP20W8rwNCVw{ zIM}>h)E`h0)?z78+kJw@;||8OZYs~Gsd%c^FNU;@S%bb$v4G?W<;j@vjs(@@5!VJ5 zaEt_mIx`^D>iTxtKjXsPyprjsVu47}5Rt{$1m8*V1@CE*%QvHAcT85a_H~1+JViLD znmz-yOQH4()$|$v|K(77fpEG>LsaJ2A`X|^?GN8Zm;nAe)P&9iBs(}Cb5DAMHc$n2 z1ym^|Ab#HKEi7r+2DNjcHq)Q)IH;WgwcP{=ah6$e8F0A7V8QJ6tDt%iixSMk5ay=) zE-I7=lWoz~V=>fy_cCu%)o;6=z7$I=7ED!9OBdu(nWKyPJtQLIV9$wIy4KvLfm<dlL@0lki-M zV~#H zQ})ZM`hv&WbfRLNfSJ*c`58o2vrHkcfZA4yRhY{>v0x1P%h26bb%&~MQ`K$0DFmG{ zGySQZS?Vt1l1%{*Sp-JSG0>vqWJwDN5Rd!iwL9Bw;JC$7&R(5t4XPJ zo8H;+z*BzyIIp01N(%vT-$m&#*(Qv|OqwAF#G~L;?JUP_utiTTckWV*S5&xzh^063 z0Hy;!ptVW*KUDYb^U1b{4t5Y#ebINtW1iUBX&_lt<^mwZdmo~CH1;tI^R+xwVu;`` z=aImyCKVd!?j<^#jZOLxwd7l>=@2T4Tb#NnL0oHrg_Nh72(Bu{SoHk7vR+lcO_+*x zLp_*)h>KNeD0cG1+Z5C3G=k634Gq{ZTFw3kMYtie*R;2lasaU(Do)38x zCLoQp?UkzOlUVHZaTdvupzTX&(ES5*~L z<+6q8JnAOj7lH41yVJehO>}0($_~!Mu|s=%$!Q|VTm94QlwIxDb}gpHe2rq_VmI*h zEcCdkuhAmOUuHSg+?X?-@^trXQwTB&byH8b84{f}$8$NIioHVX{D3;YqP?}IF-&$i zA_}u4bY(LuW(h1dN7R{&tw;}vBo`NyJp`btPc|$}t5nksBFQW_}Q-8ZuNWAUUw11IHJKU(6=IQhk z8NLJLYNtD#5*t3OmenLnVDZ(6su{)pjDT?4fu_H+P=h(D`gl{>K2?2GL@tDCCp$>S zT{@{mNOdzl3;aQg@0VfM^QZp*18V7u5Rn^T;-{hO28su89PsyTe!E^I`J@_a91*z= zs?i5^slUtRJ_6qORcY{oABz|0{EKSZ?(C6aHLz8Nhwh$nfy%tZGdsLRS@cwOtM@rK zpx?$_IunjJVrR7Gb~kyulj-aX^7wF2O+0_s4LL<_YFN=XSRGjg>{Z>p9r#oy{bR!O z)`oV=(%rKdsGw-Z?9D`7CC$8f_y(=t%G!*~chPZ}tcYBS>8EAr?u{0`U{-} zU+fc#5Bc?ULU-Tq3sZ1r#j@!(^YAU;T?MLDhRk;{ToHx0Q8K<=%O$WFL;VGsF)9|S zx;}?AmzifbH`i-{V@Y?)*NV?ZZh=hm25m}V@7>MU>fqB0GrWmXK1 z(XTXIM5z~&G+`g`N#GrU!U1(NZz;NcBeb4`u839Ks_tPam%w6&uSgdXr(zZ1d2jbB zhKKGRomo*V&u*Vsw!{zt8$3s;>OK)U5!=0Ls`?z%7Gh`EPK4w`K3BTRRCdAYQhya& z5i+XD9Lh%&X1EZfJiM_wv{g{w;0E5?RRKpNWZrgOS` zFC{W7x~jAkbDXXupJM(5L#ZWw)L-h;3!DbE{h+S~z8O0njCQjgdu?A?vvr?F5Lz>; zNtQY^Hp|4XfWHP7LhUUUkP-)}XEpiXpu0CCI)Q~)9^gJzT}7mdRnYF~-fl+`g`H4M z{My#2>I$e$!!lsDa-!}8-m97(W$01WL#q1Uz6*}WET$8n|BX<)0eCkJyG{-cVCLmH zQ2P=vC6sK~0^9xCg6Qr7T%?2P;K!|l(KBrz%*MTe{yBo#jnR@Kz=gcF% z1h@;Thk-w*&Zb=r{HYN%$UH2T%L1>+3hSyg>7X8dj1eNipvZSb`;v@uodjNY2s zi%#cZ3*eIh_vB10uqm_fU5X`qdpg$gDI#yf=3I8}&CKd6y`MuEa{x?O4)~lK6fke6 z7mEtK)BhiwD}HTTwGCa!&x+YA6fVPd*N1%0U5>?@Jdl;I_zIKJyfd=iG#8E@OtQx| z>9Y4{6QvX3$m&botNaMi=X&pczu;i+uhi4;)Lb}vftO(>*gml|sqN|xzCg#nT8zE- z<3Ya<7tk+RTLd9t{o=FYuu4ud#f0#kpLBL06WAo^mVBb0z=w5(Z|0-EYwt}$A(PDU+~$cu4F2r3)%ry-RxsH zE*n#edI`|&ea^rR%sW+eua9SMyFLr9WgIY}O}nRHlcLbyBgSkV-|AX?eBByA9T%hD zk5Sd1`~Q>6T$k7F@-giedv!!bRqyuSF2^i*Em^=~YzM*kU9++0y}9`w74+ZgK8(WV eps4DgO7=f^?Ny$FqfXiY0000BS!qPeP&n z3!>K^?9b?>SH(Zzp@o7c|A3cbdkM4#^sFlevt-$q-I<=Un3!y$w1<8$mzg);%rNub z8&XvOz`?;mg@`^lj=eSgo}%d96(1^-|y_~bm{o`xO#to|04*3=GNAh<9Ux0 zJ3BiA0BmkXc*u3VXeh*I7FW31&N42RiUb5x;)P@91dZvh41@l zG#ZAPw^>zRhhYd2L6&8O^FtY7nk~yRhzPuW48FP8@8Ny3LBBItBF2!a4X5TMiPj5TRmRXmGK zRgtDCk|aT^)k3S)LXsp%)3mg4b4vyQBEll)<`PbGoY%b4E-y;BaLIo?Lt_jol?tw| zt^fd)N(IK4=VwSnSX)~gd%lS1`Aq?U)zww3tgI9n&$~?vT|H)=8E{g+&>TJm|Bi5x z*Jc*}vyzD@84Lz>W_~syGh;9qfQS-i=JP0uP^;B2B7KT5GitROq9_70pRHVMSkUZ{%&`7_cu)}OCOo}t*X9M)lx - + + + + DTHMT.CH + + + - - +

DTHMT.CH

+
+

+ +w
+a +s +d + +to move

+

Mouse to point and shoot

+

f to fullscreen

+

Go forth and vanquish your foes.

+
+ + + diff --git a/lib/deathmatch.coffee b/lib/deathmatch.coffee index b19b6e5..9a64581 100644 --- a/lib/deathmatch.coffee +++ b/lib/deathmatch.coffee @@ -1,4 +1,4 @@ -name = document.cookie || (document.cookie = prompt("Enter name")) +name = localStorage['name'] || (localStorage['name'] = prompt("Enter name")) canvas = document.getElementById 'canvas' @@ -6,10 +6,8 @@ canvas = document.getElementById 'canvas' # 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 new file mode 100644 index 0000000..8a629a7 --- /dev/null +++ b/vendor/bigscreen.min.js @@ -0,0 +1,7 @@ +/*! +* BigScreen +* v1.0.0 - 2012-08-26 +* https://github.com/bdougherty/BigScreen +* Copyright 2012 Brad Dougherty; Apache 2.0 License +*/ +(function(a,b,c){function f(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}function g(a){var b=null;if(a.tagName==="VIDEO")b=a;else{var c=a.getElementsByTagName("video");c[0]&&(b=c[0])}return b}function i(a){var b=g(a);if(b&&b.webkitEnterFullscreen){try{b.readyState