Skip to content

Commit 0230b1b

Browse files
peterverpeterver
committed
[feat] Upgrade to atomic dawn
1 parent 0fce728 commit 0230b1b

File tree

13 files changed

+178
-203
lines changed

13 files changed

+178
-203
lines changed

‎src/components/atoms/Game.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { CFG, css } from '~/css';
22
import { GameCanvas } from './GameCanvas';
33
import { Script } from '~/script';
44
import { GameCountdown } from './GameCountdown';
5+
import { type SoundRegister } from '../modules/AudioPlayer';
56

67
type GameOptions = {
7-
sound: AtomicRelay['audio:register'];
8+
sound: SoundRegister;
89
columns: number;
910
rows: number;
1011
children: any;
@@ -64,12 +65,12 @@ export function Game({
6465
let isPaused = false;
6566

6667
el.$subscribe(data.evtStart, () => {
67-
el.$publish('audio:restart');
68+
$.audio.restart();
6869
});
6970

7071
el.$subscribe(data.evtOver, () => {
71-
el.$publish('audio:pause');
72-
el.$publish('audio:fx', 'over');
72+
$.audio.pause();
73+
$.audio.fx('over');
7374
});
7475

7576
el.$subscribe('game:evt:boot', () => {
@@ -80,11 +81,11 @@ export function Game({
8081
el.$publish('canvas:draw');
8182

8283
/* Set music state */
83-
el.$publish(
84-
$.storeGet('gameConfig').music === 'on'
85-
? 'audio:enable'
86-
: 'audio:disable'
87-
);
84+
if ($.storeGet('gameConfig').music === 'on') {
85+
$.audio.enable();
86+
} else {
87+
$.audio.disable();
88+
}
8889
});
8990

9091
/**
@@ -94,20 +95,21 @@ export function Game({
9495
const keydownListener = $.on(document, 'keydown', (e) => {
9596
if (e.key === 'p') {
9697
isPaused = !isPaused;
97-
el.$publish(isPaused ? 'audio:pause' : 'audio:play');
98+
if (isPaused) $.audio.pause();
99+
else $.audio.play();
98100
el.$publish(data.evtPause);
99101
} else if (e.key === 'r') {
100102
isPaused = false;
101-
el.$publish('audio:pause');
103+
$.audio.pause();
102104
el.$publish(data.evtPause);
103105
el.$publish('game:evt:countdown');
104106
}
105107
});
106108

107-
el.$publish('audio:register', data.gameSound);
109+
$.audio.register(data.gameSound);
108110

109111
el.$unmount = () => {
110-
el.$publish('audio:stop');
112+
$.audio.stop();
111113
keydownListener();
112114
};
113115
}}

‎src/components/atoms/GameCanvas.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from '~/css';
22
import { Script } from '~/script';
33

4-
export type CanvasEvents = {
4+
type CanvasEvents = {
55
'canvas:draw': { fn?: (ctx: CanvasRenderingContext2D) => void };
66
};
77

‎src/components/atoms/GameModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CFG, css } from '~/css';
2-
import { ModalClose } from '../modules/Modal';
2+
import { ModalClose } from './ModalClose';
33

44
type GameModalOptions = {
55
columns: number;

‎src/components/atoms/GamePreview.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,11 @@ export function GamePreview({
5656
<p>{description}</p>
5757
<Script data={{ source, index }}>
5858
{({ el, data, $ }) => {
59-
function start() {
60-
el.$publish('modal:open', { frag: data.source });
61-
}
62-
63-
$.on(el, 'click', () => start());
59+
$.on(el, 'click', () => $.modal.open({frag: data.source}));
6460

6561
el.$subscribe('sys:randomgame', (val) => {
6662
if (val !== data.index) return;
67-
start();
63+
$.modal.open({frag: data.source});
6864
});
6965
}}
7066
</Script>

‎src/components/atoms/ModalClose.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {css} from "~/css";
2+
import {Script} from "~/script";
3+
4+
type ModalCloseOptions = {
5+
style?:Record<string, unknown>;
6+
label?:string;
7+
type?: 'full' | 'cross',
8+
}
9+
10+
export function ModalClose ({label,style,type="full"}:ModalCloseOptions) {
11+
const buttonStyles = css.mix(css.defs.button({style: 'standard'}), style || {});
12+
13+
switch (type) {
14+
case 'full':
15+
return <button type="button" className={css(buttonStyles)}>
16+
{label || 'Close'}
17+
<Script>{({el, $}) => {
18+
$.on(el, 'click', () => $.modal.close());
19+
}}</Script>
20+
</button>;
21+
case 'cross':
22+
return <button type="button" className={css.use(buttonStyles, {
23+
padding: css.$v.spaceS,
24+
position: 'absolute',
25+
top: '-5rem',
26+
right: '-5rem',
27+
})}>
28+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
29+
<rect width="48" height="8" x="0" y="0" fill="currentColor" rx="5" transform="translate(9 5) rotate(45 0 0)"/>
30+
<rect width="48" height="8" x="0" y="0" fill="currentColor" rx="5" transform="translate(3 39) rotate(-45 0 0)" />
31+
</svg>
32+
<Script>{({el, $}) => {
33+
$.on(el, 'click', () => $.modal.close());
34+
}}</Script>
35+
</button>;
36+
}
37+
}

‎src/components/modules/AudioPlayer.tsx‎

Lines changed: 57 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,50 @@
11
import { Module } from '~/script';
22

3-
type AudioPlayerEvents = {
4-
'audio:register': { track: string[]; fx: Record<string, string> };
5-
'audio:enable': void;
6-
'audio:disable': void;
7-
'audio:restart': void;
8-
'audio:play': void;
9-
'audio:fx': string;
10-
'audio:pause': void;
11-
'audio:stop': void;
3+
export type SoundRegister = {
4+
track: string[];
5+
fx: Record<string, string>
126
};
137

14-
declare global {
15-
interface AtomicRelay extends AudioPlayerEvents {}
16-
}
17-
188
export function AudioPlayer() {
19-
return (
20-
<Module name="audio">
21-
{({ mod, $ }) => {
22-
let trackList: string[] = [];
23-
let fx: Record<string, HTMLAudioElement> = {};
24-
let audioIdx = 0;
25-
let isStopped = false;
26-
let isEnabled = false;
27-
28-
// Shared track audio element
29-
const track_audio = $.create('audio', {
30-
attrs: { preload: 'auto', crossOrigin: 'anonymous' },
31-
});
32-
document.body.appendChild(track_audio);
33-
34-
function playTrack(index: number) {
35-
if (!isEnabled) return;
36-
37-
isStopped = false;
38-
39-
const src = trackList[index % trackList.length];
40-
track_audio.pause();
41-
track_audio.src = src;
42-
track_audio.load();
43-
44-
track_audio.oncanplaythrough = () => {
45-
if (!isStopped && isEnabled) track_audio.play().catch(() => {});
46-
};
47-
48-
track_audio.onended = () => {
49-
if (!isStopped && isEnabled) {
50-
audioIdx++;
51-
playTrack(audioIdx);
52-
}
53-
};
54-
}
9+
return Module({
10+
name: 'audio',
11+
mod: ({ $ }) => {
12+
let trackList: string[] = [];
13+
let fx: Record<string, HTMLAudioElement> = {};
14+
let audioIdx = 0;
15+
let isStopped = false;
16+
let isEnabled = false;
17+
18+
// Shared track audio element
19+
const track_audio = $.create('audio', {
20+
attrs: { preload: 'auto', crossOrigin: 'anonymous' },
21+
});
22+
document.body.appendChild(track_audio);
23+
24+
function playTrack(index: number) {
25+
if (!isEnabled) return;
26+
27+
isStopped = false;
28+
29+
const src = trackList[index % trackList.length];
30+
track_audio.pause();
31+
track_audio.src = src;
32+
track_audio.load();
33+
34+
track_audio.oncanplaythrough = () => {
35+
if (!isStopped && isEnabled) track_audio.play().catch(() => {});
36+
};
37+
38+
track_audio.onended = () => {
39+
if (!isStopped && isEnabled) {
40+
audioIdx++;
41+
playTrack(audioIdx);
42+
}
43+
};
44+
}
5545

56-
mod.$subscribe('audio:register', (val) => {
46+
return {
47+
register: (val:SoundRegister) => {
5748
trackList = val.track;
5849
audioIdx = 0;
5950

@@ -72,34 +63,26 @@ export function AudioPlayer() {
7263
if (!track_audio.paused) track_audio.pause();
7364
track_audio.src = trackList[0];
7465
track_audio.load();
75-
});
76-
77-
/* Enable audio event */
78-
mod.$subscribe('audio:enable', () => (isEnabled = true));
79-
80-
/* Disable audio event */
81-
mod.$subscribe('audio:disable', () => (isEnabled = false));
82-
83-
mod.$subscribe('audio:restart', () => {
66+
},
67+
enable: () => isEnabled = true,
68+
disable: () => isEnabled = false,
69+
restart: () => {
8470
audioIdx = 0;
8571
playTrack(audioIdx);
86-
});
87-
88-
mod.$subscribe('audio:play', () => {
72+
},
73+
play: () => {
8974
if (!isEnabled) return;
9075
if (!track_audio.src && trackList.length) {
9176
playTrack(audioIdx);
9277
} else {
9378
track_audio.play().catch(() => {});
9479
}
95-
});
96-
97-
mod.$subscribe('audio:pause', () => {
80+
},
81+
pause: () => {
9882
if (!isEnabled) return;
9983
track_audio.pause();
100-
});
101-
102-
mod.$subscribe('audio:stop', () => {
84+
},
85+
stop: () => {
10386
isStopped = true;
10487
isEnabled = false;
10588

@@ -109,9 +92,8 @@ export function AudioPlayer() {
10992
trackList = [];
11093
fx = {};
11194
audioIdx = 0;
112-
});
113-
114-
mod.$subscribe('audio:fx', (key) => {
95+
},
96+
fx: (key:string) => {
11597
if (!isEnabled) return;
11698
const snd = fx[key];
11799
if (snd) {
@@ -122,8 +104,8 @@ export function AudioPlayer() {
122104
/* Noop */
123105
}
124106
}
125-
});
126-
}}
127-
</Module>
128-
);
107+
},
108+
}
109+
},
110+
});
129111
}

0 commit comments

Comments
 (0)