Add doc system (cannot be used right now)
This commit is contained in:
Scratch-hv | Oeil-de-Lynx
parent
829a5a2d6a
commit
538010a7d8
5 changed files with 191 additions and 4 deletions
43
src/app.html
43
src/app.html
|
|
@ -17,6 +17,7 @@
|
|||
}
|
||||
body {
|
||||
color: black;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body.dark {
|
||||
color: white;
|
||||
|
|
@ -116,7 +117,7 @@
|
|||
<p style="margin-block: 0;">EaglerForge Builder is currently in development, some project files may break due to code changing all the time.</p>
|
||||
<button
|
||||
style="margin: 0; margin-left: 8px; background: transparent; border: 0; outline: 0; padding: 0; cursor: pointer;"
|
||||
onclick="document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=').remove()"
|
||||
onclick="closeAlert()"
|
||||
>
|
||||
<img width="24" height="24" src="/images/close.svg">
|
||||
</button>
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
|
||||
// if localhost, get rid of the alert
|
||||
const isLocalHost = location.hostname === 'localhost';
|
||||
if (isLocalHost) {
|
||||
if (isLocalHost || localStorage.getItem('alert_closed')) {
|
||||
const alert = document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=');
|
||||
alert.remove();
|
||||
}
|
||||
|
|
@ -186,6 +187,14 @@
|
|||
prismStyles[styleId] = styleCode;
|
||||
}
|
||||
styleElement.innerHTML = styleCode;
|
||||
if (document.getElementById('docIframe')) {
|
||||
const docIframe = document.getElementById('docIframe').contentWindow.document.body
|
||||
if (mode === 'dark') {
|
||||
docIframe.setAttribute("class", "dark");
|
||||
} else {
|
||||
docIframe.setAttribute("class", "light");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (location.hash === "#fullscreen"){
|
||||
|
|
@ -201,6 +210,36 @@
|
|||
}
|
||||
};
|
||||
updateTheme();
|
||||
|
||||
window.openDoc = function(blockID){
|
||||
let docDiv = document.getElementById('documentation');
|
||||
let iframe = document.createElement("iframe");
|
||||
const mode = localStorage.getItem('tb:theme');
|
||||
iframe.setAttribute("src", `${window.location.origin}/help/blocks?block=${blockID}&theme=${mode}`);
|
||||
iframe.style.width = "100%";
|
||||
iframe.style.height = "100%";
|
||||
iframe.style.border = "none";
|
||||
iframe.id = "docIframe";
|
||||
if (document.getElementById('docIframe')) {
|
||||
docDiv.replaceChild(iframe, document.getElementById('docIframe'));
|
||||
} else {
|
||||
docDiv.appendChild(iframe);
|
||||
}
|
||||
docDiv.setAttribute('opened', 'true');
|
||||
document.getElementById('closeDocButton').setAttribute('opened', 'true');
|
||||
}
|
||||
|
||||
window.closeDoc = function(){
|
||||
let docDiv = document.getElementById('documentation');
|
||||
document.createElement("iframe").remove();
|
||||
document.getElementById('closeDocButton').setAttribute('opened', 'false');
|
||||
docDiv.setAttribute('opened', 'false');
|
||||
}
|
||||
|
||||
function closeAlert() {
|
||||
document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=').remove()
|
||||
localStorage.setItem('alert_closed', 'true')
|
||||
}
|
||||
</script>
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
<script>document.getElementById('fullscreenButton').innerHTML = `<i class="fa fa-expand"></i>`;</script>
|
||||
|
|
|
|||
74
src/lib/Documentation/Documentation.svelte
Normal file
74
src/lib/Documentation/Documentation.svelte
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<script>
|
||||
//import EaglerForge from "$lib/EaglerCraft/EaglerCraft.svelte";
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function event() {
|
||||
dispatch("click");
|
||||
}
|
||||
|
||||
</script>
|
||||
<div id="documentation" opened="false">
|
||||
<button onclick="closeDoc()" id="closeDocButton" opened="false">×</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#documentation{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: calc(100% - 16px);
|
||||
width: 0%;
|
||||
z-index: 1;
|
||||
transition: width 0.5s ease-out;
|
||||
border: none;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
:global(body.dark) #documentation{
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
#documentation:not([opened="false"]){
|
||||
border-left: 1px solid #c6c6c6;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
:global(body.dark) #documentation:not([opened="false"]){
|
||||
border-left: 1px solid #575757;
|
||||
}
|
||||
|
||||
|
||||
#closeDocButton {
|
||||
position: absolute;
|
||||
border: 0px;
|
||||
background-color: transparent;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
transform: translateX(100px);
|
||||
font-size: 2rem;
|
||||
transition: transform 0.5s ease-out;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#closeDocButton:not([opened="false"]) {
|
||||
transform: translate(0px);
|
||||
}
|
||||
|
||||
:global(body.dark) #closeDocButton {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:global(.fa.fa-expand, .fa.fa-compress) {
|
||||
vertical-align: text-bottom;
|
||||
font-size: large;
|
||||
color: #000;
|
||||
}
|
||||
:global(body.dark .fa.fa-expand, body.dark .fa.fa-compress) {
|
||||
color: #e9e9e9;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
import StopButton from "$lib/ControlBar/StopButton.svelte";
|
||||
import OpenButton from "$lib/ControlBar/OpenButton.svelte";
|
||||
import FullscreenButton from "$lib/ControlBar/FullscreenButton.svelte";
|
||||
import EaglerCraft from "$lib/EaglerCraft/EaglerCraft.svelte"
|
||||
|
||||
import EaglerCraft from "$lib/EaglerCraft/EaglerCraft.svelte";
|
||||
import Documentation from "$lib/Documentation/Documentation.svelte";
|
||||
|
||||
// Modals
|
||||
import ExtensionColorsModal from "$lib/MenuModals/ExtensionColors.svelte";
|
||||
|
|
@ -74,6 +74,10 @@
|
|||
import registerDisplay from "../resources/blocks/display.js";
|
||||
import registerinterface from "../resources/blocks/interface.js";
|
||||
|
||||
Blockly.BlockSvg.prototype.showHelp_ = function ( ) {
|
||||
alert('test')
|
||||
};
|
||||
|
||||
registerCore();
|
||||
registerControl();
|
||||
registerEvents();
|
||||
|
|
@ -553,6 +557,7 @@
|
|||
<EaglerCraft>
|
||||
</EaglerCraft>
|
||||
</div>
|
||||
<Documentation/>
|
||||
<div class="row-subsubmenus">
|
||||
<div class="codeActionsWrapper">
|
||||
<p style="margin-right: 12px"><b>Mod Code</b></p>
|
||||
|
|
|
|||
36
static/help/blocks/index.html
Normal file
36
static/help/blocks/index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/help/blocks/style.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<section id="presentation">
|
||||
<h1>Documentation</h1>
|
||||
<p>Some blocks are documented here</p>
|
||||
</section>
|
||||
<section id="events_eachTicks">
|
||||
<h2>Every ticks</h2>
|
||||
<block>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="blocklySvg" tabindex="0" width="230px" height="130px"><g data-id="LSMY~Z^JVL-4H/1$GMo+" class="blocklyDraggable blocklySelected"><path class="blocklyPath" stroke="#bf8f00" fill="#ffbf00" d=" m 0,22 h 0 c 25,-22 71,-22 96,0 h 127.93333435058594 a 4 4 0 0,1 4,4 v 26 V 30 V 62 V 66 a 4 4 0 0,1 -4,4 H 64 c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 h -8 a 4 4 0 0,0 -4,4 v 16 a 4 4 0 0,0 4,4 h 8 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 223.93333435058594 a 4 4 0 0,1 4,4 V 102 V 122 a 4 4 0 0,1 -4,4 h -219.93333435058594 a 4 4 0 0,1 -4,-4 z"></path><g transform="translate(8,36.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">every in game ticks do</text></g><path class="blocklyPath" stroke="#bf8f00" fill="none" d=" m 0,22 h 0 c 25,-22 71,-22 96,0 h 127.93333435058594 a 4 4 0 0,1 4,4 v 26 V 30 V 62 V 66 a 4 4 0 0,1 -4,4 H 64 c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 h -8 a 4 4 0 0,0 -4,4 v 16 a 4 4 0 0,0 4,4 h 8 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 223.93333435058594 a 4 4 0 0,1 4,4 V 102 V 122 a 4 4 0 0,1 -4,4 h -219.93333435058594 a 4 4 0 0,1 -4,-4 z" filter="url(#blocklySelectedGlowFilter7769814457033053)"></path></g></svg>
|
||||
</block>
|
||||
<p>This block is called every in-game tick, which means that if the player is not currently in a world, the block will not be run.</p>
|
||||
</section>
|
||||
<script>
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('block')) {
|
||||
let allSections = Array.from(document.getElementsByTagName('section'));
|
||||
allSections.forEach((element) => element.style.display = "none");
|
||||
if (document.getElementById(urlParams.get('block'))) {
|
||||
document.getElementById(urlParams.get('block')).style.display = "block";
|
||||
} else {
|
||||
document.getElementById('presentation').style.display = "block";
|
||||
document.getElementById('presentation').innerHTML = "<h1>Block not found</h1>";
|
||||
}
|
||||
}
|
||||
|
||||
if (urlParams.get('theme')) {
|
||||
document.body.className = urlParams.get('theme');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
33
static/help/blocks/style.css
Normal file
33
static/help/blocks/style.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
body {
|
||||
color: #111111;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
body.dark {
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
section > h2,h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Blockly SVG blocks */
|
||||
block {
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.blocklyText {
|
||||
fill: #ffffff;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.blocklySvg {
|
||||
user-select: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue