Merge pull request #84 from toobeeh/develop

Fix fixes :)
toobeeh · Oct 2, 2024 · 345d2cc · 345d2cc
2 parents 7ca60f0 + 45868a2
commit 345d2cc
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 22 deletions.
diff --git a/features/style.css b/features/style.css
@@ -1319,16 +1319,37 @@ body > div.pcr-app.visible > div.pcr-interaction:after {
     font-weight: 500;
 }
 
+/* OLD COMPATIBILITY*/
 .colors.color-tools {
     margin-left: var(--BORDER_GAP);
 }
 
+/* OLD COMPATIBILITY*/
+.colors.color-tools .color {
+    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3));
+    background-repeat: no-repeat;
+    background-size: 90%;
+    background-position: center;
+    background-color: var(--COLOR_TOOL_BASE);
+}
+
+.color-tools:not(.colors) {
+    border-radius: var(--BORDER_RADIUS);
+    height: var(--UNIT);
+    width: calc(var(--UNIT) / 2);
+    overflow: hidden;
+}
+
 .color-tools .color {
     filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3));
     background-repeat: no-repeat;
     background-size: 90%;
     background-position: center;
     background-color: var(--COLOR_TOOL_BASE);
+    width: calc(var(--UNIT) / 2);
+    height: calc(var(--UNIT) / 2);
+    cursor:pointer;
+
 }
 
 .color-tools .bottom .color {

diff --git a/features/uiTweaks.js b/features/uiTweaks.js
@@ -42,7 +42,7 @@ const uiTweaks = {
     },
     initWordHint: () => {
         // Add wordcount under input
-        const input = QS("#game-chat .chat-container form input");
+        const input = localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container form input");
         const hints = QS("#game-word .hints .container");
         const characters = QS("#game-chat .characters");
 
@@ -382,8 +382,8 @@ const uiTweaks = {
         }
     </style>
     <span>⬅️Close</span><span>⬆️Like</span><span>⬇️Shame</span><span>➡️Kick</span></div>`);
-        QS("#game-chat > .chat-container").appendChild(react);
-        let chatinput = QS("#game-chat .chat-container input");
+        localStorage.patchHash == "8091272790029377" ? QS("#game-chat").appendChild(react) : QS("#game-chat > .chat-container").appendChild(react);
+        let chatinput = localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container input");
         chatinput.addEventListener("keyup", (e) => {
             if (localStorage.quickreact == "true" && e.which == 17 && chatinput.value == "" && react.style.display == "none") {
                 react.style.display = "flex";
@@ -424,7 +424,7 @@ const uiTweaks = {
     box-shadow: black 0px 2px 7px;
 ">Copy chat selection for Discord</div>`);
         popup.style.display = "none";
-        const chatbox = QS("#game-chat > .chat-container");
+        const chatbox = localStorage.patchHash == "8091272790029377" ? QS("#game-chat > .chat-content") : QS("#game-chat > .chat-container");
         popup.addEventListener("pointerdown", () => {
             let chat = document.getSelection().toString();
             chat = chat.replace(/(\n)(?=.*? guessed the word!)/g, "+ ")
@@ -458,7 +458,7 @@ const uiTweaks = {
         });
     },
     initChatRecall: () => {
-        const input = QS("#game-chat .chat-container form input");
+        const input = localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container form input");
         let history = [];
         let lookup = [];
         // Add event listener to keyup and process to hints
@@ -681,15 +681,29 @@ const uiTweaks = {
         }
     },
     initColorTools: () => {
-        QS(".colors").insertAdjacentElement("afterend", elemFromString(`<div class="colors color-tools">
+        if(localStorage.patchHash == "8091272790029377"){
+            QS(".toolbar-group-tools").insertAdjacentElement("afterbegin", elemFromString(`<div class="color-tools">
             <div class="top">
               <div class="color" id="color-canvas-picker" data-tooltipdir='N' data-typo-tooltip="Select a color from the canvas" style="background-image: url(${chrome.runtime.getURL("res/crosshair.gif")});"></div>
             </div>
             <div class="bottom">
               <div class="color" id="color-free-picker" data-tooltipdir='S' data-typo-tooltip="Open the color picker" style="background-image: url(${chrome.runtime.getURL("res/inspect.gif")});"></div>
             </div>
             </div>`
-        ));
+            ));
+        }
+        else {
+            QS(".colors").insertAdjacentElement("afterend", elemFromString(`<div class="colors color-tools">
+            <div class="top">
+              <div class="color" id="color-canvas-picker" data-tooltipdir='N' data-typo-tooltip="Select a color from the canvas" style="background-image: url(${chrome.runtime.getURL("res/crosshair.gif")});"></div>
+            </div>
+            <div class="bottom">
+              <div class="color" id="color-free-picker" data-tooltipdir='S' data-typo-tooltip="Open the color picker" style="background-image: url(${chrome.runtime.getURL("res/inspect.gif")});"></div>
+            </div>
+            </div>`
+            ));
+        }
+
 
         // color picker
         const picker = QS("#color-free-picker");
@@ -790,7 +804,7 @@ const uiTweaks = {
 
         document.dispatchEvent(new Event("addTypoTooltips"));
 
-        QS("#game-chat > div.chat-container > form > input[type=text]").setAttribute("maxlength", 300);
+        (localStorage.patchHash == "8091272790029377" ? QS("#game-chat > form > input[type=text]") : QS("#game-chat > div.chat-container > form > input[type=text]")).setAttribute("maxlength", 300);
 
         const GAME = QS("#game");
         var gameObserver = new MutationObserver(() => {
@@ -799,6 +813,6 @@ const uiTweaks = {
         gameObserver.observe(GAME, { attributes: true, childList: false });
 
         // random easteregg
-        if (Math.random() < 0.1) QS("#game-chat .chat-container form input").placeholder = "Typo your guess here...";
+        if (Math.random() < 0.1) (localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container form input")).placeholder = "Typo your guess here...";
     }
 }
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Skribbl Typo",
   "description": "The most complete toolbox for skribbl.io with namefinder & Discord integration",
-  "version": "26.3.1",
+  "version": "26.3.2",
   "author": "tobeh",
   "icons": {
     "256": "res/icon/256MaxFit.png",
@@ -25,7 +25,7 @@
     {
       "resources": [
         "gamePatch.js",
-        "gamePatch-7693644640290134.js",
+        "gamePatch-8091272790029377.js",
         "res/*",
         "gifCap/*",
         "features/*"

diff --git a/patcher.js b/patcher.js
@@ -87,6 +87,7 @@ let patchNode = async (node) => {
             const hash = cyrb53(js);
             console.log("Game.js hash:", hash);
 
+            localStorage.patchHash = hash;
             let patch = "gamePatch.js";
             if(hash === 8091272790029377) { // PATCH date 2024-10-02
                 patch = `gamePatch-${hash}.js`;

diff --git a/skribbltypo.user.js b/skribbltypo.user.js
@@ -5,7 +5,7 @@
 // @author tobeh#7437
 // @description Userscript version of skribbltypo - the most advanced toolbox for skribbl.io
 // @icon64 https://rawcdn.githack.com/toobeeh/skribbltypo/master/res/icon/128MaxFit.png
-// @version 26.3.1.172790648
+// @version 26.3.2.172791037
 // @updateURL https://raw.githubusercontent.com/toobeeh/skribbltypo/master/skribbltypo.user.js
 // @grant none
 // @match https://skribbl.io/*
@@ -24,7 +24,7 @@ const chrome = {
             return "https://rawcdn.githack.com/toobeeh/skribbltypo/master/" + url;
         },
         getManifest: () => {
-            return {version: "26.3.1 usrsc"};
+            return {version: "26.3.2 usrsc"};
         },
         onMessage: {
             addListener: (callback) => {
@@ -3687,6 +3687,7 @@ let patchNode = async (node) => {
             const hash = cyrb53(js);
             console.log("Game.js hash:", hash);
 
+            localStorage.patchHash = hash;
             let patch = "gamePatch.js";
             if(hash === 8091272790029377) { // PATCH date 2024-10-02
                 patch = `gamePatch-${hash}.js`;
@@ -5129,16 +5130,37 @@ body > div.pcr-app.visible > div.pcr-interaction:after {
     font-weight: 500;
 }
 
+/* OLD COMPATIBILITY*/
 .colors.color-tools {
     margin-left: var(--BORDER_GAP);
 }
 
+/* OLD COMPATIBILITY*/
+.colors.color-tools .color {
+    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3));
+    background-repeat: no-repeat;
+    background-size: 90%;
+    background-position: center;
+    background-color: var(--COLOR_TOOL_BASE);
+}
+
+.color-tools:not(.colors) {
+    border-radius: var(--BORDER_RADIUS);
+    height: var(--UNIT);
+    width: calc(var(--UNIT) / 2);
+    overflow: hidden;
+}
+
 .color-tools .color {
     filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .3));
     background-repeat: no-repeat;
     background-size: 90%;
     background-position: center;
     background-color: var(--COLOR_TOOL_BASE);
+    width: calc(var(--UNIT) / 2);
+    height: calc(var(--UNIT) / 2);
+    cursor:pointer;
+
 }
 
 .color-tools .bottom .color {
@@ -6440,7 +6462,7 @@ const uiTweaks = {
     },
     initWordHint: () => {
         // Add wordcount under input
-        const input = QS("#game-chat .chat-container form input");
+        const input = localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container form input");
         const hints = QS("#game-word .hints .container");
         const characters = QS("#game-chat .characters");
 
@@ -6780,8 +6802,8 @@ const uiTweaks = {
         }
     </style>
     <span>⬅️Close</span><span>⬆️Like</span><span>⬇️Shame</span><span>➡️Kick</span></div>`);
-        QS("#game-chat > .chat-container").appendChild(react);
-        let chatinput = QS("#game-chat .chat-container input");
+        localStorage.patchHash == "8091272790029377" ? QS("#game-chat").appendChild(react) : QS("#game-chat > .chat-container").appendChild(react);
+        let chatinput = localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container input");
         chatinput.addEventListener("keyup", (e) => {
             if (localStorage.quickreact == "true" && e.which == 17 && chatinput.value == "" && react.style.display == "none") {
                 react.style.display = "flex";
@@ -6822,7 +6844,7 @@ const uiTweaks = {
     box-shadow: black 0px 2px 7px;
 ">Copy chat selection for Discord</div>`);
         popup.style.display = "none";
-        const chatbox = QS("#game-chat > .chat-container");
+        const chatbox = localStorage.patchHash == "8091272790029377" ? QS("#game-chat > .chat-content") : QS("#game-chat > .chat-container");
         popup.addEventListener("pointerdown", () => {
             let chat = document.getSelection().toString();
             chat = chat.replace(/(\n)(?=.*? guessed the word!)/g, "+ ")
@@ -6856,7 +6878,7 @@ const uiTweaks = {
         });
     },
     initChatRecall: () => {
-        const input = QS("#game-chat .chat-container form input");
+        const input = localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container form input");
         let history = [];
         let lookup = [];
         // Add event listener to keyup and process to hints
@@ -7079,15 +7101,29 @@ const uiTweaks = {
         }
     },
     initColorTools: () => {
-        QS(".colors").insertAdjacentElement("afterend", elemFromString(`<div class="colors color-tools">
+        if(localStorage.patchHash == "8091272790029377"){
+            QS(".toolbar-group-tools").insertAdjacentElement("afterbegin", elemFromString(`<div class="color-tools">
             <div class="top">
               <div class="color" id="color-canvas-picker" data-tooltipdir='N' data-typo-tooltip="Select a color from the canvas" style="background-image: url(${chrome.runtime.getURL("res/crosshair.gif")});"></div>
             </div>
             <div class="bottom">
               <div class="color" id="color-free-picker" data-tooltipdir='S' data-typo-tooltip="Open the color picker" style="background-image: url(${chrome.runtime.getURL("res/inspect.gif")});"></div>
             </div>
             </div>`
-        ));
+            ));
+        }
+        else {
+            QS(".colors").insertAdjacentElement("afterend", elemFromString(`<div class="colors color-tools">
+            <div class="top">
+              <div class="color" id="color-canvas-picker" data-tooltipdir='N' data-typo-tooltip="Select a color from the canvas" style="background-image: url(${chrome.runtime.getURL("res/crosshair.gif")});"></div>
+            </div>
+            <div class="bottom">
+              <div class="color" id="color-free-picker" data-tooltipdir='S' data-typo-tooltip="Open the color picker" style="background-image: url(${chrome.runtime.getURL("res/inspect.gif")});"></div>
+            </div>
+            </div>`
+            ));
+        }
+
 
         // color picker
         const picker = QS("#color-free-picker");
@@ -7188,7 +7224,7 @@ const uiTweaks = {
 
         document.dispatchEvent(new Event("addTypoTooltips"));
 
-        QS("#game-chat > div.chat-container > form > input[type=text]").setAttribute("maxlength", 300);
+        (localStorage.patchHash == "8091272790029377" ? QS("#game-chat > form > input[type=text]") : QS("#game-chat > div.chat-container > form > input[type=text]")).setAttribute("maxlength", 300);
 
         const GAME = QS("#game");
         var gameObserver = new MutationObserver(() => {
@@ -7197,7 +7233,7 @@ const uiTweaks = {
         gameObserver.observe(GAME, { attributes: true, childList: false });
 
         // random easteregg
-        if (Math.random() < 0.1) QS("#game-chat .chat-container form input").placeholder = "Typo your guess here...";
+        if (Math.random() < 0.1) (localStorage.patchHash == "8091272790029377" ? QS("#game-chat form input") : QS("#game-chat .chat-container form input")).placeholder = "Typo your guess here...";
     }
 }