aboutsummaryrefslogtreecommitdiffstats
path: root/grapher
diff options
context:
space:
mode:
Diffstat (limited to 'grapher')
-rw-r--r--grapher/index.html24
-rw-r--r--grapher/pl/index.html20
-rw-r--r--grapher/pl/script.js40
-rw-r--r--grapher/pl/style.css60
-rw-r--r--grapher/script.js25
-rw-r--r--grapher/style.css61
6 files changed, 226 insertions, 4 deletions
diff --git a/grapher/index.html b/grapher/index.html
index 6cec1f0..51aea52 100644
--- a/grapher/index.html
+++ b/grapher/index.html
@@ -6,17 +6,19 @@
<meta name="description" content="A simple utility to help you make CV2 graphs, out-of-game.">
<meta name="author" content="@✨Aleteoryx✨#1027">
<title>CV2 Node Graph Generator</title>
+ <link crossorigin href="/oi.css" rel="stylesheet" type="text/css">
<link crossorigin href="style.css" rel="stylesheet" type="text/css" />
<link crossorigin href="/chips.css" rel="stylesheet" type="text/css" />
<link crossorigin href="/util.js" rel="preload" as="script"/>
<link crossorigin href="/chips.js" rel="preload" as="script"/>
<link crossorigin href="script.js" rel="preload" as="script"/>
+ <link crossorigin href="oi.css" rel="preload" as="style"/>
<link crossorigin href="/chips.css" rel="preload" as="style"/>
<link crossorigin href="style.css" rel="preload" as="style"/>
<link crossorigin href="/circuitsv2.json" rel="preload" as="fetch"/>
<link crossorigin href="https://raw.githubusercontent.com/tyleo-rec/CircuitsV2Resources/master/misc/circuitsv2.json" rel="preload" as="fetch"/>
-
+
<script crossorigin src="/util.js"></script>
<script crossorigin src="/chips.js"></script>
<script crossorigin src="script.js"></script>
@@ -28,16 +30,30 @@
If you cannot enable it here, you can try using tyleo's
<a href="https://www.figma.com/community/file/1070759222767700948">
figma templates
- </a>, although those also need javascript.4
+ </a>, although those also need javascript.
</noscript>
<details id="searchbox" open>
<summary></summary>
<iframe id="searcher" src="/"></iframe>
</details>
<div id="graph">
-
+
</div>
<canvas id="canvas"></canvas>
+ <details id="plbox">
+ <summary><span class="icon">&#xe086;</span></summary>
+ <div>
+ <h1>Permalinking Menu</h1>
+ <hr>
+ <p>Set your name below and click the button to get a permanent link to this graph.</p>
+ <label for="authorbox"><b>Author:</b></label>
+ <input id="authorbox" type="text">
+ <br>
+ <button onclick="getPermalink();">Get Link!</button>
+ <br>
+ <span id="linkprefix"></span><a id="linktarget"></a>
+ </div>
+ </details>
<details id="helpbox">
<summary>?</summary>
<div>
@@ -81,6 +97,6 @@
</p>
</div>
</details>
-
+
</body>
</html> \ No newline at end of file
diff --git a/grapher/pl/index.html b/grapher/pl/index.html
new file mode 100644
index 0000000..3dc7119
--- /dev/null
+++ b/grapher/pl/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Permalinked Graph</title>
+
+ <link crossorigin href="style.css" rel="stylesheet" type="text/css" />
+
+ <link crossorigin href="script.js" rel="preload" as="script"/>
+ <link crossorigin href="style.css" rel="preload" as="style"/>
+
+
+ <script crossorigin src="script.js"></script>
+ </head>
+ <body>
+ <div id="header"><span><b>By: <i><span id="author"></span></i></b></span><a href="../" id="linker">Open in Editor</a></div>
+ <iframe src="../" id="frame"></iframe>
+ </body>
+</html> \ No newline at end of file
diff --git a/grapher/pl/script.js b/grapher/pl/script.js
new file mode 100644
index 0000000..c47a636
--- /dev/null
+++ b/grapher/pl/script.js
@@ -0,0 +1,40 @@
+window.addEventListener('load', async e => {
+ const frame = document.getElementById('frame');
+ const author = document.getElementById('author');
+ const linker = document.getElementById('linker');
+
+ linker.target = window.location.hash.substr(1);
+
+ const graph = await (await fetch(`https://graphpl.aleteoryx.me/load/${window.location.hash.substr(1)}`)).json()
+ if (frame.contentWindow.document.readyState != 'complete')
+ await new Promise((res, rej) => frame.contentWindow.addEventListener('load', e => {res();}));
+
+ author.innerText = graph.author ? graph.author : [
+ "a ghost",
+ "nobody",
+ "thine mother",
+ "god's mistake",
+ "the zodiac killer",
+ "tyleo, secretly",
+ "someone else",
+ "Danny Elfman",
+ "a rat in a cage",
+ "viewers like you"
+ ][Math.round(Math.random() * 10)];
+
+ frame.contentWindow.postMessage({type: 'lock'});
+ frame.contentWindow.postMessage({type: 'loadGraph', graph: graph});
+
+ linker.addEventListener('click', e => {
+ let newwin = window.open('', window.location.hash.substr(1));
+ window.onmessage = ({data}) => {
+ console.log(data.type);
+ if(data.type == 'grapherLoaded') {
+ newwin.postMessage({type: 'loadGraph', graph: graph});
+ newwin.name = '';
+ window.onmessage = null;
+ }
+ }
+ })
+
+}) \ No newline at end of file
diff --git a/grapher/pl/style.css b/grapher/pl/style.css
new file mode 100644
index 0000000..7ac40df
--- /dev/null
+++ b/grapher/pl/style.css
@@ -0,0 +1,60 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
+
+html {
+ --foreforeground: #3788ae;
+ --foreground: #082f41;
+ --background: #03141c;
+ color: white;
+ background: var(--background);
+ /*padding: 1cm;*/
+ font-size: 12pt;
+ font-family: 'Raleway', sans-serif;
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ height: 100vw;
+ overflow: hidden;
+}
+
+#frame {
+ margin:0;
+ padding:0;
+ width: 100vw;
+ height: calc(100vw - 3cm);
+ position: relative;
+ border:none;
+}
+
+#header {
+ margin:0;
+ width: 100vw;
+ height: 3cm;
+ background: var(--background);
+ position: relative;
+}
+#header > span {
+ font-size: 2cm;
+ position: absolute;
+ top: calc(50% - 1.35cm);
+ bottom: calc(50% - 1.35cm);
+ left: 0.5cm;
+}
+#header > span #author {
+ color: var(--foreforeground);
+}
+#header > a {
+ position: absolute;
+ background: var(--foreground);
+ font-size: 1cm;
+ padding: 1rem;
+ padding-bottom: 0;
+ color: white;
+ text-decoration: none;
+ border-radius: 1rem;
+ height: 1.5cm;
+ top: 0.5cm;
+ bottom: 0.75cm;
+ right: 0.75cm;
+} \ No newline at end of file
diff --git a/grapher/script.js b/grapher/script.js
index a9ec156..5a8d8ef 100644
--- a/grapher/script.js
+++ b/grapher/script.js
@@ -221,7 +221,11 @@ function serializeGraph() {
}
function deserializeGraph(graph) {
+ for(const chip of chips) {
+ chip.el.remove();
+ }
chips.length = 0;
+ connections.length = 0
for (const chip of graph.chips) {
const newchip = newChip(chip.GUID);
@@ -258,6 +262,9 @@ function deserializeGraph(graph) {
});
}
}
+function loadGraphHandler({graph}) {
+ deserializeGraph(graph);
+}
var locked = false;
@@ -265,6 +272,22 @@ function lockGraph() {
locked = true;
document.getElementById('searchbox').remove();
document.getElementById('helpbox') .remove();
+ document.getElementById('plbox') .remove();
+}
+
+async function getPermalink() {
+ const linker = document.getElementById('linktarget');
+ const linkerp = document.getElementById('linkprefix');
+ const ab = document.getElementById('authorbox');
+
+ const ret = await fetch('https://graphpl.aleteoryx.me/save', {
+ method: 'POST',
+ body: JSON.stringify({...serializeGraph(), author: ab.value ? ab.value : undefined})
+ }).then(m => m.text())
+ console.log(ret);
+ linkerp.innerText = "Success! Permalinked at:"
+ linker.href = `https://cv2.aleteoryx.me/grapher/pl#${ret}`
+ linker.innerText = `https://cv2.aleteoryx.me/grapher/pl#${ret}`
}
window.onload = async function() {
@@ -450,4 +473,6 @@ window.onload = async function() {
requestAnimationFrame(updateanim);
})()
+
+ if(window.opener) opener.postMessage({type: 'grapherLoaded'});
}
diff --git a/grapher/style.css b/grapher/style.css
index 35fe3bb..7b9f51e 100644
--- a/grapher/style.css
+++ b/grapher/style.css
@@ -169,6 +169,43 @@ canvas {
box-shadow: black 1mm 1mm 3mm
}
+#plbox > summary::marker {
+ content:'';
+}
+#plbox > summary {
+ height: 3rem;
+ width: 3rem;
+ background: #0000;
+ color: #fff7;
+ padding: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ user-select: none;
+}
+#plbox[open] > summary {
+ color: #fff;
+}
+
+#plbox {
+ position: fixed;
+ top: 2rem;
+ right: 2rem;
+ background: #0000;
+ border-radius: 0;
+ z-index: 100;
+}
+
+#plbox > div {
+ background: var(--foreground);
+ border-radius: 0.5cm;
+ width: 10cm;
+ padding: 1rem;
+ position: relative;
+ top: 4rem;
+ box-shadow: black 1mm 1mm 3mm
+}
+
hr {
border: 0.5mm solid var(--foreforeground);
@@ -185,3 +222,27 @@ kbd {
border-radius: 1mm;
box-shadow: inset black -0.25mm -0.25mm 1mm;
}
+
+.icon {
+ font-family: "Icons";
+ font-size: 2rem;
+ height: 2rem;
+ width: 2rem;
+}
+
+button, input {
+ color: white;
+ background: var(--background);
+ padding: 0.5rem;
+
+ border: none;
+ border-radius: 1rem;
+ font-size: 13pt;
+ margin: 0.5rem;
+}
+
+button:hover {
+ background: var(--foreforeground);
+}
+
+a {color: white;} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 18:51:29 +0000