Skip to content

Commit b4208cd

Browse files
MatanelGordonMatanelGordon
committed
Added performance level
1 parent 67b82f6 commit b4208cd

File tree

6 files changed

+179
-0
lines changed

6 files changed

+179
-0
lines changed

‎public/assets/gayGuy.jpg‎

8.22 KB
Loading

‎public/styles/utils.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,12 @@
1717
.gradient-text{
1818
-webkit-background-clip: text !important;
1919
-webkit-text-fill-color: transparent;
20+
}
21+
22+
.img-round{
23+
--round-size: 100px;
24+
block-size: var(--round-size);
25+
aspect-ratio: 1;
26+
border-radius: 50%;
27+
object-fit: cover;
2028
}

‎src/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { CookieBasicController } from './controllers/cookie-basic.controller';
1414
import { IndexedDBBasicController } from './controllers/indexedDB-basic.controller';
1515
import { UserAgentController } from './controllers/user-agent.controller';
1616
import { ElementsManipulationController } from './controllers/elements-manipulation.controller';
17+
import { PerformanceController } from './controllers/performance.controller';
1718

1819
@Module({
1920
controllers: [
@@ -29,6 +30,7 @@ import { ElementsManipulationController } from './controllers/elements-manipulat
2930
IndexedDBBasicController,
3031
UserAgentController,
3132
ElementsManipulationController,
33+
PerformanceController,
3234
],
3335
providers: [AppService],
3436
imports: [

‎src/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ const config = {
4747
url: 'level-abc12345',
4848
flag: createFlag('ELEMENTS_BABY'),
4949
}),
50+
performance: createLevelConfig('PERFORMANCE', {
51+
url: 'level-performance',
52+
flag: createFlag('D3VT00LS_MAST3R'),
53+
}),
5054
},
5155
server: {
5256
port: +envWithDefault<number>('PORT', 3000),

‎src/controllers/performance.controller.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Controller, Get, Render } from '@nestjs/common';
2+
import config from '~/config';
3+
4+
const levelConfig = config.levels.performance;
5+
const even = levelConfig.flag
6+
.split('')
7+
.filter((_, i) => i % 2 === 0)
8+
.join('');
9+
const odd = levelConfig.flag
10+
.split('')
11+
.filter((_, i) => i % 2 === 1)
12+
.join('');
13+
14+
@Controller(levelConfig.url)
15+
export class PerformanceController {
16+
@Get()
17+
@Render('performance.hbs')
18+
render() {
19+
return {
20+
flag1: even,
21+
flag2: odd,
22+
};
23+
}
24+
}

‎src/pages/performance.hbs‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
{{> headers}}
5+
<style>
6+
body{
7+
overflow: hidden;
8+
}
9+
10+
.slider-wrapper{
11+
padding: 2rem 4rem;
12+
position: absolute;
13+
top: 50%;
14+
left: 50%;
15+
z-index: 10000;
16+
transform: translate(-50%, -50%);
17+
background-color: #efefef;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
border-radius: .5rem;
22+
box-shadow: inset 3px 3px 5px rgba(100,100,100,.5);
23+
}
24+
25+
#inputSlider{
26+
accent-color: #3fada8;
27+
}
28+
29+
#inputSlider{
30+
filter: invert(1);
31+
}
32+
33+
#inputRangeLbl{
34+
color: crimson;
35+
}
36+
</style>
37+
</head>
38+
<body class="center full-size">
39+
<div class="slider-wrapper">
40+
<input type="range" value="100" min="10" max="1000" id="inputSlider">
41+
<label for="inputSlider" id="inputRangeLbl">12</label>
42+
<span style="color: #eee">*performance me!</span>
43+
</div>
44+
<script async>
45+
class RegisteredSexOffender{
46+
#timeouts = [];
47+
#intervals = [];
48+
49+
registerInterval(func, ms, ...params){
50+
const id = setInterval(func, ms, ...params);
51+
this.#intervals.push(id);
52+
return id;
53+
}
54+
55+
registerTimeout(func, ms, ...params){
56+
const id = setTimeout(func, ms, ...params);
57+
this.#timeouts.push(id);
58+
return id;
59+
}
60+
61+
reset(){
62+
this.#intervals.map(clearInterval);
63+
this.#timeouts.map(clearTimeout);
64+
this.#intervals = [];
65+
this.#timeouts = [];
66+
}
67+
}
68+
</script>
69+
<script defer>
70+
const timer = new RegisteredSexOffender();
71+
const slider = document.getElementById('inputSlider');
72+
const label = document.getElementById('inputRangeLbl');
73+
const N = 30;
74+
75+
const createImg = () => {
76+
const img = document.createElement('img');
77+
img.classList.add('img-round');
78+
img.src = "/public/assets/gayGuy.jpg";
79+
return img
80+
}
81+
82+
83+
const move = img => {
84+
// flag even parts - "{{flag1}}"
85+
const top = img.offsetTop;
86+
const left = img.offsetLeft;
87+
88+
const r = 2;
89+
90+
const iv = +img.dataset.vector;
91+
const x = r * Math.cos(iv * Math.PI / 90);
92+
const y = r * Math.sin(iv * Math.PI / 90);
93+
94+
// flag odd parts - "{{flag2}}"
95+
img.style.top = `${top + y}px`;
96+
img.style.left = `${left + x}px`;
97+
}
98+
99+
const position = (img) => {
100+
const posX =Math.random() * 100 | 0;
101+
const posY = Math.random() * 100 | 0;
102+
img.style.position = 'absolute';
103+
img.style.top = `${posY}vh`;
104+
img.style.left = `${posX}vw`;
105+
}
106+
107+
const createCluster = (n = N) => {
108+
for (let i = 0; i < n; i++) {
109+
const img = createImg();
110+
img.dataset.vector = (Math.random()*360).toFixed(2);
111+
position(img);
112+
timer.registerTimeout(() => {
113+
document.body.prepend(img);
114+
timer.registerInterval(position, 5000, img)
115+
timer.registerInterval(move, 10, img)
116+
}, (1000 / n) * i)
117+
}
118+
}
119+
120+
createCluster();
121+
122+
slider.value = N.toString();
123+
label.textContent = N.toString();
124+
125+
slider.oninput = () => {
126+
label.textContent = slider.value;
127+
}
128+
129+
slider.onchange = () => {
130+
document.querySelectorAll('img').forEach(img => {
131+
img.remove();
132+
})
133+
timer.reset();
134+
createCluster(+slider.value)
135+
}
136+
137+
138+
139+
</script>
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)