Add options menu to toggle input source

index.html

@@ -11,6 +11,11 @@
     <div id="startScreen">
         <div id="startTitle">Star Gazer 2000</div>
         <div id="startButton">Start Game</div>
+        <div id="startMenu">
+            <h1>Options</h1>
+            <input type="checkbox" id="useMouseInput" name="useMouseInput">
+            <label for="useMouseInput">Use mouse input</label>
+        </div>
     </div>
     <canvas class="hidden">
     </canvas>

resources/css/default.css

@@ -15,6 +15,10 @@ body {
     font-family: "ShareTech";
 }
 
+canvas {
+    cursor: none;
+}
+
 #startScreen {
     width: 100vw;
     height: 100vh;
@@ -22,11 +26,10 @@ body {
 }
 
 #startTitle {
-	position: relative; 
 	width: 60vw;
     height: 10vh;
-    top: 20vh;
     margin: 0 auto;
+    padding-top: 10vh;  
     text-align: center;
     line-height: 10vh;
     font-size: 10vh;
@@ -35,11 +38,9 @@ body {
 }
 
 #startButton {
-    position: relative;
     width: 30vw;
     height: 10vh;
-    top: 30vh;
-    margin: 0 auto;
+    margin: 10vh auto;
     border-radius: 5px;
     border-width: 5px;
     border-style: solid;
@@ -58,6 +59,13 @@ body {
     color: #3f0d76;
 }
 
-canvas {
-    cursor: none;
+#startMenu {
+    width: 30vw;
+    height: 10vh;
+    margin: 10vh auto;
+    color: #FFF;
+}
+
+#startMenu h1 {
+    text-align: center;
 }
\ No newline at end of file

resources/js/Config.js

@@ -2,7 +2,6 @@ var Config = {
   GAZE_SERVER_URL: "ws://localhost:8001/gaze",
   TARGET_FPS: 60,
   SHOW_DEBUG_INFO: true,
-  USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA: true,
   USE_LOGGER: true,
   SCREEN_WIDTH: screen.width,
   SCREEN_HEIGHT: screen.height,

resources/js/index.js

@@ -5,9 +5,13 @@ import FakeGazeDataProvider from "./gaze/FakeGazeDataProvider.js";
 import GazeDataProvider from "./gaze/GazeDataProvider.js";
 
 var canvas = document.querySelector("canvas"),
-  starScreen = document.querySelector("#startScreen");
+  starScreen = document.querySelector("#startScreen"),
+  options = {
+    useMouse: false,
+  };
 
 function init() {
+  loadOptions();
   if (Config.USE_LOGGER === true) {
     Logger.enable();
   }
@@ -15,8 +19,12 @@ function init() {
     prepareGame);
 }
 
+function loadOptions() {
+  options.useMouse = document.querySelector("#useMouseInput").checked;
+}
+
 function prepareGame() {
-  let dataProvider = getDataProvider();
+  loadOptions();
   StarGazer.init({
     canvas: canvas,
     fps: Config.TARGET_FPS,
@@ -24,7 +32,7 @@ function prepareGame() {
     showDebug: Config.SHOW_DEBUG_INFO,
     width: Config.SCREEN_WIDTH,
     height: Config.SCREEN_HEIGHT,
-    gazeDataProvider: dataProvider,
+    gazeDataProvider: getDataProvider(),
   });
   canvas.requestFullscreen().then(startGame);
 }
@@ -36,7 +44,7 @@ function startGame() {
 
 function getDataProvider() {
   let provider;
-  if (Config.USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA === true) {
+  if (options.useMouse === true) {
     provider = new FakeGazeDataProvider();
   } else {
     provider = new GazeDataProvider();