4 files changed, 138 insertions, 0 deletions
diff --git a/views/grid.ejs b/views/grid.ejs
new file mode 100644
index 0000000..e6ed17f
--- /dev/null
+++ b/views/grid.ejs
@@ -0,0 +1,85 @@
+<script type="text/javascript" src="/js/mouse.js"></script>
+<script type="text/javascript" src="/js/chat.js"></script>
+<script type="text/javascript" src="/js/grid.js"></script>
+<script type="text/javascript" src="/js/user.js"></script>
+<script type="text/javascript" src="/js/app.js"></script>
+
+<style>
+  * {padding: 0; margin: 0; font-family: menlo;}
+  header {display: block;  background-color: #ddd;padding:10px; width: 300px; float: left; z-index: 2; position: relative;}
+  body {padding: 0; margin: 0; background: #444444; }
+  #content { margin: 10px; position: relative; z-index: 2;}
+  canvas { margin-top: 80px; }
+  
+  #chat {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    padding: 10px;
+  }
+  #send {
+    background: #333; color: #fff;
+    border: 0; padding: 4px;
+  }
+  #message {
+    background: #ddd;
+    padding: 1px;
+    width: 200px;
+  }
+  #messages {
+    color: #888;
+    width: 400px;
+    font-size: 14px;
+  }
+  #messages b {
+    font-size: 16px;
+    color: #585;
+    display: inline-block;
+    padding: 5px 5px 0 0;
+  }
+</style>
+
+<header>
+  <h1>warpFX</h1>
+  <span id="start">start</span>
+  <span id="stop">stop</span>
+  (<span id="yDisp"></span>)
+  <input type="text" size=3 id="tempo" value="120">
+  <span id="alertDisp"></span>
+</header>
+
+<section id="content">
+  <canvas id='canvas' height='400' width='594'></canvas>
+  <audio id='sound0' title='KickDrum' autobuffer src='/wav/KickDrum0001.wav'></audio>
+  <audio id='sound1' title='ClosedHihat' autobuffer src='/wav/Closed Hihat0001.wav'></audio>
+  <audio id='sound2' title='OpenHihat' autobuffer src='/wav/Open Hihat0001.wav'></audio>
+  <audio id='sound3' title='Clap' autobuffer src='/wav/Clap.wav'></audio>
+  <audio id='sound4' title='Clav' autobuffer src='/wav/Clav.wav'></audio>
+  <audio id='sound5' title='MidTom' autobuffer src='/wav/Mid Tom0001.wav'></audio>
+  <audio id='sound6' title='Rimshot' autobuffer src='/wav/Rimshot.wav'></audio>
+  <audio id='sound7' title='SnareDrum' autobuffer src='/wav/SnareDrum0001.wav'></audio>
+  <audio id='sound0a' title='KickDrum' autobuffer src='/wav/KickDrum0001.wav'></audio>
+  <audio id='sound1a' title='ClosedHihat' autobuffer src='/wav/Closed Hihat0001.wav'></audio>
+  <audio id='sound2a' title='OpenHihat' autobuffer src='/wav/Open Hihat0001.wav'></audio>
+  <audio id='sound3a' title='Clap' autobuffer src='/wav/Clap.wav'></audio>
+  <audio id='sound4a' title='Clav' autobuffer src='/wav/Clav.wav'></audio>
+  <audio id='sound5a' title='MidTom' autobuffer src='/wav/Mid Tom0001.wav'></audio>
+  <audio id='sound6a' title='Rimshot' autobuffer src='/wav/Rimshot.wav'></audio>
+  <audio id='sound7a' title='SnareDrum' autobuffer src='/wav/SnareDrum0001.wav'></audio>
+  <audio id='sound0a' title='KickDrum' autobuffer src='/wav/KickDrum0001.wav'></audio>
+  <audio id='sound1a' title='ClosedHihat' autobuffer src='/wav/Closed Hihat0001.wav'></audio>
+  <audio id='sound2a' title='OpenHihat' autobuffer src='/wav/Open Hihat0001.wav'></audio>
+  <audio id='sound3a' title='Clap' autobuffer src='/wav/Clap.wav'></audio>
+  <audio id='sound4a' title='Clav' autobuffer src='/wav/Clav.wav'></audio>
+  <audio id='sound5a' title='MidTom' autobuffer src='/wav/Mid Tom0001.wav'></audio>
+  <audio id='sound6a' title='Rimshot' autobuffer src='/wav/Rimshot.wav'></audio>
+  <audio id='sound7a' title='SnareDrum' autobuffer src='/wav/SnareDrum0001.wav'></audio>
+</section>
+
+<div id="chat">
+  <div id="messages"></div>
+  <input type="text" id="message" autocomplete="off">
+  <button id="send">send</button>
+</div>
+
diff --git a/views/index.ejs b/views/index.ejs
new file mode 100644
index 0000000..68f3d52
--- /dev/null
+++ b/views/index.ejs
@@ -0,0 +1,12 @@
+<header>
+</header>
+
+<scores>
+  <a href="#" id="mute">mute</a>
+  <span id="pipe">|</span>
+</scores>
+
+<div id="cursor"><div></div></div>
+
+<div id="curtain"></div>
+
diff --git a/views/layout.ejs b/views/layout.ejs
new file mode 100644
index 0000000..48f2052
--- /dev/null
+++ b/views/layout.ejs
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="description" content="Where's the Pixel?">
+<title>warpFX</title>
+<link href="/css/warpfx.css" media="screen, projection" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="/js/util.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
+<script src="/socket.io/socket.io.js"></script>
+</head>
+<body>
+
+  <%- body %>
+
+</body>
+</html>
diff --git a/views/report.ejs b/views/report.ejs
new file mode 100644
index 0000000..bd556eb
--- /dev/null
+++ b/views/report.ejs
@@ -0,0 +1,24 @@
+<table>
+  <tr>
+    <th>channel</th>
+    <th>players</th>
+    <th>width</th>
+    <th>height</th>
+    <th>player 1</th>
+    <th></th>
+    <th>player 2</th>
+    <th></th>
+  </tr>
+<% for (var i = 0, len = reports.length; i < len; i++) { %>
+  <tr>
+    <th><%= reports[i].channel %></th>
+    <td align="right"><%= reports[i].players %></td>
+    <td align="right"><%= reports[i].width %></td>
+    <td align="right"><%= reports[i].height %></td>
+    <% for (j in reports[i].scores) { %>
+      <td><%= reports[i].names[j] %></td>
+      <td align="right"><%= reports[i].scores[j] %></td>
+    <% } %>
+  </tr>
+<% } %>
+</table>