From 8e1b9b6c7657a8888f88c31b15e3e08df5b6a9dc Mon Sep 17 00:00:00 2001 From: Alexander Bazo Date: Wed, 28 Aug 2019 11:49:32 +0200 Subject: [PATCH] Add options to toggle debug output --- index.html | 17 ++++++++++++++--- resources/css/default.css | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- resources/js/Config.js | 2 -- resources/js/index.js | 11 ++++++++--- 4 files changed, 79 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 5a50eea..03d1a53 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,23 @@
Star Gazer 2000
-
Start Game

Options

- - + + + + + + + + + + + +
+
Start Game
+
diff --git a/resources/css/default.css b/resources/css/default.css index 041e672..b224d76 100644 --- a/resources/css/default.css +++ b/resources/css/default.css @@ -26,10 +26,10 @@ canvas { } #startTitle { - width: 60vw; + width: 60vw; height: 10vh; margin: 0 auto; - padding-top: 10vh; + padding-top: 10vh; text-align: center; line-height: 10vh; font-size: 10vh; @@ -53,19 +53,71 @@ canvas { } #startButton:hover { - cursor: pointer; + cursor: pointer; background-color: #d2ccf3; border-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 { width: 30vw; - height: 10vh; - margin: 10vh auto; + margin: 5vh auto; color: #FFF; } #startMenu h1 { 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 diff --git a/resources/js/Config.js b/resources/js/Config.js index 803d662..223fb48 100644 --- a/resources/js/Config.js +++ b/resources/js/Config.js @@ -1,8 +1,6 @@ var Config = { GAZE_SERVER_URL: "ws://localhost:8001/gaze", TARGET_FPS: 60, - SHOW_DEBUG_INFO: true, - USE_LOGGER: true, SCREEN_WIDTH: screen.width, SCREEN_HEIGHT: screen.height, GAME_VERSION: 0.1, diff --git a/resources/js/index.js b/resources/js/index.js index 20d6cfa..0204370 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -7,20 +7,25 @@ import GazeDataProvider from "./gaze/GazeDataProvider.js"; var canvas = document.querySelector("canvas"), starScreen = document.querySelector("#startScreen"), 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() { loadOptions(); - if (Config.USE_LOGGER === true) { + if (options.logToConsole === true) { Logger.enable(); } + document.querySelector("#versionInfo").innerHTML = `build ${Config.GAME_VERSION}`; document.querySelector("#startButton").addEventListener("click", prepareGame); } function loadOptions() { options.useMouse = document.querySelector("#useMouseInput").checked; + options.showDebug = document.querySelector("#showDebugInfo").checked; + options.logToConsole = document.querySelector("#logToConsole").checked; } function prepareGame() { @@ -29,7 +34,7 @@ function prepareGame() { canvas: canvas, fps: Config.TARGET_FPS, version: `Star Gazer, build ${Config.GAME_VERSION}`, - showDebug: Config.SHOW_DEBUG_INFO, + showDebug: options.showDebug, width: Config.SCREEN_WIDTH, height: Config.SCREEN_HEIGHT, gazeDataProvider: getDataProvider(), -- libgit2 0.26.0