<Suspense>

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<div class="w-full h-full relative bg-blue-500/20">
  <Canvas>
    <Scene />
  </Canvas>
</div>

<script lang="ts">
  import { T, useThrelte } from '@threlte/core'
  import { Suspense, Text } from '@threlte/extras'
  import { Color } from 'three'
  import Spaceship from './Spaceship.svelte'
  import StarsEmitter from './StarsEmitter.svelte'

  const { size, scene } = useThrelte()

  scene.background = new Color('black')

  let zoom = $size.width / 50
  $: zoom = $size.width / 50
</script>

<T.OrthographicCamera
  position={[-40, 25, 40]}
  makeDefault
  {zoom}
  on:create={({ ref }) => {
    ref.lookAt(0, 0, -8)
  }}
/>

<T.DirectionalLight
  position={[5, 10, 3]}
  intensity={1}
/>

<Suspense final>
  <Text
    position.z={-8}
    slot="fallback"
    text="Loading"
    fontSize={1}
    color="white"
    anchorX="50%"
    anchorY="50%"
    on:create={({ ref }) => {
      ref.lookAt(-40, 25, 40)
    }}
  />

  <Text
    slot="error"
    position.z={-8}
    let:errors
    text={errors.map((e) => e).join(', ')}
    fontSize={1}
    color="white"
    anchorX="50%"
    anchorY="50%"
    on:create={({ ref }) => {
      ref.lookAt(-40, 25, 40)
    }}
  />

  <StarsEmitter />

  <Spaceship
    name="Bob"
    position={[-12, 0, 3]}
  />
  <Spaceship
    name="Challenger"
    position={[10, 5, 6]}
  />
  <Spaceship
    name="Dispatcher"
    position={[8, 3, -23]}
  />
  <Spaceship
    name="Executioner"
    position={[12, -4, 6]}
  />
  <Spaceship
    name="Imperial"
    position={[-1, 0, -21]}
  />
  <Spaceship
    name="Insurgent"
    position={[-13, 1, -21]}
  />
  <Spaceship
    name="Omen"
    position={[-9, -5, 13]}
  />
  <Spaceship
    name="Pancake"
    position={[-9, -3, -9]}
  />
  <Spaceship
    name="Spitfire"
    position={[1, 0, 1]}
  />
  <Spaceship
    name="Striker"
    position={[8, -1, -10]}
  />
  <Spaceship
    name="Zenith"
    position={[-1, 0, 13]}
  />
</Suspense>

<script lang="ts">
  import { T } from '@threlte/core'
  import { Float, useGltf, useSuspense } from '@threlte/extras'
  import type { SpaceshipProps } from './Spaceship.svelte'

  type $$Props = SpaceshipProps

  export let name: $$Props['name']

  const suspend = useSuspense()

  const gltf = suspend(useGltf(`/models/spaceships/${name}.gltf`))
</script>

{#await gltf then { scene }}
  <T.Group {...$$restProps}>
    <Float
      floatIntensity={3}
      speed={3}
    >
      <T is={scene} />
    </Float>
  </T.Group>
{/await}

import type { Props } from '@threlte/core'
import type { SvelteComponentTyped } from 'svelte'
import type { Group } from 'three'

export type SpaceshipProps = Props<Group> & {
  name:
    | 'Bob'
    | 'Challenger'
    | 'Dispatcher'
    | 'Executioner'
    | 'Imperial'
    | 'Insurgent'
    | 'Omen'
    | 'Pancake'
    | 'Spitfire'
    | 'Striker'
    | 'Zenith'
}

export default class Spaceship extends SvelteComponentTyped<SpaceshipProps, {}, {}> {}

<script lang="ts">
  import { useFrame } from '@threlte/core'

  // your script goes here

  import { Instance } from '@threlte/extras'
  import { Color } from 'three'

  let positionX = Math.random() * 100 - 50
  let positionY = Math.random() * 100 - 50
  let positionZ = 100

  const colors = ['#FFF09E', '#B8DFFF', '#CADBFF', '#FFEBBE']

  // random element from array
  const color = new Color(colors[Math.floor(Math.random() * colors.length)])

  useFrame(() => {
    positionZ -= 10
  })
</script>

<Instance
  {color}
  position.x={positionX}
  position.y={positionY}
  position.z={positionZ}
/>

<script lang="ts">
  import { T, useFrame } from '@threlte/core'
  import { InstancedMesh } from '@threlte/extras'
  import Star from './Star.svelte'

  type Star = {
    id: string
    spawnedAtFrame: number
  }

  const makeUniqueId = () => {
    return Math.random().toString(36).substring(2, 9)
  }

  let stars: Star[] = []
  /**
   * spawnRate is the number of stars to spawn per frame
   */
  const spawnRate = 2
  const lifetimeInFrames = 40

  let frame = 0
  useFrame(() => {
    frame += 1
    for (let i = 0; i < spawnRate; i++) {
      stars.push({
        id: makeUniqueId(),
        spawnedAtFrame: frame
      })
    }
    stars.forEach((star) => {
      if (frame - star.spawnedAtFrame > lifetimeInFrames) {
        // remove star from array
        stars.splice(stars.indexOf(star), 1)
      }
    })
    stars = stars
  })
</script>

<InstancedMesh>
  <T.BoxGeometry args={[0.04, 0.04, 30]} />
  <T.MeshBasicMaterial
    color="white"
    transparent
    opacity={0.2}
  />

  {#each stars as star (star.id)}
    <Star />
  {/each}
</InstancedMesh>