update: v1.5.0

add: new theme, better window, chat box.
Sudo-Ivan · Sep 28, 2024 · 7029f28 · 7029f28
1 parent bc9fede
commit 7029f28
Show file tree

Hide file tree

Showing 6 changed files with 303 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 ![Cryptic Chat Preview](preview/cryptic-chat-preview1.png)
 
-A Chrome V3 extension to exchange cryptic messages with friends over exisiting platforms.
+A Chrome V3 extension to exchange cryptic messages with friends over exisiting platforms. Build your own codebook and share via secure means.
+
+**Currently only works on Discord**
 
 ## Work In Progress (WIP)
 

diff --git a/js/background.js b/js/background.js
@@ -4,7 +4,7 @@ chrome.runtime.onInstalled.addListener(() => {
   const defaultCodebook = {
     "I hate veggies": "veggies are good for you"
   };
-  chrome.storage.local.set({ codebook: defaultCodebook });
+  chrome.storage.local.set({ codebook: defaultCodebook, messageLimit: 10 });
 
   chrome.contextMenus.create({
     id: "encrypt",

diff --git a/js/content.js b/js/content.js
@@ -61,14 +61,15 @@ function escapeRegExp(string) {
 
 function parseCrypticText() {
   try {
-    chrome.storage.local.get("codebook", (data) => {
+    chrome.storage.local.get(["codebook", "messageLimit"], (data) => {
       if (chrome.runtime.lastError) {
         console.error("Chrome runtime error: ", chrome.runtime.lastError);
         return;
       }
 
       const codebook = data.codebook || {};
-      let decryptedTexts = discordParse(codebook);
+      const messageLimit = data.messageLimit || 10;
+      let decryptedTexts = CrypticChat.discordParse(codebook, messageLimit);
 
       if (decryptedTexts.length > 0) {
         displayDecryptedText(decryptedTexts.join('\n\n'));
@@ -82,56 +83,196 @@ function parseCrypticText() {
   }
 }
 
+const styles = `
+  .cryptic-chat-box {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    width: 450px;
+    height: 400px;
+    background-color: #0f0f23;
+    border: 1px solid #30305a;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    z-index: 9999;
+    color: #c5c8c6;
+    font-family: 'Roboto', Arial, sans-serif;
+    resize: both;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  .cryptic-chat-header {
+    cursor: move;
+    padding: 10px;
+    background-color: #1a1a40;
+    color: #ffffff;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+    flex-shrink: 0;
+  }
+  .cryptic-chat-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 10px;
+    background-color: #141422;
+    scrollbar-width: thin;
+    scrollbar-color: #30305a #141422;
+  }
+  .cryptic-chat-input {
+    width: calc(100% - 20px);
+    height: 60px;
+    margin: 10px;
+    resize: none;
+    background-color: #1e1e3f;
+    color: #c5c8c6;
+    border: 1px solid #30305a;
+    border-radius: 5px;
+    padding: 5px;
+  }
+  .cryptic-chat-btn {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 0;
+    margin-left: 10px;
+  }
+`;
+
+function injectStyles() {
+  const styleElement = document.createElement('style');
+  styleElement.textContent = styles;
+  document.head.appendChild(styleElement);
+}
+
 function displayDecryptedText(text) {
   try {
     let decryptedBox = document.getElementById('cryptic-chat-decrypted-box');
     if (!decryptedBox) {
+      injectStyles();
+
       decryptedBox = document.createElement('div');
       decryptedBox.id = 'cryptic-chat-decrypted-box';
-      decryptedBox.style.position = 'fixed';
-      decryptedBox.style.bottom = '10px';
-      decryptedBox.style.right = '10px';
-      decryptedBox.style.width = '450px';
-      decryptedBox.style.maxHeight = '400px';
-      decryptedBox.style.overflowY = 'auto';
-      decryptedBox.style.backgroundColor = '#16213e';
-      decryptedBox.style.border = '1px solid #4ecca3';
-      decryptedBox.style.borderRadius = '10px';
-      decryptedBox.style.padding = '10px';
-      decryptedBox.style.zIndex = '9999';
-      decryptedBox.style.color = '#ffffff';
-      decryptedBox.style.fontFamily = "'Roboto', 'Arial', sans-serif";
+      decryptedBox.className = 'cryptic-chat-box';
 
-      const closeButton = document.createElement('button');
-      closeButton.textContent = 'Close';
-      closeButton.style.position = 'absolute';
-      closeButton.style.top = '5px';
-      closeButton.style.right = '5px';
-      closeButton.style.backgroundColor = '#4ecca3';
-      closeButton.style.border = 'none';
-      closeButton.style.borderRadius = '5px';
-      closeButton.style.padding = '5px 10px';
-      closeButton.style.cursor = 'pointer';
-      closeButton.onclick = () => decryptedBox.remove();
+      decryptedBox.innerHTML = `
+        <div class="cryptic-chat-header">
+          <span style="font-weight: bold;">Cryptic Chat</span>
+          <div>
+            <button id="minimizeBtn" class="cryptic-chat-btn">−</button>
+            <button id="closeBtn" class="cryptic-chat-btn">×</button>
+          </div>
+        </div>
+        <div class="cryptic-chat-content"></div>
+        <textarea class="cryptic-chat-input" placeholder="Type your message here... (Press Enter to encrypt and send to Discord input)"></textarea>
+      `;
 
-      decryptedBox.appendChild(closeButton);
       document.body.appendChild(decryptedBox);
+
+      const header = decryptedBox.querySelector('.cryptic-chat-header');
+      makeDraggable(decryptedBox, header);
+
+      document.getElementById('minimizeBtn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        const content = decryptedBox.querySelector('.cryptic-chat-content');
+        const input = decryptedBox.querySelector('.cryptic-chat-input');
+        content.style.display = content.style.display === 'none' ? 'block' : 'none';
+        input.style.display = input.style.display === 'none' ? 'block' : 'none';
+        decryptedBox.style.height = content.style.display === 'none' ? 'auto' : '400px';
+        updateLayout(decryptedBox);
+      });
+
+      document.getElementById('closeBtn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        decryptedBox.remove();
+      });
+
+      const input = decryptedBox.querySelector('.cryptic-chat-input');
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          encryptAndSend(input.value);
+          input.value = '';
+        }
+      });
+
+      decryptedBox.addEventListener('mouseup', () => updateLayout(decryptedBox));
+      window.addEventListener('resize', () => updateLayout(decryptedBox));
     }
+
+    const content = decryptedBox.querySelector('.cryptic-chat-content');
+    content.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${text}</pre>`;
 
-    const content = document.createElement('div');
-    content.innerHTML = `
-      <h3 style="color: #4ecca3; margin-top: 0; margin-bottom: 10px;">Cryptic Chat</h3>
-      <hr style="border: 0; height: 1px; background-color: #4ecca3; margin-bottom: 10px;">
-      <pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${text}</pre>
-    `;
-
-    decryptedBox.innerHTML = '';
-    decryptedBox.appendChild(content);
+    updateLayout(decryptedBox);
   } catch (error) {
     console.error("Error in displayDecryptedText: ", error);
   }
 }
 
+function updateLayout(element) {
+  const header = element.querySelector('.cryptic-chat-header');
+  const content = element.querySelector('.cryptic-chat-content');
+  const input = element.querySelector('.cryptic-chat-input');
+
+  const headerHeight = header.offsetHeight;
+  const inputHeight = input.offsetHeight;
+  const totalHeight = element.offsetHeight;
+
+  content.style.height = `${totalHeight - headerHeight - inputHeight - 20}px`;
+}
+
+function makeDraggable(element, dragHandle) {
+  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+  dragHandle.onmousedown = dragMouseDown;
+
+  function dragMouseDown(e) {
+    e.preventDefault();
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e.preventDefault();
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    element.style.top = (element.offsetTop - pos2) + "px";
+    element.style.left = (element.offsetLeft - pos1) + "px";
+  }
+
+  function closeDragElement() {
+    document.onmouseup = null;
+    document.onmousemove = null;
+    updateLayout(element);
+  }
+}
+
+function encryptAndSend(message) {
+  chrome.storage.local.get("codebook", (data) => {
+    const codebook = data.codebook || {};
+    let encryptedMessage = message;
+
+    for (const key in codebook) {
+      if (Object.prototype.hasOwnProperty.call(codebook, key)) {
+        encryptedMessage = encryptedMessage.replace(new RegExp(escapeRegExp(key), 'g'), codebook[key]);
+      }
+    }
+
+    CrypticChat.setDiscordMessage(encryptedMessage);
+  });
+}
+
 try {
   parseCrypticText();
   crypticChatInterval = setInterval(parseCrypticText, 5000);

diff --git a/js/discord-parse.js b/js/discord-parse.js