Commit c14d4549 by Alexander Bazo

Add options menu to toggle input source

parent 81eef9d5
...@@ -11,6 +11,11 @@ ...@@ -11,6 +11,11 @@
<div id="startScreen"> <div id="startScreen">
<div id="startTitle">Star Gazer 2000</div> <div id="startTitle">Star Gazer 2000</div>
<div id="startButton">Start Game</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> </div>
<canvas class="hidden"> <canvas class="hidden">
</canvas> </canvas>
......
...@@ -15,6 +15,10 @@ body { ...@@ -15,6 +15,10 @@ body {
font-family: "ShareTech"; font-family: "ShareTech";
} }
canvas {
cursor: none;
}
#startScreen { #startScreen {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
...@@ -22,11 +26,10 @@ body { ...@@ -22,11 +26,10 @@ body {
} }
#startTitle { #startTitle {
position: relative;
width: 60vw; width: 60vw;
height: 10vh; height: 10vh;
top: 20vh; margin: 0 auto;
margin: 0 auto; padding-top: 10vh;
text-align: center; text-align: center;
line-height: 10vh; line-height: 10vh;
font-size: 10vh; font-size: 10vh;
...@@ -35,11 +38,9 @@ body { ...@@ -35,11 +38,9 @@ body {
} }
#startButton { #startButton {
position: relative;
width: 30vw; width: 30vw;
height: 10vh; height: 10vh;
top: 30vh; margin: 10vh auto;
margin: 0 auto;
border-radius: 5px; border-radius: 5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
...@@ -58,6 +59,13 @@ body { ...@@ -58,6 +59,13 @@ body {
color: #3f0d76; color: #3f0d76;
} }
canvas { #startMenu {
cursor: none; width: 30vw;
height: 10vh;
margin: 10vh auto;
color: #FFF;
}
#startMenu h1 {
text-align: center;
} }
\ No newline at end of file
...@@ -2,7 +2,6 @@ var Config = { ...@@ -2,7 +2,6 @@ var Config = {
GAZE_SERVER_URL: "ws://localhost:8001/gaze", GAZE_SERVER_URL: "ws://localhost:8001/gaze",
TARGET_FPS: 60, TARGET_FPS: 60,
SHOW_DEBUG_INFO: true, SHOW_DEBUG_INFO: true,
USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA: true,
USE_LOGGER: true, USE_LOGGER: true,
SCREEN_WIDTH: screen.width, SCREEN_WIDTH: screen.width,
SCREEN_HEIGHT: screen.height, SCREEN_HEIGHT: screen.height,
......
...@@ -5,9 +5,13 @@ import FakeGazeDataProvider from "./gaze/FakeGazeDataProvider.js"; ...@@ -5,9 +5,13 @@ import FakeGazeDataProvider from "./gaze/FakeGazeDataProvider.js";
import GazeDataProvider from "./gaze/GazeDataProvider.js"; import GazeDataProvider from "./gaze/GazeDataProvider.js";
var canvas = document.querySelector("canvas"), var canvas = document.querySelector("canvas"),
starScreen = document.querySelector("#startScreen"); starScreen = document.querySelector("#startScreen"),
options = {
useMouse: false,
};
function init() { function init() {
loadOptions();
if (Config.USE_LOGGER === true) { if (Config.USE_LOGGER === true) {
Logger.enable(); Logger.enable();
} }
...@@ -15,8 +19,12 @@ function init() { ...@@ -15,8 +19,12 @@ function init() {
prepareGame); prepareGame);
} }
function loadOptions() {
options.useMouse = document.querySelector("#useMouseInput").checked;
}
function prepareGame() { function prepareGame() {
let dataProvider = getDataProvider(); loadOptions();
StarGazer.init({ StarGazer.init({
canvas: canvas, canvas: canvas,
fps: Config.TARGET_FPS, fps: Config.TARGET_FPS,
...@@ -24,7 +32,7 @@ function prepareGame() { ...@@ -24,7 +32,7 @@ function prepareGame() {
showDebug: Config.SHOW_DEBUG_INFO, showDebug: Config.SHOW_DEBUG_INFO,
width: Config.SCREEN_WIDTH, width: Config.SCREEN_WIDTH,
height: Config.SCREEN_HEIGHT, height: Config.SCREEN_HEIGHT,
gazeDataProvider: dataProvider, gazeDataProvider: getDataProvider(),
}); });
canvas.requestFullscreen().then(startGame); canvas.requestFullscreen().then(startGame);
} }
...@@ -36,7 +44,7 @@ function startGame() { ...@@ -36,7 +44,7 @@ function startGame() {
function getDataProvider() { function getDataProvider() {
let provider; let provider;
if (Config.USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA === true) { if (options.useMouse === true) {
provider = new FakeGazeDataProvider(); provider = new FakeGazeDataProvider();
} else { } else {
provider = new GazeDataProvider(); provider = new GazeDataProvider();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment