Add playback mode selection

Author: JanneSaukkio

app/components/result-stage.tsx

@@ -4,6 +4,7 @@ import signals from '@/app/lib/data/signals.json'
 import signalsDlc from '@/app/lib/data/signals-dlc.json'
 import { usePostHog } from 'posthog-js/react'
 import { Song } from '@/app/lib/song'
+import { PlaybackMode } from '@/app/lib/factorio-blueprint-schema'
 
 /**
  * @param text
@@ -29,13 +30,20 @@ const versionOptions: Record<Version, string> = {
   '2SA': 'Factorio 2.x with Space Age DLC',
 }
 
+const playbackModeOptions: Record<PlaybackMode, [string, string]> = {
+  'global': ['Global' ,'The song can be heard everywhere'],
+  'surface': ['Surface', 'The song can be heard on speaker\'s surface'],
+  'local': ['Local', 'The song can be heard within the audible range around the speaker'],
+}
+
 export type ResultStageProps = {
   song: Song
 }
 export const ResultStage = ({ song }: ResultStageProps) => {
   const postHog = usePostHog()
 
   const [targetVersion, setTargetVersion] = useState<Version>('2')
+  const [playbackMode, setPlaybackMode] = useState<PlaybackMode>('global')
   const [copySuccess, setCopySuccess] = useState<boolean>(false)
   const [blueprintString, setBlueprintString] = useState('')
   const [warnings, setWarnings] = useState<string[]>([])
@@ -44,7 +52,7 @@ export const ResultStage = ({ song }: ResultStageProps) => {
     setCopySuccess(false)
     const signalSet = targetVersion === '2SA' ? signalsDlc : signals
 
-    const { blueprint, warnings } = songToFactorio(song, signalSet)
+    const { blueprint, warnings } = songToFactorio(song, signalSet, playbackMode)
     const copyAttempt = await copyToClipboard(blueprint)
     setWarnings(warnings)
     setCopySuccess(copyAttempt)
@@ -53,11 +61,12 @@ export const ResultStage = ({ song }: ResultStageProps) => {
       Title: song.midi.name,
       'Song Settings': song.settings,
       'Factorio Version': targetVersion,
+      'Playback Mode': playbackMode,
       Blueprint: blueprint,
       Warnings: warnings,
       'Clipboard Success': copyAttempt,
     })
-  }, [postHog, song, targetVersion])
+  }, [postHog, song, targetVersion, playbackMode])
 
   return (
     <div className="flex-column items-start gap-4">
@@ -93,6 +102,28 @@ export const ResultStage = ({ song }: ResultStageProps) => {
         </div>
       )}
 
+      <div className="flex-column gap-2">
+        <p>Playback mode:</p>
+        {Object.entries(playbackModeOptions).map(([value, texts]) => (
+          <div className="flex gap-2 ml-4" key={value} title={texts[1]}>
+            <label>
+              <input
+                type="radio"
+                name="playback-mode"
+                onChange={({ target: { value } }) => {
+                  setCopySuccess(false)
+                  setPlaybackMode(value as PlaybackMode)
+                }}
+                value={value}
+                disabled={targetVersion === '1'}
+                checked={value === playbackMode}
+              />
+              {texts[0]}
+            </label>
+          </div>
+        ))}
+      </div>
+
       <div className="flex items-center gap-4">
         <button
           className={`button button-green box-border ${targetVersion === '1' ? 'disabled' : ''}`}

app/lib/blueprint/speaker-section.ts

@@ -19,7 +19,7 @@ export const getSpeakerSection = (
   const en = localEntityNumberToAbsolute(entitiesSoFar)
 
   Object.values(speakers).forEach(
-    ({ instrumentName, volume }, speakerIndex) => {
+    ({ instrumentName, volume, playbackMode }, speakerIndex) => {
       const instrument = getFactorioInstrument(instrumentName)
       const speakerEntity = en(speakerIndex * 2 + 1)
       const speakerCombinatorEntity = en(speakerIndex * 2 + 2)
@@ -49,7 +49,7 @@ export const getSpeakerSection = (
           },
           parameters: {
             playback_volume: instrument.volumeCorrection * volume,
-            playback_mode: 'global',
+            playback_mode: playbackMode,
             allow_polyphony: true,
           },
         },

app/lib/factorio-blueprint-schema.ts

@@ -30,7 +30,7 @@ export type Networks = {
   green: boolean
 }
 
-export type PlaybackMode = 'surface' | 'global'
+export type PlaybackMode = 'local' | 'surface' | 'global'
 
 export type Entity = {
   entity_number: number

app/lib/song-to-factorio.ts

@@ -8,6 +8,7 @@ import { roundToNearestClusterCenter } from '@/app/lib/kmeans'
 import groupBy from 'lodash.groupby'
 import { FactorioInstrumentName } from '@/app/lib/data/factorio-instruments-by-id'
 import { noteToFactorioNote, Song } from '@/app/lib/song'
+import { PlaybackMode } from './factorio-blueprint-schema'
 
 type FactorioNote = number
 type Chord = FactorioNote[]
@@ -22,10 +23,11 @@ export type Speakers = Record<
     chords: Chord[]
     instrumentName: FactorioInstrumentName
     volume: number
+    playbackMode: PlaybackMode
   }
 >
 
-export const songToFactorioData = ({ midi, settings }: Song): Speakers => {
+export const songToFactorioData = ({ midi, settings }: Song, playbackMode: PlaybackMode): Speakers => {
   const instrumentsAfterVelocity: Speakers = {}
 
   for (const trackNumber in midi.tracks) {
@@ -54,6 +56,7 @@ export const songToFactorioData = ({ midi, settings }: Song): Speakers => {
             chords: [],
             instrumentName,
             volume,
+            playbackMode,
           }
         }
 
@@ -83,8 +86,9 @@ export const songToFactorioData = ({ midi, settings }: Song): Speakers => {
 export const songToFactorio = (
   song: Song,
   signals: RawSignal[],
+  playbackMode: PlaybackMode
 ): BlueprintResult => {
-  const instruments = songToFactorioData(song)
+  const instruments = songToFactorioData(song, playbackMode)
 
   type Event = {
     time: number