Project: bump version to 1.1.1, Shortcut: change toggle drag from Con…

…trol to Alt, Change top menu design
themitosan · Jun 1, 2023 · 27a72d1 · 27a72d1
1 parent 2b5cf65
commit 27a72d1
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 58 deletions.
diff --git a/App/css/style.css b/App/css/style.css
@@ -89,21 +89,41 @@ label {
 	background-color: #0000;
 	transition-duration: 0.8s;
 	backdrop-filter: blur(4px);
-	transition-timing-function: cubic-bezier(0,1,0,1);
 	box-shadow: 0px 0px 10px #000;
+	transition-timing-function: cubic-bezier(0,1,0,1);
 	background-image: linear-gradient(180deg, #706099aa, #3e2e67aa);
 }
 .MENU_TOP {
 	top: 0px;
-	left: 0px;
-	width: auto;
+	left: 10px;
 	height: 0px;
 	display: flex;
 	flex-wrap: nowrap;
 	align-items: center;
+	justify-content: center;
+	width: calc(100% - 196px);
 	padding: 0px 10px 0px 0px;
-	justify-content: flex-start;
-	border-bottom-right-radius: 6px;
+	border-radius: 0px 0px 8px 8px;
+}
+.MENU_TOP_BTNS {
+	left: 0px;
+	height: 30px;
+	display: flex;
+	flex-wrap: nowrap;
+	position: absolute;
+	align-items: center;
+	justify-content: center;
+}
+.MENU_TOP_BG {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	z-index: 90;
+	height: 30px;
+	cursor: help;
+	display: none;
+	position: absolute;
+	background-color: #200;
 }
 .MENU_RIGHT {
 	top: 0px;
@@ -202,10 +222,9 @@ label {
 .RE3_CAPTURE_ICON {
 	width: 15px;
 	height: 15px;
-	margin-left: 10px;
-	margin-right: 10px;
 	border-radius: 100px;
 	background-color: #000;
+	margin: 0px 10px 0px 10px;
 	box-shadow: 0px 0px 6px #000 inset;
 	background-image: linear-gradient(180deg, #000, #333);
 }

diff --git a/App/index.htm b/App/index.htm
@@ -15,14 +15,22 @@
 		<!-- Main Canvas -->
 		<div class="APP_CANVAS" id="APP_CANVAS">
 
+			<!-- Top Menu BG -->
+			<div class="MENU_TOP_BG" id="MENU_TOP_BG" title='This border is only visible when red background is on and "Hide top menu after quick-save" option is active.'></div>
+
 			<!-- Top menu -->
 			<div class="APP_MENU MENU_TOP" id="MENU_TOP">
-				<div id="RE3_CAPTURE_ICON" class="RE3_CAPTURE_ICON"></div>
-				<input type="button" title="Global Shortcut: Ctrl+Shift+R" disabled="disabled" id="BTN_RUN_GAME" value="Start Game" onclick="APP.runGame();">
-				<input type="button" title="Global Shortcut: Ctrl+Shift+H" disabled="disabled" id="BTN_START" value="Hook game process" onclick="APP.gameHook.seekGame();">
-				<input type="button" disabled="disabled" id="BTN_STOP" value="Stop" onclick="APP.gameHook.stop();">
+
+				<div class="MENU_TOP_BTNS">
+					<div id="RE3_CAPTURE_ICON" class="RE3_CAPTURE_ICON"></div>
+					<input type="button" title="Global Shortcut: Ctrl+Shift+R" disabled="disabled" id="BTN_RUN_GAME" value="Start Game" onclick="APP.runGame();">
+					<input type="button" title="Global Shortcut: Ctrl+Shift+H" disabled="disabled" id="BTN_START" value="Hook game process" onclick="APP.gameHook.seekGame();">
+					<input type="button" disabled="disabled" id="BTN_STOP" value="Stop" onclick="APP.gameHook.stop();">
+				</div>
+
 				<label id="LABEL_RE3_INFO_mapName"></label>
-				<label id="LABEL_mapDragStatus"> - Canvas drag is INACTIVE</label>
+				<label id="LABEL_mapDragStatus">Canvas drag is INACTIVE</label>
+
 			</div>
 
 			<!-- Right menu -->
@@ -46,7 +54,7 @@
 				<input type="button" title="Global Shortcut: Ctrl+F7" value="[F7] Center map" onclick="APP.graphics.updatePlayerPos();" class="BTN_OPTIONS">
 				<input type="button" title="Global Shortcut: Ctrl+F8" value="[F8] Reset zoom" onclick="APP.options.resetCanvasZoom();" class="BTN_OPTIONS">
 				<input type="button" title="Global Shortcut: Ctrl+F9" value="[F9] Reset map" onclick="APP.options.resetMap();" class="BTN_OPTIONS">
-				<input type="button" value="[CTRL] Toggle drag" onclick="APP.graphics.toggleDragMapCanvas();" class="BTN_OPTIONS">
+				<input type="button" value="[Alt] Toggle drag" onclick="APP.graphics.toggleDragMapCanvas();" class="BTN_OPTIONS">
 				<input type="button" title="Global Shortcut: Ctrl+Shift+S" value="Save Map" onclick="APP.options.saveMap();" class="BTN_OPTIONS">
 				<input type="button" value="Load Map" onclick="APP.options.loadMapFile();" class="BTN_OPTIONS">
 				<input type="button" title="Global Shortcut: Ctrl+F10" value="[F10] Reload Map" onclick="APP.options.loadLatestFile();" class="BTN_OPTIONS" id="BTN_MAP_RELOAD" disabled="disabled">

diff --git a/App/js/gamehook.js b/App/js/gamehook.js
@@ -47,6 +47,9 @@ temp_GAMEHOOK = {
 					document.getElementById('BTN_STOP').disabled = '';
 					APP.gameHook.gameActive = !0;
 
+					// Update labels
+					APP.graphics.updateGuiLabel();
+
 					// Set interval
 					APP.gameHook.updateObject = setInterval(function(){
 						APP.gameHook.updateProcess();
@@ -77,9 +80,6 @@ temp_GAMEHOOK = {
 		document.getElementById('BTN_SELECT_EXE').disabled = '';
 		document.getElementById('BTN_STOP').disabled = 'disabled';
 
-		// Reset label
-		document.getElementById('LABEL_RE3_INFO_mapName').innerHTML = '';
-
 		// Remove on icon
 		TMS.removeClass('RE3_CAPTURE_ICON', 'RE3_CAPTURE_ICON_ON');
 
@@ -94,6 +94,10 @@ temp_GAMEHOOK = {
 		// Set running flag as false
 		this.gameActive = !1;
 
+		// Reset labels
+		document.getElementById('LABEL_RE3_INFO_mapName').innerHTML = '';
+		APP.graphics.updateGuiLabel();
+
 	},
 
 	// Read data

diff --git a/App/js/graphics.js b/App/js/graphics.js
@@ -20,6 +20,31 @@ temp_GRAPHICS = {
 		Functions
 	*/
 
+	// Update current map label
+	updateGuiLabel: function(){
+
+		var cMap = '',
+			gameRunningStatus = '',
+			canvasDragStatus = 'INACTIVE',
+			lMapHistory = APP.gameHook.mapHistory[APP.gameHook.mapHistory.length - 1];
+
+		// Check if latest map exists and if game is running
+		if (lMapHistory !== void 0 && APP.gameHook.gameActive === !0){
+			cMap = 'Map: ' + lMapHistory;
+			gameRunningStatus = ' - ';
+		}
+
+		// Check canvas drag status
+		if (this.enableCanvasDrag === !0){
+			canvasDragStatus = 'ACTIVE';
+		}
+
+		// Set label strings
+		document.getElementById('LABEL_RE3_INFO_mapName').innerHTML = cMap;
+		document.getElementById('LABEL_mapDragStatus').innerHTML = gameRunningStatus + 'Canvas drag is ' + canvasDragStatus;
+
+	},
+
 	// Add room to map
 	pushMap: function(mapName, parent){
 
@@ -99,10 +124,7 @@ temp_GRAPHICS = {
 		}
 
 		// Update labels
-		const lMapHistory = APP.gameHook.mapHistory[APP.gameHook.mapHistory.length - 1];
-		if (lMapHistory !== void 0){
-			document.getElementById('LABEL_RE3_INFO_mapName').innerHTML = 'Map: ' + lMapHistory;
-		}
+		this.updateGuiLabel();
 
 		// Enable drag
 		APP.graphics.enableDrag('ROOM_' + mapName);
@@ -503,44 +525,37 @@ temp_GRAPHICS = {
 	// Toggle drag map
 	toggleDragMapCanvas: function(){
 
-		// Check if window has focus
-		if (nw.Window.get().cWindow.focused === !0){
-
-			// Declare vars
-			var labelStatus = 'INACTIVE',
-				pos = APP.graphics.enabledDragList.indexOf('APP_MAP_CANVAS');
-
-			// Reset top menu size
-			if (APP.options.hideTopMenuOnSave === !1){
-				TMS.css('MENU_TOP', {'height': '30px'});
-			}
-
-			// Check enable canvas drag
-			switch (APP.graphics.enableCanvasDrag){
+		// Declare vars
+		var pos = APP.graphics.enabledDragList.indexOf('APP_MAP_CANVAS');
 
-				case !1:
-					TMS.css('APP_MAP_CANVAS', {'cursor': 'move', 'transition-duration': '0s'});
-					APP.graphics.enableDrag('APP_MAP_CANVAS');
-					APP.graphics.enableCanvasDrag = !0;
-					labelStatus = 'ACTIVE';
-					break;
+		// Reset top menu size
+		if (APP.options.hideTopMenuOnSave === !1){
+			TMS.css('MENU_TOP', {'height': '30px'});
+		}
 
-				case !0:
-					TMS.css('APP_MAP_CANVAS', {'cursor': 'auto', 'transition-duration': '1s'});
-					document.getElementById('APP_MAP_CANVAS').onmousedown = null;
-					if (pos !== -1){
-						APP.graphics.enabledDragList.splice(pos, 1);
-					}
-					APP.graphics.enableCanvasDrag = !1;
-					break;
+		// Check enable canvas drag
+		switch (APP.graphics.enableCanvasDrag){
 
-			}
+			case !1:
+				TMS.css('APP_MAP_CANVAS', {'cursor': 'move', 'transition-duration': '0s'});
+				APP.graphics.enableDrag('APP_MAP_CANVAS');
+				APP.graphics.enableCanvasDrag = !0;
+				break;
 
-			// Update label
-			document.getElementById('LABEL_mapDragStatus').innerHTML = ' - Canvas drag is ' + labelStatus;
+			case !0:
+				TMS.css('APP_MAP_CANVAS', {'cursor': 'auto', 'transition-duration': '1s'});
+				document.getElementById('APP_MAP_CANVAS').onmousedown = null;
+				if (pos !== -1){
+					APP.graphics.enabledDragList.splice(pos, 1);
+				}
+				APP.graphics.enableCanvasDrag = !1;
+				break;
 
 		}
 
+		// Update labels
+		this.updateGuiLabel();
+
 	},
 
 	// Toggle canvas bg color

diff --git a/App/js/main.js b/App/js/main.js
@@ -40,7 +40,7 @@ const APP = {
 					APP.about();
 					break;
 
-				case 'Control':
+				case 'Alt':
 					APP.graphics.toggleDragMapCanvas();
 					break;
 

diff --git a/App/js/options.js b/App/js/options.js
@@ -23,6 +23,18 @@ temp_OPTIONS = {
 		// Set var data and save on localstorage
 		this.hideTopMenuOnSave = JSON.parse(document.getElementById('CHECKBOX_hideTopMenu').checked);
 		localStorage.setItem('hideTopMenu', APP.options.hideTopMenuOnSave);
+
+		switch (this.hideTopMenuOnSave){
+
+			case !0:
+				TMS.css('MENU_TOP_BG', {'display': 'inline'});
+				break;
+
+			case !1:
+				TMS.css('MENU_TOP_BG', {'display': 'none'});
+				break;
+
+		}
 
 	},
 
@@ -175,16 +187,20 @@ temp_OPTIONS = {
 				// Center map
 				APP.graphics.updatePlayerPos();
 
-				// Set message
+				// Set GUI
 				TMS.css('MENU_TOP', {'height': '30px'});
-				var msg = document.getElementById('LABEL_mapDragStatus').innerHTML;
-				document.getElementById('LABEL_mapDragStatus').innerHTML = ' - Map file was updated successfully! (' + fileName + ')';
+
+				// Set labels
+				document.getElementById('LABEL_RE3_INFO_mapName').innerHTML = '';
+				document.getElementById('LABEL_mapDragStatus').innerHTML = 'Map file was updated successfully! (' + fileName + ')';
+
+				// Reset label after 1.8s
 				setTimeout(function(){
-					document.getElementById('LABEL_mapDragStatus').innerHTML = msg;
+					APP.graphics.updateGuiLabel();
 					if (APP.options.hideTopMenuOnSave === !0){
 						TMS.css('MENU_TOP', {'height': '0px'});
 					}
-				}, 1700);
+				}, 1800);
 
 			} catch (err) {
 				window.alert('ERROR - Unable to save map!\nPath: ' + APP.options.latestFile + '\n\n' + err);
@@ -344,6 +360,7 @@ temp_OPTIONS = {
 		}
 		this.hideTopMenuOnSave = JSON.parse(localStorage.getItem('hideTopMenu'));
 		document.getElementById('CHECKBOX_hideTopMenu').checked = this.hideTopMenuOnSave;
+		this.togglehideTopMenuOnSave();
 
 		// Update canvas
 		TMS.css('APP_MAP_CANVAS', {'font-size': (this.settingsData.fontSize + 13) + 'px'});

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"hash": "",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"main": "App/index.htm",
 	"author": "TemmieHeartz",
 	"license": "GPL-2.0-only",