From 375d9130e17ce60113a4dc812f31350a237251c5 Mon Sep 17 00:00:00 2001 From: JaDoggx86 Date: Tue, 19 Dec 2023 21:25:24 +0000 Subject: [PATCH] update html Signed-off-by: JaDoggx86 --- Readme.md | 7 ++ make-yaksha.sh | 4 +- yaksha-playground/index.html | 223 ++++++++++++++++++++++++++--------- 3 files changed, 174 insertions(+), 60 deletions(-) diff --git a/Readme.md b/Readme.md index bf6b0752..7dd666bb 100644 --- a/Readme.md +++ b/Readme.md @@ -1,3 +1,10 @@ + +---- + + + +---- + [![Join the chat at https://gitter.im/copy/v86](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/copy/v86) or #v86 on [irc.libera.chat](https://libera.chat/) v86 emulates an x86-compatible CPU and hardware. Machine code is translated to diff --git a/make-yaksha.sh b/make-yaksha.sh index 37498811..2df4666d 100755 --- a/make-yaksha.sh +++ b/make-yaksha.sh @@ -13,5 +13,5 @@ cp -r ../images . rm -rf state ; mkdir state mv images/debian-state-base.bin ./state cd state -split --bytes=12M debian-state-base.bin -rm debian-state-base.bin \ No newline at end of file +split -b 11m debian-state-base.bin +rm debian-state-base.bin diff --git a/yaksha-playground/index.html b/yaksha-playground/index.html index d0d5286e..8d42b27b 100644 --- a/yaksha-playground/index.html +++ b/yaksha-playground/index.html @@ -1,4 +1,4 @@ - + @@ -16,18 +16,37 @@ } body { + display: flex; + flex-direction: column; background: hsl(220, 16%, 16%); color: #fff; - padding: 16px; - height: calc(100% - 32px); - width: calc(100% - 32px); font: 20px 'Fira Code', monospaced; } - h2 { + header { text-align: center; + padding: 0; + height: 80px; + } + + .splitter { + width: calc(100% - 20px); + height: calc(100% - 240px); + display: flex; } + #separator { + cursor: col-resize; + background-color: #aaa; + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: center; + width: 10px; + height: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } #inner_dv { white-space: pre; @@ -36,38 +55,50 @@ line-height: 14px; } + #screen_container { + display: block; + width: 1024px; + height: 768px; + max-width: 100000px; + max-height: 100000px; + margin-top: 20px; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + background-color: gray; + } + + #first { + background-color: #dde; + width: 60%; + height: 100%; + min-width: 10px; + padding-left: 10px; + } + + #second { + background-color: #eee; + width: 40%; + height: 100%; + min-width: 10px; + padding-left: 10px; + } + + textarea { - width: calc(100% - 8px); - overflow-y: scroll; - height: calc(100% - 1190px); + width: 100%; + height: calc(100% - 150px); resize: none; } button { - display: inline-block; margin: 2px; font: 20px 'Fira Code', monospaced; } - canvas { - image-rendering: auto !important; - } - hr { border-color: transparent; } -/* - #screen_container { - display: block; - width: 1024px; - height: 768px; - max-width: 100000px; - max-height: 100000px; - margin-bottom: 20px; - margin-left: auto; - margin-right: auto; - background-color: gray; - } */ a:link { color: lightskyblue; @@ -86,44 +117,77 @@ text-decoration: none; font-weight: normal; } + + @media (max-width: 1750px) { + .splitter { + flex-direction: column; + } + + #separator { + display: none; + } + + #second { + order: 1; + } + } -

Yaksha Programming Language Playground

-
- +
+

Yaksha Programming Language Playground

+
+
+ +
+ +
+ + + +
+
+ +
+ +
+

Click the Boot up button so the virtual machine can start. After it boots up and you can see the + prompt, + then you can either use the nano editor to edit code or use the provided textarea (then press + run)

+

Made using v86, tcc and + debian +

+

Yaksha Programming Language - Copyright (C) + 2023 Bhathiya + Perera

+
+ +
 
-
-
- + +
+ +
+ + + + | + + zoom: + + + + + + +
+
-
- - -
- - - - | - - zoom: - - - - - - -
-

Click the Boot up button so the virtual machine can start. After it boots up and you can see the prompt, - then you can either use the nano editor to edit code or use the provided textarea (then press run)

-

Made using v86, tcc and - debian -

-

Yaksha Programming Language - Copyright (C) 2023 Bhathiya - Perera

+ @@ -229,7 +293,8 @@

Yaksha Programming Language Playground

"./state/xac", "./state/xad", "./state/xae", - "./state/xaf" + "./state/xaf", + "./state/xag", ], 3, // concurrency (combinedArrayBuffer) => { @@ -280,9 +345,51 @@

Yaksha Programming Language Playground

}; - + // ----------- related to drag / split ----- + + // A function is used for dragging and moving + function dragElement(element, direction) { + var md; // remember mouse down info + const first = document.getElementById("first"); + const second = document.getElementById("second"); + + element.onmousedown = onMouseDown; + + function onMouseDown(e) { + md = { + e, + offsetLeft: element.offsetLeft, + offsetTop: element.offsetTop, + firstWidth: first.offsetWidth, + secondWidth: second.offsetWidth + }; + + document.onmousemove = onMouseMove; + document.onmouseup = () => { + document.onmousemove = document.onmouseup = null; + } + } + + function onMouseMove(e) { + var delta = { + x: e.clientX - md.e.clientX, + y: e.clientY - md.e.clientY + }; + + if (direction === "H") { + delta.x = Math.min(Math.max(delta.x, -md.firstWidth), + md.secondWidth); + + element.style.left = md.offsetLeft + delta.x + "px"; + first.style.width = (md.firstWidth + delta.x) + "px"; + second.style.width = (md.secondWidth - delta.x) + "px"; + } + } + } + dragElement(document.getElementById("separator"), "H"); + \ No newline at end of file