Support multiple files

PlutoLang · Mar 1, 2024 · b1f2738 · b1f2738
1 parent de3c96c
commit b1f2738
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -5,10 +5,14 @@
 	<link rel="stylesheet" href="style.css" />
 </head>
 <body>
-	<div id="container">
+	<div id="container" class="uk-light">
 		<h1>Write Pluto & Lua Online</h1>
 		<div class="uk-grid">
 			<div class="uk-width-1-2@m uk-margin-bottom">
+				<ul class="uk-tab">
+					<li><a>index.pluto</a></li>
+					<li id="add-file"><a>+</a></li>
+				</ul>
 				<div id="editor">if _PVERSION then
 	-- Pluto
 	print("Hello from ".._PVERSION)

diff --git a/script.js b/script.js
@@ -5,12 +5,124 @@ editor.session.setUseWorker(false);
 editor.session.setMode("ace/mode/lua");
 editor.focus();
 
-// Load Code From URL
-if (location.hash.substr(0, 6) == "#code=")
+// Files
+var file_contents = {
+	'index.pluto': `if _PVERSION then
+	-- Pluto
+	print("Hello from ".._PVERSION)
+else
+	-- Lua
+	print("Hello from ".._VERSION)
+end`
+};
+
+function addFile(name, contents)
+{
+	file_contents[name] = contents;
+
+	let li = document.createElement("li");
+	let a = document.createElement("a");
+	a.textContent = name;
+	li.appendChild(a);
+	let reference = document.getElementById("add-file");
+	reference.parentNode.insertBefore(li, reference);
+}
+
+function activateFile(name)
+{
+	document.querySelectorAll(".uk-tab > li").forEach(li => {
+		if (li.querySelector("a").textContent == name)
+		{
+			li.classList.add("uk-active");
+		}
+		else
+		{
+			li.classList.remove("uk-active");
+		}
+	});
+
+	editor.setValue(file_contents[name]);
+}
+
+function getActiveFile()
 {
-	editor.setValue(decodeURIComponent(location.hash.substr(6)));
+	return document.querySelector(".uk-tab .uk-active a").textContent;
 }
 
+document.addEventListener("click", function(e)
+{
+	let file_clicked;
+	if (e.target.matches(".uk-tab > li"))
+	{
+		file_clicked = e.target.querySelector("a").textContent;
+	}
+	else if (e.target.closest(".uk-tab > li"))
+	{
+		file_clicked = e.target.closest(".uk-tab > li").querySelector("a").textContent;
+	}
+	if (file_clicked)
+	{
+		if (file_clicked == "+")
+		{
+			let name = window.prompt("File name");
+			if (name)
+			{
+				addFile(name, "");
+				activateFile(name);
+			}
+		}
+		else
+		{
+			activateFile(file_clicked);
+		}
+	}
+});
+
+// Shareable state
+function updateShare()
+{
+	if (Object.keys(file_contents).length > 1)
+	{
+		let parts = [];
+		for (const [name, contents] of Object.entries(file_contents))
+		{
+			parts.push("file_names[]=" + encodeURIComponent(name));
+			parts.push("file_contents[]=" + encodeURIComponent(contents));
+		}
+		location.hash = "#" + parts.join("&");
+	}
+	else
+	{
+		location.hash = "#code=" + encodeURIComponent(editor.getValue());
+	}
+}
+
+let params = new URLSearchParams(location.hash.replace("#", "?"));
+if (params.has("code"))
+{
+	file_contents["index.pluto"] = params.get("code");
+}
+else if (params.has("file_names[]") && params.has("file_contents[]"))
+{
+	let shared_file_names = params.getAll("file_names[]");
+	let shared_file_contents = params.getAll("file_contents[]");
+	if (shared_file_names.length == shared_file_contents.length)
+	{
+		for (let i = 0; i != shared_file_names.length; ++i)
+		{
+			if (shared_file_names[i] == "index.pluto")
+			{
+				file_contents["index.pluto"] = shared_file_contents[i];
+			}
+			else
+			{
+				addFile(shared_file_names[i], shared_file_contents[i]);
+			}
+		}
+	}
+}
+activateFile("index.pluto");
+
 // Enviroments
 var latest_pluto_version;
 function addOptgroupOptions(elm, name, dname)
@@ -51,12 +163,14 @@ $.get("https://wasm.pluto.do/manifest.json", function(data)
 
 		editor.session.on("change", function(delta)
 		{
+			file_contents[getActiveFile()] = editor.getValue();
+
 			clearTimeout(rerun_timer);
 			rerun_timer = setTimeout(function()
 			{
 				runInEnvironment(selected_environment, function(success)
 				{
-					location.hash = "#code=" + encodeURIComponent(editor.getValue());
+					updateShare();
 				});
 			}, 500);
 		});
@@ -151,15 +265,18 @@ function runInEnvironment(environment, callback)
 				main: mod.cwrap("main", "int", ["int", "array"]),
 			};
 
-			// Write script to FS
-			let data = utf16_to_utf8(editor.getValue());
-			let stream = prog.mod.FS.open("script." + environment.name, "w+");
-			prog.mod.FS.write(stream, data, 0, data.length, 0);
-			prog.mod.FS.close(stream);
+			// Write files to FS
+			for (const [name, contents] of Object.entries(file_contents))
+			{
+				let data = utf16_to_utf8(contents);
+				let stream = prog.mod.FS.open(name, "w+");
+				prog.mod.FS.write(stream, data, 0, data.length, 0);
+				prog.mod.FS.close(stream);
+			}
 
 			// Execute
 			$("#output").text("");
-			let argv = [ environment.name, "script." + environment.name ];
+			let argv = [ environment.name, "index.pluto" ];
 			let argv_ptr = allocateStringArray(prog, argv);
 			let status = prog.main(argv.length, argv_ptr);
 			if (status != 0)

diff --git a/style.css b/style.css
@@ -22,7 +22,7 @@
 
 #editor {
 	width: 100%;
-	height: calc(100vh - 240px);
+	height: calc(100vh - 264px);
 }
 
 @media (max-width: 600px) {
@@ -39,3 +39,11 @@
 		line-height: 1.3;
 	}
 }
+
+.uk-tab {
+	margin-bottom: 0;
+}
+
+.uk-tab > * > a {
+	text-transform: none;
+}