Skip to content

Commit a6580ec

Browse files
ShkyylShkyyl
committed
1.2
Added a options page with case selector
1 parent 4a45fe4 commit a6580ec

22 files changed

+429
-28
lines changed

‎README.md

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# KeyChamp
22
Extension for joining free case battle on key-drop automatically.
3-
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.
3+
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.
4+
Use my code 'tutek' on [Keydrop](https://key-drop.com/?code=tutek)
45
## How to install extension
56
- Download [extension.zip](https://github.com/Shkyyl/KeyChamp/releases/)
67
- Extract
@@ -12,16 +13,20 @@
1213
- Click on extension
1314
- Click Join Case Battle and wait
1415
## How to change cases you want to join
15-
1. Go to extension folder
16-
2. Open popup.js with code or text editor
17-
3. On line 3 there is ``const TARGETS = [...];`` if you want to add some case just add comma and then write your wanted case in single quotation marks like this ``'MILSPEC'``
18-
`` ⚠️ Use uppercase for cases names``
16+
1. Click on extension
17+
2. Click settings icon
18+
3. Select cases you want
19+
## How to increase efficiency of extension
20+
1. Open extension folder
21+
2. Open popup.js with text or code editor
22+
3. Change the number of cases script catch in the line 10 and 11 after splice function
23+
``... splice(0, here --> 3))`` by default it's 3
1924
## TODO
20-
- everything
25+
- full automatic
2126

2227
## Support/Contact
2328
[Leave a ⭐ for more updates](https://github.com/Shkyyl/KeyChamp/stargazers)
24-
If you want to support me use my code 'tutek' on [Keydrop](https://key-drop.com/?code=tutek) or in DM ⬇️⬇️⬇️
29+
If you want to support me text me in DM ⬇️⬇️⬇️
2530
Feel free to contact me, this are my socials:
2631
[Twitter](https://twitter.com/ShkyylDev)
2732
[Reddit](https://www.reddit.com/user/Unique-Evening-3255)

‎extension/img/cases/SERENITY.png

57.5 KB
Loading

‎extension/img/cases/beast.png

59.2 KB
Loading

‎extension/img/cases/ceres.png

91.6 KB
Loading

‎extension/img/cases/cobra.png

70.6 KB
Loading

‎extension/img/cases/diablo.png

62.8 KB
Loading

‎extension/img/cases/energy.png

64.7 KB
Loading

‎extension/img/cases/iceblast.png

67.7 KB
Loading

‎extension/img/cases/joy.png

73.2 KB
Loading

‎extension/img/cases/milspec.png

56.8 KB
Loading

‎extension/img/cases/progress.png

67.6 KB
Loading

‎extension/img/cases/rocketracoon.png

68.8 KB
Loading

‎extension/img/cases/tech.png

58.2 KB
Loading

‎extension/img/cases/teeth.png

57.4 KB
Loading

‎extension/img/cases/toxic.png

68.6 KB
Loading

‎extension/manifest.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
{
22
"name": "KeyChamp",
3-
"version": "1.1",
3+
"version": "1.2",
44
"manifest_version": 3,
5+
"author": "Shkyyl",
56
"description": "This extension automatically joins the free case battle",
67
"permissions": [
78
"scripting",
89
"activeTab",
9-
"tabs"
10+
"tabs",
11+
"storage"
1012
],
1113
"host_permissions": [
1214
"*://key-drop.com/*"
@@ -19,6 +21,11 @@
1921
"16": "img/16.png",
2022
"48": "img/48.png",
2123
"128": "img/128.png"
24+
},
25+
"options_ui":
26+
{
27+
"open_in_tab": true,
28+
"page": "options.html"
2229
}
2330

2431

‎extension/options.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Settings - KeyChamp</title>
6+
<script src="settings.js"></script>
7+
<link rel="stylesheet" href="optionstyle.css">
8+
</head>
9+
<body>
10+
<div class="page">
11+
<div class="sidebar">
12+
<a class="title">KeyChamp</a>
13+
<img src="img/128.png" class="logo">
14+
<div class="nav">
15+
<a>General</a>
16+
</div>
17+
<div class="madeby">
18+
<a>Made by Shkyyl</a><br>
19+
<a href="https://github.com/Shkyyl" target="_blank" class="link">Github</a>
20+
</div>
21+
</div>
22+
<div class="inner">
23+
<div class="content">
24+
<h1>Cases List</h1>
25+
<div class="cases" id="case-list">
26+
<label for="milspec">
27+
<div class="setting s-disabled" data-case="MILSPEC">
28+
<img src="img/cases/milspec.png"class="case-img">
29+
<a>Milspec</a>
30+
<input type="checkbox" name="milspec" id="milspec" class="case-checkbox">
31+
</div>
32+
</label>
33+
<label for="beast">
34+
<div class="setting s-disabled" data-case="BEAST">
35+
<img src="img/cases/beast.png"class="case-img">
36+
<a>Beast</a>
37+
<input type="checkbox" name="beast" id="beast" class="case-checkbox">
38+
</div>
39+
</label>
40+
<label for="diablo">
41+
<div class="setting s-disabled" data-case="DIABLO">
42+
<img src="img/cases/diablo.png"class="case-img">
43+
<a>Diablo</a>
44+
<input type="checkbox" name="diablo" id="diablo" class="case-checkbox">
45+
</div>
46+
</label>
47+
<label for="energy">
48+
<div class="setting s-disabled" data-case="ENERGY">
49+
<img src="img/cases/energy.png"class="case-img">
50+
<a>Energy</a>
51+
<input type="checkbox" name="energy" id="energy" class="case-checkbox">
52+
</div>
53+
</label>
54+
<label for="iceblast">
55+
<div class="setting s-disabled" data-case="ICE BLAST">
56+
<img src="img/cases/iceblast.png"class="case-img">
57+
<a>Ice Blast</a>
58+
<input type="checkbox" name="iceblast" id="iceblast" class="case-checkbox">
59+
</div>
60+
</label>
61+
<label for="rocketracoon" >
62+
<div class="setting s-disabled" data-case="ROCKET RACOON">
63+
<img src="img/cases/rocketracoon.png"class="case-img">
64+
<a>Rocket Racoon</a>
65+
<input type="checkbox" name="rocketracoon" id="rocketracoon" class="case-checkbox">
66+
</div>
67+
</label>
68+
<label for="tech">
69+
<div class="setting s-disabled" data-case="TECH">
70+
<img src="img/cases/tech.png"class="case-img">
71+
<a>Tech</a>
72+
<input type="checkbox" name="tech" id="tech" class="case-checkbox">
73+
</div>
74+
</label>
75+
<label for="teeth">
76+
<div class="setting s-disabled" data-case="TEETH">
77+
<img src="img/cases/teeth.png"class="case-img">
78+
<a>Teeth</a>
79+
<input type="checkbox" name="teeth" id="teeth" class="case-checkbox">
80+
</div>
81+
</label>
82+
<label for="toxic">
83+
<div class="setting s-disabled" data-case="TOXIC">
84+
<img src="img/cases/toxic.png"class="case-img">
85+
<a>Toxic</a>
86+
<input type="checkbox" name="toxic" id="toxic" class="case-checkbox">
87+
</div>
88+
</label>
89+
<label for="progress">
90+
<div class="setting s-disabled" data-case="PROGRESS">
91+
<img src="img/cases/progress.png"class="case-img">
92+
<a>Progress</a>
93+
<input type="checkbox" name="progress" id="progress" class="case-checkbox">
94+
</div>
95+
</label>
96+
<label for="serenity" >
97+
<div class="setting s-disabled" data-case="SERENITY">
98+
<img src="img/cases/SERENITY.png"class="case-img">
99+
<a>Serenity</a>
100+
<input type="checkbox" name="serenity" id="serenity" class="case-checkbox">
101+
</div>
102+
</label>
103+
<label for="joy">
104+
<div class="setting s-disabled" data-case="JOY">
105+
<img src="img/cases/joy.png"class="case-img">
106+
<a>Joy</a>
107+
<input type="checkbox" name="joy" id="joy" class="case-checkbox">
108+
</div>
109+
</label>
110+
<label for="ceres">
111+
<div class="setting s-disabled" data-case="CERES">
112+
<img src="img/cases/ceres.png"class="case-img">
113+
<a>Ceres</a>
114+
<input type="checkbox" name="ceres" id="ceres" class="case-checkbox">
115+
</div>
116+
</label>
117+
<label for="cobra">
118+
<div class="setting s-disabled" data-case="COBRA">
119+
<img src="img/cases/cobra.png"class="case-img">
120+
<a>Cobra</a>
121+
<input type="checkbox" name="cobra" id="cobra" class="case-checkbox">
122+
</div>
123+
</label>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
</body>
129+
</html>

‎extension/optionstyle.css

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
html{
2+
height: 100%;
3+
}
4+
*{
5+
font-family:sans-serif;
6+
font-weight: bold;
7+
box-sizing: border-box;
8+
padding: 0;
9+
margin: 0;
10+
color: white;
11+
}
12+
body{
13+
background-color: #212121;
14+
overflow: hidden;
15+
height: 100%;
16+
}
17+
.inner{
18+
width: 100%;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: start;
23+
}
24+
.sidebar{
25+
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
padding: 48px 0 48px 0;
30+
height: 100%;
31+
width: 240px;
32+
background-color: #1E1E1E;
33+
color: #FFFFFF;
34+
gap: 10px;
35+
}
36+
.title{
37+
font-size: 32px;
38+
}
39+
.icon{
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
width: 85px;
44+
height: 85px;
45+
}
46+
.page{
47+
display: flex;
48+
flex: 0 0 auto;
49+
height: 100%;
50+
overflow: hidden;
51+
}
52+
.logo{
53+
position: relative;
54+
width: 64px;
55+
height: 64px;
56+
margin: 0px auto;
57+
}
58+
.nav{
59+
display: flex;
60+
flex-direction: column;
61+
align-items: flex-start;
62+
gap: 15px;
63+
padding: 24px 0;
64+
width: 100%;
65+
flex-grow: 1;
66+
}
67+
.nav a{
68+
width: 100%;
69+
font-size: 24px;
70+
padding: 15px 38px;
71+
background-color: #4d4d4d;
72+
}
73+
.madeby{
74+
margin-bottom: auto;
75+
text-align: center;
76+
}
77+
.madeby a{
78+
text-decoration: none;
79+
}
80+
.link{
81+
color: #0fff00;
82+
}
83+
.hero{
84+
width: 100%;
85+
height: 100%;
86+
}
87+
.content{
88+
position: relative;
89+
padding: 50px 18px;
90+
overflow: hidden;
91+
height: 100%;
92+
flex-wrap: wrap;
93+
}
94+
.cases{
95+
margin-top: 50px;
96+
display: flex;
97+
flex-direction: row;
98+
gap: 20px;
99+
flex-wrap: wrap;
100+
}
101+
label{
102+
text-align: center;
103+
cursor: pointer;
104+
}
105+
label img{
106+
border-radius: 15px;
107+
pointer-events: none;
108+
-webkit-user-drag: none;
109+
-webkit-user-drag: none;
110+
user-select: none;
111+
-moz-user-select: none;
112+
-webkit-user-select: none;
113+
-ms-user-select: none;
114+
}
115+
label div a{
116+
font-size: 28px;
117+
display: block;
118+
border-radius: 15px;
119+
pointer-events: none;
120+
-webkit-user-drag: none;
121+
-webkit-user-drag: none;
122+
user-select: none;
123+
-moz-user-select: none;
124+
-webkit-user-select: none;
125+
-ms-user-select: none;
126+
127+
}
128+
.settings-cb{
129+
display: flex;
130+
}
131+
.case-checkbox {
132+
display: none;
133+
}
134+
.setting.s-disabled{
135+
opacity: 0.25;
136+
}
137+
.settings.s-active{
138+
opacity: 1;
139+
}

‎extension/popup.html

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@
77
<script src="popup.js"></script>
88
</head>
99
<body>
10-
<button class="btn" id="join-button"><span>Join Case Battle</span></button>
10+
<div class="main">
11+
<h1>KeyChamp</h1>
12+
<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>
13+
</div>
14+
<div class="holder">
15+
<button class="btn" id="join-button"><span>Join Case Battle</span></button>
16+
</div>
17+
<div class="madeby">
18+
<div>
19+
<p>Use code tutek</p>
20+
</div>
21+
</div>
1122
</body>
1223
</html>

0 commit comments

Comments
 (0)