UI and about page in game

2026-02-24 16:57:51 -03:00
parent fe885a9e24
commit 86d527ae51
12 changed files with 268 additions and 6 deletions
@@ -0,0 +1,97 @@
+import { marked } from "marked";
+import { AssetManager } from "./assets.ts";
+
+export async function open_about() {
+	const popup = self.open(
+		"",
+		"popupWindow",
+		"width=500,height=400",
+	);
+
+	if (!popup) {
+		alert("oh no");
+		return;
+	}
+
+	popup.document.body.innerHTML = await marked.parse(AssetManager.instance.get("bworld:assets_text"));
+	popup.document.head.innerHTML = `<style>
+		body {
+			font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+			line-height: 1.7;
+			color: #e5e7eb;
+			max-width: 800px;
+			margin: 2rem auto;
+			padding: 0 1rem;
+		}
+		h1, h2, h3, h4 {
+			font-weight: 600;
+			line-height: 1.3;
+			margin-top: 2rem;
+			margin-bottom: 1rem;
+		}
+		h1 {
+			font-size: 2rem;
+			border-bottom: 1px solid #e5e7eb;
+			padding-bottom: 0.3rem;
+		}
+		h2 {
+			font-size: 1.5rem;
+			border-bottom: 1px solid #e5e7eb;
+			padding-bottom: 0.3rem;
+		}
+		h3 {
+			font-size: 1.25rem;
+		}
+		p {
+			margin: 1rem 0;
+		}
+		a {
+			color: #2563eb;
+			text-decoration: none;
+		}
+		a:hover {
+			text-decoration: underline;
+		}
+		ul, ol {
+			padding-left: 2rem;
+			margin: 1rem 0;
+		}
+		code {
+			background: #1f2937;
+			padding: 0.2em 0.4em;
+			border-radius: 4px;
+			font-size: 0.9em;
+		}
+		pre {
+			background: #0f172a;
+			color: #f9fafb;
+			padding: 1rem;
+			border-radius: 8px;
+			overflow-x: auto;
+		}
+		pre code {
+			background: none;
+			padding: 0;
+			color: inherit;
+		}
+		blockquote {
+			border-left: 4px solid #d1d5db;
+			padding-left: 1rem;
+			color: #6b7280;
+			margin: 1rem 0;
+		}
+		table {
+			border-collapse: collapse;
+			width: 100%;
+			margin: 1rem 0;
+		}
+		th, td {
+			border: 1px solid #e5e7eb;
+			padding: 0.5rem;
+		}
+		th {
+			background: #f9fafb;
+			text-align: left;
+		}
+	</style>`;
+}