From 59cd43113265b02187514621941150d9f0d1d1f3 Mon Sep 17 00:00:00 2001 From: Romain de Laage Date: Fri, 2 Apr 2021 20:52:23 +0200 Subject: [PATCH] Add index page and slice project into files --- assets/css/main.css | 47 ++++++++++ assets/js/editor.js | 8 ++ assets/js/jspg.js | 34 +++++++ index.html | 107 ++--------------------- js.html | 23 +++++ codeflask.min.js => lib/codeflask.min.js | 0 6 files changed, 120 insertions(+), 99 deletions(-) create mode 100644 assets/css/main.css create mode 100644 assets/js/editor.js create mode 100644 assets/js/jspg.js create mode 100644 js.html rename codeflask.min.js => lib/codeflask.min.js (100%) diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..3f15b30 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,47 @@ +html, body { + height: 100%; +} +body { + background: #0A3D62; + font-family: sans-serif; + font-size: 21px; +} +h1 { + color: white; + text-align: center; +} +#codeContainer { + display: block; + width: 80%; + margin: auto; + height: 500px; +} +#code { + position: relative; + height: 100%; +} +#runBtn { + background-color: #079992; + color: white; + display: block; + width: 80%; + margin: auto; + border: none; + margin-top: 10px; + line-height: 3rem; +} +#console { + color: white; + width: 80%; + margin: auto; + margin-top: 10px; +} +.error { + background-color: #FF0000; + color: white; +} +footer { + font-size: 10px; + color: white; + margin-top: 10px; +} diff --git a/assets/js/editor.js b/assets/js/editor.js new file mode 100644 index 0000000..d07f18b --- /dev/null +++ b/assets/js/editor.js @@ -0,0 +1,8 @@ +const flask = new CodeFlask('#code', { + language: 'js', + lineNumbers: true, + areaId: 'thing1', + ariaLabelledby: 'header1', + handleTabs: true/*, + defaultTheme: false*/ +}); diff --git a/assets/js/jspg.js b/assets/js/jspg.js new file mode 100644 index 0000000..4c73fea --- /dev/null +++ b/assets/js/jspg.js @@ -0,0 +1,34 @@ +let codeElmt = document.getElementById("code") +let consoleElmt = document.getElementById("console") + +function run(elmtID) { + console = newConsole + console.clear() + try { + eval(flask.getCode()) + } + catch (e) { + console.error(e) + } + console = oldConsole +} + +/* Penser à réimplémenter toute la console : https://developer.mozilla.org/fr/docs/Web/API/Console */ +const oldConsole = console +const newConsole = { + log: function (...msg) { + var outMsg = "" + outMsg += msg[0] + for (var i = 1; i < msg.length; i++) outMsg += " " + msg[i] + consoleElmt.innerHTML += "\
" + outMsg + "
" + }, + clear: function () { + consoleElmt.innerHTML = "" + }, + error: function (...msg) { + var outMsg = "" + outMsg = msg[0] + for (var i = 1; i < msg.length; i++) outMsg += " " + msg[i] + consoleElmt.innerHTML += "
" + outMsg + "
" + } +} diff --git a/index.html b/index.html index 75bf98e..a367e9b 100644 --- a/index.html +++ b/index.html @@ -1,110 +1,19 @@ - - Javascript Playground + Code Playground - - + -
- -
-
+
+

Code Playground

+
+ - diff --git a/js.html b/js.html new file mode 100644 index 0000000..45c31e0 --- /dev/null +++ b/js.html @@ -0,0 +1,23 @@ + + + + Javascript Playground + + + + + +
+

Javascript Playground

+
+
+ +
+
+ + + + + diff --git a/codeflask.min.js b/lib/codeflask.min.js similarity index 100% rename from codeflask.min.js rename to lib/codeflask.min.js