Skip to content

Instantly share code, notes, and snippets.

@drkameleon

drkameleon/playground.art

Created September 21, 2024 05:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save drkameleon/d29d5ce7bd3e4b65a26ef91e68688537 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save drkameleon/d29d5ce7bd3e4b65a26ef91e68688537 to your computer and use it in GitHub Desktop.
Download ZIP
tiny UI playground for Arturo
Raw
playground.art
execScript: function [scr][
null
do scr
cc: to :string unstack 1
eval ~{showResult("|cc|")}
]
webview ~{!html
<!DOCTYPE html>
<html class="has-navbar-fixed-top" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0">
<meta name="robots" content="all">
<link rel="canonical" href="https://arturo-lang.io/">
<title>Arturo programming language</title>
<meta name="description" content="Arturo programming language: Simple, expressive & portable programming language for efficient scripting">
<meta name="keywords" content="arturo,programming language,scripting language,rebol,red,portable programming language">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/[email protected]/css/bulma.min.css,npm/[email protected]/themes/prism-okaidia.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://cdn.jsdelivr.net/gh/zenorocha/[email protected]/dist/clipboard.min.js"></script>
<script src="https://kit.fontawesome.com/8bfb2fe6f4.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/phosphor-icons"></script>
<link rel="stylesheet" href="https://arturo-lang.io/resources/styles/main.css">
<link rel="stylesheet" href="https://arturo-lang.io/resources/styles/playground.css">
</head>
<body data-prismjs-copy-timeout="500">
<nav class="navbar is-fixed-top is-boxed" aria-label="main navigation" style="border-bottom:2px solid #6a156b;">
<div class="navbar-brand">
<a class="navbar-item" href="" style="font-weight:bold; font-size: 1.2em; color: black">
<picture>
<source srcset="https://arturo-lang.io/resources/images/navlogo.webp" type="image/webp">
<source srcset="https://arturo-lang.io/resources/images/navlogo.png" type="image/png">
<img class="navlogo" src="https://arturo-lang.io/resources/images/navlogo.png" width="28" height="28" alt="arturo logo">
</picture>
&nbsp;&nbsp;<h1 id="mainTitle" style="font-weight: inherit !important;">Arturo<span>:</span><span class="logo-secondary">&nbsp;playground</span></h1>
</a>
</div>
</nav>
<main>
<div id="wordwrapper"><a href="#" onclick="toggleWordWrap()" title="toggle word wrap"><i id="wordwrapperIcon" class="fas fa-align-left" aria-hidden="true"></i></a></div>
<div id="expander"><a href="#" onclick="toggleExpand()" title="toggle full size"><i id="expanderIcon" class="fas fa-expand-alt"></i></a></div>
<a href="#" onclick="execScript()" title="Run script" aria-label="execute code snippet"><div id="runbutton" style="top: calc(52px + (100vh - 52px) / 2 - 20px) !important;"><i class="far fa-play-circle" aria-hidden="true"></i></div></a>
<div class="columns doccols">
<div class="column" style="padding-bottom:0; background: #272822; padding-right: 0">
<div class="tabs">
<ul>
<li class="is-active"><a href="#"><span class="icon is-small"><i class="far fa-file" aria-hidden="true"></i></span><span id="scriptName">main.art</span></a></li>
</ul>
</div>
<div id="editor"></div>
</div>
<div class="column" style="background: black;">
<div id="terminal"><span style="color:gray;"># v/|sys\version| @ |sys\built|<br># arch: |sys\os| @|sys\release|</span><br><br><div id="terminal_output"></div></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/@vizuaalog/[email protected]/dist/alert.min.js"></script>
<script src="https://arturo-lang.io/resources/scripts/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://arturo-lang.io/resources/scripts/playground.js"></script>
<script src="https://arturo-lang.io/resources/scripts/main.js"></script>
<script>
function execScript(){
var runbutton = document.getElementById('runbutton');
if (!runbutton.innerHTML.includes("notch")) {
if (editor.getValue()!=previousCode) {
previousCode = editor.getValue();
runbutton.innerHTML = `<i class='fas fa-circle-notch fa-spin'></i>`;
runbutton.classList.add('working');
document.getElementById("terminal_output").innerHTML = "";
arturo.call("execScript", editor.getValue());
}
}
}
function showResult(res){
document.getElementById("terminal_output").innerHTML = res;
runbutton.innerHTML = `<i class='far fa-play-circle'></i>`;
runbutton.classList.remove('working');
window.scroll.animateScroll(document.querySelector("#terminal"));
}
</script>
</body>
</html>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment