permalinking is fully operational

author: alyx <alyx@aleteoryx.me> 2022-02-06 16:09:29 +0000
committer: Aleteoryx <alyx@aleteoryx.me> 2022-02-06 16:09:29 +0000
commit: fb1876db725b1d96d3fb58d2a597a12e36ca7b39 (patch)
tree: e3fe932f2ba848dbb6b3f2f13816aead257a4d6a
parent: 21bc06407c450a3ae5643d5462c452ec92b3d782 (diff)
download: RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.tar.gz
RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.tar.bz2
RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.zip
11 files changed, 233 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
diff --git a/oi.css b/oi.css
new file mode 100644
index 0000000..d9c6559
--- /dev/null
+++ b/oi.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Icons';
+  src: url('/open-iconic.eot');
+  src: url('/open-iconic.eot') format('embedded-opentype'), url('open-iconic.woff') format('woff'), url('/open-iconic.ttf') format('truetype'), url('/open-iconic.otf') format('opentype'), url('/open-iconic.svg#iconic-sm') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+\ No newline at end of file
diff --git a/open-iconic.eot b/open-iconic.eot
new file mode 100644
index 0000000..f98177d
--- /dev/null
+++ b/open-iconic.eot
diff --git a/open-iconic.otf b/open-iconic.otf
new file mode 100644
index 0000000..f6bd684
--- /dev/null
+++ b/open-iconic.otf
diff --git a/open-iconic.ttf b/open-iconic.ttf
new file mode 100644
index 0000000..fab6048
--- /dev/null
+++ b/open-iconic.ttf
diff --git a/open-iconic.woff b/open-iconic.woff
new file mode 100644
index 0000000..f930998
--- /dev/null
+++ b/open-iconic.woff
author	alyx <alyx@aleteoryx.me>	2022-02-06 16:09:29 +0000
committer	Aleteoryx <alyx@aleteoryx.me>	2022-02-06 16:09:29 +0000
commit	fb1876db725b1d96d3fb58d2a597a12e36ca7b39 (patch)
tree	e3fe932f2ba848dbb6b3f2f13816aead257a4d6a
parent	21bc06407c450a3ae5643d5462c452ec92b3d782 (diff)
download	RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.tar.gz RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.tar.bz2 RRCUtils-fb1876db725b1d96d3fb58d2a597a12e36ca7b39.zip