fix #9 and #6

EddyTheCo · Feb 15, 2024 · dac2b72 · dac2b72
1 parent 941f816
commit dac2b72
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 97 deletions.
diff --git a/wasm/Client/index.html b/wasm/Client/index.html
@@ -18,12 +18,11 @@
 			crossorigin=""></script>
 		<script type="text/javascript" src="js/scripts.js"></script>
 
-
 		<title>DLockers Client</title>
 	</head>
 	<body onload="init()">
 		<div id="qtrootDiv"></div>
-		<div id="map">
+		<div id="map" style="visibility: hidden;">
 			<img src="img/centerButton.png" id="recenter" style="visibility: inherit; position: absolute;top: 10px;right: 10px;z-index: 10001; width:32px; height:32px;">
 		</div>
 		<footer>

diff --git a/wasm/Client/js/scripts.js b/wasm/Client/js/scripts.js
@@ -2,47 +2,98 @@ var mapsPlaceholder = [];
 async function init() {
 
 
-	const rootDiv = document.querySelector('#qtrootDiv');
+	document.body.innerHTML += '<figure  id="qtspinner"> <center > <img id="logo" crossorigin="anonymous" src="img/esterlogo.png" ></img> <div id="qtstatus"></div> </center> </figure>';
 
-	rootDiv.innerHTML += '<figure  id="qtspinner"> <center > <img id="logo" crossorigin="anonymous" src="img/esterlogo.png" ></img> <div id="qtstatus"></div> </center> </figure> <div class="qtscreen" id="screen" ></div>';
 
-	const spinner = rootDiv.querySelector('#qtspinner');
-	const screen = rootDiv.querySelector('#screen');
-	const status = rootDiv.querySelector('#qtstatus');
+	const spinner = document.body.querySelector('#qtspinner');
+	const status = document.body.querySelector('#qtstatus');
+
 
+	const rootDiv = document.querySelector('#qtrootDiv');
+	rootDiv.innerHTML += '<div class="qtscreen" id="screen" ></div>';
+	const screen = rootDiv.querySelector('#screen');
 
-            const showUi = (ui) => {
-                [spinner, screen].forEach(element => element.style.display = 'none');
-                if (screen === ui)
-                    screen.style.position = 'default';
-                ui.style.display = 'block';
-            }
+	const showUi = (ui) => {
+		[spinner, screen].forEach(element => element.style.display = 'none');
+		if (screen === ui)
+			screen.style.position = 'default';
+		ui.style.display = 'block';
+	}
 
 	try {
-                showUi(spinner);
-                status.innerHTML = 'Loading...';
-
-                qtModule = await qtLoad({
-                    qt: {
-                        onLoaded: () => 
-			    {
-				    showUi(screen);
-			    },
-                        onExit: exitData =>
-                        {
-                            status.innerHTML = 'Application exit';
-                            status.innerHTML +=
-                                exitData.code !== undefined ? ` with code ` : '';
-                            status.innerHTML +=
-                                exitData.text !== undefined ? ` ()` : '';
-                            showUi(spinner);
-                        },
-                        entryFunction: window.createQtAppInstance,
-                        containerElements: [screen],
-
-                    }
-                });
-		resized = function() { 
+		showUi(spinner);
+		status.innerHTML = 'Loading...';
+
+		qtModule = await qtLoad({
+			qt: {
+				onLoaded: () =>
+				{
+					showUi(screen);
+					L.Map.addInitHook(function () {
+						mapsPlaceholder.push(this);
+					});
+					document.getElementById("map").style.visibility = "visible";
+					const map = L.map('map').setView([51.505, -0.09], 13);
+
+					const mineMarker = L.icon({
+						iconUrl: 'img/mineMarker.png',
+						iconSize: [24, 24],
+					});
+
+					L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+						maxZoom: 19,
+						crossOrigin: "",
+						attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+					},
+					).addTo(map);
+					const options = {
+						enableHighAccuracy: true,
+						timeout: 5000,
+						maximumAge: 0,
+					};
+
+					function success(pos) {
+						const crd = pos.coords;
+						mine.setLatLng([crd.latitude,crd.longitude]);
+					}
+					function initmapview(pos) {
+						const crd = pos.coords;
+
+						const mine = L.marker([crd.latitude,crd.longitude],{icon: mineMarker}).addTo(map);
+						map.setView([crd.latitude,crd.longitude],13);
+						const recButt = document.querySelector("#recenter");
+						recButt.style.visibility="visible";
+						recButt.onclick = () => {
+							map.setView(mine.getLatLng(),13);
+
+						};
+
+
+					}
+					function error(err) {
+						console.warn(`ERROR(${err.code}): ${err.message}`);
+
+					}
+
+					id = navigator.geolocation.watchPosition(success, error, options);
+					navigator.geolocation.getCurrentPosition(initmapview, error, options);
+
+				},
+				onExit: exitData =>
+				{
+					status.innerHTML = 'Application exit';
+					status.innerHTML +=
+						exitData.code !== undefined ? ` with code ` : '';
+					status.innerHTML +=
+						exitData.text !== undefined ? ` ()` : '';
+					showUi(spinner);
+				},
+				entryFunction: window.createQtAppInstance,
+				containerElements: [screen],
+
+			}
+		});
+		resized = function() {
 			if(document.documentElement.clientWidth<600)
 			{
 				document.getElementById("map").style.zIndex = "1000";
@@ -53,61 +104,10 @@ async function init() {
 			qtModule.qtResizeContainerElement(canvas);
 		}
 		window.addEventListener("resize", resized);
-            } catch (e) {
-                console.error(e);
-                console.error(e.stack);
-            }
-
-L.Map.addInitHook(function () {
-      mapsPlaceholder.push(this); 
-    });
-const map = L.map('map').setView([51.505, -0.09], 13);
-
-
-	const mineMarker = L.icon({
-    iconUrl: 'img/mineMarker.png',
-    iconSize: [24, 24],
-});
-
-	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-		maxZoom: 19,
-		crossOrigin: "",
-		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-	},
-	).addTo(map);
-const options = {
-  enableHighAccuracy: true,
-  timeout: 5000,
-  maximumAge: 0,
-};
-
-function success(pos) {
-        const crd = pos.coords;
-	map.setView([crd.latitude,crd.longitude],13);
-	mine.setLatLng([crd.latitude,crd.longitude]);
-
-    }
-function initmapview(pos) {
-        const crd = pos.coords;
-
-	const mine = L.marker([crd.latitude,crd.longitude],{icon: mineMarker}).addTo(map);
-	map.setView([crd.latitude,crd.longitude],13);
-	const recButt = document.querySelector("#recenter");
-	recButt.style.visibility="visible";
-	recButt.onclick = () => {
-	map.setView(mine.getLatLng(),13);
-
-};
-
-
-    }
-	function error(err) {
-  console.warn(`ERROR(${err.code}): ${err.message}`);
-
-}
-
-id = navigator.geolocation.watchPosition(success, error, options);
-navigator.geolocation.getCurrentPosition(initmapview, error, options);
+	} catch (e) {
+		console.error(e);
+		console.error(e.stack);
+	}
 
 }
 
diff --git a/wasm/Client/style.css b/wasm/Client/style.css
@@ -4,6 +4,7 @@ html,body{
 	float:left;
 	min-height: 100%;
 	color: white;
+	background-color: #10141c;
 	font-family: 'Titillium Web';
 	font-size: 2vw;
 	margin: 0;
@@ -36,11 +37,11 @@ a{
 }
 #qtspinner
 {
-	position:fixed;
-	width:50%;
-	height:50%;
-	bottom: 25%;
-	right: 25%;
+	position:absolute;
+	width:80%;
+	height:40%;
+	top: 30%;
+	left: 10%;
 	display:block;
 	z-index: 1000
 }