Skip to content

Commit 7fccaab

Browse files
bobjoerulesbobjoerules
committed
Made changes that make broken combos not be able to be made (broke my brain)
1 parent e8995c4 commit 7fccaab

File tree

2 files changed

+217
-38
lines changed

2 files changed

+217
-38
lines changed

‎index.html‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,83 +16,83 @@
1616
<div id="settings" class="settings">
1717
<div style="z-index: 100;">Mouth:
1818

19-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Grin Mouth.png'">Grin</button>
19+
<button id="grinbtn" class="mouthbutton">Grin</button>
2020

21-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Grinning Mouth.png'">Grinning</button>
21+
<button id="griningbtn" class="mouthbutton">Grinning</button>
2222

23-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Heart Smile.png'">Heart Smile</button>
23+
<button id="heartsmilebtn" class="mouthbutton">Heart Smile</button>
2424

25-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Large Smile.png'">Large Smile</button>
25+
<button id="largesmilebtn" class="mouthbutton">Large Smile</button>
2626

27-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Small Smile.png'">Small Smile</button>
27+
<button id="smallsmilebtn" class="mouthbutton">Small Smile</button>
2828

29-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Sunglasses Smile.png'">Sunglasses Smile</button>
29+
<button id="sunglassessmilebtn" class="mouthbutton">Sunglasses Smile</button>
3030

31-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/Mouth/Yum Mouth.png'">Yum</button>
31+
<button id="yumbtn" class="mouthbutton">Yum</button>
3232

33-
<button class="mouthbutton" onclick="document.getElementById('mouth').src='images/nothing.png'">None</button>
33+
<button id="nonemouthbtn" class="mouthbutton">None</button>
3434

3535
</div>
3636

3737
<div style="z-index: 100;">Right Eye:
3838

39-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Default R Eye.png'">Default</button>
39+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Default R Eye.png'; enablemouthr()">Default</button>
4040

41-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Disappointed R Eye.png'">Disappointed</button>
41+
<button style="background-color: red; opacity: 0.5; cursor: default;" disabled = true; id="disr" class="righteyebutton">Disappointed</button>
4242

43-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Grin R Eye.png'">Grin</button>
43+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Grin R Eye.png'; enablemouthr()">Grin</button>
4444

45-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Heart R Eye.png'">Heart</button>
45+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Heart R Eye.png'; enablemouthr()">Heart</button>
4646

47-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Joy R Eye.png'">Joy</button>
47+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Joy R Eye.png'; enablemouthr()">Joy</button>
4848

49-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/ROFL R Eye.png'">ROFL</button>
49+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/ROFL R Eye.png'; enablemouthr()">ROFL</button>
5050

51-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Smiley R Eye.png'">Smiley</button>
51+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Smiley R Eye.png'; enablemouthr()">Smiley</button>
5252

53-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Wink R Eye.png'">Wink</button>
53+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Wink R Eye.png'; enablemouthr()">Wink</button>
5454

55-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Yum R Eye.png'">Yum</button>
55+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/Right Eyes/Yum R Eye.png'; enablemouthr()">Yum</button>
5656

57-
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/nothing.png'">None</button>
57+
<button class="righteyebutton" onclick="document.getElementById('reye').src='images/nothing.png'; enablemouthr()">None</button>
5858

5959
</div>
6060

6161
<div style="z-index: 100;">Left Eye:
6262

63-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Default L Eye.png'">Default</button>
63+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Default L Eye.png'; enablemouthl()">Default</button>
6464

65-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Disappointed L Eye.png'">Disappointed</button>
65+
<button style="background-color: red; opacity: 0.5; cursor: default;" disabled = true; id="disl" class="lefteyebutton">Disappointed</button>
6666

67-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Grin L Eye.png'">Grin</button>
67+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Grin L Eye.png'; enablemouthl()">Grin</button>
6868

69-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Heart L eye.png'">Heart</button>
69+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Heart L eye.png'; enablemouthl()">Heart</button>
7070

71-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Joy L Eye.png'">Joy</button>
71+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Joy L Eye.png'; enablemouthl()">Joy</button>
7272

73-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/ROFL L Eye.png'">ROFL</button>
73+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/ROFL L Eye.png'; enablemouthl()">ROFL</button>
7474

75-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Smiley L Eye.png'">Smiley</button>
75+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Smiley L Eye.png'; enablemouthl()">Smiley</button>
7676

77-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Wink L Eye.png'">Wink</button>
77+
<button style="background-color: red; opacity: 0.5; cursor: default;" disabled = true; id="winkl" class="lefteyebutton">Wink</button>
7878

79-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Yum L Eye.png'">Yum</button>
79+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/Left Eyes/Yum L Eye.png'; enablemouthl()">Yum</button>
8080

81-
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/nothing.png'">None</button>
81+
<button class="lefteyebutton" onclick="document.getElementById('leye').src='images/nothing.png'; enablemouthl()">None</button>
8282

8383
</div>
8484

8585
<div style="z-index: 100;">Accessories:
8686

87-
<button class="accessoriesbutton" onclick="document.getElementById('accessories').src='images/Face Accessories/Joy Tears.png'">Joy Tears</button>
87+
<button id="joytearsbtn" class="accessoriesbutton">Joy Tears</button>
8888

89-
<button class="accessoriesbutton" onclick="document.getElementById('accessories').src='images/Face Accessories/ROFL Tears.png'">ROFL Tears</button>
89+
<button id="ROFLtearsbtn" class="accessoriesbutton">ROFL Tears</button>
9090

91-
<button id="sunglassesbtn" class="accessoriesbutton" onclick="document.getElementById('glasses').src='images/Face Accessories/Sunglasses.png'">Sunglasses</button>
91+
<button id="sunglassesbtn" class="accessoriesbutton">Sunglasses</button>
9292

93-
<button class="accessoriesbutton" onclick="document.getElementById('accessories').src='images/Face Accessories/Sweat.png'">Sweat</button>
93+
<button id="sweat" class="accessoriesbutton">Sweat</button>
9494

95-
<button id="noaccess" class="accessoriesbutton" onclick="document.getElementById('accessories').src='images/nothing.png'; document.getElementById('glasses').src='images/nothing.png';">None</button>
95+
<button id="noaccess" class="accessoriesbutton">None</button>
9696

9797
</div>
9898

@@ -103,7 +103,14 @@
103103
<button class="highlightsbutton" onclick="document.getElementById('highlights').src='images/nothing.png'">None</button>
104104

105105
</div>
106-
106+
107+
<!--<div style="z-index: 100;">Right Hand:
108+
109+
</div>
110+
111+
<div style="z-index: 100;">Left Hand:
112+
113+
</div>-->
107114
<div>Background Color:
108115

109116
<input type="color" id="favcolor" name="favcolor" value="#005A78" style="padding: 0; border:none; cursor:pointer;">
@@ -114,6 +121,9 @@
114121
Todo List:
115122
Randomize Button
116123
More Emojis
124+
Right Hand
125+
Left Hand
126+
Settings Toggle
117127
-->
118128
<div>
119129
<img id="mouth" class="mouth" src="images/Mouth/Grin Mouth.png" draggable = "false">

‎script.js‎

Lines changed: 173 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,188 @@
11
const colorInput = document.getElementById("favcolor");
22
const glassesbtn = document.getElementById("sunglassesbtn")
3+
const glasses = document.getElementById("glasses")
34
const noaccessbtn = document.getElementById("noaccess")
45
const reye = document.getElementById("reye")
56
const leye = document.getElementById("leye")
7+
const disr = document.getElementById("disr")
8+
const disl = document.getElementById("disl")
9+
const winkl = document.getElementById("winkl")
10+
const grinbtn = document.getElementById("grinbtn")
11+
const griningbtn = document.getElementById("griningbtn")
12+
const accessories = document.getElementById('accessories')
13+
const mouth = document.getElementById('mouth')
14+
let mouthblockerl = 0
15+
let mouthblockerr = 0
616

717
glassesbtn.addEventListener("click", () => {
8-
reye.style.display = "none";
9-
leye.style.display = "none";
18+
if (glasses.src.split("/").pop() === 'Sunglasses.png'){
19+
glasses.src='images/nothing.png'
20+
reye.style.display = "block";
21+
leye.style.display = "block";
22+
}else{
23+
glasses.src='images/Face Accessories/Sunglasses.png'
24+
reye.style.display = "none";
25+
leye.style.display = "none";
26+
}
1027
});
11-
noaccess.addEventListener("click", () => {
28+
29+
noaccessbtn.addEventListener("click", () => {
30+
glasses.src='images/nothing.png'
31+
accessories.src='images/nothing.png'
1232
reye.style.display = "block";
1333
leye.style.display = "block";
1434
});
1535

36+
document.getElementById('joytearsbtn').onclick = () => {
37+
console.log(accessories)
38+
if(accessories.src.split('/').pop() === 'Joy%20Tears.png'){
39+
accessories.src='images/nothing.png'
40+
}else{
41+
accessories.src='images/Face Accessories/Joy Tears.png'
42+
accessories.style.zIndex = 6;
43+
glasses.style.zIndex = 5;
44+
}
45+
};
46+
47+
document.getElementById('ROFLtearsbtn').onclick = () => {
48+
if(accessories.src.split('/').pop() === 'ROFL%20Tears.png'){
49+
accessories.src='images/nothing.png'
50+
accessories.style.zIndex = 6;
51+
glasses.style.zIndex = 5;
52+
}else{
53+
accessories.src='images/Face Accessories/ROFL Tears.png'
54+
accessories.style.zIndex = 5;
55+
glasses.style.zIndex = 6;
56+
}
57+
}
58+
59+
document.getElementById('sweat').onclick = () => {
60+
if(accessories.src.split('/').pop() === 'Sweat.png'){
61+
accessories.src='images/nothing.png'
62+
}else{
63+
accessories.src='images/Face Accessories/Sweat.png'
64+
accessories.style.zIndex = 6;
65+
glasses.style.zIndex = 5;
66+
}
67+
}
68+
69+
grinbtn.onclick = () => {
70+
mouth.src='images/Mouth/Grin Mouth.png';
71+
disableeyes()
72+
}
73+
griningbtn.onclick = () => {
74+
mouth.src='images/Mouth/Grinning Mouth.png'
75+
disableeyes()
76+
}
77+
78+
document.getElementById('heartsmilebtn').onclick = () => {
79+
mouth.src='images/Mouth/Heart Smile.png'
80+
enableeyes()
81+
}
82+
document.getElementById('largesmilebtn').onclick = () => {
83+
mouth.src='images/Mouth/Large Smile.png'
84+
enableeyes()
85+
}
86+
document.getElementById('smallsmilebtn').onclick = () => {
87+
mouth.src='images/Mouth/Small Smile.png'
88+
enableeyes()
89+
}
90+
document.getElementById('yumbtn').onclick = () => {
91+
mouth.src='images/Mouth/Yum Mouth.png'
92+
enableeyes()
93+
}
94+
document.getElementById('nonemouthbtn').onclick = () => {
95+
mouth.src='images/nothing.png'
96+
enableeyes()
97+
}
98+
document.getElementById('sunglassessmilebtn').onclick = () => {
99+
mouth.src='images/Mouth/Sunglasses Smile.png'
100+
enableeyes()
101+
}
102+
103+
document.getElementById('disl').onclick = () => {
104+
leye.src='images/Left Eyes/Disappointed L Eye.png';
105+
if(mouthblockerl === 0){
106+
mouthblockerl ++;
107+
disablemouth()
108+
}
109+
}
110+
document.getElementById('disr').onclick = () => {
111+
reye.src='images/Right Eyes/Disappointed R Eye.png'
112+
if(mouthblockerr === 0){
113+
mouthblockerr ++;
114+
disablemouth()
115+
}
116+
}
117+
document.getElementById('winkl').onclick = () => {
118+
leye.src='images/Left Eyes/Wink L Eye.png';
119+
if(mouthblockerl === 0){
120+
mouthblockerl ++;
121+
disablemouth()
122+
}
123+
}
124+
125+
function disableeyes() {
126+
winkl.disabled = true;
127+
winkl.style.backgroundColor = 'red';
128+
winkl.style.opacity = 0.5;
129+
winkl.style.cursor = 'default';
130+
disr.disabled = true;
131+
disr.style.backgroundColor = 'red';
132+
disr.style.opacity = 0.5;
133+
disr.style.cursor = 'default';
134+
disl.disabled = true;
135+
disl.style.backgroundColor = 'red';
136+
disl.style.opacity = 0.5;
137+
disl.style.cursor = 'default';
138+
}
139+
140+
function enableeyes() {
141+
winkl.disabled = false;
142+
winkl.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
143+
winkl.style.opacity = 1;
144+
winkl.style.cursor = 'pointer';
145+
disr.disabled = false;
146+
disr.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
147+
disr.style.opacity = 1;
148+
disr.style.cursor = 'pointer';
149+
disl.disabled = false;
150+
disl.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
151+
disl.style.opacity = 1;
152+
disl.style.cursor = 'pointer';
153+
}
154+
155+
function disablemouth() {
156+
grinbtn.disabled = true;
157+
grinbtn.style.backgroundColor = 'red';
158+
grinbtn.style.opacity = 0.5;
159+
grinbtn.style.cursor = 'default';
160+
griningbtn.disabled = true;
161+
griningbtn.style.backgroundColor = 'red';
162+
griningbtn.style.opacity = 0.5;
163+
griningbtn.style.cursor = 'default';
164+
}
165+
function enablemouthr(){
166+
mouthblockerr = 0
167+
enablemouth()
168+
}
169+
function enablemouthl(){
170+
mouthblockerl = 0
171+
enablemouth()
172+
}
173+
function enablemouth() {
174+
if ((mouthblockerr === 0) && (mouthblockerl === 0)){
175+
grinbtn.disabled = false;
176+
grinbtn.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
177+
grinbtn.style.opacity = 1;
178+
grinbtn.style.cursor = 'pointer';
179+
griningbtn.disabled = false;
180+
griningbtn.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
181+
griningbtn.style.opacity = 1;
182+
griningbtn.style.cursor = 'pointer';
183+
}
184+
}
185+
16186
colorInput.addEventListener("input", function () {
17187
// Get the selected color value from the input element
18188
const selectedColor = colorInput.value;
@@ -23,7 +193,6 @@ colorInput.addEventListener("input", function () {
23193

24194
dragElement(document.getElementById("settings"));
25195

26-
27196
function dragElement(elmnt) {
28197
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
29198

0 commit comments

Comments
 (0)