Update UI & fix bugs

Author: Reqwey

assets/css/reqwey.min.css

@@ -297,7 +297,7 @@ svg {
 	height: 100px;
 }
 .reqmessageboard .ui.segment {
-	z-index: 101;
+	z-index: 102;
 	min-width: 250px;
 	height: 100px;
 	overflow-y: auto;
@@ -307,7 +307,7 @@ svg {
 	font-family: fwzc;
 	position: absolute;
 	bottom: 0;
-	z-index: 102;
+	z-index: 103;
 	font-size: 1em;
 	width: 100%;
 	margin: 0;
@@ -590,12 +590,7 @@ blockquote {
   table-layout: fixed;
 }
 
-#game-map tr {
-	z-index: 10;
-}
-
 #game-map td {
-	z-index: 11;
   position: relative;
   border: 1px solid black;
   width: 30px;
@@ -610,7 +605,6 @@ blockquote {
   text-shadow: 0 0 2px black;
   opacity: 1;
   padding: 0;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 8px;
@@ -619,33 +613,40 @@ blockquote {
 
 #game-map td.selected {
   position: relative;
-  z-index: 20;
   border: 1px solid white;
 }
 
 #game-map td.queue_up::before {
 	z-index: 30;
 	position: absolute;
-	top: -10px;
+	top: -18px;
+	left: 6px;
 	content: '↑';
+	font-size: 1.2rem;
 }
 #game-map td.queue_right::before {
 	z-index: 30;
 	position: absolute;
-	right: -10px;
+	top: -1.5px;
+	right: -9px;
 	content: '→';
+	font-size: 1.2rem;
 }
 #game-map td.queue_down::before {
 	z-index: 30;
 	position: absolute;
-	bottom: -10px;
+	bottom: -20px;
+	left: 6px;
 	content: '↓';
+	font-size: 1.2rem;
 }
 #game-map td.queue_left::before {
 	z-index: 30;
 	position: absolute;
-	left: -10px;
+	left: -9px;
+	top: -1.5px;
 	content: '←';
+	font-size: 1.2rem;
 }
 
 #game-map td.selected:hover {
@@ -654,7 +655,6 @@ blockquote {
 
 #game-map td.attackable {
   position: relative;
-  z-index: 20;
   opacity: .4;
 }
 

main.js

@@ -230,7 +230,9 @@ async function createWindow() {
     },
     {
       label: 'Force Reflush',
-      role: 'forceReload'
+      click: () => {
+        mainWindow.loadFile('index.html')
+      }
     },
     {
       label: 'Toggle DevTools',

renderer.js

@@ -214,7 +214,7 @@ function gameJoin(username) {
 		Swal.fire({
 			title: title,
 			text: message,
-			icon: error,
+			icon: 'error',
 			showDenyButton: false,
 			showCancelButton: false,
 			allowOutsideClick: false,
@@ -386,8 +386,16 @@ function gameJoin(username) {
 					socket.emit('player_message', message)
 					$(this).val('')
 				}
-				else
-					$.toast({ class: 'error', message: `Invalid input!` });
+				else {
+					Swal.fire({
+						icon: 'error',
+						title: 'Error',
+						text: 'Invalid input!',
+						toast: true,
+						position: 'bottom-start',
+						timer: 3000
+					})
+				}
 			}
 		})
 		$('.reqforcestartemitor').bind('click', function () {
@@ -452,11 +460,13 @@ function gameJoin(username) {
 		})
 
 		socket.on('error', (title, message) => {
-			$.toast({
-				position: 'bottom attached',
-				class: 'error',
+			Swal.fire({
+				icon: 'error',
 				title: title,
-				message: message
+				text: message,
+				toast: true,
+				position: 'bottom-start',
+				timer: 3000
 			})
 			socket.emit('get_game_settings')
 		})
@@ -562,13 +572,16 @@ function gameJoin(username) {
 			</div>`)
 			window.turn = 1
 			window.queue = new Queue()
+			// let appContainer = document.getElementById('reqAppContainer')
 			$(document).bind('keydown', (event) => {
+				// var leftDist = appContainer.offsetLeft, topDist = appContainer.offsetTop
 				if (!window.selectedTd) return
 				if (event.which === 69) {
 					window.queue.pop_back()
 				} else if (event.which === 81) {
 					window.queue.clear()
 				} else if (event.which === 65 || event.which === 37) { // Left
+					// leftDist += 7;
 					let newPoint = { x: window.selectedTd.x, y: window.selectedTd.y - 1 }
 					console.log('keydown LEFT', newPoint)
 					if (withinMap(newPoint)) {
@@ -579,6 +592,7 @@ function gameJoin(username) {
 						window.selectedTd = newPoint
 					}
 				} else if (event.which === 87 || event.which === 38) { // Up
+					// topDist += 7;
 					let newPoint = { x: window.selectedTd.x - 1, y: window.selectedTd.y }
 					console.log('keydown UP', newPoint)
 					if (withinMap(newPoint)) {
@@ -589,6 +603,7 @@ function gameJoin(username) {
 						window.selectedTd = newPoint
 					}
 				} else if (event.which === 68 || event.which === 39) { // Right
+					// leftDist -= 7;
 					let newPoint = { x: window.selectedTd.x, y: window.selectedTd.y + 1 }
 					console.log('keydown RIGHT', newPoint)
 					if (withinMap(newPoint)) {
@@ -599,6 +614,7 @@ function gameJoin(username) {
 						window.selectedTd = newPoint
 					}
 				} else if (event.which === 83 || event.which === 40) { // Down
+					// topDist -= 7;
 					let newPoint = { x: window.selectedTd.x + 1, y: window.selectedTd.y }
 					console.log('keydown DOWN', newPoint)
 					if (withinMap(newPoint)) {
@@ -609,6 +625,9 @@ function gameJoin(username) {
 						window.selectedTd = newPoint
 					}
 				}
+
+				// appContainer.style.left = leftDist + 'px';
+				// appContainer.style.top = topDist + 'px';
 			})
 		})