ShokuninNetwork · TwistedPorkchop · Sep 15, 2023 · Sep 15, 2023 · Sep 17, 2023 · Sep 17, 2023
diff --git a/icons/hide.svg b/icons/hide.svg
diff --git a/icon.svg → icons/icon.svg b/icon.svg → icons/icon.svg
diff --git a/icon_text.svg → icons/icon_text.svg b/icon_text.svg → icons/icon_text.svg
diff --git a/icons/revoke.svg b/icons/revoke.svg
diff --git a/icons/show.svg b/icons/show.svg
diff --git a/icons/verify.svg b/icons/verify.svg
diff --git a/index.html b/index.html
@@ -1,9 +1,19 @@
 <!DOCTYPE html>
         <html lang="en">
         <head>
+        <style>
+            body{
+                background-image: url('icons/icon.svg'), url('icons/icon_text.svg'), linear-gradient(to bottom right, white, rgba(23, 11, 40, 0.3));
+                background-position: top left, max(12%, 20em) 2%, top left;
+                background-size: max(9%, 10em), 40em, 130vw 130vh;
+                background-repeat: no-repeat, no-repeat, no-repeat;
+                overflow-x: hidden;
+                overflow-y: hidden;
+            }
+        </style>
         <meta charset="UTF-8">
         <title>Catalyst</title>
-        <link rel="icon" href="/icon.svg">
+        <link rel="icon" href="icons/icon.svg">
         <link rel="manifest" href="/manifest.json">
         <link rel="stylesheet" href="/style.css" type="text/css">
         <meta name="viewport" width="device-width" initial-scale="1" interactive-widget="resizes-content">
@@ -12,12 +22,23 @@
         <div class="app-container">
             <div  class="left-side inkwell-container">
                 <div id="inkwell">
-                    <iframe src="/inkwell/inkwell.html" seamless></iframe>
+                    <iframe src="/inkwell/inkwell.html"></iframe>
                 </div>
                 <button id="toggle-inkwell">Toggle Inkwell</button>
             </div>
-            <div class="post-container">
+            <div id="post-container">
                 <button class="toggle-button">Toggle Post Editor</button>
+                <div class="post" id="stub-post">
+                    <div id="stub-title" class="post-title">Title</div>
+                    <div id="stub-author" class="post-author">Author</div>
+                    <div id="stub-iframe" class="postframe" src="about:blank">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus tellus, tristique vel leo eget, sagittis facilisis arcu. Fusce condimentum non magna eu condimentum. Donec sodales lorem massa, dictum convallis nibh sagittis sit amet. Duis tincidunt, enim sed feugiat venenatis, lorem erat dictum eros, vitae consectetur est felis et ex. Nullam bibendum quis quam eu tempus. Nam tincidunt finibus mi sed venenatis. Donec faucibus ante sed dui iaculis finibus non nec dolor. Maecenas condimentum justo vel sapien semper, a elementum quam varius. Nulla nec libero quis mi eleifend porttitor. Maecenas convallis, turpis at aliquam tristique, neque leo pharetra dolor, non auctor odio nunc at dui.
+
+                    Nunc a ultricies sapien, molestie fringilla massa. Ut eleifend dictum ex ut mattis. Nullam ac tortor pulvinar, tincidunt nulla in, posuere felis. Sed bibendum tristique felis, vitae maximus odio tempus id. Maecenas interdum odio eget sem lobortis finibus. Nam ut lacus vel neque fringilla condimentum. Sed quis tempus ipsum. Cras vel nisi id leo laoreet efficitur sed eu mauris. Cras ac felis consectetur, tempor sapien eu, efficitur sapien. Sed mattis porta ullamcorper. Integer sed iaculis nibh. Integer leo ex, tempor et porttitor eu, dictum sed arcu. Suspendisse id aliquam lorem, ac dictum sem. Praesent rhoncus mattis odio, a consectetur mi dictum a. Integer ut eleifend leo. Proin ac purus purus.
+
+                    In pulvinar dapibus arcu, vitae vehicula enim volutpat in. Proin porttitor mi varius porttitor cursus. Fusce aliquam consectetur lorem, vel convallis tortor varius ut. Maecenas augue elit, commodo eget lectus at, volutpat facilisis lacus. Vestibulum dapibus, tellus quis tincidunt ullamcorper, neque sem eleifend odio, a condimentum sem mi vel magna. Vestibulum bibendum placerat consequat. Vivamus et erat eros. Vivamus eu luctus diam, id laoreet eros. Nunc ut molestie nibh. Aenean euismod quis odio vel laoreet. Vestibulum ornare turpis sit amet mi dictum, nec pulvinar diam vulputate. Phasellus mi enim, pellentesque id scelerisque ut, accumsan a nunc. 
+                    </div>
+                </div>
                 <div id="posts-start-marker"></div>
             </div>
             <div class="post-editor right-side hidden">
@@ -28,7 +49,6 @@
                     <button class="toggle-button">Hide</button>
                     <button class="save-button toggle-button">Post</button>
                     <button id="clear-button">Clear</button>
-                    <button class="preview-button">Preview</button>
                 </div>
                 <textarea placeholder="Write your post here" id="editor-content"></textarea>
             </div>
@@ -43,9 +63,14 @@
             <footer>
                 <a href="/src" download>src</a>
                 <a href="/bin" download>bin</a>
+                <button id="debugButton">Debug</button>
+                <button id="eventTest">Test</button>
+                <div id="debug">
+                    <iframe id="debugIframe" src="inkwell/debugger.html" width="800" height="300" ></iframe>
+                </div>
             </footer>
         </div>
+        <script type="module" src="/script.js"></script>
         </body>
-            <script type="module" src="/script.js">
-            </script>
+
         </html>
diff --git a/inkwell/debugger.html b/inkwell/debugger.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Debugging Tools</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #cccccc75;
+        }
+
+        nav {
+            background-color: #333;
+            color: #fff;
+            padding: 10px;
+        }
+
+        nav ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        nav li {
+            display: inline;
+            margin-right: 10px;
+        }
+
+        nav a {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        section {
+            margin: 20px 0;
+        }
+
+        h2 {
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 5px;
+        }
+    </style>
+</head>
+<body>
+
+    <section id="console">
+        <h2>Console</h2>
+        <div id="consoleOutput">
+            <!-- Console output will be displayed here -->
+        </div>
+    </section>
+
+
+    <script type="module" src="../script.js"></script>
+    <script>
+
+        //Im doing this for proof of concept.
+        //The idea bein that when a link is generated it will be sent here and added to the list.
+        //And later when a user tries to post, an object will be sent to compare with the whitelist and a response sent back.
+        const whitelist = [];
+
+        window.addEventListener("message", function(event) {
+            if (event.origin === 'http://localhost:8080') {
+                const consoleOutput = document.getElementById('consoleOutput');
+                const messageData = event.data;
+
+                try {
+                    const objMsg = JSON.parse(event.data);
+                    if (objMsg.type === 'whitelist') {
+                        // Access the custom event object within the message
+
+                        const HTMLparser = new DOMParser();
+                        const doc = HTMLparser.parseFromString(objMsg.links, "text/html")
+                        const aTag = doc.querySelector('a');
+                        const attribute = aTag.getAttribute('href');
+                        consoleOutput.innerHTML += `<p>${updateTime()} ${attribute} </p>`;
+                    }
+                }catch (e) {
+                    if (typeof messageData === 'object') {
+                        // If the message is an object, format it with line breaks
+                        const formattedMessage = JSON.stringify(messageData, null, 2)
+                            .replace(/\\n/g, '<br>')
+                            .replace(/ /g, '&nbsp;');
+
+                        consoleOutput.innerHTML += `<p>${updateTime()} ${formattedMessage}</p>`;
+                    } else {
+                        consoleOutput.innerHTML += `<p>${updateTime()} ${messageData}</p>`;
+                    }
+                }
+
+                window.parent.postMessage('Hello from Iframe!', 'http://localhost:8080');
+            } else {
+                document.getElementById('consoleOutput').innerHTML += `<p>${updateTime()} Who are you?</p>`;
+            }
+        });
+
+        function updateTime() {
+            var now = new Date();
+
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            var seconds = now.getSeconds();
+
+            // Format the time as HH:MM:SS
+            var formattedTime = hours.toString().padStart(2, '0') + ':' +
+                                minutes.toString().padStart(2, '0') + ':' +
+                                seconds.toString().padStart(2, '0');
+
+            // Update the content of the element with ID 'timeDisplay'
+            return formattedTime;
+        }
+    </script>
+</body>
+</html>
diff --git a/inkwell/inkwell.html b/inkwell/inkwell.html
@@ -19,13 +19,13 @@
     let uiContainer = document.getElementById('inkwell-bottle');
     uiContainer.innerHTML = `<div>Welcome to the Storyweave.</div>
     <label for="hostname-port"> Will you provide your own Inkwell? Your Inkwell: </label>
-    <input type="text" id="inkwell-configurator">
+    <input type="text" id="inkwell-configurator" style="width: 80vw;">
     <button class="tipholder" id="generate-link">Generate Bookmarklet</button>
     <div id="bookmarklet-link"></div>
     <div> You may copy the id="storyweave-script" section from this page to your own pages to create an inkwell. </div>
     `
   }
-  
+
   let maybeExtant = document.getElementById("storyweave-main-container");
   let storageHost = window.storageHost ? window.storageHost : window.location.host;
   if (checkForParticipatingDiv() && document.getElementById("inkwell-configurator") == null) {
@@ -35,7 +35,7 @@
       // need to think of a better way to secure requests.
 
       const { action, key, value } = event.data;
-      //console.log(event.data);
+      console.log("Message Event Data", event.data);
       if (action === 'set') {
         localStorage.setItem(key, JSON.stringify(value));
       } else if (action === 'get') {
@@ -61,8 +61,9 @@
         //use some backend for signalling as fallback/bootstrap
         //let the page embedding this script handle the logic
         //we just listen for their responses with an eventlistener
+
         const signalingEvent = new CustomEvent('signalingMessage', { detail: value });
-        window.parent.dispatchEvent(signalingEvent);
+        document.getElementById("inkwell").dispatchEvent(signalingEvent);
       }
     });
 
@@ -244,9 +245,20 @@
       e.target.classList.add("sheen-effect");
       switch (clickType) {
         case 'autoSignaling-button':
+
           setTimeout(function() {
-            console.log("autoSignaling object :", autoSignaling);
+            //console.log("autoSignaling object :", autoSignaling);
+            const signalingEvent = new CustomEvent('signalingMessage', { detail: autoSignaling });
+            document.getElementById("inkwell").dispatchEvent(signalingEvent);
+
+            var iframe = window.parent.document.getElementById('debugIframe');
+            if (iframe) {
+                iframe.contentWindow.postMessage(autoSignaling, '*');
+            } else {
+                console.error('Could not find iframe with id "debugIframe".');
+            }
           }, 0);
+
           break
         case 'top-story':
         case 'back-story':
@@ -322,7 +334,7 @@
         case 'manual-router':
           let signalInput = document.getElementById("manual-router");
           try {
-            autoSignaling.sdpManual = outeSignalingMessage(JSON.parse(signalInput.value));
+            autoSignaling.sdpManual = routeSignalingMessage(JSON.parse(signalInput.value));
             routeSignalingMessage(JSON.parse(signalInput.value));
           } catch (e) {
             console.info(e);