Project: Bump game version, add menus

.gitignore

@@ -1,6 +1,9 @@
 # Main generated TS script
 App/js/app.js
 
+# Debug files
+JS_SAMPLE.js
+
 # Build dirs
 tempApp/
 Cache/

App/css/style.css

@@ -19,7 +19,7 @@ span {
 }
 
 /*
-	Canvas divs
+	Canvas div
 */
 .APP_CANVAS {
 	top: 0px;
@@ -29,9 +29,76 @@ span {
 	height: 100%;
 	position: absolute;
 	background-color: #002a;
+	transition-duration: 1s;
 	backdrop-filter: blur(2px);
 }
 
+/*
+	Menu GUI
+*/
+.DIV_MENU {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+	position: absolute;
+	background-size: auto 80%;
+	backdrop-filter: blur(4px);
+	background-color: #1a26608a;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-image: url('../img/icon.webp');
+}
+.DIV_SELECT {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	flex-wrap: nowrap;
+	position: absolute;
+	align-items: center;
+	display: inline-flex;
+	justify-content: center;
+	background-color: #0000;
+}
+.DIV_SELECT_Y {
+    flex-wrap: wrap;
+	align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+.DIV_SELECT_OPTION {
+	width: 100%;
+	color: #aaa;
+	padding: 4px;
+	height: 16px;
+	max-height: 26px;
+	text-shadow: none;
+	text-align: center;
+	background-color: #000a;
+	transition-duration: 0.8s;
+	backdrop-filter: blur(4px);
+	transition-timing-function: cubic-bezier(0,1,0,1);
+}
+.DIV_SELECT_OPTION_ACTIVE {
+	color: #fff;
+	font-size: 14px;
+	text-shadow: 0px 0px 6px #ae84e8;
+}
+.DIV_SELECT_LABEL {
+	left: 0px;
+	width: 100%;
+	bottom: 12px;
+	height: auto;
+	padding: 4px;
+	position: absolute;
+	text-align: center;
+	font-family: system-ui;
+	background-color: #0000;
+	background-image: linear-gradient(90deg, #0000, #000a, #000a, #000a, #0000);
+}
+
 /*
 	General GUI
 */
@@ -52,15 +119,18 @@ span {
 	background-image: linear-gradient(0deg, #eee, #ccc);	
 }
 .DIV_LABELS {
+	top: 116px;
 	right: 10px;
 	width: 110px;
-	height: 48px;
+	height: auto;
 	padding: 6px;
+	overflow: hidden;
 	position: absolute;
 	border-radius: 6px;
-	top: calc(50% - 24px);
 	background-color: #6664;
+	transition-duration: 2s;
 	backdrop-filter: blur(2px);
+	transition-timing-function: cubic-bezier(0,1,0,1);
 }
 .DIV_BTNS {
 	top: 0px;
@@ -270,4 +340,7 @@ span {
 */
 .none {
 	display: none !important;
+}
+.center {
+	text-align: center;
 }

App/index.htm

@@ -12,17 +12,29 @@
 		<!-- Main Canvas -->
 		<div class="APP_CANVAS" id="APP_CANVAS">
 
+			<!-- Menu -->
+			<div class="DIV_MENU" id="DIV_MENU">
+
+				<!-- Options -->
+				<div class="DIV_SELECT" id="DIV_SELECT"></div>
+
+				<!-- Label descriprion -->
+				<div class="DIV_SELECT_LABEL" id="DIV_SELECT_LABEL">???</div>
+
+			</div>
+
 			<!-- Top buttons -->
 			<div class="DIV_BTNS" id="DIV_BTNS">
 				<input type="button" class="BTN_TOP" id="BTN_TOP_GET_RAND_PUZZLE" value="Get Another Puzzle">
 				<input type="button" class="BTN_TOP" id="BTN_TOP_ABOUT" value="About">
 			</div>
 
 			<!-- Labels -->
-			<div class="DIV_LABELS">
+			<div class="DIV_LABELS" id="DIV_LABELS">
+				<div class="center" id="LABEL_gameMode" title="Game mode">???</div><br>
 				Sample ID: <span id="LABEL_currentSample">0</span><br>
 				Score: <span id="LABEL_playerScore">0</span><br>
-				Resets: <span id="LABEL_resetSample">0</span>
+				<div id="DIV_LABEL_resetSample">Resets: <span id="LABEL_resetSample">0</span></div>
 			</div>
 
 			<!-- Sample -->
@@ -434,7 +446,7 @@
 
 		<!-- Start App -->
 		<script type="text/javascript">
-			window.onload=function(){Object.keys(System.registerRegistry).forEach((function(i){System.import(i)}));"undefined"!=typeof APP?window.APP.init():setTimeout((function(){window.APP.init()}),100)};
+			window.onload=function(){Object.keys(System.registerRegistry).forEach((function(i){System.import(i)}));"undefined"!=typeof APP?window.init():setTimeout((function(){window.init()}),100)};
 		</script>
 
 	</body>

README.md

@@ -13,10 +13,13 @@ This is a nw version of water sample - a puzzle from a classic survivor horror g
 
 This project was created as a challenge - I'm still learning more about this _creepy_ language.
 
-## How to play
-- W, S / Arrow Up, Arrow Down: Select current row
-- A, D / Arrow Left, Arrow Right: Move current row
-- F5: Get random puzzle
+## Controls
+- K, 0: Confirm,
+- L, 6: Cancel,
+- W, S, Arrow Up, Arrow Down: Select current row
+- A, D, Arrow Left, Arrow Right: Move current row
+- I, 8: (Endless Mode) Get random puzzle
+- Esc, 0, Space: Pause menu
 
 *This game also supports DualShock 4, DualSense, PlayStation 3, GameSir X2 USB controllers.*
 

build-normal.bat

@@ -16,7 +16,7 @@ echo.
 echo IMPORTANT: Make sure to have Node.js (20.x) installed before running this script!
 echo You can get it here: https://nodejs.org/
 echo.
-node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --exportJsSample=!1 --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
+node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
 node ./compiler/comp-nw.js --platform=win64 --flavor=normal --nwVersion=0.77.0
 title Process complete!
 echo.

build-normal.sh

@@ -15,7 +15,7 @@ echo
 echo IMPORTANT: Make sure to have Node.js \(20.x\) installed before running this script!
 echo You can get it here: https://nodejs.org/
 echo 
-node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --exportJsSample=!1 --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
+node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
 node ./compiler/comp-nw.js --platform=linux64 --flavor=normal --nwVersion=0.77.0
 echo Process complete!
 echo 

build-sdk.bat

@@ -16,7 +16,7 @@ echo.
 echo IMPORTANT: Make sure to have Node.js (20.x) installed before running this script!
 echo You can get it here: https://nodejs.org/
 echo.
-node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --exportJsSample=!1 --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
+node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
 node ./compiler/comp-nw.js --platform=win64 --flavor=sdk --nwVersion=0.77.0
 title Process complete!
 echo.

build-sdk.sh

@@ -15,7 +15,7 @@ echo
 echo IMPORTANT: Make sure to have Node.js \(20.x\) installed before running this script!
 echo You can get it here: https://nodejs.org/
 echo 
-node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --exportJsSample=!1 --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
+node ./compiler/comp-prepFiles.js --mainJs=app.js --copyFolders=img,tools,forms,node_modules --cssMinifyLevel=2 --jsBeforeMain=systemjs.js,named-register.min.js
 node ./compiler/comp-nw.js --platform=linux64 --flavor=sdk --nwVersion=0.77.0
 echo Process complete!
 echo 

compiler/comp-prepFiles.js

@@ -48,12 +48,6 @@ process.argv.forEach(function(cArg){
 		argCounter++;
 	}
 
-	// Export JS sample
-	if (cArg.indexOf('--exportJsSample=') !== -1){
-		COMPILER.exportJsSample = rep(cArg);
-		argCounter++;
-	}
-
 	// CSS Minify Level
 	if (cArg.indexOf('--cssMinifyLevel=') !== -1){
 		COMPILER.cssMinifyLevel = Number(rep(cArg));
@@ -63,7 +57,7 @@ process.argv.forEach(function(cArg){
 });
 
 // Start process
-if (argCounter > 4){
+if (argCounter > 3){
 	COMPILER.prepareFiles();
 } else {
 	throw 'Unable to start nw build process since it\'s missing args!';

compiler/prepare-files.js

@@ -141,7 +141,9 @@ module.exports = {
 		var tempJsScripts = '<div class="none" id="APP_SCRIPT_LIST">',
 			mainHtmlFile = fs.readFileSync(`./App/index.htm`, 'utf8'),
 			readAppJsFile = fs.readFileSync(`./App/js/${mainJsFile}`, 'utf8'),
-			jsCodeMinify = uglify.minify(readAppJsFile).code;
+			jsCodeMinify = uglify.minify(readAppJsFile, {
+				compress: { module: !0 }, output: { max_line_len: !1 }
+			}).code.replace(/[\n]+/gm, '\\n');
 
 		// Get main HTML file
 		const jsHtmlStart = mainHtmlFile.slice(0, mainHtmlFile.indexOf('<!-- APP_SCRIPT_START -->')),
@@ -159,12 +161,7 @@ module.exports = {
 		// Wrap JS section
 		mainHtmlFile = `${jsHtmlStart}\n${tempJsScripts}</div>${jsHtmlEnd}`;
 
-		// Check if needs to export JS sample
-		if (this.exportJsSample === !0){
-			console.info('INFO - Exporting JS sample to root dir...');
-			console.warn('\nWARN - exportJsSample is set to true! Disable this option on config file before pushing changes to git repo.\n ');
-			fs.writeFileSync('./JS_SAMPLE.js', jsCodeMinify, 'utf8');
-		}
+		// fs.writeFileSync('./JS_SAMPLE.js', jsCodeMinify, 'utf8');
 
 		/*
 			CSS

package.json

@@ -1,6 +1,6 @@
 {
     "hash": "",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "author": "TheMitoSan",
     "main": "App/index.htm",
     "license": "GPL-2.0-only",

src/graphics.ts

@@ -5,28 +5,12 @@
 
 // Import TS modules
 import * as TMS from './TMS';
-import { about } from './main';
-import { currentPuzzle, rowState, updateRow, getRandomPuzzle } from './puzzle';
+import { currentPuzzle, rowState } from './puzzle';
 
 /*
     Functions
 */
 
-// Assign GUI button actions
-export function initGUI(){
-
-    // Assign rows
-    ['A', 'B', 'C'].forEach(function(cRow:string){
-        (<HTMLInputElement>document.getElementById(`BTN_${cRow}_L`))!.onclick = function(){updateRow(cRow, 'left');};
-        (<HTMLInputElement>document.getElementById(`BTN_${cRow}_R`))!.onclick = function(){updateRow(cRow, 'right');};
-    });
-
-    // Assign top buttons
-    (<HTMLInputElement>document.getElementById('BTN_TOP_ABOUT'))!.onclick = function(){about();};
-    (<HTMLInputElement>document.getElementById('BTN_TOP_GET_RAND_PUZZLE'))!.onclick = function(){getRandomPuzzle(!0, !0);};
-
-}
-
 // Update active row icon
 export function updateActiveRowGUI(cRow:string = 'A', skipAddClass:boolean = !1){