Add LUA to index

assets/css/main.css

@@ -34,12 +34,25 @@ header {
 	position: relative;
 	height: 100%;
 }
+#exBtn {
+	background-color: #9A9F03;
+	color: white;
+	font-weight: bold;
+	display: inline-block;
+	width: 25%;
+	border: none;
+	height: 50px;
+	transition: 0.3s;
+}
+#exBtn:hover {
+	background-color: #7A7F0A;
+}
 #runBtn {
 	background-color: #079992;
 	color: white;
 	font-weight: bold;
-	display: block;
-	width: 100%;
+	display: inline-block;
+	width: 50%;
 	border: none;
 	height: 50px;
 	transition: 0.3s;
@@ -47,6 +60,19 @@ header {
 #runBtn:hover {
 	background-color: #007972;
 }
+#clearBtn {
+	background-color: #832317;
+	color: white;
+	font-weight: bold;
+	display: inline-block;
+	width: 25%;
+	border: none;
+	height: 50px;
+	transition: 0.3s;
+}
+#clearBtn:hover {
+	background-color: #6A1F13;
+}
 #console {
 	font-family: monospace;
 	color: white;
@@ -140,14 +166,3 @@ p {
 	text-align: center;
 	line-height: 100px;
 }
-#lua-card:hover::before {
-	display: inline-block;
-	content: "Bientôt";
-	color: white;
-	height: 100%;
-	width: 100%;
-	background-color: black;
-	opacity: 0.7;
-	text-align: center;
-	line-height: 100px;
-}

assets/js/jspg.js

@@ -13,6 +13,14 @@ function run() {
 	console = oldConsole
 }
 
+function example() {
+	flask.updateCode("function foo(n) {\n  for(i = 0; i < n; i++) {\n    console.log('passe ' + i)\n  }\n  return n*n\n}\n\nconsole.log(foo(5))")
+}
+
+function clearCode() {
+	flask.updateCode("")
+}
+
 /* Penser à réimplémenter toute la console : https://developer.mozilla.org/fr/docs/Web/API/Console */
 const oldConsole = console
 const newConsole = {

assets/js/luapg.js

@@ -0,0 +1,42 @@
+const flask = getEditor("#code", "lua")
+let consoleElmt = document.getElementById("console")
+
+function run() {
+	console = newConsole
+	console.clear()
+	try {
+		fengari.load(flask.getCode())()
+	}
+	catch (e) {
+		console.error(e)
+	}
+	console = oldConsole
+}
+
+function example() {
+	flask.updateCode("function foo(n)\n  for i = 0, n-1, 1 do\n    print('passe ' .. tostring(i))\n  end\n  return n*n\nend\n\nprint(foo(5))")
+}
+
+function clearCode() {
+	flask.updateCode("")
+}
+
+/* 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 += "\<div class=\"message\">" + outMsg + "</div>"
+	},
+	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 += "<div class=\"error\">" + outMsg + "</div>"
+	}
+}

assets/js/pypg.js

@@ -0,0 +1,20 @@
+const flask = getEditor("#code", "py")
+
+brython({ids:["pyinit"]})
+
+function run() {
+	document.getElementById("pycode").innerHTML = flask.getCode()
+	brython({ids:["pyclear"]})
+	brython({
+		debug:1,
+		ids:["pycode"]
+	})
+}
+
+function example() {
+	flask.updateCode("def foo(n):\n  for i in range(n):\n    print('passe ' + str(i))\n  return n*n\n\nprint(foo(5))")
+}
+
+function clearCode() {
+	flask.updateCode("")
+}

index.html

@@ -12,9 +12,9 @@
 		<div class="cards">
 			<a class="card" href="js.html"><div class="bg-img" id="js-card"></div><p>Javascript</p></a>
 			<a class="card" href="python.html"><div class="bg-img" id="py-card"></div><p>Python</p></a>
+			<a class="card" href="lua.html"><div class="bg-img" id="lua-card"></div><p>Lua</p></a>
 			<a class="card"><div class="bg-img" id="html-card"></div><p>HTML</p></a>
 			<a class="card"><div class="bg-img" id="sqlite-card"></div><p>SQLite</p></a>
-			<a class="card"><div class="bg-img" id="lua-card"></div><p>Lua</p></a>
 		</div>
 		<p>
 		Ce projet vous permet de tester rapidement des codes Javascript depuis le navigateur en profitant de la coloration syntaxique, il n'envoie aucune autre donnée au serveur que celles requises pour télécharger les pages, les scripts et les styles, tout le reste se passe sur votre ordinateur.<br />

js.html

@@ -14,7 +14,9 @@
 			<div id="codeContainer"><div id="code"></div></div><!--
 			--><div id="console">
 			</div>
-			<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
+			<input type="button" onclick="example()" value="Exemple" id="exBtn" /><!--
+			--><input type="button" onclick="run()" value="Exécuter !" id="runBtn" /><!--
+			--><input type="button" onclick="clearCode()" value="Effacer" id="clearBtn" />
 		</div>
 		<footer>
 			Romain de Laage - CC0

lua.html

@@ -16,18 +16,14 @@
 			<div id="codeContainer"><div id="code"></div></div><!--
 			--><div id="console">
 			</div>
-			<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
+			<input type="button" onclick="example()" value="Exemple" id="exBtn" /><!--
+			--><input type="button" onclick="run()" value="Exécuter !" id="runBtn" /><!--
+			--><input type="button" onclick="clearCode()" value="Effacer" id="clearBtn" />
 		</div>
 		<footer>
 			Romain de Laage - CC0
 		</footer>
 		<script src="assets/js/editor.js"></script>
-		<script>
-			const flask = getEditor("#code", "lua")
-
-			function run() {
-				fengari.load(flask.getCode())()
-			}
-		</script>
+		<script src="assets/js/luapg.js"></script>
 	</body>
 </html>

python.html

@@ -17,7 +17,9 @@
 			<div id="codeContainer"><div id="code"></div></div><!--
 			--><div id="console">
 			</div>
-			<input type="button" onclick="run()" value="Exécuter !" id="runBtn" />
+			<input type="button" onclick="example()" value="Exemple" id="exBtn" /><!--
+			--><input type="button" onclick="run()" value="Exécuter !" id="runBtn" /><!--
+			--><input type="button" onclick="clearCode()" value="Effacer" id="clearBtn" />
 		</div>
 		<footer>
 			Romain de Laage - CC0
@@ -49,19 +51,6 @@ document['console'].html = ''
 		</script>
 		<script type="text/python" id="pycode"></script>
 		<script src="assets/js/editor.js"></script>
-		<script>
-			const flask = getEditor("#code", "py")
-
-			brython({ids:["pyinit"]})
-
-			function run() {
-				document.getElementById("pycode").innerHTML = flask.getCode()
-				brython({ids:["pyclear"]})
-				brython({
-					debug:1,
-					ids:["pycode"]
-				})
-			}
-		</script>
+		<script src="assets/js/pypg.js"></script>
 	</body>
 </html>