Arcade Machine

The Arcade machine was introduced during a previous major revision of Threlte. It involes sounds, global state, custom rendering and basic scene transitions. Give it a whirl, copy parts, remix it - have fun 😄

1
<script lang="ts">
2
  import { Canvas, extend } from '@threlte/core'
3
  import { useProgress } from '@threlte/extras'
4
  import { World } from '@threlte/rapier'
5
  import { CustomGridHelper } from './game/objects/CustomGridHelper'
6
  import { game } from './game/Game.svelte'
7
  import Scene from './Scene.svelte'
8
  import { WebGLRenderer } from 'three'
9

10
  const { progress, finishedOnce } = useProgress()
11

12
  $effect(() => {
13
    game.sound.handleMuted(game.muted)
14
  })
15

16
  extend({
17
    CustomGridHelper
18
  })
19
</script>
20

21
<div class="absolute h-full w-full overflow-hidden">
22
  <div
23
    class="absolute h-full w-full transition-all delay-500 duration-1000"
24
    class:opacity-0={!$finishedOnce}
25
  >
26
    <Canvas
27
      createRenderer={(canvas: HTMLCanvasElement) => {
28
        return new WebGLRenderer({
29
          canvas,
30
          powerPreference: 'high-performance',
31
          antialias: false,
32
          stencil: false,
33
          depth: false
34
        })
35
      }}
36
    >
37
      <World gravity={[0, 0, 0]}>
38
        <Scene />
39
      </World>
40
    </Canvas>
41
  </div>
42
  {#if !$finishedOnce}
43
    <div
44
      class="pointer-events-none absolute left-0 top-0 flex h-full w-full flex-row items-center justify-center p-12 text-2xl text-white"
45
    >
46
      {($progress * 100).toFixed()} %
47
    </div>
48
  {:else if game.state === 'off'}
49
    <div
50
      class="pointer-events-none absolute left-0 top-0 flex h-full w-full flex-row items-center justify-center p-12"
51
    >
52
      <button
53
        onclick={() => {
54
          game.sound.resume()
55
          game.state = 'intro'
56
        }}
57
        class="pointer-events-auto rounded-full bg-white px-8 py-4 text-2xl text-black"
58
      >
59
        Insert Coin
60
      </button>
61
    </div>
62
  {/if}
63

64
  <div class="absolute right-6 top-6">
65
    <button
66
      class="rounded-full bg-white p-2 *:h-7 *:w-7"
67
      onclick={() => (game.muted = !game.muted)}
68
    >
69
      {#if game.muted}
70
        <svg
71
          xmlns="http://www.w3.org/2000/svg"
72
          width="192"
73
          height="192"
74
          fill="#000000"
75
          viewBox="0 0 256 256"
76
        >
77
          <rect
78
            width="256"
79
            height="256"
80
            fill="none"
81
          /><path
82
            d="M80,168H32a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H80l72-56V224Z"
83
            fill="none"
84
            stroke="#000000"
85
            stroke-linecap="round"
86
            stroke-linejoin="round"
87
            stroke-width="16"
88
          />
89
          <line
90
            x1="240"
91
            y1="104"
92
            x2="192"
93
            y2="152"
94
            fill="none"
95
            stroke="#000000"
96
            stroke-linecap="round"
97
            stroke-linejoin="round"
98
            stroke-width="16"
99
          />
100
          <line
101
            x1="240"
102
            y1="152"
103
            x2="192"
104
            y2="104"
105
            fill="none"
106
            stroke="#000000"
107
            stroke-linecap="round"
108
            stroke-linejoin="round"
109
            stroke-width="16"
110
          />
111
        </svg>
112
      {:else}
113
        <svg
114
          xmlns="http://www.w3.org/2000/svg"
115
          width="192"
116
          height="192"
117
          fill="#000000"
118
          viewBox="0 0 256 256"
119
          ><rect
120
            width="256"
121
            height="256"
122
            fill="none"
123
          /><path
124
            d="M80,168H32a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H80l72-56V224Z"
125
            fill="none"
126
            stroke="#000000"
127
            stroke-linecap="round"
128
            stroke-linejoin="round"
129
            stroke-width="16"
130
          /><line
131
            x1="192"
132
            y1="104"
133
            x2="192"
134
            y2="152"
135
            fill="none"
136
            stroke="#000000"
137
            stroke-linecap="round"
138
            stroke-linejoin="round"
139
            stroke-width="16"
140
          /><line
141
            x1="224"
142
            y1="88"
143
            x2="224"
144
            y2="168"
145
            fill="none"
146
            stroke="#000000"
147
            stroke-linecap="round"
148
            stroke-linejoin="round"
149
            stroke-width="16"
150
          /></svg
151
        >
152
      {/if}
153
    </button>
154
  </div>
155
</div>

1
<script lang="ts">
2
  import { useTask, useThrelte } from '@threlte/core'
3
  import {
4
    BloomEffect,
5
    BrightnessContrastEffect,
6
    ChromaticAberrationEffect,
7
    EffectComposer,
8
    EffectPass,
9
    KernelSize,
10
    RenderPass,
11
    SMAAEffect,
12
    SMAAPreset
13
  } from 'postprocessing'
14
  import { onMount } from 'svelte'
15
  import { Tween } from 'svelte/motion'
16
  import { Vector2 } from 'three'
17
  import { game } from './game/Game.svelte'
18

19
  const { camera, renderer, autoRender, renderStage } = useThrelte()
20

21
  let bloomEffect: BloomEffect | undefined = undefined
22

23
  let machineIsOff = $derived(game.state === 'off' ? true : false)
24

25
  const bloomIntensity = new Tween(0, {
26
    duration: 3e3
27
  })
28

29
  $effect(() => {
30
    bloomIntensity.set(machineIsOff ? 0 : 1)
31
  })
32
  $effect(() => {
33
    if (bloomEffect) bloomEffect.intensity = bloomIntensity.current
34
  })
35
  $effect(() => {
36
    if ($camera && game.arcadeMachineScene) {
37
      addComposerAndPasses()
38
    }
39
  })
40

41
  const composer = new EffectComposer(renderer)
42

43
  const addComposerAndPasses = () => {
44
    composer.removeAllPasses()
45

46
    composer.addPass(new RenderPass(game.arcadeMachineScene, $camera))
47
    bloomEffect = new BloomEffect({
48
      intensity: bloomIntensity.current,
49
      luminanceThreshold: 0.15,
50
      height: 512,
51
      width: 512,
52
      luminanceSmoothing: 0.08,
53
      mipmapBlur: true,
54
      kernelSize: KernelSize.MEDIUM
55
    })
56
    bloomEffect.luminancePass.enabled = true
57
    ;(bloomEffect as any).ignoreBackground = true
58
    composer.addPass(new EffectPass($camera, bloomEffect))
59
    composer.addPass(
60
      new EffectPass(
61
        $camera,
62
        new ChromaticAberrationEffect({
63
          offset: new Vector2(0.0005, 0.0005),
64
          modulationOffset: 0,
65
          radialModulation: false
66
        })
67
      )
68
    )
69
    composer.addPass(
70
      new EffectPass(
71
        $camera,
72
        new BrightnessContrastEffect({
73
          brightness: 0,
74
          contrast: 0.1
75
        })
76
      )
77
    )
78
    composer.addPass(
79
      new EffectPass(
80
        $camera,
81
        new SMAAEffect({
82
          preset: SMAAPreset.LOW
83
        })
84
      )
85
    )
86
  }
87

88
  // When using PostProcessing, we need to disable autoRender
89
  onMount(() => {
90
    let before = autoRender.current
91
    autoRender.set(false)
92
    return () => {
93
      autoRender.set(before)
94
      composer.removeAllPasses()
95
    }
96
  })
97

98
  useTask(
99
    (delta) => {
100
      composer.render(delta)
101
    },
102
    { stage: renderStage }
103
  )
104
</script>

1
<script lang="ts">
2
  import { interactivity } from '@threlte/extras'
3
  import { Debug } from '@threlte/rapier'
4
  import ArcadeScene from './arcade/Scene.svelte'
5
  import GameScene from './game/Scene.svelte'
6
  import { game } from './game/Game.svelte'
7
  import CustomRendering from './Renderer.svelte'
8

9
  $effect(() => {
10
    const intervalHandler = window.setInterval(() => {
11
      game.blinkClock = game.blinkClock === 0 ? 1 : 0
12
    }, 96)
13
    return () => clearInterval(intervalHandler)
14
  })
15

16
  interactivity()
17
</script>
18

19
{#if game.debug}
20
  <Debug />
21
{:else}
22
  <CustomRendering />
23
{/if}
24

25
<ArcadeScene />
26

27
<GameScene />

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { Tween } from 'svelte/motion'
4
  import type { Color } from 'three'
5

6
  type Props = {
7
    lightColor: Color
8
    machineIsOff?: boolean
9
    pointLightsOff?: boolean
10
  }
11

12
  let { machineIsOff = false, pointLightsOff = false, lightColor }: Props = $props()
13

14
  let pointLightIntensity = new Tween(0)
15

16
  const blueLightIntensity = new Tween(2, {
17
    duration: 3e3
18
  })
19

20
  const redLightIntensity = new Tween(1, {
21
    duration: 3e3
22
  })
23

24
  const whiteLightIntensity = new Tween(0, {
25
    duration: 3e3
26
  })
27

28
  const whiteAmbientLightIntensity = new Tween(1, {
29
    duration: 3e3
30
  })
31

32
  $effect(() => {
33
    pointLightIntensity.set(pointLightsOff ? 1 : 0)
34
  })
35

36
  $effect(() => {
37
    setTimeout(() => {
38
      pointLightIntensity.set(1, {
39
        duration: 200
40
      })
41
    }, 1000)
42
  })
43

44
  $effect(() => {
45
    blueLightIntensity.set(machineIsOff ? 2 : 2)
46
    redLightIntensity.set(machineIsOff ? 2 : 2)
47
    whiteLightIntensity.set(machineIsOff ? 0 : 0)
48
    whiteAmbientLightIntensity.set(machineIsOff ? 1 : 0)
49
  })
50
</script>
51

52
<!-- This PointLight replicates the light emitted by the screen -->
53
<T.PointLight
54
  args={['black']}
55
  position.y={1.376583185239323}
56
  position.z={-0.12185962320246482}
57
  intensity={25 * pointLightIntensity.current}
58
  distance={1.2}
59
  decay={2}
60
  color={lightColor}
61
/>
62

63
<T.AmbientLight
64
  intensity={8}
65
  color={lightColor}
66
/>
67
<T.AmbientLight
68
  intensity={whiteAmbientLightIntensity.current}
69
  color="white"
70
/>
71

72
<!-- Red light -->
73
<T.DirectionalLight
74
  intensity={redLightIntensity.current}
75
  color="#F67F55"
76
  position.x={-2.2}
77
  position.y={3.5}
78
  position.z={2.6}
79
/>
80

81
<!-- Blue light -->
82
<T.DirectionalLight
83
  intensity={blueLightIntensity.current}
84
  position.x={2.2}
85
  position.y={3.4}
86
  position.z={2.6}
87
  color="#2722F3"
88
/>
89

90
<!-- White light -->
91
<T.DirectionalLight
92
  intensity={whiteLightIntensity.current}
93
  position.x={-1}
94
  position.y={2.5}
95
  position.z={1}
96
  color="white"
97
/>

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { useGltf, useTexture, useCursor } from '@threlte/extras'
4
  import type { Mesh, MeshStandardMaterial, Texture } from 'three'
5
  import { MathUtils } from 'three'
6
  import { Tween } from 'svelte/motion'
7
  import { StickPosition, Button } from './types'
8

9
  type GLTFResult = {
10
    nodes: {
11
      BodyMesh: Mesh
12
      LeftCover: Mesh
13
      RightCover: Mesh
14
      ScreenFrame: Mesh
15
      joystick_base: Mesh
16
      joystick_stick_application: Mesh
17
      joystick_stick: Mesh
18
      joystick_cap: Mesh
19
      Main_Button_Enclosure: Mesh
20
      Main_Button: Mesh
21
      Screen: Mesh
22
    }
23
    materials: {
24
      ['machine body main']: MeshStandardMaterial
25
      ['machine body outer']: MeshStandardMaterial
26
      ['screen frame']: MeshStandardMaterial
27
      ['joystick base']: MeshStandardMaterial
28
      ['joystick stick']: MeshStandardMaterial
29
      ['joystick cap']: MeshStandardMaterial
30
      Screen: MeshStandardMaterial
31
    }
32
  }
33

34
  type Props = {
35
    joystick?: StickPosition
36
    button?: Button
37
    screenTexture?: Texture | undefined
38
    screenClicked?: () => void
39
  }
40

41
  let {
42
    joystick = StickPosition.Idle,
43
    button = Button.Idle,
44
    screenTexture,
45
    screenClicked
46
  }: Props = $props()
47

48
  const { onPointerEnter, onPointerLeave } = useCursor('pointer')
49

50
  const gltf = useGltf<GLTFResult>('/models/ball-game/archade-machine/arcade_machine_own.glb').then(
51
    (gltf) => {
52
      Object.entries(gltf.materials).forEach(([name, material]) => {
53
        const n = name as keyof typeof gltf.materials
54
        if (n === 'joystick cap') material.envMapIntensity = 1
55
        else if (n === 'joystick stick') material.envMapIntensity = 1
56
        else material.envMapIntensity = 0.2
57
      })
58
      return gltf
59
    }
60
  )
61
  const scanLinesTexture = useTexture('/models/ball-game/archade-machine/textures/scanlines.png')
62

63
  const stickRotation = new Tween(0, {
64
    duration: 100
65
  })
66

67
  $effect(() => {
68
    if (joystick == StickPosition.Left) {
69
      stickRotation.set(-15 * MathUtils.DEG2RAD)
70
    } else if (joystick == StickPosition.Right) {
71
      stickRotation.set(15 * MathUtils.DEG2RAD)
72
    } else {
73
      stickRotation.set(0)
74
    }
75
  })
76
</script>
77

78
{#await gltf then model}
79
  <!-- Generated by gltfjsx -->
80
  <T.Group rotation.y={MathUtils.DEG2RAD * 180}>
81
    <!-- The Main Body -->
82
    <T.Mesh
83
      geometry={model.nodes.BodyMesh.geometry}
84
      material={model.materials['machine body main']}
85
      position={[0.2755, 0, 0]}
86
    />
87
    <T.Mesh
88
      geometry={model.nodes.LeftCover.geometry}
89
      material={model.materials['machine body outer']}
90
      position={[0.3, 1.2099, -0.1307]}
91
    />
92
    <T.Mesh
93
      geometry={model.nodes.RightCover.geometry}
94
      material={model.materials['machine body outer']}
95
      position={[-0.3, 1.2099, -0.1307]}
96
      scale={[-1, 1, 1]}
97
    />
98
    <T.Mesh
99
      geometry={model.nodes.ScreenFrame.geometry}
100
      material={model.materials['screen frame']}
101
      position={[0.2755, 0.0633, 0.0346]}
102
    />
103

104
    <!-- Joystick -->
105
    <T.Mesh
106
      geometry={model.nodes.joystick_base.geometry}
107
      material={model.materials['joystick base']}
108
      position={[0.1336, 0.9611, -0.1976]}
109
      rotation={[-0.1939, 0, 0]}
110
    />
111
    <T.Mesh
112
      geometry={model.nodes.joystick_stick_application.geometry}
113
      material={model.materials['joystick base']}
114
      position={[0.1336, 0.9653, -0.1984]}
115
      rotation={[-0.1939, 0, stickRotation.current]}
116
    >
117
      <T.Mesh
118
        geometry={model.nodes.joystick_stick.geometry}
119
        material={model.materials['joystick stick']}
120
        position={[0, -0.0145, 0.0001]}
121
      >
122
        <T.Mesh
123
          geometry={model.nodes.joystick_cap.geometry}
124
          material={model.materials['joystick cap']}
125
          position={[-0.0001, 0.1126, -0.0005]}
126
          material.envMapIntensity={0.5}
127
        />
128
      </T.Mesh>
129
    </T.Mesh>
130

131
    <!-- The Button -->
132
    <T.Mesh
133
      geometry={model.nodes.Main_Button_Enclosure.geometry}
134
      material={model.materials['joystick base']}
135
      position={[-0.1143, 0.9795, -0.0933]}
136
      rotation={[-0.1801, 0, 0]}
137
      scale={0.9409}
138
    >
139
      <T.Mesh
140
        geometry={model.nodes.Main_Button.geometry}
141
        material={model.materials['joystick cap']}
142
        position={[0.0001, 0.007 + (button == Button.Pressed ? -0.003 : 0), -0.0003]}
143
        rotation={[0.192, 0, 0]}
144
        scale={0.724}
145
      />
146
    </T.Mesh>
147

148
    <!-- The screen itself gets a special treatment -->
149
    <T.Mesh
150
      geometry={model.nodes.Screen.geometry}
151
      position={[0, 1.3774, 0.1447]}
152
      scale={1.0055}
153
      onpointerenter={onPointerEnter}
154
      onpointerleave={onPointerLeave}
155
      onclick={() => {
156
        screenClicked?.()
157
      }}
158
    >
159
      {#await scanLinesTexture then texture}
160
        {#if screenTexture}
161
          <T.MeshStandardMaterial
162
            metalness={0.9}
163
            roughness={0.2}
164
            map={screenTexture}
165
            metalnessMap={texture}
166
          />
167
        {:else}
168
          <T.MeshStandardMaterial
169
            metalness={0.9}
170
            roughness={0.2}
171
            color="#141414"
172
            metalnessMap={texture}
173
          />
174
        {/if}
175
      {/await}
176
    </T.Mesh>
177
  </T.Group>
178
{/await}

1
<script lang="ts">
2
  import { T, useTask, useThrelte } from '@threlte/core'
3
  import { useInteractivity, OrbitControls } from '@threlte/extras'
4
  import { cubicInOut } from 'svelte/easing'
5
  import { Spring, Tween } from 'svelte/motion'
6
  import { Color, Object3D, PerspectiveCamera, Scene } from 'three'
7
  import { game } from '../game/Game.svelte'
8
  import Lights from './Lights.svelte'
9
  import Machine from './Machine.svelte'
10
  import { Button, StickPosition } from './types'
11

12
  const { scene } = useThrelte()
13

14
  let leftPressed = $state(false)
15
  let rightPressed = $state(false)
16
  let spacePressed = $state(false)
17

18
  let joystick = $derived.by(() => {
19
    if (leftPressed && !rightPressed) {
20
      return StickPosition.Left
21
    } else if (!leftPressed && rightPressed) {
22
      return StickPosition.Right
23
    } else {
24
      return StickPosition.Idle
25
    }
26
  })
27
  let button = $derived.by(() => {
28
    if (spacePressed) {
29
      return Button.Pressed
30
    } else {
31
      return Button.Idle
32
    }
33
  })
34

35
  const machineIsOff = $derived(game.state == 'off' ? true : false)
36

37
  const cameraTweenZ = new Tween(2.1, {
38
    duration: 3e3,
39
    easing: cubicInOut
40
  })
41

42
  const { pointer } = useInteractivity()
43

44
  let screenFocused = $state(false)
45

46
  const screenPos = {
47
    x: 0,
48
    y: 1.3774,
49
    z: 0.1447
50
  }
51

52
  const cameraTargetPos = new Spring(
53
    {
54
      x: $pointer.x * 0.1,
55
      y: 1.23,
56
      z: 0
57
    },
58
    {
59
      precision: 0.000001
60
    }
61
  )
62

63
  const cameraPos = new Spring(
64
    {
65
      x: $pointer.x * 0.1, //(machineIsOff ? 2 : 0.1),
66
      y: 1.48,
67
      z: cameraTweenZ.current
68
    },
69
    {
70
      stiffness: 0.05,
71
      damping: 0.9,
72
      precision: 0.00001
73
    }
74
  )
75

76
  let cameraTarget = $state.raw<Object3D>()
77
  let camera = $state.raw<PerspectiveCamera>()
78

79
  const backgroundColor = new Tween(new Color('#020203'), {
80
    duration: 2.5e3
81
  })
82

83
  useTask(() => {
84
    if (!camera || !cameraTarget) return
85
    camera.lookAt(cameraTarget.position)
86
  })
87

88
  const onScreenClick = () => {
89
    screenFocused = !screenFocused
90
  }
91

92
  const onKeyUp = (e: KeyboardEvent) => {
93
    if (e.key === 'ArrowLeft') {
94
      e.preventDefault()
95
      leftPressed = false
96
    } else if (e.key === 'ArrowRight') {
97
      e.preventDefault()
98
      rightPressed = false
99
    } else if (e.key === ' ') {
100
      spacePressed = false
101
    }
102
  }
103

104
  const onKeyDown = (e: KeyboardEvent) => {
105
    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== ' ') return
106
    if (e.key === 'ArrowLeft') {
107
      e.preventDefault()
108
      leftPressed = true
109
    } else if (e.key === 'ArrowRight') {
110
      e.preventDefault()
111
      rightPressed = true
112
    } else if (e.key === ' ') {
113
      spacePressed = true
114
    }
115
  }
116

117
  $effect(() => {
118
    cameraTargetPos.set(
119
      screenFocused
120
        ? {
121
            ...screenPos,
122
            z: -screenPos.z
123
          }
124
        : {
125
            x: $pointer.x * 0.1,
126
            y: 1.23,
127
            z: 0
128
          }
129
    )
130
  })
131

132
  $effect(() => {
133
    cameraPos.set(
134
      screenFocused
135
        ? {
136
            x: screenPos.x,
137
            y: screenPos.y + 0.15,
138
            z: screenPos.z + 0.5
139
          }
140
        : {
141
            x: $pointer.x * (machineIsOff ? 0.1 : 0.1),
142
            y: 1.48,
143
            z: cameraTweenZ.current
144
          }
145
    )
146
  })
147

148
  $effect(() => {
149
    cameraTweenZ.set(machineIsOff ? 2.1 : 1.4)
150
    backgroundColor.set(machineIsOff ? new Color('#020203') : new Color('#020203'))
151
  })
152

153
  $effect(() => {
154
    scene.background = new Color(backgroundColor.current)
155
  })
156
</script>
157

158
<svelte:window
159
  on:keydown={onKeyDown}
160
  on:keyup={onKeyUp}
161
/>
162

163
<T.Scene
164
  oncreate={(ref: Scene) => {
165
    game.arcadeMachineScene = ref
166
  }}
167
  background={new Color(0x020203)}
168
>
169
  <!-- The camera target -->
170
  <T.Object3D
171
    bind:ref={cameraTarget}
172
    position.x={cameraTargetPos.current.x}
173
    position.y={cameraTargetPos.current.y}
174
    position.z={cameraTargetPos.current.z}
175
  />
176

177
  {#if game.orbitControls}
178
    <T.PerspectiveCamera
179
      position.x={20}
180
      position.y={20}
181
      position.z={20}
182
      fov={60}
183
      makeDefault
184
    >
185
      <OrbitControls />
186
    </T.PerspectiveCamera>
187
  {:else}
188
    <T.PerspectiveCamera
189
      bind:ref={camera}
190
      position.x={cameraPos.current.x}
191
      position.y={cameraPos.current.y}
192
      position.z={cameraPos.current.z}
193
      fov={30}
194
      makeDefault
195
    />
196
  {/if}
197

198
  <Machine
199
    screenClicked={onScreenClick}
200
    screenTexture={game.gameTexture}
201
    {joystick}
202
    {button}
203
  />
204

205
  <Lights
206
    lightColor={game.averageScreenColor}
207
    {machineIsOff}
208
  />
209

210
  <!-- Floor -->
211
  <T.Mesh>
212
    <T.CylinderGeometry args={[1, 1, 0.04, 64]} />
213
    <T.MeshStandardMaterial color={'#0f0f0f'} />
214
  </T.Mesh>
215
</T.Scene>

1
export enum StickPosition {
2
  Left,
3
  Idle,
4
  Right
5
}
6

7
export enum Button {
8
  Idle,
9
  Pressed
10
}

1
<script lang="ts">
2
  import { MathUtils } from 'three'
3
  import { T } from '@threlte/core'
4
  import { Edges, Text } from '@threlte/extras'
5
  import { cubicIn, cubicOut } from 'svelte/easing'
6
  import { Tween } from 'svelte/motion'
7
  import { game } from './Game.svelte'
8

9
  let mainUiTexts = $derived.by(() => {
10
    if (game.state === 'game-over')
11
      return {
12
        text: `Game Over\nScore: ${game.score}`,
13
        size: {
14
          width: 7,
15
          height: 2.5
16
        }
17
      }
18
    if (game.state === 'menu')
19
      return {
20
        text: 'Press Space\nto Start',
21
        size: {
22
          width: 7.5,
23
          height: 2.5
24
        }
25
      }
26
    if (game.state === 'level-complete')
27
      return {
28
        text: `Level ${game.levelIndex + 1} Complete\nScore: ${game.score}`,
29
        size: {
30
          width: 10,
31
          height: 2.5
32
        }
33
      }
34
    return undefined
35
  })
36

37
  const scale = new Tween(0)
38

39
  $effect(() => {
40
    const inAnim = !!mainUiTexts
41
    scale.set(inAnim ? 0.8 : 0, {
42
      easing: inAnim ? cubicIn : cubicOut
43
    })
44
  })
45
</script>
46

47
<T.Group
48
  scale={scale.current}
49
  position.y={2}
50
>
51
  <!-- Centered UI background -->
52
  {#key `${[(mainUiTexts?.size.width ?? 6.5).toString(), (mainUiTexts?.size.height ?? 2.5).toString()].join('')}`}
53
    <T.Mesh
54
      rotation.x={-90 * MathUtils.DEG2RAD}
55
      position.y={0.8}
56
    >
57
      <T.PlaneGeometry args={[mainUiTexts?.size.width ?? 6.5, mainUiTexts?.size.height ?? 2.5]} />
58
      <T.MeshBasicMaterial color="#08060a" />
59

60
      <Edges
61
        color={game.baseColor}
62
        scale={1.01}
63
      />
64
    </T.Mesh>
65
  {/key}
66

67
  <!-- Centered UI Text -->
68
  {#if mainUiTexts?.text}
69
    <Text
70
      font="/fonts/beefd.ttf"
71
      rotation.x={MathUtils.DEG2RAD * -90}
72
      anchorX="50%"
73
      anchorY="50%"
74
      textAlign="center"
75
      fontSize={0.4}
76
      lineHeight={2}
77
      color={game.baseColor}
78
      position.y={1}
79
      text={mainUiTexts?.text}
80
    />
81
  {/if}
82
</T.Group>
83

84
<!-- LEVEL (left column) -->
85
<Text
86
  font="/fonts/beefd.ttf"
87
  rotation.x={-90 * MathUtils.DEG2RAD}
88
  anchorX="50%"
89
  anchorY="50%"
90
  textAlign="center"
91
  fontSize={0.3}
92
  color={game.baseColor}
93
  position={[-4.56, 1, -3.4]}
94
  text="LVL"
95
/>
96
<Text
97
  rotation.x={-90 * MathUtils.DEG2RAD}
98
  anchorX="50%"
99
  anchorY="0%"
100
  textAlign="center"
101
  font="/fonts/beefd.ttf"
102
  lineHeight={1.4}
103
  fontSize={0.7}
104
  color={game.baseColor}
105
  position={[-4.56, 1, -3]}
106
  text={(game.levelIndex + 1).toString()}
107
/>
108

109
<!-- SCORE (right column) -->
110
<Text
111
  rotation.x={-90 * MathUtils.DEG2RAD}
112
  anchorX="50%"
113
  anchorY="50%"
114
  textAlign="center"
115
  fontSize={0.3}
116
  font="/fonts/beefd.ttf"
117
  color={game.baseColor}
118
  position={[4.56, 1, -3.4]}
119
  text="SCR"
120
/>
121
<Text
122
  rotation.x={-90 * MathUtils.DEG2RAD}
123
  anchorX="50%"
124
  anchorY="0%"
125
  lineHeight={1.4}
126
  font="/fonts/beefd.ttf"
127
  textAlign="center"
128
  fontSize={0.7}
129
  color={game.baseColor}
130
  position={[4.56, 1, -3]}
131
  text={game.score.toString()}
132
/>

1
import { Color, PerspectiveCamera, Scene, Texture } from 'three'
2
import { levels } from './scenes/levels'
3
import type { RigidBody } from '@dimforge/rapier3d-compat'
4
import { Sound } from './sound'
5

6
type GameStates =
7
  | 'off'
8
  | 'intro'
9
  | 'await-intro-skip'
10
  | 'menu'
11
  | 'game-over'
12
  | 'await-ball-spawn'
13
  | 'playing'
14
  | 'level-loading'
15
  | 'level-complete'
16
  | 'outro'
17

18
class Game {
19
  state = $state<GameStates>('off')
20
  sound = new Sound()
21
  levelIndex = $state(0)
22
  score = $state(0)
23
  gameOver = $state(false)
24
  playerPosition = $state(0)
25
  ballPosition = $state({
26
    x: 0,
27
    z: 0
28
  })
29
  baseColor = $derived.by(() => {
30
    if (this.state == 'outro') return 'green'
31
    return 'red'
32
  })
33
  muted = $state(false)
34
  blinkClock = $state<0 | 1>(0)
35
  arcadeMachineScene = $state<Scene>()
36
  averageScreenColor = $state(new Color('black'))
37
  gameScene = $state<Scene>()
38
  gameCamera = $state<PerspectiveCamera>()
39
  gameTexture = $state<Texture>()
40
  ballRigidBody = $state<RigidBody>()
41
  debug = $state(false)
42
  orbitControls = $state(false)
43
  restart() {
44
    this.reset()
45
    this.state = 'menu'
46
  }
47
  reset() {
48
    this.state = 'intro'
49
    this.levelIndex = 0
50
    this.gameOver = false
51
    this.score = 0
52
    this.playerPosition = 0
53
    this.ballPosition = {
54
      x: 0,
55
      z: 0
56
    }
57
  }
58
  nextLevel() {
59
    if (this.levelIndex < levels.length - 1) {
60
      this.levelIndex += 1
61
      this.state = 'level-loading'
62
    } else {
63
      this.state = 'outro'
64
    }
65
  }
66

67
  switchOff() {
68
    this.reset()
69
    this.state = 'off'
70
  }
71

72
  /**
73
   * Optionally resets the game and starts it again
74
   */
75
  startGame() {
76
    this.state = 'level-loading'
77
  }
78
}
79

80
export const game = new Game()
81

82
export const debugValue = $state(0.5)

1
<script lang="ts">
2
  import { useTask, useThrelte } from '@threlte/core'
3
  import { useFBO } from '@threlte/extras'
4
  import type { HSL } from 'three'
5
  import { NearestFilter } from 'three'
6
  import { game } from './Game.svelte'
7

8
  const { renderer } = useThrelte()
9

10
  const textureWidth = 300
11
  const textureHeight = Math.round((textureWidth * 3) / 4)
12

13
  const gameRenderTarget = useFBO({
14
    size: {
15
      width: textureWidth,
16
      height: textureHeight
17
    },
18
    minFilter: NearestFilter,
19
    magFilter: NearestFilter
20
  })
21

22
  game.gameTexture = gameRenderTarget.texture
23

24
  const pixels = new Uint8Array(textureWidth * textureHeight * 4)
25

26
  const hsl: HSL = { h: 0, s: 0, l: 0 }
27

28
  const sampleEveryXPixel = 2
29
  const sampleCount = (textureWidth * textureHeight) / sampleEveryXPixel
30

31
  const samplePixels = () => {
32
    let r = 0
33
    let g = 0
34
    let b = 0
35

36
    for (let index = 0; index < pixels.length; index += sampleEveryXPixel * 4) {
37
      r += pixels[index]!
38
      g += pixels[index + 1]!
39
      b += pixels[index + 2]!
40
    }
41

42
    r = r / sampleCount
43
    g = g / sampleCount
44
    b = b / sampleCount
45

46
    game.averageScreenColor.setRGB(r / 255, g / 255, b / 255)
47
    game.averageScreenColor.getHSL(hsl)
48
    hsl.s = Math.max(0.4, hsl.s)
49
    game.averageScreenColor.setHSL(hsl.h, hsl.s, hsl.l)
50
  }
51

52
  let frame = 0
53
  let renderEvery = 2
54
  useTask(() => {
55
    frame += 1
56
    if (!game.gameScene || !game.gameCamera || frame % renderEvery !== 0) return
57

58
    const lastRenderTarget = renderer.getRenderTarget()
59
    renderer.setRenderTarget(gameRenderTarget)
60
    renderer.clear()
61
    renderer.render(game.gameScene, game.gameCamera)
62
    const context = renderer.getContext()
63
    context.readPixels(
64
      0,
65
      0,
66
      textureWidth,
67
      textureHeight,
68
      context.RGBA,
69
      context.UNSIGNED_BYTE,
70
      pixels
71
    )
72
    samplePixels()
73
    renderer.setRenderTarget(lastRenderTarget)
74
  })
75
</script>

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { Tween } from 'svelte/motion'
4
  import { BackSide, Color, MathUtils } from 'three'
5
  import Arena from './objects/Arena.svelte'
6
  import Ball from './objects/Ball/Ball.svelte'
7
  import Renderer from './Renderer.svelte'
8
  import Intro from './scenes/Intro.svelte'
9
  import Level from './scenes/Level.svelte'
10
  import Outro from './scenes/Outro.svelte'
11
  import Player from './objects/Player.svelte'
12
  import { game } from './Game.svelte'
13
  import GUI from './GUI.svelte'
14

15
  const onkeypress = (e: KeyboardEvent) => {
16
    if (e.key === 'd') {
17
      game.debug = !game.debug
18
    }
19
    if (e.key === 'o') {
20
      game.orbitControls = !game.orbitControls
21
    }
22
    if (e.key !== ' ' || game.state === 'level-loading') return
23
    e.preventDefault()
24

25
    if (game.state === 'await-intro-skip') {
26
      game.startGame()
27
    } else if (game.state === 'game-over') {
28
      game.restart()
29
    } else if (game.state === 'menu') {
30
      game.startGame()
31
    } else if (game.state === 'level-complete') {
32
      game.nextLevel()
33
    } else if (game.state === 'await-ball-spawn') {
34
      game.state = 'playing'
35
    } else if (game.state === 'outro') {
36
      game.reset()
37
    }
38
  }
39

40
  let showLevel = $derived(
41
    game.state === 'level-loading' ||
42
      game.state === 'level-complete' ||
43
      game.state === 'playing' ||
44
      game.state === 'await-ball-spawn' ||
45
      game.state === 'game-over'
46
  )
47

48
  let showIntro = $derived(game.state === 'intro' || game.state === 'await-intro-skip')
49
  let showOutro = $derived(game.state === 'outro')
50

51
  let machineIsOff = $derived(game.state === 'off' ? true : false)
52
  let backgroundColor = $derived(machineIsOff ? 'black' : '#08060a')
53

54
  const tweenedBackgroundColor = new Tween(new Color('black'), {
55
    duration: 1e3
56
  })
57
  $effect(() => {
58
    tweenedBackgroundColor.set(new Color(backgroundColor))
59
  })
60
</script>
61

62
<svelte:window {onkeypress} />
63

64
<Renderer />
65

66
<T.Scene bind:ref={game.gameScene}>
67
  <T.Mesh>
68
    <T.SphereGeometry args={[50, 32, 32]} />
69
    <T.MeshBasicMaterial
70
      side={BackSide}
71
      color={tweenedBackgroundColor.current}
72
    />
73
  </T.Mesh>
74

75
  <T.PerspectiveCamera
76
    bind:ref={game.gameCamera}
77
    manual
78
    args={[50, 4 / 3, 0.1, 100]}
79
    position={[0, 10, 0]}
80
    rotation.x={-90 * MathUtils.DEG2RAD}
81
  />
82

83
  <T.AmbientLight intensity={0.3} />
84

85
  <T.DirectionalLight position={[4, 10, 2]} />
86

87
  {#if showIntro}
88
    <Intro />
89
  {:else if showOutro}
90
    <Outro />
91
  {:else if game.state !== 'off'}
92
    <Ball />
93
    <Arena />
94
    <Player />
95
    {#if showLevel}
96
      {#key game.levelIndex}
97
        <Level />
98
      {/key}
99
    {/if}
100
    <GUI />
101
  {/if}
102
</T.Scene>

1
export const arenaHeight = 8
2
export const arenaWidth = 8
3
export const arenaDepth = 1
4
export const arenaBorderWidth = 0.2
5

6
export const playerToBorderDistance = 0.5
7

8
export const playerHeight = 0.2
9
export const playerWidth = 2
10
export const playerDepth = 1
11

12
export const playerSpeed = 0.34
13

14
export const blockGap = 0.1

1
import type { CollisionEnterEvent } from '@threlte/rapier'
2
import { Tween } from 'svelte/motion'
3
import { cubicOut } from 'svelte/easing'
4
import { game } from '../Game.svelte'
5

6
export const useArenaCollisionEnterEvent = () => {
7
  const opacity = new Tween(0.05, {
8
    easing: cubicOut
9
  })
10

11
  const onCollision: CollisionEnterEvent = (event) => {
12
    if (!event.targetRigidBody || event.targetRigidBody?.handle !== game.ballRigidBody?.handle) {
13
      return
14
    }
15
    opacity.set(0.7, {
16
      duration: 0
17
    })
18
    opacity.set(0.05, {
19
      duration: 500
20
    })
21
  }
22

23
  return {
24
    onCollision,
25
    opacity
26
  }
27
}

1
import { onDestroy } from 'svelte'
2

3
export const useTimeout = () => {
4
  const timeoutHandlers = new Set<ReturnType<typeof setTimeout>>()
5

6
  const timeout = (callback: () => void, ms: number) => {
7
    const handler = setTimeout(callback, ms)
8
    timeoutHandlers.add(handler)
9
  }
10

11
  onDestroy(() => {
12
    timeoutHandlers.forEach((handler) => clearTimeout(handler))
13
  })
14

15
  return {
16
    timeout
17
  }
18
}

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { Collider } from '@threlte/rapier'
4
  import { DEG2RAD } from 'three/src/math/MathUtils.js'
5
  import { arenaDepth, arenaHeight, arenaWidth } from '../config'
6
  import { useArenaCollisionEnterEvent } from '../hooks/useArenaCollider'
7

8
  const colliderWidth = 10
9

10
  const sideGridOpacity = 0.7
11

12
  const { onCollision: onTopCollision, opacity: topOpacity } = useArenaCollisionEnterEvent()
13
  const { onCollision: onLeftCollision, opacity: leftOpacity } = useArenaCollisionEnterEvent()
14
  const { onCollision: onRightCollision, opacity: rightOpacity } = useArenaCollisionEnterEvent()
15
</script>
16

17
<!-- BACKGROUND GRID -->
18
<T.CustomGridHelper
19
  args={[arenaWidth, arenaWidth, arenaHeight, arenaWidth]}
20
  position.y={-0.5}
21
>
22
  <T.LineBasicMaterial
23
    color="green"
24
    transparent
25
    opacity={0.1}
26
  />
27
</T.CustomGridHelper>
28

29
<!-- LEFT GRID -->
30
<T.CustomGridHelper
31
  args={[arenaDepth, arenaDepth, arenaHeight, arenaHeight]}
32
  rotation.z={90 * DEG2RAD}
33
  position.x={(arenaWidth / 2) * -1}
34
>
35
  <T.LineBasicMaterial
36
    color="green"
37
    transparent
38
    opacity={sideGridOpacity}
39
  />
40

41
  <T.Mesh rotation.x={90 * DEG2RAD}>
42
    <T.PlaneGeometry args={[arenaDepth, arenaHeight]} />
43
    <T.MeshBasicMaterial
44
      color="green"
45
      transparent
46
      opacity={leftOpacity.current}
47
    />
48
  </T.Mesh>
49
</T.CustomGridHelper>
50

51
<!-- RIGHT GRID -->
52
<T.CustomGridHelper
53
  args={[arenaDepth, arenaDepth, arenaHeight, arenaHeight]}
54
  rotation.z={90 * DEG2RAD}
55
  position.x={arenaWidth / 2}
56
>
57
  <T.LineBasicMaterial
58
    color="green"
59
    transparent
60
    opacity={sideGridOpacity}
61
  />
62

63
  <T.Mesh rotation.x={-90 * DEG2RAD}>
64
    <T.PlaneGeometry args={[arenaDepth, arenaHeight]} />
65
    <T.MeshBasicMaterial
66
      color="green"
67
      transparent
68
      opacity={rightOpacity.current}
69
    />
70
  </T.Mesh>
71
</T.CustomGridHelper>
72

73
<!-- TOP GRID -->
74
<T.CustomGridHelper
75
  args={[arenaDepth, arenaDepth, arenaHeight, arenaHeight]}
76
  rotation.y={90 * DEG2RAD}
77
  rotation.x={90 * DEG2RAD}
78
  position.z={(arenaHeight / 2) * -1}
79
>
80
  <T.LineBasicMaterial
81
    color="green"
82
    transparent
83
    opacity={sideGridOpacity}
84
  />
85

86
  <T.Mesh rotation.x={-90 * DEG2RAD}>
87
    <T.PlaneGeometry args={[arenaDepth, arenaHeight]} />
88
    <T.MeshBasicMaterial
89
      color="green"
90
      transparent
91
      opacity={topOpacity.current}
92
    />
93
  </T.Mesh>
94
</T.CustomGridHelper>
95

96
<!-- LEFT COLLIDER -->
97
<T.Group position={[(colliderWidth / 2 + arenaWidth / 2) * -1, 0, 0]}>
98
  <Collider
99
    oncollisionenter={onLeftCollision}
100
    shape="cuboid"
101
    args={[colliderWidth / 2, 1 / 2, arenaHeight / 2]}
102
  />
103
</T.Group>
104

105
<!-- RIGHT COLLIDER -->
106
<T.Group position={[colliderWidth / 2 + arenaWidth / 2, 0, 0]}>
107
  <Collider
108
    oncollisionenter={onRightCollision}
109
    shape="cuboid"
110
    args={[colliderWidth / 2, 1 / 2, arenaHeight / 2]}
111
  />
112
</T.Group>
113

114
<!-- TOP COLLIDER -->
115
<T.Group position={[0, 0, (colliderWidth / 2 + arenaHeight / 2) * -1]}>
116
  <Collider
117
    oncollisionenter={onTopCollision}
118
    shape="cuboid"
119
    args={[(colliderWidth * 2 + arenaWidth) / 2, 1 / 2, colliderWidth / 2]}
120
  />
121
</T.Group>
122

123
<!-- BOTTOM COLLIDER (acts as the game over zone sensor) -->
124
<T.Group position={[0, 0, colliderWidth / 2 + arenaHeight / 2]}>
125
  <Collider
126
    sensor
127
    shape="cuboid"
128
    args={[(colliderWidth * 2 + arenaWidth) / 2, 1 / 2, colliderWidth / 2]}
129
  />
130
</T.Group>

1
<script lang="ts">
2
  import { game } from '../../Game.svelte'
3
  import BallOut from './BallOut.svelte'
4
  import DynamicBall from './DynamicBall.svelte'
5
  import StaticBall from './StaticBall.svelte'
6
</script>
7

8
{#if game.state === 'playing'}
9
  <DynamicBall startAtPosX={game.playerPosition} />
10
{:else if game.state === 'game-over'}
11
  <BallOut />
12
{:else}
13
  <StaticBall />
14
{/if}

1
<script>
2
  import { T } from '@threlte/core'
3
  import { MeshBasicMaterial } from 'three'
4
  import { BoxGeometry } from 'three'
5
  import { Mesh } from 'three'
6
  import { Group } from 'three'
7
  import { DEG2RAD } from 'three/src/math/MathUtils.js'
8
  import { useTimeout } from '../../hooks/useTimeout'
9
  import { game } from '../../Game.svelte'
10

11
  const geometry = new BoxGeometry(1, 0.01, 0.1)
12
  const material = new MeshBasicMaterial({
13
    color: 'red'
14
  })
15

16
  const { timeout } = useTimeout()
17

18
  let noBlink = false
19
  timeout(() => {
20
    noBlink = true
21
  }, 1e3)
22
</script>
23

24
<T.Group
25
  visible={!game.blinkClock || noBlink}
26
  position.z={game.ballPosition.z}
27
  position.x={game.ballPosition.x}
28
  rotation.y={DEG2RAD * 45}
29
>
30
  <T.Mesh>
31
    <T is={geometry} />
32
    <T is={material} />
33
  </T.Mesh>
34

35
  <T.Mesh rotation.y={DEG2RAD * 90}>
36
    <T is={geometry} />
37
    <T is={material} />
38
  </T.Mesh>
39
</T.Group>

1
<script lang="ts">
2
  import {
3
    CoefficientCombineRule,
4
    type RigidBody as RapierRigidBody
5
  } from '@dimforge/rapier3d-compat'
6
  import { T, useTask } from '@threlte/core'
7
  import { AutoColliders, RigidBody } from '@threlte/rapier'
8
  import { arenaHeight, playerHeight, playerToBorderDistance } from '../../config'
9
  import { game } from '../../Game.svelte'
10
  import { ballGeometry, ballMaterial } from './common'
11
  import { onMount } from 'svelte'
12

13
  type Props = {
14
    startAtPosX: number
15
  }
16
  let { startAtPosX }: Props = $props()
17

18
  let posX = $state(0)
19
  let rigidBody: RapierRigidBody | undefined = $state()
20

21
  const map = (value: number, inMin: number, inMax: number, outMin: number, outMax: number) => {
22
    return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
23
  }
24

25
  const ballSpeed = $derived.by(() => {
26
    return map(game.levelIndex, 0, 9, 0.1, 0.3)
27
  })
28

29
  let ballIsSpawned = false
30
  const spawnBall = () => {
31
    if (!rigidBody) return
32
    ballIsSpawned = true
33
    const randomSign = Math.random() > 0.5 ? 1 : -1
34
    const randomX = (randomSign * Math.random() * ballSpeed) / 2
35
    rigidBody.applyImpulse({ x: randomX, y: 0, z: -ballSpeed }, true)
36
  }
37

38
  const startAtPosZ = arenaHeight / 2 - playerHeight - playerToBorderDistance * 2
39

40
  const onSensorEnter = () => {
41
    if (game.state === 'playing') {
42
      game.state = 'game-over'
43
    }
44
  }
45

46
  useTask(() => {
47
    if (!ballIsSpawned && rigidBody) {
48
      spawnBall()
49
      stop()
50
    }
51
    const rbTranslation = rigidBody?.translation()
52
    game.ballPosition = {
53
      x: rbTranslation?.x ?? 0,
54
      z: rbTranslation?.z ?? 0
55
    }
56
  })
57
  $effect(() => {
58
    if (rigidBody) game.ballRigidBody = rigidBody
59
  })
60
  onMount(() => {
61
    posX = startAtPosX
62
  })
63
</script>
64

65
<T.Group position={[posX, 0, startAtPosZ]}>
66
  <RigidBody
67
    bind:rigidBody
68
    type={'dynamic'}
69
    onsensorenter={onSensorEnter}
70
    enabledTranslations={[true, false, true]}
71
  >
72
    <AutoColliders
73
      shape="ball"
74
      mass={1}
75
      friction={0}
76
      restitution={1}
77
      restitutionCombineRule={CoefficientCombineRule.Max}
78
      frictionCombineRule={CoefficientCombineRule.Min}
79
    >
80
      <T.Mesh>
81
        <T is={ballGeometry} />
82
        <T is={ballMaterial} />
83
      </T.Mesh>
84
    </AutoColliders>
85
  </RigidBody>
86
</T.Group>

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { arenaHeight, playerHeight, playerToBorderDistance } from '../../config'
4
  import { game } from '../../Game.svelte'
5
  import { ballGeometry, ballMaterial } from './common'
6

7
  const startAtPosZ = arenaHeight / 2 - playerHeight - playerToBorderDistance * 2
8

9
  let usePreviousBallPosition = $derived(
10
    game.state === 'game-over' || game.state === 'level-complete'
11
  )
12
  let combinedPosZ = $derived(usePreviousBallPosition ? game.ballPosition.z : startAtPosZ)
13
  let combinedPosX = $derived(usePreviousBallPosition ? game.ballPosition.x : game.playerPosition)
14
</script>
15

16
<T.Mesh
17
  position.z={combinedPosZ}
18
  position.x={combinedPosX}
19
>
20
  <T is={ballGeometry} />
21
  <T is={ballMaterial} />
22
</T.Mesh>

1
import { MeshBasicMaterial, SphereGeometry } from 'three'
2

3
export const ballMaterial = new MeshBasicMaterial({
4
  color: 'blue'
5
})
6

7
export const ballGeometry = new SphereGeometry(0.2)

1
<script lang="ts">
2
  import type { BlockData } from '../objects/types'
3
  import { T } from '@threlte/core'
4
  import { Edges } from '@threlte/extras'
5
  import { Collider, RigidBody } from '@threlte/rapier'
6
  import { cubicIn } from 'svelte/easing'
7
  import { Tween } from 'svelte/motion'
8
  import { clamp } from 'three/src/math/MathUtils.js'
9
  import { game } from '../Game.svelte'
10

11
  type Props = {
12
    position: BlockData['position']
13
    size: BlockData['size']
14
    hit: BlockData['hit']
15
    freeze: BlockData['freeze']
16
    staticColors: BlockData['staticColors']
17
    blinkingColors: BlockData['blinkingColors']
18
    onHit: () => void
19
  }
20
  let { position, size, hit, freeze, staticColors, blinkingColors, onHit }: Props = $props()
21

22
  const scale = new Tween(0)
23
  scale.set(1, {
24
    easing: cubicIn
25
  })
26

27
  let innerColor = $derived(
28
    blinkingColors
29
      ? game.blinkClock === 0
30
        ? blinkingColors.innerA
31
        : blinkingColors.innerB
32
      : staticColors.inner
33
  )
34

35
  let outerColor = $derived(
36
    blinkingColors
37
      ? game.blinkClock === 0
38
        ? blinkingColors.outerA
39
        : blinkingColors.outerB
40
      : staticColors.outer
41
  )
42
</script>
43

44
<T.Group
45
  position.x={position.x}
46
  position.z={position.z}
47
>
48
  <RigidBody
49
    type={!hit || freeze ? 'fixed' : 'dynamic'}
50
    canSleep={false}
51
    dominance={hit ? -1 : 1}
52
    enabledTranslations={[true, false, true]}
53
  >
54
    <Collider
55
      shape="cuboid"
56
      args={[size / 2, 1 / 2, size / 2]}
57
      oncontact={(e) => {
58
        if (e.totalForceMagnitude > 2000 || e.totalForceMagnitude < 300) return
59
        const volume = clamp(Math.max(e.totalForceMagnitude, 0) / 2000, 0, 1)
60
        game.sound.playFromGroup('bounce', {
61
          volume
62
        })
63
      }}
64
      oncollisionexit={() => {
65
        if (!hit) {
66
          onHit?.()
67
        }
68
      }}
69
      mass={1}
70
    >
71
      <T.Mesh scale={scale.current}>
72
        <T.BoxGeometry args={[size, 1, size]} />
73
        <T.MeshStandardMaterial
74
          color={innerColor}
75
          transparent
76
          opacity={0.6}
77
        />
78
        <Edges
79
          color={outerColor}
80
          scale={1.01}
81
        />
82
      </T.Mesh>
83
    </Collider>
84
  </RigidBody>
85
</T.Group>

1
import {
2
  BufferGeometry,
3
  Color,
4
  Float32BufferAttribute,
5
  LineBasicMaterial,
6
  LineSegments
7
} from 'three'
8

9
export class CustomGridHelper extends LineSegments {
10
  override type = 'GridHelper'
11
  constructor(
12
    width = 10,
13
    widthDivisions = 10,
14
    height = 10,
15
    heightDivisions = 10,
16
    color = 0x444444
17
  ) {
18
    const colorObj = new Color(color)
19

20
    const stepWidth = width / widthDivisions
21
    const stepHeigth = height / heightDivisions
22
    const halfSizeHeight = height / 2
23
    const halfSizeWidth = width / 2
24

25
    const vertices = []
26
    const colors: number[] = []
27

28
    for (let i = 0, j = 0, k = -halfSizeHeight; i <= heightDivisions; i++, k += stepHeigth) {
29
      vertices.push(-halfSizeWidth, 0, k, halfSizeWidth, 0, k)
30

31
      colorObj.toArray(colors, j)
32
      j += 3
33

34
      colorObj.toArray(colors, j)
35
      j += 3
36

37
      colorObj.toArray(colors, j)
38
      j += 3
39

40
      colorObj.toArray(colors, j)
41
      j += 3
42
    }
43

44
    for (let i = 0, j = 0, k = -halfSizeWidth; i <= widthDivisions; i++, k += stepWidth) {
45
      vertices.push(k, 0, -halfSizeHeight, k, 0, halfSizeHeight)
46

47
      colorObj.toArray(colors, j)
48
      j += 3
49

50
      colorObj.toArray(colors, j)
51
      j += 3
52

53
      colorObj.toArray(colors, j)
54
      j += 3
55

56
      colorObj.toArray(colors, j)
57
      j += 3
58
    }
59

60
    const geometry = new BufferGeometry()
61
    geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3))
62

63
    geometry.setAttribute('color', new Float32BufferAttribute(colors, 3))
64

65
    const material = new LineBasicMaterial({ vertexColors: true, toneMapped: false })
66

67
    super(geometry, material)
68
  }
69

70
  dispose() {
71
    this.geometry.dispose()
72
    ;(this.material as any).dispose()
73
  }
74
}

1
<script lang="ts">
2
  import type { Collider } from '@dimforge/rapier3d-compat'
3
  import { T, useTask } from '@threlte/core'
4
  import { Edges, useGltf } from '@threlte/extras'
5
  import { AutoColliders } from '@threlte/rapier'
6
  import { type Mesh, MathUtils } from 'three'
7
  import { arenaHeight, arenaWidth, playerHeight, playerSpeed, playerWidth } from '../config'
8
  import { game } from '../Game.svelte'
9

10
  let positionZ = $derived(arenaHeight / 2 - playerHeight)
11
  let positionX = $state(0)
12

13
  let leftPressed = false
14
  let rightPressed = false
15

16
  // 0.12 is a magic number that makes the player barely touch the border
17
  let posXMax = arenaWidth / 2 - playerWidth / 2 - 0.12
18
  let playerCanMove = $derived(
19
    game.state === 'playing' || game.state === 'await-ball-spawn' || game.state === 'level-loading'
20
  )
21
  let centerPlayer = $derived(game.state === 'menu' || game.state === 'level-loading')
22

23
  useTask((delta) => {
24
    if (!playerCanMove) {
25
      if (centerPlayer) {
26
        positionX = 0
27
      } else {
28
        positionX = positionX
29
      }
30
      return
31
    }
32
    if (!leftPressed && !rightPressed) return
33
    if (leftPressed && rightPressed) return
34
    if (leftPressed) {
35
      positionX = Math.max(positionX - (playerSpeed * delta * 60) / 2, -posXMax)
36
    }
37
    if (rightPressed) {
38
      positionX = Math.min(positionX + (playerSpeed * delta * 60) / 2, posXMax)
39
    }
40
  })
41

42
  $effect(() => {
43
    game.playerPosition = positionX
44
  })
45

46
  const onkeyup = (e: KeyboardEvent) => {
47
    if (e.key === 'ArrowLeft') {
48
      e.preventDefault()
49
      leftPressed = false
50
    } else if (e.key === 'ArrowRight') {
51
      e.preventDefault()
52
      rightPressed = false
53
    }
54
  }
55

56
  const onkeydown = (e: KeyboardEvent) => {
57
    if (e.key === 'ArrowLeft') {
58
      e.preventDefault()
59
      leftPressed = true
60
    } else if (e.key === 'ArrowRight') {
61
      e.preventDefault()
62
      rightPressed = true
63
    }
64
  }
65

66
  const gltf = useGltf<{
67
    nodes: { Player: Mesh }
68
    materials: Record<string, never>
69
  }>('/models/ball-game/player/player-simple.glb')
70

71
  let colliders = $state<Collider[]>([])
72

73
  useTask(() => {
74
    if (colliders.length) {
75
      const collider = colliders[0]!
76
      collider.setTranslation({ x: positionX, y: 0, z: positionZ })
77
    }
78
  })
79
</script>
80

81
<svelte:window
82
  {onkeydown}
83
  {onkeyup}
84
/>
85

86
{#if $gltf?.nodes.Player}
87
  <T.Group>
88
    <AutoColliders
89
      shape="convexHull"
90
      bind:colliders
91
    >
92
      <T.Mesh
93
        position.z={positionZ}
94
        position.x={positionX}
95
        rotation.x={MathUtils.DEG2RAD * -90}
96
        rotation.y={MathUtils.DEG2RAD * 90}
97
        scale.x={0.5}
98
        scale.y={0.3}
99
      >
100
        <T is={$gltf.nodes.Player.geometry} />
101
        <T.MeshStandardMaterial color="blue" />
102

103
        <Edges
104
          scale={[1, 1.1, 1.1]}
105
          thresholdAngle={10}
106
          color={game.baseColor}
107
        />
108
      </T.Mesh>
109
    </AutoColliders>
110
  </T.Group>
111
{/if}

1
<script lang="ts">
2
  import { T, useTask } from '@threlte/core'
3
  import { Edges } from '@threlte/extras'
4
  import { BoxGeometry, MeshBasicMaterial, MathUtils } from 'three'
5
  import { game } from '../Game.svelte'
6

7
  type Props = {
8
    scale?: number
9
    positionZ?: number
10
    direction?: 1 | -1
11
  }
12
  let { scale = 1, positionZ = 0, direction = 1 }: Props = $props()
13

14
  const geometry = new BoxGeometry(1, 1, 1)
15
  const material = new MeshBasicMaterial({
16
    transparent: true,
17
    opacity: 0
18
  })
19

20
  let rotationY = $state(0)
21

22
  useTask((delta) => {
23
    rotationY += delta * direction
24
  })
25
</script>
26

27
<T.Group
28
  rotation.x={-65 * MathUtils.DEG2RAD}
29
  rotation.y={rotationY}
30
  position.z={positionZ}
31
  {scale}
32
>
33
  <T.Mesh>
34
    <T is={geometry} />
35
    <T is={material} />
36
    <Edges color={game.baseColor} />
37
  </T.Mesh>
38

39
  <T.Mesh position.x={1}>
40
    <T is={geometry} />
41
    <T is={material} />
42
    <Edges color={game.baseColor} />
43
  </T.Mesh>
44

45
  <T.Mesh position.x={-1}>
46
    <T is={geometry} />
47
    <T is={material} />
48
    <Edges color={game.baseColor} />
49
  </T.Mesh>
50

51
  <T.Mesh position.z={1}>
52
    <T is={geometry} />
53
    <T is={material} />
54
    <Edges color={game.baseColor} />
55
  </T.Mesh>
56

57
  <T.Mesh position.z={-1}>
58
    <T is={geometry} />
59
    <T is={material} />
60
    <Edges color={game.baseColor} />
61
  </T.Mesh>
62

63
  <T.Mesh position.y={1}>
64
    <T is={geometry} />
65
    <T is={material} />
66
    <Edges color={game.baseColor} />
67
  </T.Mesh>
68
</T.Group>

1
export type BlockData = {
2
  position: {
3
    x: number
4
    z: number
5
  }
6
  staticColors: {
7
    inner: string
8
    outer: string
9
  }
10
  blinkingColors:
11
    | {
12
        innerA: string
13
        innerB: string
14
        outerA: string
15
        outerB: string
16
      }
17
    | undefined
18
  hit: boolean
19
  size: number
20
  freeze: boolean
21
}

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { Edges, Text } from '@threlte/extras'
4
  import { onDestroy } from 'svelte'
5
  import { Tween } from 'svelte/motion'
6
  import { DEG2RAD } from 'three/src/math/MathUtils.js'
7
  import type { ArcadeAudio } from '../sound'
8
  import { useTimeout } from '../hooks/useTimeout'
9
  import { game } from '../Game.svelte'
10
  import ThrelteLogo from '../objects/ThrelteLogo.svelte'
11

12
  const { timeout } = useTimeout()
13
  let audio: ArcadeAudio | undefined = undefined
14
  let direction = $state<1 | -1>(1)
15

16
  const logoScale = new Tween(0)
17

18
  const showLogoAfter = 2e3
19
  const showThrelteAfter = showLogoAfter + 1e3
20
  const showPressSpaceToStartAfter = showThrelteAfter + 2e3
21

22
  timeout(() => {
23
    audio = game.sound.play('levelSlow', {
24
      loop: true,
25
      volume: 1
26
    })
27
    logoScale.set(1)
28
    game.state = 'await-intro-skip'
29
  }, showLogoAfter)
30

31
  const textScale = new Tween(0)
32
  const textRotation = new Tween(10)
33
  timeout(() => {
34
    textScale.set(1)
35
    textRotation.set(0)
36
  }, showThrelteAfter)
37

38
  let showPressSpaceToStart = $state(false)
39
  let blinkClock: 0 | 1 = $state(0)
40

41
  timeout(() => {
42
    showPressSpaceToStart = true
43
  }, showPressSpaceToStartAfter)
44

45
  let intervalHandler = window.setInterval(() => {
46
    if (!showPressSpaceToStart) return
47
    blinkClock = blinkClock ? 0 : 1
48
  }, 500)
49
  onDestroy(() => {
50
    clearInterval(intervalHandler)
51
  })
52

53
  const onkeydown = (e: KeyboardEvent) => {
54
    if (e.key === 'ArrowLeft') {
55
      direction = -1
56
    } else if (e.key === 'ArrowRight') {
57
      direction = 1
58
    }
59
  }
60

61
  onDestroy(() => {
62
    audio?.source.stop()
63
  })
64
</script>
65

66
<svelte:window {onkeydown} />
67

68
<T.Group position.z={-0.35}>
69
  <ThrelteLogo
70
    positionZ={-1.2}
71
    scale={logoScale.current}
72
    {direction}
73
  />
74

75
  <T.Group
76
    scale={textScale.current}
77
    position.z={1.3}
78
    rotation.x={-90 * DEG2RAD}
79
    rotation.z={textRotation.current}
80
  >
81
    <T.Mesh position.y={-0.05}>
82
      <T.PlaneGeometry args={[5.3, 1.8]} />
83
      <T.MeshBasicMaterial
84
        transparent
85
        opacity={0}
86
      />
87
      <Edges color={game.baseColor} />
88
    </T.Mesh>
89
    <Text
90
      font="/fonts/beefd.ttf"
91
      anchorX="50%"
92
      anchorY="50%"
93
      textAlign="center"
94
      fontSize={0.5}
95
      color={game.baseColor}
96
      text={`THRELTE\nMASTER`}
97
    />
98
  </T.Group>
99
</T.Group>
100

101
{#if showPressSpaceToStart}
102
  <T.Group
103
    scale={textScale.current}
104
    position.z={3.3}
105
    rotation.x={-90 * DEG2RAD}
106
    visible={!!blinkClock}
107
  >
108
    <Text
109
      font="/fonts/beefd.ttf"
110
      anchorX="50%"
111
      anchorY="50%"
112
      textAlign="center"
113
      fontSize={0.35}
114
      color={game.baseColor}
115
      text={`PRESS SPACE TO START`}
116
    />
117
  </T.Group>
118
{/if}

1
<script lang="ts">
2
  import { onDestroy } from 'svelte'
3
  import type { ArcadeAudio } from '../sound'
4
  import { arenaBorderWidth, arenaHeight, arenaWidth, blockGap } from '../config'
5
  import { useTimeout } from '../hooks/useTimeout'
6
  import { levels } from './levels'
7
  import { game } from '../Game.svelte'
8
  import Block from '../objects/Block.svelte'
9
  import type { BlockData } from '../objects/types'
10

11
  let blocks = $state<BlockData[]>([])
12

13
  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
14

15
  let bgVolume = 0.6
16

17
  let levelBackgroundAudio: ArcadeAudio | undefined = undefined
18

19
  const map = (value: number, inMin: number, inMax: number, outMin: number, outMax: number) => {
20
    return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
21
  }
22

23
  const playLevelSound = () => {
24
    levelBackgroundAudio = game.sound.play('levelSlow', {
25
      loop: true,
26
      volume: bgVolume,
27
      playbackRate: map(game.levelIndex, 0, levels.length - 1, 1.0, 2)
28
    })
29
  }
30

31
  playLevelSound()
32

33
  onDestroy(() => {
34
    if (levelBackgroundAudio) {
35
      levelBackgroundAudio.source.stop()
36
    }
37
  })
38

39
  let levelStarted = false
40
  const buildBlocks = async () => {
41
    if (game.state !== 'level-loading') return
42
    const { rows, columns } = levels[game.levelIndex]!
43

44
    const blockSize =
45
      (arenaWidth - arenaBorderWidth - ((columns - 1) * blockGap + 2 * blockGap)) / columns
46
    const startAtX = ((arenaWidth - arenaBorderWidth) / 2) * -1 + blockSize / 2
47
    const startAtZ = ((arenaHeight - arenaBorderWidth) / 2) * -1 + blockSize / 2 + blockGap
48

49
    for (let i = 0; i < rows; i++) {
50
      for (let j = 0; j < columns; j++) {
51
        blocks.push({
52
          position: {
53
            x: startAtX + blockGap + j * blockGap + j * blockSize,
54
            z: startAtZ + i * blockGap + i * blockSize
55
          },
56
          hit: false,
57
          size: blockSize,
58
          freeze: false,
59
          staticColors: {
60
            inner: 'blue',
61
            outer: 'red'
62
          },
63
          blinkingColors: undefined
64
        })
65
        blocks = blocks
66
        await wait(16)
67
      }
68
    }
69

70
    levelStarted = true
71
    game.state = 'await-ball-spawn'
72
  }
73

74
  const { timeout } = useTimeout()
75

76
  buildBlocks()
77

78
  const onGameOver = async () => {
79
    if (!levelStarted) return
80
    blocks.forEach((block) => {
81
      block.freeze = true
82
      if (!block.hit) {
83
        block.blinkingColors = {
84
          innerA: 'red',
85
          innerB: 'black',
86
          outerA: 'red',
87
          outerB: 'red'
88
        }
89
      } else {
90
        block.blinkingColors = undefined
91
        block.staticColors = {
92
          inner: 'black',
93
          outer: 'red'
94
        }
95
      }
96
    })
97
    timeout(() => {
98
      blocks.forEach((block) => {
99
        block.blinkingColors = undefined
100
        if (!block.hit) {
101
          block.staticColors = {
102
            inner: 'red',
103
            outer: 'red'
104
          }
105
        } else {
106
          block.staticColors = {
107
            inner: 'black',
108
            outer: 'red'
109
          }
110
        }
111
      })
112
    }, 1e3)
113
    if (levelBackgroundAudio) levelBackgroundAudio.fade(0, 300)
114
    game.sound.play('gameOver2', { volume: 0.5 })?.onEnded()
115
  }
116

117
  const onLevelComplete = async () => {
118
    if (!levelStarted) return
119
    blocks.forEach((block) => {
120
      block.freeze = true
121
      block.blinkingColors = {
122
        innerA: 'black',
123
        innerB: 'green',
124
        outerA: 'white',
125
        outerB: 'white'
126
      }
127
    })
128
    timeout(() => {
129
      blocks.forEach((block) => {
130
        block.staticColors = {
131
          inner: 'green',
132
          outer: 'white'
133
        }
134
        block.blinkingColors = undefined
135
      })
136
    }, 1e3)
137
    if (levelBackgroundAudio) levelBackgroundAudio.fade(0.2, 200)
138
    await game.sound.play('levelComplete')?.onEnded()
139
    if (levelBackgroundAudio) levelBackgroundAudio.fade(bgVolume, 200)
140
  }
141

142
  $effect(() => {
143
    if (game.state === 'game-over') onGameOver()
144
    if (game.state === 'level-complete') onLevelComplete()
145
  })
146

147
  const onHit = (block: BlockData) => {
148
    if (game.state === 'game-over' || game.state === 'level-complete') return
149
    game.score += 1
150
    block.hit = true
151
    block.blinkingColors = undefined
152
    block.staticColors = {
153
      inner: 'yellow',
154
      outer: 'red'
155
    }
156
    if (blocks.every((block) => block.hit)) {
157
      game.state = 'level-complete'
158
    }
159
  }
160
</script>
161

162
{#each blocks as block, index (index)}
163
  <Block
164
    {...block}
165
    onHit={() => {
166
      onHit(block)
167
    }}
168
  />
169
{/each}

1
<script lang="ts">
2
  import { MathUtils } from 'three'
3
  import { T } from '@threlte/core'
4
  import { Edges, Text } from '@threlte/extras'
5
  import { onDestroy } from 'svelte'
6
  import { Tween } from 'svelte/motion'
7
  import type { ArcadeAudio } from '../sound'
8
  import { useTimeout } from '../hooks/useTimeout'
9
  import { game } from '../Game.svelte'
10
  import ThrelteLogo from '../objects/ThrelteLogo.svelte'
11

12
  const { timeout } = useTimeout()
13
  let direction = $state<1 | -1>(1)
14
  const logoScale = new Tween(0)
15
  timeout(() => {
16
    logoScale.set(1)
17
  }, 1.5e3)
18

19
  const textScale = new Tween(0)
20
  const textRotation = new Tween(10)
21

22
  timeout(() => {
23
    textScale.set(1)
24
    textRotation.set(0)
25
  }, 200)
26

27
  let showPressSpaceToStart = $state(false)
28
  let blinkClock = $state<0 | 1>(0)
29

30
  timeout(() => {
31
    showPressSpaceToStart = true
32
  }, 5e3)
33

34
  let intervalHandler = window.setInterval(() => {
35
    if (!showPressSpaceToStart) return
36
    blinkClock = blinkClock ? 0 : 1
37
  }, 500)
38
  onDestroy(() => {
39
    clearInterval(intervalHandler)
40
  })
41

42
  let audio: ArcadeAudio | undefined = undefined
43
  audio = game.sound.play('intro', {
44
    loop: true,
45
    volume: 1
46
  })
47
  onDestroy(() => {
48
    audio?.source.stop()
49
  })
50

51
  const onkeydown = (e: KeyboardEvent) => {
52
    if (e.key === 'ArrowLeft') {
53
      direction = -1
54
    } else if (e.key === 'ArrowRight') {
55
      direction = 1
56
    }
57
  }
58
</script>
59

60
<svelte:window {onkeydown} />
61

62
<T.Group position.z={-0.35}>
63
  <ThrelteLogo
64
    positionZ={-1.2}
65
    {direction}
66
  />
67

68
  <T.Group
69
    scale={textScale.current}
70
    position.z={1.3}
71
    rotation.x={-90 * MathUtils.DEG2RAD}
72
    rotation.z={textRotation}
73
  >
74
    <T.Mesh position.y={-0.05}>
75
      <T.PlaneGeometry args={[11, 2]} />
76
      <T.MeshBasicMaterial
77
        transparent
78
        opacity={0}
79
      />
80
      <Edges color={game.baseColor} />
81
    </T.Mesh>
82
    <Text
83
      font="/fonts/beefd.ttf"
84
      anchorX="50%"
85
      anchorY="50%"
86
      textAlign="center"
87
      fontSize={0.5}
88
      color={game.baseColor}
89
      text={`THRELTE MASTER\nSCORE ${game.score}`}
90
    />
91
  </T.Group>
92
</T.Group>
93

94
{#if showPressSpaceToStart}
95
  <T.Group
96
    scale={textScale.current}
97
    position.z={3.3}
98
    rotation.x={-90 * MathUtils.DEG2RAD}
99
    visible={!!blinkClock}
100
  >
101
    <Text
102
      font="/fonts/beefd.ttf"
103
      anchorX="50%"
104
      anchorY="50%"
105
      textAlign="center"
106
      fontSize={0.35}
107
      color={game.baseColor}
108
      text="PRESS SPACE TO RESTART"
109
    />
110
  </T.Group>
111
{/if}

1
export type Level = {
2
  rows: number
3
  columns: number
4
}
5

6
export const levels: Level[] = [
7
  {
8
    rows: 1,
9
    columns: 4
10
  },
11
  {
12
    rows: 1,
13
    columns: 8
14
  },
15
  {
16
    rows: 2,
17
    columns: 4
18
  },
19
  {
20
    rows: 1,
21
    columns: 12
22
  },
23
  {
24
    rows: 2,
25
    columns: 8
26
  },
27
  {
28
    rows: 3,
29
    columns: 6
30
  },
31
  {
32
    rows: 3,
33
    columns: 12
34
  },
35
  {
36
    rows: 4,
37
    columns: 16
38
  },
39
  {
40
    rows: 5,
41
    columns: 12
42
  },
43
  {
44
    rows: 5,
45
    columns: 16
46
  }
47
]

1
import { AudioLoader } from 'three'
2

3
const sounds = {
4
  bounce1: '/audio/ball_bounce_1.mp3',
5
  bounce2: '/audio/ball_bounce_2.mp3',
6
  bounce3: '/audio/ball_bounce_3.mp3',
7
  bounce4: '/audio/ball_bounce_4.mp3',
8
  bounce5: '/audio/ball_bounce_5.mp3',
9
  bounce6: '/audio/ball_bounce_6.mp3',
10
  bounce7: '/audio/ball_bounce_7.mp3',
11
  bounce8: '/audio/ball_bounce_8.mp3',
12
  bounce9: '/audio/ball_bounce_9.mp3',
13
  intro: '/audio/arcade_intro.mp3',
14
  intro2: '/audio/arcade_intro2.m4a',
15
  intro3: '/audio/arcade_intro3.m4a',
16
  levelSlow: '/audio/level_slow.m4a',
17
  levelComplete: '/audio/level_complete.m4a',
18
  gameOver: '/audio/game_over.m4a',
19
  gameOver2: '/audio/game_over2.m4a'
20
} as const
21
type Sounds = keyof typeof sounds
22

23
type Groups = 'bounce'
24

25
type PlayOptions = {
26
  when?: number
27
  loop?: boolean
28
  volume?: number
29
  playbackRate?: number
30
}
31

32
export type ArcadeAudio = {
33
  source: AudioBufferSourceNode
34
  gain: GainNode
35
  fade: (
36
    volume: number,
37
    duration: number,
38
    options?: { type?: 'linear' | 'exponential' }
39
  ) => Promise<void> | undefined
40
  setVolume: (volume: number) => void
41
  onEnded: () => Promise<void>
42
}
43

44
export class Sound {
45
  context: AudioContext | undefined = undefined
46
  globalGainNode: GainNode | undefined = undefined
47
  groups: Record<Groups, Sounds[]> = {
48
    bounce: [
49
      'bounce1',
50
      'bounce2',
51
      'bounce3',
52
      'bounce4',
53
      'bounce5',
54
      'bounce6',
55
      'bounce7',
56
      'bounce8',
57
      'bounce9'
58
    ]
59
  }
60
  audioBuffers: Record<Sounds, AudioBuffer> = {} as Record<Sounds, AudioBuffer>
61
  buffersLoaded = false
62
  debounceInMs = 150
63
  randomLimits: [min: number, max: number] = [-20, 150]
64

65
  audioLoader = new AudioLoader()
66
  lastPlayed: Record<Groups, number> = Object.keys(this.groups).reduce(
67
    (acc, key) => {
68
      acc[key as Groups] = 0
69
      return acc
70
    },
71
    {} as Record<Groups, number>
72
  )
73
  constructor() {
74
    this.context = new AudioContext()
75
    this.globalGainNode = this.context.createGain()
76
    this.globalGainNode.connect(this.context.destination)
77
    this.initAudio()
78
    if (typeof window === 'undefined') return
79
    window.addEventListener('click', () => {
80
      if (this.context) this.context.resume()
81
    })
82
    window.addEventListener('keydown', () => {
83
      if (this.context) this.context.resume()
84
    })
85
  }
86
  async initAudio() {
87
    const promises = Object.entries(sounds).map(async ([sound, url]) => {
88
      if (!this.context) return
89
      const audioBuffer = await this.loadAudioBuffer(url)
90
      this.audioBuffers[sound as Sounds] = audioBuffer
91
    })
92
    await Promise.all(promises)
93
    this.buffersLoaded = true
94
  }
95
  resume() {
96
    if (this.context) this.context.resume()
97
  }
98
  loadAudioBuffer(url: string): Promise<AudioBuffer> {
99
    return new Promise((resolve) => {
100
      this.audioLoader.load(url, (buffer) => {
101
        resolve(buffer)
102
      })
103
    })
104
  }
105
  play(sound: Sounds, options?: PlayOptions): ArcadeAudio | undefined {
106
    if (!this.context || !this.globalGainNode) return
107
    const now = Date.now()
108
    const groupsOfSound = Object.entries(this.groups).filter(([, sounds]) => sounds.includes(sound))
109

110
    const randomDebounce =
111
      this.debounceInMs +
112
      (Math.random() * (this.randomLimits[1] - this.randomLimits[0]) + this.randomLimits[0])
113
    const shouldBeSkipped = groupsOfSound.reduce((shouldBeSkipped, [group]) => {
114
      const lastPlayedTime = this.lastPlayed[group as Groups]
115
      if (now - lastPlayedTime < randomDebounce) return true
116
      return shouldBeSkipped
117
    }, false)
118
    if (shouldBeSkipped) return
119

120
    const buffer = this.audioBuffers[sound]
121
    if (!buffer) return
122
    if (this.context.state === 'suspended' || this.context.state === 'closed') this.context.resume()
123
    const source = this.context.createBufferSource()
124
    source.buffer = buffer
125
    const gainNode = this.context.createGain()
126
    source.connect(gainNode)
127
    gainNode.connect(this.globalGainNode)
128
    let volume = options?.volume ?? 1
129
    volume = volume === 0 ? 0.000000001 : volume
130
    gainNode.gain.value = volume
131
    source.loop = options?.loop ?? false
132
    source.playbackRate.value = options?.playbackRate ?? 1
133
    source.start(options?.when)
134

135
    groupsOfSound.forEach(([group]) => {
136
      this.lastPlayed[group as Groups] = now
137
    })
138

139
    const setVolume = (volume: number) => {
140
      if (!this.context) return
141
      gainNode.gain.cancelScheduledValues(this.context.currentTime)
142
      gainNode.gain.value = volume
143
    }
144

145
    const fade = (
146
      volume: number,
147
      duration: number,
148
      options?: {
149
        type?: 'linear' | 'exponential'
150
      }
151
    ) => {
152
      if (!this.context) return
153
      if (volume === 0) {
154
        volume = 0.000000001
155
      }
156
      gainNode.gain.setValueAtTime(gainNode.gain.value, this.context.currentTime)
157
      if (options?.type === 'exponential') {
158
        gainNode.gain.exponentialRampToValueAtTime(
159
          volume,
160
          this.context.currentTime + duration / 1000
161
        )
162
      } else {
163
        gainNode.gain.exponentialRampToValueAtTime(
164
          volume,
165
          this.context.currentTime + duration / 1000
166
        )
167
      }
168
      return new Promise<void>((resolve) => setTimeout(resolve, duration))
169
    }
170

171
    return {
172
      source,
173
      gain: gainNode,
174
      fade,
175
      setVolume,
176
      onEnded: () => {
177
        return new Promise((resolve) => {
178
          const onEnded = () => {
179
            source.removeEventListener('ended', onEnded)
180
            resolve()
181
          }
182
          source.addEventListener('ended', onEnded)
183
        })
184
      }
185
    }
186
  }
187
  playFromGroup(group: Groups, options?: PlayOptions) {
188
    const sound = this.groups[group][Math.floor(Math.random() * this.groups[group].length)]
189
    const source = this.play(sound!, options)
190
    return source
191
  }
192
  handleMuted(muted: boolean) {
193
    if (!this.globalGainNode) return
194
    if (muted) {
195
      this.globalGainNode.gain.value = 0
196
    } else {
197
      this.resume()
198
      this.globalGainNode.gain.value = 1
199
    }
200
  }
201
}