@hi-ashleyj/llama 0.13.2 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Game.svelte +154 -129
- package/dist/Game.svelte.d.ts +10 -21
- package/dist/Layer.svelte +61 -46
- package/dist/Layer.svelte.d.ts +9 -20
- package/dist/audio/AudioCompressor.svelte +70 -44
- package/dist/audio/AudioCompressor.svelte.d.ts +14 -23
- package/dist/audio/AudioGain.svelte +33 -20
- package/dist/audio/AudioGain.svelte.d.ts +6 -17
- package/dist/audio/AudioListenerPosition.svelte +79 -93
- package/dist/audio/AudioListenerPosition.svelte.d.ts +6 -16
- package/dist/audio/AudioPanner.svelte +33 -20
- package/dist/audio/AudioPanner.svelte.d.ts +6 -17
- package/dist/audio/BufferedAudioSource.svelte +59 -44
- package/dist/audio/BufferedAudioSource.svelte.d.ts +8 -18
- package/dist/audio/MediaAudioSource.svelte +56 -35
- package/dist/audio/MediaAudioSource.svelte.d.ts +13 -25
- package/dist/audio/context.d.ts +1 -1
- package/dist/controllers/MouseClickable.svelte +61 -49
- package/dist/controllers/MouseClickable.svelte.d.ts +11 -20
- package/dist/controllers/MouseEventArea.svelte +71 -55
- package/dist/controllers/MouseEventArea.svelte.d.ts +13 -26
- package/dist/controllers/motions.d.ts +4 -5
- package/dist/drawables/Arc.svelte +48 -30
- package/dist/drawables/Arc.svelte.d.ts +9 -19
- package/dist/drawables/Circle.svelte +38 -24
- package/dist/drawables/Circle.svelte.d.ts +7 -17
- package/dist/drawables/DisplayImage.svelte +26 -16
- package/dist/drawables/DisplayImage.svelte.d.ts +11 -21
- package/dist/drawables/MultiLineText.svelte +75 -45
- package/dist/drawables/MultiLineText.svelte.d.ts +14 -24
- package/dist/drawables/Rectangle.svelte +35 -22
- package/dist/drawables/Rectangle.svelte.d.ts +7 -17
- package/dist/drawables/RoundedRectangle.svelte +41 -23
- package/dist/drawables/RoundedRectangle.svelte.d.ts +8 -18
- package/dist/drawables/Text.svelte +63 -40
- package/dist/drawables/Text.svelte.d.ts +13 -23
- package/dist/drawables/Tiled.svelte +79 -61
- package/dist/drawables/Tiled.svelte.d.ts +10 -20
- package/dist/extras/DefaultFontFace.svelte +35 -17
- package/dist/extras/DefaultFontFace.svelte.d.ts +15 -24
- package/dist/extras/FullScreenEventHandler.svelte +37 -23
- package/dist/extras/FullScreenEventHandler.svelte.d.ts +9 -19
- package/dist/extras/LayerPortal.svelte +36 -22
- package/dist/extras/LayerPortal.svelte.d.ts +6 -17
- package/dist/extras/SensibleDefaultStyles.svelte +8 -2
- package/dist/extras/SensibleDefaultStyles.svelte.d.ts +5 -17
- package/dist/extras/Tweened.svelte +28 -9
- package/dist/extras/Tweened.svelte.d.ts +12 -22
- package/dist/primitives/Area.svelte +46 -22
- package/dist/primitives/Area.svelte.d.ts +14 -24
- package/dist/primitives/Empty.svelte +7 -2
- package/dist/primitives/Empty.svelte.d.ts +5 -15
- package/dist/primitives/Inset.svelte +45 -26
- package/dist/primitives/Inset.svelte.d.ts +9 -20
- package/dist/primitives/Node.svelte +32 -19
- package/dist/primitives/Node.svelte.d.ts +7 -18
- package/dist/primitives/Opacity.svelte +34 -22
- package/dist/primitives/Opacity.svelte.d.ts +6 -17
- package/dist/primitives/Rotate.svelte +33 -22
- package/dist/primitives/Rotate.svelte.d.ts +11 -21
- package/dist/primitives/Translate.svelte +32 -19
- package/dist/primitives/Translate.svelte.d.ts +7 -18
- package/dist/resources/AssetPool.svelte +7 -2
- package/dist/resources/AssetPool.svelte.d.ts +5 -15
- package/dist/resources/AudioBufferedAsset.svelte +14 -6
- package/dist/resources/AudioBufferedAsset.svelte.d.ts +5 -15
- package/dist/resources/AudioMediaAsset.svelte +10 -2
- package/dist/resources/AudioMediaAsset.svelte.d.ts +5 -15
- package/dist/resources/ImageAsset.svelte +16 -9
- package/dist/resources/ImageAsset.svelte.d.ts +5 -15
- package/dist/resources/audio.d.ts +1 -1
- package/dist/resources/images.d.ts +1 -1
- package/dist/scenes/SceneSwitcher.svelte +27 -16
- package/dist/scenes/SceneSwitcher.svelte.d.ts +5 -16
- package/dist/scenes/SceneTransition.svelte +47 -36
- package/dist/scenes/SceneTransition.svelte.d.ts +6 -20
- package/package.json +10 -9
package/dist/Game.svelte
CHANGED
|
@@ -1,137 +1,162 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
audio
|
|
126
|
-
|
|
127
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { writable } from "svelte/store";
|
|
3
|
+
import { onMount } from "svelte";
|
|
4
|
+
import { setupGame, type GameContext, type LayerContext, type LayerDrawable } from "./core-contexts.js";
|
|
5
|
+
import { Timing } from "./controllers/motions.js";
|
|
6
|
+
import { Keyboard } from "./controllers/keyboard.js";
|
|
7
|
+
import type { Writable } from "svelte/store";
|
|
8
|
+
import { Mouse } from "./controllers/mouse.js";
|
|
9
|
+
import { getSetupAudio } from "./audio/context.js";
|
|
10
|
+
import { decodeAllBuffers } from "./resources/audio.js";
|
|
11
|
+
|
|
12
|
+
const raise = (err: string) => {
|
|
13
|
+
throw new Error(err);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface Props {
|
|
17
|
+
width?: number;
|
|
18
|
+
height?: number;
|
|
19
|
+
background?: string;
|
|
20
|
+
children?: import('svelte').Snippet;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
let {
|
|
24
|
+
width = 1920,
|
|
25
|
+
height = 1080,
|
|
26
|
+
background = "#000000",
|
|
27
|
+
children
|
|
28
|
+
}: Props = $props();
|
|
29
|
+
|
|
30
|
+
const widthStore: Writable<number> = writable(1920);
|
|
31
|
+
const heightStore: Writable<number> = writable(1080);
|
|
32
|
+
const backgroundStore: Writable<string> = writable("#000000");
|
|
33
|
+
|
|
34
|
+
$effect(() => { $widthStore = width })
|
|
35
|
+
$effect(() => { $heightStore = height })
|
|
36
|
+
$effect(() => { $backgroundStore = background })
|
|
37
|
+
|
|
38
|
+
const layerDrawables = new Set<LayerDrawable>();
|
|
39
|
+
const layerAssignments = new Map<string, LayerContext>();
|
|
40
|
+
|
|
41
|
+
const draw = function() {
|
|
42
|
+
for (let layer of layerDrawables) {
|
|
43
|
+
if (layer.isStatic()) continue;
|
|
44
|
+
layer.draw();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const assign = function(ctx: LayerContext, obj: LayerDrawable) {
|
|
49
|
+
layerDrawables.add(obj);
|
|
50
|
+
layerAssignments.set(obj.name, ctx);
|
|
51
|
+
return () => {
|
|
52
|
+
layerDrawables.delete(obj);
|
|
53
|
+
layerAssignments.delete(obj.name);
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
const timing = new Timing();
|
|
58
|
+
const keyboard = new Keyboard();
|
|
59
|
+
const mouse = new Mouse();
|
|
60
|
+
|
|
61
|
+
const frameEvents: Set<(info: { delta: number, time: number }) => any | void> = new Set();
|
|
62
|
+
const frameBeforeEvents: Set<(info: { delta: number, time: number }) => any | void> = new Set();
|
|
63
|
+
const frameAfterEvents: Set<(info: { delta: number, time: number }) => any | void> = new Set();
|
|
64
|
+
|
|
65
|
+
export const context: GameContext = {
|
|
66
|
+
width: widthStore,
|
|
67
|
+
height: heightStore,
|
|
68
|
+
background: backgroundStore,
|
|
69
|
+
getLayerByName: (name) => layerAssignments.get(name) ?? null,
|
|
70
|
+
assign,
|
|
71
|
+
createTimer: timing.createTimer.bind(timing),
|
|
72
|
+
createBurst: timing.createBurst.bind(timing),
|
|
73
|
+
onKeyboardEvent: keyboard.on.bind(keyboard),
|
|
74
|
+
isKeyboardPressed: keyboard.isPressed.bind(keyboard),
|
|
75
|
+
getKeyboardStore: keyboard.getStore.bind(keyboard),
|
|
76
|
+
onMouseEvent: mouse.on.bind(mouse),
|
|
77
|
+
isMousePressed: mouse.isPressed.bind(mouse),
|
|
78
|
+
getMousePosition: mouse.getPosition.bind(mouse),
|
|
79
|
+
getMouseStore: mouse.getStore.bind(mouse),
|
|
80
|
+
onFrame: (callback) => {
|
|
81
|
+
frameEvents.add(callback);
|
|
82
|
+
return () => frameEvents.delete(callback);
|
|
83
|
+
},
|
|
84
|
+
onBeforeFrame: (callback) => {
|
|
85
|
+
frameBeforeEvents.add(callback);
|
|
86
|
+
return () => frameBeforeEvents.delete(callback);
|
|
87
|
+
},
|
|
88
|
+
onAfterFrame: (callback) => {
|
|
89
|
+
frameAfterEvents.add(callback);
|
|
90
|
+
return () => frameAfterEvents.delete(callback);
|
|
91
|
+
},
|
|
92
|
+
defaultTextFontFace: writable(null),
|
|
93
|
+
getAudioContext: () => audio ? audio : raise("There Is No AudioContext"),
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
setupGame(context);
|
|
97
|
+
let last = -1;
|
|
98
|
+
|
|
99
|
+
const loop = function(time: DOMHighResTimeStamp) {
|
|
100
|
+
if (last < 0) last = time;
|
|
101
|
+
|
|
102
|
+
let delta = (time - last);
|
|
103
|
+
|
|
104
|
+
if (delta > 1000) {
|
|
105
|
+
requestAnimationFrame(loop);
|
|
106
|
+
return last = time;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// TODO: NEW TIMEOUT LOGIC
|
|
110
|
+
|
|
111
|
+
frameBeforeEvents.forEach((callback) => callback({ delta, time }));
|
|
112
|
+
|
|
113
|
+
timing.update(delta);
|
|
114
|
+
|
|
115
|
+
frameEvents.forEach((callback) => callback({ delta, time }));
|
|
116
|
+
|
|
117
|
+
draw();
|
|
118
|
+
|
|
119
|
+
frameAfterEvents.forEach((callback) => callback({ delta, time }));
|
|
120
|
+
|
|
121
|
+
requestAnimationFrame(loop);
|
|
122
|
+
last = time;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
let audio: AudioContext | null = null;
|
|
126
|
+
getSetupAudio((node) => {
|
|
127
|
+
if (!audio) throw new Error("Audio Is Not Yet Created!")
|
|
128
|
+
node.connect(audio.destination);
|
|
129
|
+
return () => audio && node.disconnect(audio.destination);
|
|
130
|
+
})
|
|
131
|
+
|
|
132
|
+
onMount(() => {
|
|
133
|
+
audio = new AudioContext();
|
|
134
|
+
decodeAllBuffers(audio);
|
|
135
|
+
requestAnimationFrame(loop);
|
|
136
|
+
keyboard.start();
|
|
137
|
+
mouse.start();
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
let wiw = $state(0);
|
|
141
|
+
let wih = $state(0);
|
|
142
|
+
|
|
143
|
+
$effect(() => mouse.changeWindowDimensions(wiw, wih));
|
|
144
|
+
$effect(() => mouse.setHeight(height));
|
|
145
|
+
$effect(() => mouse.setWidth(width));
|
|
146
|
+
|
|
147
|
+
const resumeAudioContext = () => {
|
|
148
|
+
if (audio?.state === "suspended") {
|
|
149
|
+
audio?.resume();
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
128
153
|
</script>
|
|
129
154
|
|
|
130
155
|
<div class="game" style:background-color={background}>
|
|
131
|
-
|
|
156
|
+
{@render children?.()}
|
|
132
157
|
</div>
|
|
133
158
|
|
|
134
|
-
<svelte:window bind:innerHeight={wih} bind:innerWidth={wiw}
|
|
159
|
+
<svelte:window bind:innerHeight={wih} bind:innerWidth={wiw} onclick={resumeAudioContext} onkeydown={resumeAudioContext}></svelte:window>
|
|
135
160
|
|
|
136
161
|
<style>
|
|
137
162
|
.game {
|
package/dist/Game.svelte.d.ts
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
1
|
import { type GameContext } from "./core-contexts.js";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
context?: GameContext | undefined;
|
|
9
|
-
};
|
|
10
|
-
events: {
|
|
11
|
-
[evt: string]: CustomEvent<any>;
|
|
12
|
-
};
|
|
13
|
-
slots: {
|
|
14
|
-
default: {};
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export type GameProps = typeof __propDef.props;
|
|
18
|
-
export type GameEvents = typeof __propDef.events;
|
|
19
|
-
export type GameSlots = typeof __propDef.slots;
|
|
20
|
-
export default class Game extends SvelteComponent<GameProps, GameEvents, GameSlots> {
|
|
21
|
-
get context(): GameContext;
|
|
2
|
+
interface Props {
|
|
3
|
+
width?: number;
|
|
4
|
+
height?: number;
|
|
5
|
+
background?: string;
|
|
6
|
+
children?: import('svelte').Snippet;
|
|
22
7
|
}
|
|
23
|
-
|
|
8
|
+
declare const Game: import("svelte").Component<Props, {
|
|
9
|
+
context: GameContext;
|
|
10
|
+
}, "">;
|
|
11
|
+
type Game = ReturnType<typeof Game>;
|
|
12
|
+
export default Game;
|
package/dist/Layer.svelte
CHANGED
|
@@ -1,52 +1,67 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
let
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
let
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
|
|
3
|
+
import { setupLayer, getGame } from "./core-contexts.js";
|
|
4
|
+
import type { DrawFunction } from "./drawable.js";
|
|
5
|
+
import { onMount } from "svelte";
|
|
6
|
+
|
|
7
|
+
let shouldRenderNextFrame = true;
|
|
8
|
+
|
|
9
|
+
let canvas: HTMLCanvasElement | undefined = $state();
|
|
10
|
+
let ctx = $derived((typeof canvas !== "undefined") ? canvas.getContext("2d") : null);
|
|
11
|
+
|
|
12
|
+
let targets = new Set<{ draw: DrawFunction<null> }>();
|
|
13
|
+
|
|
14
|
+
const { width, height } = getGame();
|
|
15
|
+
|
|
16
|
+
const draw = () => {
|
|
17
|
+
if (ctx === null) return;
|
|
18
|
+
ctx.clearRect(0, 0, $width, $height);
|
|
19
|
+
ctx.imageSmoothingEnabled = scaleMode === "smooth";
|
|
20
|
+
targets.forEach(f => f.draw({ width: $width, height: $height, ctx: ctx! }));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
let register = setupLayer({
|
|
24
|
+
assign: (ctx) => {
|
|
25
|
+
targets.add(ctx);
|
|
26
|
+
return () => { targets.delete(ctx) }
|
|
27
|
+
},
|
|
28
|
+
requestFrame: () => {
|
|
29
|
+
if (!staticMode) return;
|
|
30
|
+
shouldRenderNextFrame = true;
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
interface Props {
|
|
35
|
+
zIndex?: number;
|
|
36
|
+
staticMode?: boolean;
|
|
37
|
+
scaleMode?: "pixelated" | "smooth";
|
|
38
|
+
name: string;
|
|
39
|
+
children?: import('svelte').Snippet;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
let {
|
|
43
|
+
zIndex = 0,
|
|
44
|
+
staticMode = false,
|
|
45
|
+
scaleMode = "pixelated",
|
|
46
|
+
name,
|
|
47
|
+
children
|
|
48
|
+
}: Props = $props();
|
|
49
|
+
|
|
50
|
+
onMount(() => {
|
|
51
|
+
return register({
|
|
52
|
+
draw,
|
|
53
|
+
isStatic: () => {
|
|
54
|
+
if (shouldRenderNextFrame) { shouldRenderNextFrame = false; draw(); }
|
|
55
|
+
return staticMode;
|
|
56
|
+
},
|
|
57
|
+
name: name,
|
|
58
|
+
});
|
|
59
|
+
})
|
|
60
|
+
|
|
46
61
|
</script>
|
|
47
62
|
|
|
48
63
|
<canvas width={$width} height={$height} bind:this={canvas} style:z-index={zIndex}></canvas>
|
|
49
|
-
|
|
64
|
+
{@render children?.()}
|
|
50
65
|
|
|
51
66
|
<style>
|
|
52
67
|
canvas {
|
package/dist/Layer.svelte.d.ts
CHANGED
|
@@ -1,21 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
name: string;
|
|
8
|
-
};
|
|
9
|
-
events: {
|
|
10
|
-
[evt: string]: CustomEvent<any>;
|
|
11
|
-
};
|
|
12
|
-
slots: {
|
|
13
|
-
default: {};
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
export type LayerProps = typeof __propDef.props;
|
|
17
|
-
export type LayerEvents = typeof __propDef.events;
|
|
18
|
-
export type LayerSlots = typeof __propDef.slots;
|
|
19
|
-
export default class Layer extends SvelteComponent<LayerProps, LayerEvents, LayerSlots> {
|
|
1
|
+
interface Props {
|
|
2
|
+
zIndex?: number;
|
|
3
|
+
staticMode?: boolean;
|
|
4
|
+
scaleMode?: "pixelated" | "smooth";
|
|
5
|
+
name: string;
|
|
6
|
+
children?: import('svelte').Snippet;
|
|
20
7
|
}
|
|
21
|
-
|
|
8
|
+
declare const Layer: import("svelte").Component<Props, {}, "">;
|
|
9
|
+
type Layer = ReturnType<typeof Layer>;
|
|
10
|
+
export default Layer;
|
|
@@ -1,46 +1,72 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
|
|
3
|
+
import { getAudioContext, getConnector } from "./context.js";
|
|
4
|
+
import { onMount } from "svelte";
|
|
5
|
+
const audioContext = getAudioContext();
|
|
6
|
+
|
|
7
|
+
type Millisecond = number;
|
|
8
|
+
type Decibel = number;
|
|
9
|
+
interface Props {
|
|
10
|
+
preGain?: number;
|
|
11
|
+
postGain?: number;
|
|
12
|
+
attack?: Millisecond;
|
|
13
|
+
threshold?: Decibel;
|
|
14
|
+
blend?: Decibel;
|
|
15
|
+
ratio?: number;
|
|
16
|
+
release?: Millisecond;
|
|
17
|
+
children?: import('svelte').Snippet;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
let {
|
|
21
|
+
preGain = 1,
|
|
22
|
+
postGain = 1,
|
|
23
|
+
attack = 10,
|
|
24
|
+
threshold = -6,
|
|
25
|
+
blend = 3,
|
|
26
|
+
ratio = 2,
|
|
27
|
+
release = 150,
|
|
28
|
+
children
|
|
29
|
+
}: Props = $props();
|
|
30
|
+
|
|
31
|
+
let output: GainNode = $state();
|
|
32
|
+
let input: GainNode = $state();
|
|
33
|
+
let process: DynamicsCompressorNode = $state();
|
|
34
|
+
|
|
35
|
+
$effect(() => {
|
|
36
|
+
|
|
37
|
+
if (output) {
|
|
38
|
+
output.gain.setTargetAtTime(postGain, audioCTX.currentTime, 0.004);
|
|
39
|
+
}
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
$effect(() => {
|
|
43
|
+
if (input) {
|
|
44
|
+
input.gain.setTargetAtTime(preGain, audioCTX.currentTime, 0.004);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
$effect(() => {
|
|
48
|
+
if (process) {
|
|
49
|
+
process.attack.setTargetAtTime(attack / 1000, audioCTX.currentTime, 0.004);
|
|
50
|
+
process.threshold.setTargetAtTime(threshold, audioCTX.currentTime, 0.004);
|
|
51
|
+
process.knee.setTargetAtTime(Math.min(threshold + blend, 0), audioCTX.currentTime, 0.004);
|
|
52
|
+
process.ratio.setTargetAtTime(ratio, audioCTX.currentTime, 0.004);
|
|
53
|
+
process.release.setTargetAtTime(release / 1000, audioCTX.currentTime, 0.004);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const connect = getConnector((node) => {
|
|
58
|
+
node.connect(output);
|
|
59
|
+
return () => node.disconnect(output);
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
onMount(() => {
|
|
63
|
+
const audioCTX = audioContext();
|
|
64
|
+
output = audioCTX.createGain();
|
|
65
|
+
input = audioCTX.createGain();
|
|
66
|
+
process = audioCTX.createDynamicsCompressor();
|
|
67
|
+
return connect(output);
|
|
68
|
+
})
|
|
69
|
+
|
|
44
70
|
</script>
|
|
45
71
|
|
|
46
|
-
|
|
72
|
+
{@render children?.()}
|
|
@@ -1,24 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
events: {
|
|
13
|
-
[evt: string]: CustomEvent<any>;
|
|
14
|
-
};
|
|
15
|
-
slots: {
|
|
16
|
-
default: {};
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
export type AudioCompressorProps = typeof __propDef.props;
|
|
20
|
-
export type AudioCompressorEvents = typeof __propDef.events;
|
|
21
|
-
export type AudioCompressorSlots = typeof __propDef.slots;
|
|
22
|
-
export default class AudioCompressor extends SvelteComponent<AudioCompressorProps, AudioCompressorEvents, AudioCompressorSlots> {
|
|
1
|
+
type Millisecond = number;
|
|
2
|
+
type Decibel = number;
|
|
3
|
+
interface Props {
|
|
4
|
+
preGain?: number;
|
|
5
|
+
postGain?: number;
|
|
6
|
+
attack?: Millisecond;
|
|
7
|
+
threshold?: Decibel;
|
|
8
|
+
blend?: Decibel;
|
|
9
|
+
ratio?: number;
|
|
10
|
+
release?: Millisecond;
|
|
11
|
+
children?: import('svelte').Snippet;
|
|
23
12
|
}
|
|
24
|
-
|
|
13
|
+
declare const AudioCompressor: import("svelte").Component<Props, {}, "">;
|
|
14
|
+
type AudioCompressor = ReturnType<typeof AudioCompressor>;
|
|
15
|
+
export default AudioCompressor;
|