Skip to content

Commit 7ef8916

Browse files
RyanCheddarRyanCheddar
committed
hack the hacky workaround
1 parent d850635 commit 7ef8916

File tree

3 files changed

+259
-2
lines changed

3 files changed

+259
-2
lines changed

‎src/components/animations/algebra/functions.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ import Controls from "../../animation/controls.astro"
140140
import controls from "../../animation/controls.js"
141141

142142
let urlSillyHack = window.location.href.split("/")
143-
if (urlSillyHack[urlSillyHack.length - 1] == "functions") {
143+
if (urlSillyHack[urlSillyHack.length - 2] == "functions") {
144144

145145
const canvas = document.getElementById("canvas")
146146

‎src/components/animations/arithmetic/addition-basics.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ import Controls from "../../animation/controls.astro"
140140
import controls from "../../animation/controls.js"
141141

142142
let urlSillyHack = window.location.href.split("/")
143-
if (urlSillyHack[urlSillyHack.length - 1] == "addition-basics") {
143+
if (urlSillyHack[urlSillyHack.length - 2] == "addition-basics") {
144144

145145
const canvas = document.getElementById("canvas")
146146

‎src/components/animations/arithmetic/subtraction-basics.astro

+257
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
---
2+
import Canvas from "../../animation/canvas.astro"
3+
import Controls from "../../animation/controls.astro"
4+
---
5+
6+
<style is:global>
7+
#fx * {
8+
transition: 200ms;
9+
}
10+
#fx {
11+
top: 50%;
12+
left: 50%;
13+
transform: translate(-50%, -50%);
14+
position: absolute;
15+
font-size: clamp(1rem, 10vw, 2rem);
16+
text-align: center;
17+
margin: 0;
18+
}
19+
#graph {
20+
width: 100%;
21+
height: 100%;
22+
position: relative;
23+
overflow: hidden;
24+
background-color: #2a2a2a;
25+
}
26+
#graph * {
27+
transition: 200ms;
28+
}
29+
.tick:last-child {
30+
visibility: hidden;
31+
}
32+
.tick:first-child::after {
33+
display: none;
34+
}
35+
.tick::after {
36+
content: attr(data-tick);
37+
position: absolute;
38+
font-size: 0.7rem;
39+
}
40+
.tick::before {
41+
content: "";
42+
background-color: rgba(255, 255, 255, 0.1);
43+
}
44+
#x-axis {
45+
--color: red;
46+
position: absolute;
47+
bottom: 0;
48+
left: 0;
49+
width: 100%;
50+
display: flex;
51+
justify-content: space-between;
52+
}
53+
#x-axis::after {
54+
content: "x-axis";
55+
position: absolute;
56+
bottom: 5px;
57+
right: 5px;
58+
pointer-events: none;
59+
font-weight: bold;
60+
color: var(--color-x);
61+
transition: 200ms;
62+
}
63+
#x-axis .tick {
64+
height: 5px;
65+
width: 1px;
66+
background-color: white;
67+
position: relative;
68+
}
69+
#x-axis .tick::after {
70+
left: 50%;
71+
transform: translateX(-50%);
72+
bottom: 10px;
73+
}
74+
#x-axis .tick::before {
75+
width: 1px;
76+
height: 1000px;
77+
bottom: 0;
78+
position: absolute;
79+
}
80+
81+
#y-axis {
82+
--color: blue;
83+
position: absolute;
84+
top: 0;
85+
left: 0;
86+
height: 100%;
87+
display: flex;
88+
flex-direction: column-reverse;
89+
justify-content: space-between;
90+
}
91+
#y-axis::after {
92+
content: "y-axis";
93+
position: absolute;
94+
top: 0;
95+
left: 5px;
96+
width: 100px;
97+
pointer-events: none;
98+
font-weight: bold;
99+
color: var(--color-y);
100+
transition: 200ms;
101+
}
102+
#y-axis .tick {
103+
width: 5px;
104+
height: 1px;
105+
background-color: white;
106+
position: relative;
107+
}
108+
#y-axis .tick::after {
109+
left: 10px;
110+
transform: translateY(-50%);
111+
}
112+
#y-axis .tick::before {
113+
width: 1000px;
114+
height: 1px;
115+
left: 0;
116+
position: absolute;
117+
}
118+
#ev {
119+
position: absolute;
120+
top: 30px;
121+
right: 30px;
122+
font-size: clamp(1rem, 10vw, 2rem);
123+
font-size: 2rem;
124+
}
125+
.dot {
126+
position: absolute;
127+
width: 10px;
128+
height: 10px;
129+
border-radius: 50%;
130+
background-color: red;
131+
transform: translate(-50%, -50%);
132+
}
133+
</style>
134+
135+
<Canvas />
136+
<Controls />
137+
138+
<script>
139+
import anime from "animejs"
140+
import controls from "../../animation/controls.js"
141+
142+
let urlSillyHack = window.location.href.split("/")
143+
if (urlSillyHack[urlSillyHack.length - 1] == "subtraction-basics") {
144+
145+
const canvas = document.getElementById("canvas")
146+
147+
controls([
148+
{
149+
text: "Subtraction is the opposite of addition. Instead of adding two values, one value decreases the other.",
150+
play() {
151+
this.fx = document.createElement("h2")
152+
this.fx.id = "fx"
153+
this.fx.innerHTML =
154+
'<span class="input input1 x">1</span> - <span class="input input2 x">1</span> = <span class="output">0</span>'
155+
canvas.appendChild(this.fx)
156+
},
157+
},
158+
{
159+
text: "With addition, you can combine the values of two or more numbers together, into one single number.",
160+
play() {
161+
var tl = anime.timeline({
162+
duration: 1000
163+
})
164+
tl.add({
165+
targets: "#fx .input1",
166+
duration: 1000,
167+
color: "#FF0000",
168+
169+
})
170+
tl.add({
171+
targets: "#fx .input2",
172+
duration: 1000,
173+
color: "#0000FF",
174+
})
175+
tl.add({
176+
targets: "#fx .output",
177+
duration: 1000,
178+
color: "#00FF00",
179+
})
180+
tl.add({
181+
targets: ".input",
182+
duration: 1000,
183+
color: "#00FF00"
184+
})
185+
},
186+
},
187+
{
188+
text: "Addition works with all kinds of numbers.",
189+
play() {
190+
document.querySelector("#fx .input2").innerHTML = String(1)
191+
document.querySelector("#fx .output").innerHTML = String(2)
192+
193+
this.timeout = null
194+
const animate = (i = 1) => {
195+
if (i > 100) return
196+
this.timeout = setTimeout(
197+
() => {
198+
document.querySelector("#fx .input1").innerHTML = String(i)
199+
this.timeout = setTimeout(() => {
200+
document.querySelector("#fx .output").innerHTML = String(i + 1)
201+
animate(i + 1)
202+
}, 500 / i)
203+
},
204+
Math.round(500 / i),
205+
)
206+
}
207+
208+
animate()
209+
},
210+
},
211+
{
212+
text: "...and both inputs affect the result equally.",
213+
play() {
214+
document.querySelector("#fx .input1").innerHTML = String(100)
215+
this.timeout = null
216+
const animate = (i = 2) => {
217+
if (i > 200) return
218+
this.timeout = setTimeout(
219+
() => {
220+
document.querySelector("#fx .input2").innerHTML = String(i)
221+
this.timeout = setTimeout(() => {
222+
document.querySelector("#fx .output").innerHTML = String(i + 100)
223+
animate(i + 1)
224+
}, 500 / i)
225+
},
226+
Math.round(500 / i),
227+
)
228+
}
229+
230+
animate()
231+
},
232+
},
233+
{
234+
text: "Isn't that neat?",
235+
play() {
236+
setTimeout(() => {
237+
document.querySelector("#fx .input1").innerHTML = String(100)
238+
document.querySelector("#fx .input2").innerHTML = String(200)
239+
document.querySelector("#fx .output").innerHTML = String(300)
240+
}, 150)
241+
setTimeout(() => {
242+
document.querySelector("#fx .input1").innerHTML = String(10)
243+
document.querySelector("#fx .input2").innerHTML = String(20)
244+
document.querySelector("#fx .output").innerHTML = String(30)
245+
}, 300)
246+
setTimeout(() => {
247+
document.querySelector("#fx .input1").innerHTML = String(1)
248+
document.querySelector("#fx .input2").innerHTML = String(2)
249+
document.querySelector("#fx .output").innerHTML = String(3)
250+
}, 600)
251+
252+
253+
},
254+
}
255+
])
256+
}
257+
</script>

0 commit comments

Comments
 (0)