Add custom controller support

JMU-CS · Nov 26, 2018 · bb307e5 · bb307e5
1 parent 02b52d5
commit bb307e5
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 32 deletions.
diff --git a/framework/games/snake.js → framework/games/snake/snake.js b/framework/games/snake.js → framework/games/snake/snake.js
@@ -35,30 +35,22 @@ function setup() {
   newGame();
 }
 
-function touchStart(x, y, id) {
-  if(y > x) {
-    if(1-x > y) {
-      if(dir !== "right") {
-        dir = "left";
-      }
-    } else {
-      if(dir !== "up") {
-        dir = "down";
-      }
-    }
-  } else {
-    if(1-x > y) {
-      if(dir !== "down") {
-        dir = "up";
-      }
-    } else {
-      if(dir !== "left") {
-        dir = "right";
-      }
-    }
+function onClick(elementID, id) {
+  if(elementID === "up" && dir !== "down") {
+    dir = "up";
+  } else if (elementID === "down" && dir !== "up") {
+    dir = "down";
+  } else if (elementID === "left" && dir !== "right") {
+    dir = "left";
+  } else if (elementID === "right" && dir !== "left") {
+    dir = "right";
   }
 }
 
+function touchStart(x, y, id) {
+  // not used anymore
+}
+
 function draw() {
   background(51);
 

diff --git a/framework/games/snake/snakeController.html b/framework/games/snake/snakeController.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">    <script src ="/socket.io/socket.io.js"></script>
+    <style>
+        .container{
+        @include center;
+            height:400px;
+            width:400px;
+        }
+        .buttons{
+            height:120px;
+            width:120px;
+            font-size:6.0em;
+            background:none;
+            border:none;
+        }
+        .fas {
+            color:#CBB677;
+        }
+        #up, #down{
+            position:absolute;
+            left:50%;
+            transform:translateX(-50%);
+        }
+        #up {
+            color: white;
+            top:0;
+        }
+        #down{
+            color: white;
+            bottom:0;
+        }
+        #right, #left{
+            position:absolute;
+            top:50%;
+            transform: translateY(-50%);
+        }
+        #right{
+            color: white;
+            right:0;
+        }
+        #left{
+            color: white;
+            left:0;
+        }
+
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <button id="up" class="buttons" onclick="buttonClicked(this.id)"><i class="fas fa-arrow-circle-up"></i></button>
+    <button id="down" class="buttons" onclick="buttonClicked(this.id)"><i class="fas fa-arrow-circle-down"></i></button>
+    <button id="left" class="buttons" onclick="buttonClicked(this.id)"><i class="fas fa-arrow-circle-left"></i></button>
+    <button id="right" class="buttons" onclick="buttonClicked(this.id)"><i class="fas fa-arrow-circle-right"></i></button>
+</div>
+
+
+<script>
+    var socket = io("/controller");
+
+    function buttonClicked(elementID){
+        socket.emit('clicked', elementID);
+    }
+</script>
+
+
+</body>
+</html>
diff --git a/framework/index.html b/framework/index.html
@@ -78,6 +78,9 @@
         )
 
         function loadGame(gameName) {
+            if(gameName === 'snake/snake') {
+                $("#controller").load('games/snake/snakeController.html');
+            }
             socket.emit("load game", gameName);
         }
 
@@ -149,7 +152,7 @@
     <nav id="main-nav">
         <ul>
             <li><a onclick="startInteraction();">Interact With Current Screen</a></li>
-            <li><a onclick="loadGame('snake');startInteraction();">Snake</a></li>
+            <li><a onclick="loadGame('snake/snake');startInteraction();">Snake</a></li>
             <li><a onclick="loadGame('splash-sketch');startInteraction();">Circles of Circles</a></li>
             <li><a onclick="loadGame('draw');startInteraction();">Draw with friends</a></li>
         </ul>

diff --git a/framework/lib/player.js b/framework/lib/player.js
@@ -5,6 +5,7 @@ var theGameMessageHandler = null;
 var touchStartHandler = function(x, y, id) {};
 var touchMoveHandler = function(x, y, id) {};
 var touchEndHandler = function(x, y, id) {};
+var onClickHandler = function(elementID, id) {};
 
 // adapted from p5js.org, originally by Lauren McCarthy
 // https://github.com/processing/p5.js-website/blob/master/js/render.js
@@ -29,6 +30,7 @@ function playCode(code) {
         if (typeof touchStart !== "undefined") { touchStartHandler = touchStart; }
         if (typeof touchMove !== "undefined") { touchMoveHandler = touchMove; }
         if (typeof touchEnd !== "undefined") { touchEndHandler = touchEnd; }
+        if (typeof onClick !== "undefined") { onClickHandler = onClick; }
 
         if (typeof githubAccount !== "undefined" && typeof userpic !== "undefined") {
 

diff --git a/framework/player.html b/framework/player.html
@@ -92,7 +92,7 @@ <h1 id="branding" style="z-index: 200; margin-bottom: 0; left: 0.5em; position:f
                     console.log("Null game message handler.");
                 }
             }
-        )
+        );
 
         function getCurrentSlideIndex() { return currentSlideIndex; }
 
@@ -101,7 +101,7 @@ <h1 id="branding" style="z-index: 200; margin-bottom: 0; left: 0.5em; position:f
             function(msg) {
                 window.location.href="?sketch=" + msg + "&slide=" + currentSlideIndex;
             }
-        )
+        );
 
         socket.on(
             "touch start",
@@ -119,7 +119,7 @@ <h1 id="branding" style="z-index: 200; margin-bottom: 0; left: 0.5em; position:f
                         }, 60000)
                 }
             }
-        )
+        );
 
         socket.on(
             "touch end",
@@ -137,7 +137,7 @@ <h1 id="branding" style="z-index: 200; margin-bottom: 0; left: 0.5em; position:f
                         }, 60000)
                 }
             }
-        )
+        );
 
         socket.on(
             "touch move",
@@ -155,7 +155,23 @@ <h1 id="branding" style="z-index: 200; margin-bottom: 0; left: 0.5em; position:f
                         }, 60000)
                 }
             }
-        )
+        );
+
+        socket.on(
+            "on click",
+            function(msg) {
+                var split = msg.split(":");
+                var id = split[1];
+                var elementID = split[0];
+                onClickHandler(elementID, id);
+                if (sketch_reloader != undefined) {
+                    clearTimeout(sketch_reloader);
+                    sketch_reloader = setTimeout(function() {
+                        window.location.href="?";
+                    }, 60000)
+                }
+            }
+        );
 
         //load a script
         $(document).ready(function () {

diff --git a/index.js b/index.js
@@ -12,7 +12,7 @@ var app = express();
 app.use(express.static('framework'));
 
 
-var server = require('http').createServer(app).listen(process.env.PORT || 80);
+var server = require('http').createServer(app).listen(process.env.PORT || 8001);
 
 // Create the Socket.IO server and attach it to the HTTP server
 var io = require('socket.io').listen(server);
@@ -38,25 +38,31 @@ io.of("/controller").on('connection', function(socket) {
         if (playerSocket != null) {
             playerSocket.emit('load game', msg);
         }
-    })
+    });
 
     socket.on('touch start', function(msg) {
         if (playerSocket != null) {
             playerSocket.emit('touch start', msg + ":" + socket.id);
         }
-    })
+    });
 
     socket.on('touch end', function(msg) {
         if (playerSocket != null) {
             playerSocket.emit('touch end', msg + ":" + socket.id);
         }
-    })
+    });
 
     socket.on('touch move', function(msg) {
         if (playerSocket != null) {
             playerSocket.emit('touch move', msg + ":" + socket.id);
         }
-    })
+    });
+
+    socket.on('clicked', function(msg) {
+        if(playerSocket != null) {
+            playerSocket.emit('on click', msg + ":" + socket.id);
+        }
+    });
 
     socket.on('disconnect', function () {
         console.log('A controller disconnected.');