Skip to content

Commit fc9581d

Browse files
bugcaptorbugcaptor
committed
Seperate renderers.
1 parent 9a6d1d8 commit fc9581d

File tree

7 files changed

+542
-106
lines changed

7 files changed

+542
-106
lines changed

‎index.html

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>:] I'm bugcaptor probably...</title>
7-
</head>
8-
<body>
9-
<canvas id="game"></canvas>
10-
<script type="module" src="/src/main.ts"></script>
11-
</body>
12-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>:] I'm bugcaptor probably...</title>
8+
</head>
9+
10+
<body>
11+
<div id="main_view">
12+
<canvas id="main_canvas" class="main_canvas"></canvas>
13+
</div>
14+
<div id="bottom_menu">
15+
<button id="space_button" class="menu_button">Space</button>
16+
<button id="rain_button" class="menu_button">Rain</button>
17+
</div>
18+
<script type="module" src="/src/main.ts"></script>
19+
</body>
20+
21+
</html>

‎src/main.ts

Lines changed: 97 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,129 @@
11
import './style.css';
2-
import { Space } from './space';
2+
import { SpaceRenderer } from './space_renderer';
3+
import { RendererInterface } from './renderer';
4+
import { RainRenderer } from './rain_renderer';
5+
6+
function hideBottomMenu() {
7+
const bottomMenu = document.getElementById('bottom_menu') as HTMLDivElement;
8+
const easeTimeStep = 5;
9+
const alphaStepPerSec = 1;
10+
let prevTime = performance.now();
11+
let alpha = 1;
12+
function easeToTransparent() {
13+
const now = performance.now();
14+
const dt = (now - prevTime) * 0.001;
15+
prevTime = now;
16+
alpha -= dt * alphaStepPerSec;
17+
if (alpha > 0) {
18+
bottomMenu.style.opacity = alpha.toString();
19+
setTimeout(easeToTransparent, easeTimeStep);
20+
} else {
21+
bottomMenu.style.display = 'none';
22+
bottomMenu.style.opacity = '0';
23+
}
24+
}
25+
setTimeout(easeToTransparent, easeTimeStep);
26+
}
27+
28+
function showBottomMenu() {
29+
const bottomMenu = document.getElementById('bottom_menu') as HTMLDivElement;
30+
const easeTimeStep = 5;
31+
const alphaStepPerSec = 1;
32+
let prevTime = performance.now();
33+
bottomMenu.style.display = 'flex';
34+
bottomMenu.style.opacity = "0";
35+
let alpha = 0;
36+
function easeToOpaque() {
37+
const now = performance.now();
38+
const dt = (now - prevTime) * 0.001;
39+
prevTime = now;
40+
alpha += dt * alphaStepPerSec;
41+
if (alpha < 1) {
42+
bottomMenu.style.opacity = alpha.toString();
43+
setTimeout(easeToOpaque, easeTimeStep);
44+
} else {
45+
bottomMenu.style.opacity = '1';
46+
}
47+
}
48+
setTimeout(easeToOpaque, easeTimeStep);
49+
}
50+
351

452
function startApp() {
553
console.log('App started');
654

7-
const canvas = document.getElementById('game') as HTMLCanvasElement;
8-
const space = new Space(canvas);
55+
56+
const mainCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;
57+
58+
const rendererMap = new Map<string, RendererInterface>();
59+
rendererMap.set('space', new SpaceRenderer(mainCanvas));
60+
rendererMap.set('rain', new RainRenderer(mainCanvas));
61+
62+
let currentRendererName = 'space';
63+
64+
const spaceButton = document.getElementById('space_button') as HTMLButtonElement;
65+
const rainButton = document.getElementById('rain_button') as HTMLButtonElement;
66+
67+
spaceButton.addEventListener('click', () => {
68+
currentRendererName = 'space';
69+
});
70+
71+
rainButton.addEventListener('click', () => {
72+
currentRendererName = 'rain';
73+
});
974

1075
let prevTimeStamp = performance.now();
1176
let deltaTimeSec = 0.001;
1277

13-
let rotateYaw = 0;
14-
let rotatePitch = 0;
15-
const rotateMax = Math.PI / 3;
16-
const rotateAmount = Math.PI / 4;
17-
//let rotateYawPushed = false;
18-
let pitchUpPushed = false;
19-
let pitchDownPushed = false;
20-
21-
function checkRotateDown(x: number, y: number, pushOrNot: boolean) {
22-
if (y > canvas.height * 0.8 &&
23-
x > canvas.width * 0.2 &&
24-
x < canvas.width * 0.8) {
25-
pitchDownPushed = pushOrNot;
78+
function checkMenuToggle(_x: number, _y: number) {
79+
const bottomMenu = document.getElementById('bottom_menu') as HTMLDivElement;
80+
81+
// toggle display. If it's block, change to none, and vice versa (easing alpha).
82+
const display = bottomMenu.style.display;
83+
if (display === 'flex') {
84+
hideBottomMenu();
85+
} else {
86+
showBottomMenu();
2687
}
2788
}
2889

29-
canvas.addEventListener('touchstart', (e) => {
30-
// if touch on canvas bottom?
90+
mainCanvas.addEventListener('touchend', (e) => {
3191
if (e.touches.length > 0) {
3292
const touch = e.touches[0];
33-
checkRotateDown(touch.clientX, touch.clientY, true);
93+
const x = touch.clientX;
94+
const y = touch.clientY;
95+
checkMenuToggle(x, y);
3496
}
3597
});
36-
canvas.addEventListener('mousedown', (e) => {
37-
checkRotateDown(e.clientX, e.clientY, true);
38-
});
3998

40-
// canvas.addEventListener('touchmove', (e) => {
41-
// });
42-
43-
canvas.addEventListener('touchend', (e) => {
44-
if (e.touches.length > 0) {
45-
const touch = e.touches[0];
46-
checkRotateDown(touch.clientX, touch.clientY, false);
47-
}
99+
mainCanvas.addEventListener('mouseup', (e) => {
100+
const x = e.clientX;
101+
const y = e.clientY;
102+
checkMenuToggle(x, y);
48103
});
49104

50-
canvas.addEventListener('mouseup', (e) => {
51-
checkRotateDown(e.clientX, e.clientY, false);
52-
});
105+
let currentRenderer = rendererMap.get(currentRendererName);
106+
currentRenderer?.start();
107+
108+
let prevRendererName = currentRendererName;
53109

54-
space.start();
55110
// loop to render the game
56111
function gameLoop() {
57112
const nowTimeStamp = performance.now();
58113
deltaTimeSec = (nowTimeStamp - prevTimeStamp) * 0.001;
59114
prevTimeStamp = nowTimeStamp;
60115

61-
if (pitchUpPushed) {
62-
rotatePitch = Math.min(rotatePitch + rotateAmount * deltaTimeSec, rotateMax);
63-
} else if (pitchDownPushed) {
64-
rotatePitch = Math.max(rotatePitch - rotateAmount * deltaTimeSec, -rotateMax);
65-
} else {
66-
rotatePitch *= 0.5 * deltaTimeSec;
116+
if (prevRendererName !== currentRendererName) {
117+
currentRenderer?.stop();
118+
currentRenderer = rendererMap.get(currentRendererName);
119+
currentRenderer?.start();
120+
prevRendererName = currentRendererName;
67121
}
68122

69-
space.setFlowDirection(rotateYaw, rotatePitch);
70-
space.flowStars(deltaTimeSec);
123+
currentRenderer = rendererMap.get(currentRendererName);
124+
currentRenderer?.update(deltaTimeSec);
125+
currentRenderer?.render();
71126

72-
space.render();
73127
requestAnimationFrame(gameLoop);
74128
}
75129

0 commit comments

Comments
 (0)