add landing page, cleanup some styles, fix nav to source set

unreal-archive · Jun 18, 2022 · 468d26e · 468d26e
1 parent 77737a7
commit 468d26e
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 15 deletions.
diff --git a/src/main/java/net/shrimpworks/unreal/scriptbrowser/www/Generator.java b/src/main/java/net/shrimpworks/unreal/scriptbrowser/www/Generator.java
@@ -64,13 +64,24 @@ public class Generator {
 
 	public static void index(List<USources> sources, Path outPath) {
 		try {
-			Template tpl = TPL_CONFIG.getTemplate("index.ftl");
+			Template index = TPL_CONFIG.getTemplate("index.ftl");
 			try (Writer writer = Channels.newWriter(
 				Files.newByteChannel(
 					outPath.resolve("index.html"),
 					StandardOpenOption.WRITE, StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING
 				), StandardCharsets.UTF_8)) {
-				tpl.process(
+				index.process(
+					Map.of("sources", sources),
+					writer
+				);
+			}
+			Template home = TPL_CONFIG.getTemplate("home.ftl");
+			try (Writer writer = Channels.newWriter(
+				Files.newByteChannel(
+					outPath.resolve("home.html"),
+					StandardOpenOption.WRITE, StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING
+				), StandardCharsets.UTF_8)) {
+				home.process(
 					Map.of("sources", sources),
 					writer
 				);

diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/home.ftl b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/home.ftl
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>UnrealScript Browser</title>
+	<link rel="stylesheet" href="static/styles/style.css">
+	<link rel="stylesheet" href="static/styles/solarized-light.css" id="style">
+	<script>
+	  const urlParams = new URLSearchParams(window.location.search);
+	  const style = document.getElementById("style")
+	  let currentStyle = 'solarized-light'
+
+	  if (urlParams.has('s')) {
+		  currentStyle = urlParams.get('s')
+	  } else if (window.localStorage.getItem("style")) {
+		  currentStyle = window.localStorage.getItem("style")
+	  }
+
+	  style.setAttribute("href", "static/styles/" + currentStyle + ".css")
+	</script>
+</head>
+
+<body>
+<article id="home">
+	<h3>UnrealScript Browser</h3>
+	<p>
+		This tool provides an easy method of browsing the UnrealScript source code of
+		various Unreal Engine games.
+	</p>
+	<p>
+		To begin, use the <img src="static/icons/file-code.svg" alt="source"/> Select
+		Source Set menu to choose a game or version of a game's sources to view.
+	</p>
+	<p>
+		You can also download a zipped archive of the sources for offline use using the
+		<img src="static/icons/file-download.svg" alt="download"/> Download Sources
+		button.
+	</p>
+	<p>
+		Finally, you can use the <img src="static/icons/palette.svg" alt="style"/> Style
+		menu to change the syntax highlighting scheme to your preference.
+	</p>
+	<h4>The following source sets are currently available:</h4>
+	<div class="contents">
+		<ul>
+		<#list sources as src>
+			<li>${src.name}</li>
+		</#list>
+		</ul>
+	</div>
+</article>
+</body>
+
+<script>
+	document.addEventListener("DOMContentLoaded", () => {
+		window.addEventListener('message', (e) => {
+			const port2 = e.ports[0]
+
+			port2.onmessage = (m) => {
+				switch (m.data.event) {
+					case "style":
+						currentStyle = m.data.style
+						style.setAttribute("href", "static/styles/" + currentStyle + ".css")
+						break
+					default:
+						console.log("unknown message event ", m.data.event, m.data)
+				}
+			}
+		})
+	})
+</script>
+
+</html>
diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/index.ftl b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/index.ftl
@@ -39,7 +39,7 @@
 					<li data-name="">Basic</li>
 				</ul>
 			</li>
-			<li id="menu-target" title="Select Opened Class"><img src="static/icons/target.svg" alt="goto"/></li>
+			<li id="menu-target" title="Select Current Class"><img src="static/icons/target.svg" alt="goto"/></li>
 		</ul>
 	</div>
 
@@ -198,7 +198,7 @@
 		})
 
 		function navFromHash(hash) {
-			if (hash && hash.indexOf("/") > -1) {
+			if (hash) {
 				const parts = hash.substring(1).split("/")
 				const source = sources.find((s) => s.path === parts[0])
 				loadSources(source)
@@ -208,7 +208,12 @@
 		}
 
 		// restore state based on #url (#sources/pkg/clazz)
-		navFromHash(window.location.hash)
+		if (window.location.hash) {
+			navFromHash(window.location.hash)
+		} else {
+			source.src = "home.html?s=" + currentStyle
+		}
+
 		window.addEventListener("popstate", () => navFromHash(window.location.hash));
 	})
 </script>

diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/styles/style.css b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/styles/style.css
@@ -312,7 +312,7 @@ header h1 {
 	text-align: center;
 }
 
-#home .contents a img {
+#home img {
 	max-height: 30px;
 	margin-top: -6px;
 	vertical-align: middle;

diff --git a/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/styles/unrealed.css b/src/main/resources/net/shrimpworks/unreal/scriptbrowser/www/static/styles/unrealed.css
@@ -7,16 +7,16 @@
 	--lines-gb: #d4d0c8;
 	--comment: #00ff00;
 	--directive: #808080;
-	--operator: white;
+	--operator: inherit;
 	--keyword: #00ffff;
-	--type: white;
-	--const-number: white;
+	--type: inherit;
+	--const-number: inherit;
 	--const-bool: #00ffff;
-	--const-string: white;
-	--const-name: white;
-	--const-none: white;
-	--var-local: white;
-	--var-global: white;
+	--const-string: inherit;
+	--const-name: inherit;
+	--const-none: inherit;
+	--var-local: inherit;
+	--var-global: inherit;
 }
 
 header {
@@ -42,4 +42,32 @@ header {
 	background-color: navy;
 	color: white;
 	cursor: pointer;
-}
+}
+
+#controls li:hover img[src$="svg"] {
+	filter: invert(1);
+}
+
+#home {
+	color: var(--source-color);
+}
+
+#home .contents a {
+	background-color: var(--lines-gb);
+	color: black;
+	border: 2px outset;
+}
+
+#home .contents a img[src$="svg"] {
+	filter: invert(0);
+}
+
+#home img[src$="svg"] {
+	filter: invert(1);
+}
+
+#script pre a[href]:hover {
+	background-color: var(--lines-gb);
+	color: black;
+	outline: 2px outset;
+}