A

2025-10-29 20:36:09 -07:00
commit d90a9b5826
33 changed files with 3239 additions and 0 deletions
--- a/webui/src/app/layout.tsx
+++ b/webui/src/app/layout.tsx
@@ -0,0 +1,30 @@
+import "@/styles/globals.css";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: "Rhai Playground",
+	description: "An interactive Rhai scripting language playground",
+};
+
+export const viewport = {
+	width: "device-width",
+	initialScale: 1,
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<head>
+				<link
+					rel="stylesheet"
+					href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css"
+				/>
+			</head>
+			<body>{children}</body>
+		</html>
+	);
+}
--- a/webui/src/app/page.tsx
+++ b/webui/src/app/page.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+
+const Playground = dynamic(() => import("@/components/Playground"), {
+	ssr: false,
+	loading: () => (
+		<div
+			style={{
+				position: "absolute",
+				left: 0,
+				top: 0,
+				bottom: 0,
+				right: 0,
+				padding: "8px",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+			}}
+		>
+			<div>
+				Loading{" "}
+				<a
+					href="https://github.com/rhaiscript/playground"
+					target="_blank"
+				>
+					Rhai Playground
+				</a>
+				...
+			</div>
+		</div>
+	),
+});
+
+export default function Home() {
+	const [isClient, setIsClient] = useState(false);
+
+	useEffect(() => {
+		setIsClient(true);
+	}, []);
+
+	if (!isClient) {
+		return (
+			<div
+				id="loading"
+				style={{
+					position: "absolute",
+					left: 0,
+					top: 0,
+					bottom: 0,
+					right: 0,
+					padding: "8px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				}}
+			>
+				<div>
+					Loading{" "}
+					<a
+						href="https://github.com/rhaiscript/playground"
+						target="_blank"
+					>
+						Rhai Playground
+					</a>
+					...
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<main>
+			<Playground />
+		</main>
+	);
+}