new icon (send help) + QoL design

assets/analyzer.js

@@ -122,7 +122,7 @@ async function processEntries(entries) {
 							line.match(/run ([a-z_:]{2,})/g)?.forEach(match => {
 								if (match[1] == "return") return
 
-								const cmdBehind = match.replace(" run ", "")
+								const cmdBehind = match.replace("run ", "").trim()
 								if (cmdsBehindExecute[cmdBehind]) cmdsBehindExecute[cmdBehind]++
 								else cmdsBehindExecute[cmdBehind] = 1
 								if (commands[cmdBehind]) commands[cmdBehind]++
@@ -414,7 +414,7 @@ async function mainScan(hasData = false) {
 				html += cmd + ": " + localize(commands[cmd]) + "<br>"
 				if (cmdsBehindExecute[cmd]) html += "<span class='indented'>Behind execute: " + localize(cmdsBehindExecute[cmd]) +
 					(cmd == "execute" ? "⚠️ <small>(<code>... run execute ...</code> equals <code>... ...</code>)</small>" : "") + "</span><br>"
-				if (cmdsBehindMacros[cmd]) html += "<span class='indented'>Behind macros: " + localize(cmdsBehindMacros[cmd]) + "</span><br>"
+				if (cmdsBehindMacros[cmd]) html += "<span class='indented'>Behind macro: " + localize(cmdsBehindMacros[cmd]) + "</span><br>"
 			})
 			document.getElementById("result").innerHTML = html
 		}

assets/script.js

@@ -119,10 +119,8 @@ function openDialog(dialog) {
 }
 
 const toggleTheme = () => {
-	const newTheme = getCookie("theme") == "light" ? "dark" : "light"
-	setCookie("theme", newTheme, 365)
-	if (newTheme == "light") document.body.classList.add("light-theme")
-	else document.body.classList.remove("light-theme")
+	const toggled = document.body.classList.toggle("light-theme")
+	setCookie("theme", toggled ? "light" : "dark", 365)
 }
 
 function clearResults() {
@@ -150,6 +148,7 @@ async function share(type) {
 			cmdsBehindMacros,
 			comments,
 			empty,
+			emptyFiles,
 			dpExclusive,
 			rpExclusive
 		}, null, type == "json" ? 4 : void 0)
@@ -249,16 +248,14 @@ function createImage() {
 		x = 450
 		y = 3
 		ctx.font = "28px Arial"
-		ctx.fillText((Object.keys(commands).length > 5 ? "Top c" : "c") + "ommands", x, 40, maxWidth)
+		ctx.fillText((Object.keys(commands).length > 5 ? "Top c" : "C") + "ommands", x, 40, maxWidth)
 		ctx.font = "20px Arial"
 
 		commands = Object.fromEntries(Object.entries(commands).sort(([, a], [, b]) => b - a))
 		Object.keys(commands).slice(0, 5).forEach(cmd => {
 			ctx.fillText(cmd + ": " + localize(commands[cmd]), x, y++ * lineHeight, maxWidth)
-			if (cmdsBehindExecute[cmd]) {
-				ctx.fillText("Behind execute: " + localize(cmdsBehindExecute[cmd]), x + 30, y++ * lineHeight, maxWidth)
-				if (cmd == "execute") ctx.fillText("⚠️ (\"... run execute ...\" equals \"... ...\")", x + 30, y++ * lineHeight, maxWidth)
-			}
+			if (cmdsBehindExecute[cmd]) ctx.fillText("Behind execute: " + localize(cmdsBehindExecute[cmd]), x + 30, y++ * lineHeight, maxWidth)
+			if (cmdsBehindMacros[cmd]) ctx.fillText("Behind macro: " + localize(cmdsBehindMacros[cmd]), x + (cmdsBehindExecute[cmd] ? 90 : 30), y++ * lineHeight, maxWidth)
 		})
 	}
 }

assets/style.css

@@ -54,6 +54,22 @@ strong {
 	color: var(--heading-color);
 }
 
+header .packType {
+	display: flex;
+	gap: 15px;
+}
+header .packType label {
+	cursor: pointer;
+}
+
+header .packType input {
+	display: none;
+}
+header .packType input:checked ~ label {
+	font-weight: bold;
+	border-bottom: 2px solid var(--heading-color);
+}
+
 code {
 	background-color: var(--code-bg);
 	border-radius: 5px;
@@ -70,13 +86,17 @@ code {
 }
 
 main {
-	margin: 0 25px;
+	margin: 25px 35px 15px;
+}
+@media screen and (max-width: 750px) {
+	main {
+		margin: 15px 15px;
+	}
 }
 
 header {
 	background-color: var(--header-bg);
-	padding: 20px;
-	margin-bottom: 30px;
+	padding: 10px 30px;
 }
 header h1 {
 	margin: 15px 0;

index.html

@@ -9,8 +9,8 @@
 		<meta name="theme-color" content="#216E4A">
 
 		<link rel="manifest" href="./manifest.json">
-		<link href="./assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
-		<link href="./assets/images/favicon.ico" rel="apple-touch-icon" sizes="192x192">
+		<link href="./assets/images/icon-128x128.png" rel="shortcut icon" type="image/x-icon">
+		<link href="./assets/images/icon-192x192.png" rel="apple-touch-icon" sizes="192x192">
 
 		<link rel="stylesheet" href="./assets/style.css">
 		<script src="./assets/analyzer.js"></script>
@@ -19,8 +19,8 @@
 	</head>
 	<body>
 		<header>
-			<h1>Minecraft Datapack and Resourcepack analyzer</h1>
-			<h2>Drop/paste a .zip file or select a folder below to start analyzing!</h2>
+			<h1>Minecraft Java Datapack and Resourcepack analyzer</h1>
+			<h2>Drop/paste a .zip file or select a folder below to analyze locally!</h2>
 			<div>
 				<button type="button" onclick="selectFolder()">Select folder</button>
 				<button type="button" onclick="selectZip()">Select .zip</button>
@@ -30,17 +30,24 @@ <h2>Drop/paste a .zip file or select a folder below to start analyzing!</h2>
 			<div id="resultButtons" hidden>
 				<button type="button" onclick="mainScan()">Scan again</button>
 				<button type="button" onclick="clearResults()">Clear results</button>
-				<button type="button" onclick="share('txt')">Export as txt</button>
-				<button type="button" onclick="share('json')">Export as json</button>
-				<button type="button" onclick="share('link')">Share as link</button>
-				<button type="button" onclick="share('png')">Share as image</button>
+				<button type="button" onclick="share('txt')">Export as .txt</button>
+				<button type="button" onclick="share('json')">Export as .json</button>
+				<button type="button" onclick="share('link')">Share link</button>
+				<button type="button" onclick="share('png')">Generate image</button>
 			</div>
 
 			<br>
-			<label for="radiodp" title="Analyze datapacks">Datapack</label>
-			<input type="radio" id="radiodp" name="packType" checked>
-			<label for="radiorp" title="Analyze resourcepacks and shaderpacks">Resourcepack</label>
-			<input type="radio" id="radiorp" name="packType">
+			<div class="packType">
+				<span>Select the pack type the site uses for analyzing files:</span>
+				<div>
+					<input type="radio" id="radiodp" name="packType" checked>
+					<label for="radiodp" title="Analyze datapacks">Datapack</label>
+				</div>
+				<div>
+					<input type="radio" id="radiorp" name="packType">
+					<label for="radiorp" title="Analyze resourcepacks and shaderpacks">Resourcepack</label>
+				</div>
+			</div>
 			<br>
 		</header>
 

manifest.json

@@ -3,25 +3,65 @@
 	"short_name": "MC Pack Analyzer",
 	"icons": [
 		{
-			"src": "/assets/images/favicon.ico",
-			"type": "image/x-icon",
-			"sizes": "120x120x"
+			"src": "/assets/images/icon-72x72.png",
+			"sizes": "72x72",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-96x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-128x128.png",
+			"sizes": "128x128",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-144x144.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-152x152.png",
+			"sizes": "152x152",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-384x384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/images/icon-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
 		}
 	],
-	"id": "/?source=pwa",
-	"start_url": "/?source=pwa",
+	"id": "/",
+	"start_url": "/",
 	"background_color": "#222",
 	"display_override": ["window-control-overlay"],
 	"display": "standalone",
 	"scope": "/",
 	"theme_color": "#216E4A",
 	"lang": "en",
-	"description": "A tool which allows you to analyze Minecraft Java datapacks and resourcepacks, and generate stats from them.",
+	"description": "A tool which allows you to analyze Minecraft Java datapacks and resourcepacks, and generate stats and share from them.",
 	"screenshots": [
 		{
 			"src": "/assets/images/screen_result.png",
 			"type": "image/png",
 			"sizes": "713x339"
+		},{
+			"src": "/assets/images/showcase.png",
+			"type": "image/png",
+			"form_factor": "wide",
+			"sizes": "955x500"
 		}
 	]
 }

serviceworker.js

@@ -1,6 +1,8 @@
+const cacheName = "offline1"
+
 self.addEventListener("install", event => {
 	event.waitUntil((async () => {
-		const cache = await caches.open("offline")
+		const cache = await caches.open(cacheName)
 		await cache.addAll(["/", "./assets/analyzer.js", "./assets/script.js", "./assets/jszip.min.js", "./assets/style.css", "https://raw.githubusercontent.com/misode/mcmeta/summary/versions/data.json"])
 	})())
 })
@@ -25,7 +27,7 @@ self.addEventListener("fetch", event => {
 			} catch (e) {
 				console.warn("Cannot fetch, serving from cache", e)
 
-				const cache = await caches.open("offline")
+				const cache = await caches.open(cacheName)
 				return await cache.match(event.request.url)
 			}
 		})())