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
+
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(),