Version 1.3

new UI added new cases
Shkyyl · May 24, 2023 · 0cae3e0 · 0cae3e0
1 parent a6580ec
commit 0cae3e0
Show file tree

Hide file tree

Showing 16 changed files with 270 additions and 130 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # KeyChamp
  Extension for joining free case battle on key-drop automatically.
  KeyChamp is a extension which automatically joins the free case battle for you.The extension help you reach a case battle faster, no more wasting your time trying to join free case battle and getting mad. 
- Use my code 'tutek' on [Keydrop](https://key-drop.com/?code=tutek)
+ ##### Use my code 'tutek' on [Keydrop](https://key-drop.com/?code=tutek)
 ## How to install extension
 - Download [extension.zip](https://github.com/Shkyyl/KeyChamp/releases/)
 - Extract 
@@ -23,10 +23,13 @@
 ``... splice(0, here --> 3))`` by default it's 3
 ## TODO
 - full automatic
+- auto/single mode
 
 ## Support/Contact
 [Leave a ⭐ for more updates](https://github.com/Shkyyl/KeyChamp/stargazers)
 If you want to support me text me in DM ⬇️⬇️⬇️
-Feel free to contact me, this are my socials:
+Feel free to contact me, those are my socials:
 [Twitter](https://twitter.com/ShkyylDev)
-[Reddit](https://www.reddit.com/user/Unique-Evening-3255)
+[Reddit](https://www.reddit.com/user/Unique-Evening-3255)
+[Mail](mailto:shkyyldev@gmail.com)
+<a href="https://www.buymeacoffee.com/shkyyl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 37px !important;width: 170px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
diff --git a/extension/img/128.png b/extension/img/128.png
diff --git a/extension/img/16.png b/extension/img/16.png
diff --git a/extension/img/48.png b/extension/img/48.png
diff --git a/extension/img/cases/advance.png b/extension/img/cases/advance.png
diff --git a/extension/img/cases/kick.png b/extension/img/cases/kick.png
diff --git a/extension/img/cases/serpent.png b/extension/img/cases/serpent.png
diff --git a/extension/img/cases/stack.png b/extension/img/cases/stack.png
diff --git a/extension/img/logo.svg b/extension/img/logo.svg
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "KeyChamp",
-    "version": "1.2",
+    "version": "1.3",
     "manifest_version": 3,
     "author": "Shkyyl",
     "description": "This extension automatically joins the free case battle",

diff --git a/extension/options.html b/extension/options.html
@@ -9,8 +9,7 @@
   <body>
     <div class="page">
         <div class="sidebar">
-                <a class="title">KeyChamp</a>
-                <img src="img/128.png" class="logo">
+                <img src="img/logo.svg" class="logo">
                 <div class="nav">
                     <a>General</a>
                 </div>
@@ -21,7 +20,7 @@
         </div>
         <div class="inner">
                 <div class="content">
-                    <h1>Cases List</h1>
+                    <h1>Cases Select</h1>
                     <div class="cases" id="case-list">
                         <label for="milspec">
                             <div class="setting s-disabled" data-case="MILSPEC">
@@ -107,6 +106,34 @@ <h1>Cases List</h1>
                                 <input type="checkbox" name="joy" id="joy" class="case-checkbox">
                             </div>
                         </label>
+                        <label for="advance">
+                            <div class="setting s-disabled" data-case="ADVANCE">
+                                <img src="img/cases/advance.png"class="case-img">
+                                <a>Advance</a>
+                                <input type="checkbox" name="advance" id="advance" class="case-checkbox">
+                            </div>
+                        </label>
+                        <label for="kick">
+                            <div class="setting s-disabled" data-case="KICK">
+                                <img src="img/cases/kick.png"class="case-img">
+                                <a>Kick</a>
+                                <input type="checkbox" name="kick" id="kick" class="case-checkbox">
+                            </div>
+                        </label>
+                        <label for="stack">
+                            <div class="setting s-disabled" data-case="STACK">
+                                <img src="img/cases/stack.png"class="case-img">
+                                <a>Stack</a>
+                                <input type="checkbox" name="stack" id="stack" class="case-checkbox">
+                            </div>
+                        </label>
+                        <label for="serpent">
+                            <div class="setting s-disabled" data-case="SERPENT">
+                                <img src="img/cases/serpent.png"class="case-img">
+                                <a>Serpent</a>
+                                <input type="checkbox" name="serpent" id="serpent" class="case-checkbox">
+                            </div>
+                        </label>
                         <label for="ceres">
                             <div class="setting s-disabled" data-case="CERES">
                                 <img src="img/cases/ceres.png"class="case-img">
@@ -121,7 +148,7 @@ <h1>Cases List</h1>
                                 <input type="checkbox" name="cobra" id="cobra" class="case-checkbox">
                             </div>
                         </label>
-                    </div>  
+                    </div>
                 </div>
         </div>
     </div>

diff --git a/extension/optionstyle.css b/extension/optionstyle.css
@@ -2,7 +2,7 @@ html{
     height: 100%;
 }
 *{
-    font-family:sans-serif;
+    font-family: sans-serif;
     font-weight: bold;
     box-sizing: border-box;
     padding: 0;
@@ -11,8 +11,8 @@ html{
 }
 body{
     background-color: #212121;
-    overflow: hidden;
     height: 100%;
+    overflow: hidden;
 }
 .inner{
     width: 100%;
@@ -50,11 +50,9 @@ body{
     overflow: hidden;
 }
 .logo{
-    position: relative;
-    width: 64px;
-    height: 64px;
-    margin: 0px auto;
+    transform: scale(1.5);
 }
+
 .nav{
     display: flex;
     flex-direction: column;
@@ -87,7 +85,7 @@ body{
 .content{
     position: relative;
     padding: 50px 18px;
-    overflow: hidden;
+    overflow-y: scroll;
     height: 100%;
     flex-wrap: wrap;
 }
@@ -137,3 +135,55 @@ label div a{
 .settings.s-active{
     opacity: 1;
 }
+.users{
+    display: flex;
+    gap: 20px;
+}
+.checkbox-wrapper-18 .round {
+    position: relative;
+}
+
+.checkbox-wrapper-18 .round label {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 28px;
+    width: 28px;
+    display: block;
+}
+
+.checkbox-wrapper-18 .round label:after {
+    border: 2px solid #fff;
+    border-top: none;
+    border-right: none;
+    content: "";
+    height: 6px;
+    left: 8px;
+    opacity: 0;
+    position: absolute;
+    top: 9px;
+    transform: rotate(-45deg);
+    width: 12px;
+}
+
+.checkbox-wrapper-18 .round input[type="checkbox"] {
+    visibility: hidden;
+    display: none;
+    opacity: 0;
+}
+
+.checkbox-wrapper-18 .round input[type="checkbox"]:checked + label {
+    background-color: #66bb6a;
+    border-color: #66bb6a;
+}
+
+.checkbox-wrapper-18 .round input[type="checkbox"]:checked + label:after {
+    opacity: 1;
+}
+.checkbox-wrapper-18 .round{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/extension/popup.html b/extension/popup.html
@@ -8,15 +8,40 @@
   </head>
   <body>
     <div class="main">
-      <h1>KeyChamp</h1>
-      <button class="btn-options" id="options-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></button>
-    </div>
-    <div class="holder">
-      <button class="btn" id="join-button"><span>Join Case Battle</span></button>
-    </div>
-    <div class="madeby">
-      <div>
-        <p>Use code tutek</p>
+      <div class="logoh">
+        <img src="img/logo.svg">
+      </div>
+      <div class="holder">
+        <div class="text">
+          Use code tutek
+        </div>
+        <div class="btn" id="join-button">
+          <span>Join Battle</span>
+        </div>
+      </div>
+      <div class="bar">
+        <div class="bbr">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+          </svg>
+        </div>
+        <div class="btn-bar" id="options-button">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        </div>
+        <div class="btn-bar github">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+          </svg>
+        </div>
+      </div>
+      <div class="madeby">
+        <span>Version 1.3 - By Shkyyl / UI-UX by Walison Martins</span>
       </div>
     </div>
   </body>

diff --git a/extension/popup.js b/extension/popup.js
@@ -1,19 +1,18 @@
 function joinCaseBattle(){
 
-  chrome.storage.local.get("TARGETS", function(result){
+  chrome.storage.local.get(["TARGETS"], function(result){
     const targets = result.TARGETS || ['TOXIC', 'DIABLO', 'SPARK', 'ICE BLAST', 'TEETH', 'BEAST', 'SERENITY', 'JOY', 'PROGRESS', 'KITTY', 'ONYX'];
-
     (async () => {
       while (true) {
         await new Promise(r => setTimeout(r, 100));
         try {
-          const caseNames = (([...document.querySelectorAll('p.max-w-full.px-1.overflow-hidden')]).splice(0, 3)).map(e => e.textContent);
-          const casePrices = (([...document.querySelectorAll('div.flex.items-center.justify-center.rounded-tl-lg')]).splice(0, 3)).map(e => e.textContent);
+          const caseNames = (([...document.querySelectorAll('p.max-w-full.px-1.overflow-hidden')]).splice(0, 10)).map(e => e.textContent);
+          const casePrices = (([...document.querySelectorAll('div.flex.items-center.justify-center.rounded-tl-lg')]).splice(0, 10)).map(e => e.textContent);
           if (casePrices[caseNames.indexOf(caseNames.find(name => targets.includes(name)))] === 'FREE' && caseNames.some(str => targets.includes(str))) {
             const btns = [...document.querySelectorAll('a.button.mr-5')];
             const btn = btns[caseNames.indexOf(caseNames.find(name => targets.includes(name)))];
             btn.click();
-          }
+          }         
         } catch {null;}
       }
     })();

diff --git a/extension/settings.js b/extension/settings.js
@@ -1,9 +1,19 @@
 document.addEventListener('DOMContentLoaded', function() {
     const caseList = document.getElementById('case-list');
-
-    chrome.storage.local.get({TARGETS: []}, (data) => {
+    chrome.storage.local.get({TARGETS: [], USERS: []}, (data) => {
+      const users = data.USERS;
       const targets = data.TARGETS;
+      const checkboxElements = document.querySelectorAll('.checkbox-wrapper-18');
       const caseElements = document.querySelectorAll('.setting');
+      checkboxElements.forEach((checkboxElement) => {
+        const user = checkboxElement.querySelector('span').textContent;
+        const checkbox = checkboxElement.querySelector('input[type="checkbox"]');
+        if(users.includes(parseInt(user))){
+          checkbox.checked = true;
+        } else {
+          checkbox.checked = false;
+        }
+      });
       caseElements.forEach((caseElement) => {
         const caseType = caseElement.dataset.case;
         const checkbox = caseElement.querySelector('.case-checkbox');
@@ -17,6 +27,20 @@ document.addEventListener('DOMContentLoaded', function() {
           caseElement.classList.remove('s-active');
         }
       });
+      checkboxElements.forEach((checkboxElement) => {
+        const user = checkboxElement.querySelector('span').textContent;
+        const checkbox = checkboxElement.querySelector('input[type="checkbox"]');
+        checkbox.addEventListener('change', () => {
+          if(checkbox.checked){
+            users.push(parseInt(user));
+          } else {
+            const index = users.indexOf(parseInt(user));
+            if(index !== -1){
+              users.splice(index, 1);
+            }
+          }
+        });
+      });
       caseList.addEventListener('click', function(event) {
         const caseElement = event.target.closest('.setting');
         if (caseElement) {
@@ -39,9 +63,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
 
           }
-          chrome.storage.local.set({TARGETS: targets});
+          chrome.storage.local.set({TARGETS: targets, USERS: users});
         }
-        chrome.storage.local.get(["TARGETS"], (data) => {
+        chrome.storage.local.get(["TARGETS", "USERS"], (data) => {
           console.log(data);
         })
       });