Skip to content

Eye-Tracking Classroom / StarGazer

Go to a project
Commit 8e1b9b6c by Alexander Bazo
Options

Add options to toggle debug output

parent c14d4549
Inline Side-by-side
Showing with 80 additions and 13 deletions
index.html
...@@ -10,12 +10,23 @@ ...@@ -10,12 +10,23 @@
<body> <body>
<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="startMenu"> <div id="startMenu">
<h1>Options</h1> <h1>Options</h1>
<input type="checkbox" id="useMouseInput" name="useMouseInput"> <span class="option">
<label for="useMouseInput">Use mouse input</label> <input type="checkbox" id="useMouseInput" name="useMouseInput">
<label for="useMouseInput">Use mouse input</label>
</span>
<span class="option">
<input type="checkbox" id="showDebugInfo" name="showDebugInfo" checked>
<label for="showDebugInfo">Show debug info</label>
</span>
<span class="option">
<input type="checkbox" id="logToConsole" name="logToConsole" checked>
<label for="logToConsole">Show logs in console</label>
</span>
</div> </div>
<div id="startButton">Start Game</div>
<div id="versionInfo"></div>
</div> </div>
<canvas class="hidden"> <canvas class="hidden">
</canvas> </canvas>
......
resources/css/default.css
...@@ -26,10 +26,10 @@ canvas { ...@@ -26,10 +26,10 @@ canvas {
} }
#startTitle { #startTitle {
width: 60vw; width: 60vw;
height: 10vh; height: 10vh;
margin: 0 auto; margin: 0 auto;
padding-top: 10vh; padding-top: 10vh;
text-align: center; text-align: center;
line-height: 10vh; line-height: 10vh;
font-size: 10vh; font-size: 10vh;
...@@ -53,19 +53,71 @@ canvas { ...@@ -53,19 +53,71 @@ canvas {
} }
#startButton:hover { #startButton:hover {
cursor: pointer; cursor: pointer;
background-color: #d2ccf3; background-color: #d2ccf3;
border-color: #3f0d76; border-color: #3f0d76;
color: #3f0d76; color: #3f0d76;
} }
#versionInfo {
position: absolute;
bottom: 5vh;
right: 5vh;
text-align: right;
font-size: 3vh;
color: #fff;
text-shadow: 5px 5px 5px #611894;
}
#startMenu { #startMenu {
width: 30vw; width: 30vw;
height: 10vh; margin: 5vh auto;
margin: 10vh auto;
color: #FFF; color: #FFF;
} }
#startMenu h1 { #startMenu h1 {
text-align: center; text-align: center;
padding-bottom: 1vh;
border-style: solid;
border-width: 0 0 1px 0;
text-shadow: 3px 3px 3px #611894;
}
#startMenu .option {
display: block;
margin-top: 2vh;
}
#startMenu input[type="checkbox"] {
display: none;
}
#startMenu input[type="checkbox"]+label::before {
width: 3vh;
height: 3vh;
border-radius: 5px;
border: 0.25vh solid #a2bcc5;
background-color: #fff;
display: block;
content: "";
float: left;
margin-right: 5px;
color: #3f0d76;
}
#startMenu input[type="checkbox"]+label:hover {
cursor: pointer;
}
#startMenu label {
margin-left: 0.5vw;
line-height: 3.5vh;
font-size: 2.5vh;
}
#startMenu input[type="checkbox"]:checked+label::before {
content: "\2A2F";
text-align: center;
line-height: 3vh;
font-size: 3vh;
} }
\ No newline at end of file
resources/js/Config.js
var Config = { 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,
USE_LOGGER: true,
SCREEN_WIDTH: screen.width, SCREEN_WIDTH: screen.width,
SCREEN_HEIGHT: screen.height, SCREEN_HEIGHT: screen.height,
GAME_VERSION: 0.1, GAME_VERSION: 0.1,
......
resources/js/index.js
...@@ -7,20 +7,25 @@ import GazeDataProvider from "./gaze/GazeDataProvider.js"; ...@@ -7,20 +7,25 @@ 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 = { options = {
useMouse: false, useMouse: false, // Defauls set in HTML document with checked attribute
showDebug: false, // Defauls set in HTML document with checked attribute
logToConsole: false, // Defauls set in HTML document with checked attribute
}; };
function init() { function init() {
loadOptions(); loadOptions();
if (Config.USE_LOGGER === true) { if (options.logToConsole === true) {
Logger.enable(); Logger.enable();
} }
document.querySelector("#versionInfo").innerHTML = `build ${Config.GAME_VERSION}`;
document.querySelector("#startButton").addEventListener("click", document.querySelector("#startButton").addEventListener("click",
prepareGame); prepareGame);
} }
function loadOptions() { function loadOptions() {
options.useMouse = document.querySelector("#useMouseInput").checked; options.useMouse = document.querySelector("#useMouseInput").checked;
options.showDebug = document.querySelector("#showDebugInfo").checked;
options.logToConsole = document.querySelector("#logToConsole").checked;
} }
function prepareGame() { function prepareGame() {
...@@ -29,7 +34,7 @@ function prepareGame() { ...@@ -29,7 +34,7 @@ function prepareGame() {
canvas: canvas, canvas: canvas,
fps: Config.TARGET_FPS, fps: Config.TARGET_FPS,
version: `Star Gazer, build ${Config.GAME_VERSION}`, version: `Star Gazer, build ${Config.GAME_VERSION}`,
showDebug: Config.SHOW_DEBUG_INFO, showDebug: options.showDebug,
width: Config.SCREEN_WIDTH, width: Config.SCREEN_WIDTH,
height: Config.SCREEN_HEIGHT, height: Config.SCREEN_HEIGHT,
gazeDataProvider: getDataProvider(), gazeDataProvider: getDataProvider(),
......
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