Style tweaks

index.html

@@ -30,9 +30,9 @@
 
     <div class="select-panel ui">
       <div id="control">
-        <a href="javascript: startVehicleViewerIII(defaultModel);">III</a>
-        <a href="javascript: startVehicleViewerVC(defaultModel);">VC</a>
-        <a href="javascript: startVehicleViewerSA(defaultModel);">SA</a>
+        <a id="game-select-iii" href="javascript: startVehicleViewerIII(defaultModel);">III</a> | 
+        <a id="game-select-vc" href="javascript: startVehicleViewerVC(defaultModel);">VC</a> | 
+        <a id="game-select-sa" href="javascript: startVehicleViewerSA(defaultModel);">SA</a>
       </div>
       
       <div class="objects-wrapper">
@@ -86,6 +86,9 @@ startVehicleViewerIII(model)
     else {
       SelectModel(model);
     }
+
+    uiSetCurrentGame("iii");
+    uiSetCurrentModel(CurrentModel.model);
   });
 }
 
@@ -104,6 +107,9 @@ startVehicleViewerVC(model)
     else {
       SelectModel(model);
     }
+  
+    uiSetCurrentGame("vc");
+    uiSetCurrentModel(CurrentModel.model);
   });
 }
 
@@ -122,6 +128,9 @@ startVehicleViewerSA(model)
     else {
       SelectModel(model);
     }
+
+    uiSetCurrentGame("sa");
+    uiSetCurrentModel(CurrentModel.model);
   });
 }
 

ui.js

@@ -78,3 +78,24 @@ function(e) {
   }
 },
 false);
+
+function
+uiSetCurrentGame(game) {
+  document.querySelectorAll("#control a").forEach((v) => {
+    v.classList.remove("active");
+  });
+
+  let gameSelect = document.getElementById("game-select-" + game);
+  gameSelect.classList.add("active");
+}
+
+function
+uiSetCurrentModel(model) {
+  let l = document.querySelectorAll("#objects option");
+  for(let i = 0; i < l.length; i++) {
+    if(l[i].value === model) {
+      l[i].selected = 'selected';
+      break;
+    }
+  }
+}

webgl.css

@@ -36,11 +36,18 @@ video {
 
 #control {
 	text-align: center;
+	background-color: white;
+	color: black;
+	font-family: Arial;
+	font-size: 18px;
+	font-weight: bold;
+	padding-top: 5px;
+	padding-bottom: 5px;
 }
 
 .objects-wrapper {
 	float: left;
-	height: 100%;
+	height: calc(100% - 15px);
 	width: calc(100%);
 }
 
@@ -66,7 +73,6 @@ option:hover {
 	bottom: 20px;
 	left: 130px;
 
-	/*background-color: todo;*/
 	border-radius: 2px;
 	padding: 5px;
 }
@@ -112,21 +118,29 @@ option:hover {
 	cursor: pointer;
 }
 
+#control a {
+	text-decoration: none;
+}
+
+#control a:hover, #control a.active {
+	text-decoration: underline;
+}
+
 @media (prefers-color-scheme: dark)
 {
 	body, canvas {
 		background-color: #181818;
 	}
 
-	body, a, #objects {
-		color: #f5f5f5;
+	body, a, #objects, option {
+		color: #f5f5f5 !important;
 	}
 
 	#objects {
 		background-color: #292929;
 	}
 
-	option:checked, option:hover {
+	option:checked, option:hover, .option:active {
 		background-color: #4f4f4f !important;
 	}
 
@@ -141,4 +155,13 @@ option:hover {
 	.custom-colors input {
 		border-radius: 2px;
 	}
+
+	#objects option:nth-child(2n) {
+		background-color: #2e2e2e;
+	}
+
+	#control {
+		background-color: #292929;
+		color: #f5f5f5;
+	}
 }