From 80cc785573aa5636d697386125f4cc806b7c9e44 Mon Sep 17 00:00:00 2001 From: ahmed Date: Wed, 22 May 2024 20:20:07 +0100 Subject: [PATCH] feat(chore): update playground UI --- views/index.html | 868 ++++++++++++++++++++++------------------------- 1 file changed, 406 insertions(+), 462 deletions(-) diff --git a/views/index.html b/views/index.html index 2a48ee8..95a0bca 100644 --- a/views/index.html +++ b/views/index.html @@ -1,516 +1,460 @@ {{ block "index" . }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Esolang Playground - The esolang scripting language - - - -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Esolang Playground - The esolang scripting language + + +
+

try Esolang

Documentation -
-
-
-
-
+
+
+
+
-
-
-

Got 30 minutes?

-

Give Esolang a shot right now!

-

The code shown is editable and will be compiled and evaluated as you type.
- Anything you print using println or print will be shown in the bottom section,
- along with any compile errors and warnings.

-

OK, let's go. - Click "Next" to get started, click "Contents" to jump to a specific topic,
or go here to read everything in one page.

-
-
-
Let's begin by saying Hello, World.
-
+
+
+

Hello, World!

+

Here is a tiny program that prints out the text "Hello, World!". We'll explain how it works shortly.

+

In a normal Esolang project this program would be run using the esolang command on the command line, + but here in this tour the program is compiled and run inside your web browser, + allowing you to try Esolang without installing anything on your computer. +

+

Try changing the text being printed to Hello, Mom! and click run to see what happens.

+
+
-
-
-
-
-
+
+
+
+
{{ template "form" .}}
- +
- -
-
- -
-
-
-
- {{ template "evaluatedView" .}} - +
+
+
+
+
+
+ {{ template "evaluatedView" .}}
-
-
- - - - - - + `, + + + } + + var samples = { + helloWorld: { + info_div: instructions.helloWorld, + code: sampleCodes.helloWorld, + }, + fizzBuzz: { + info_div: instructions.fizzBuzz, + code: sampleCodes.fizzBuzz, + }, + + fibonacci: { + info_div: instructions.fib, + code: sampleCodes.fibonacci, + }, + + arraySum: { + info_div: instructions.sumOfArray, + code: sampleCodes.arraySum, + }, + http: { + info_div: instructions.http, + code: sampleCodes.httpPost, + }, + + } + + + function clearEvaluated() { + document.querySelector("#evaluated").innerHTML = ""; + } + + function replaceInfoDiv(md) { + console.log(document.querySelector(".info-div").innerHTML) + var htmlContent = MarkdownToHtml(md); + var divDom = document.querySelector(".info-div") + divDom.innerHTML = htmlContent; + } + + const copyToClipboard = () => { + var code = editor.getValue(); + navigator.clipboard.writeText(code).then(function () { + console.log("Copied to clipboard successfully!"); + }, function (err) { + console.error("Unable to write to clipboard. Error:"); + console.error(err); + }); + } + + // on copy button click + document.querySelector("#copy").addEventListener("click", copyToClipboard); + + const sb = document.querySelector("#codesamples"); + sb.addEventListener("change", function () { + if (sb.selectedIndex == 0) { + editor.setValue(samples.helloWorld.code); + replaceInfoDiv(samples.helloWorld.info_div) + clearEvaluated(); + } else if (sb.selectedIndex == 3) { + editor.setValue(samples.fizzBuzz.code); + replaceInfoDiv(samples.fizzBuzz.info_div) + clearEvaluated(); + } else if (sb.selectedIndex == 2) { + editor.setValue(samples.arraySum.code); + replaceInfoDiv(samples.arraySum.info_div) + + clearEvaluated(); + } else if (sb.selectedIndex == 1) { + editor.setValue(samples.fibonacci.code); + replaceInfoDiv(samples.fibonacci.info_div) + clearEvaluated(); + } else if (sb.selectedIndex == 4) { + editor.setValue(samples.http.code); + replaceInfoDiv(samples.http.info_div) + clearEvaluated(); + } + }); + + const form = document.querySelector("form"); + + form.addEventListener("keydown", function (event) { + if ( + event.key === "Enter" && + (event.ctrlKey || event.metaKey) + ) { + // Check for both Ctrl (Windows/Linux) and Cmd (macOS) + event.preventDefault(); // Prevent default form submission + this.submit(); // Submit the fosrm + } + }); + + form.addEventListener("submit", function () { + var code = editor.getValue(); + this.querySelector( + "textarea[name='sourceCode']", + ).value = code; + }); + + // get the run button + const submitButton = document.getElementById("form_button"); + const runButton = document.getElementById("run"); + + // add event listener to the run button + runButton.addEventListener("click", function () { + // submit the form + submitButton.click(); + }); + + // get the clear output button + const clearOutputButton = document.getElementsByClassName("clear-output-btn")[0]; + clearOutputButton.addEventListener("click", function () { + var evlautedBlock = document.getElementById("evaluated") + while (evlautedBlock.firstChild) { + evlautedBlock.removeChild(evlautedBlock.firstChild); + } + + }); + + + + {{ end }} {{block "form" .}}
- - + +
{{end}} {{ block "evaluatedView" . }} - - {{ range .Esos }} - {{ .SourceCode }} - {{ end }} - - - +{{ range .Esos }} +{{ .SourceCode }} {{ end }} + +{{ end }} \ No newline at end of file