✨ new maps

src/components/Audio/Soundboard.vue

@@ -8,17 +8,34 @@
         <Playlist
           v-if="node.type === 'playlist'"
           :node="node"
+          @delete="deleteNode(node)"
         />
         <Sfx 
           v-else-if="node.type === 'sfx'"
           :node="node"
+          @delete="deleteNode(node)"
         />
         <TabSource
           v-else-if="node.type === 'tabSource'"
           :node="node"
+          @delete="deleteNode(node)"
         />
       </template>
     </div>
+    <div class="a-card add-card" style="--box-color: var(--color-zinc)">
+      <div class="a-card__label-wrapper">
+        <div class="a-card__label">Add</div>
+      </div>
+      <div @click="addNode('playlist')" class="soundboard-add-card__btn">
+        Playlist
+      </div>
+      <div @click="addNode('sfx')" class="soundboard-add-card__btn">
+        Sfx
+      </div>
+      <div @click="addNode('tab')" class="soundboard-add-card__btn">
+        Tab Source
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -34,45 +51,56 @@ import TabSource from './TabSource.vue';
 import DeviceVolume from './DeviceVolume.vue';
 import {AudioNodeManager} from '../../model/Audio/AudioNodesManager';
 import {debounce} from '../../utils/debounce';
+import IconPlus from '../Icons/IconPlus.vue';
+import {SoundNode} from '../../model/Audio/SoundNode';
 
 const fs = inject(MountedFsSymbol)!;
 const audioContext = inject(AudioContextSymbol) as AudioContext;
 const deviceManager = inject(RemoteDeviceManagerSymbol)!;
 
-const nodesDefinition = JSON.parse(localStorage.getItem('soundboard') ?? '[]');
 const audioNodesManager = new AudioNodeManager();
-
-// const playlist = reactive(new PlaylistGroupNode({
-//   currentTrack: 0,
-//   currentTrackTime: 0,
-//   volume: 100,
-//   isMuted: false,
-//   sounds: [],
-// }, {
-//   fs,
-//   audioContext,
-// }))
-
-// const sfx = reactive(new SfxGroupNode({
-//   isMuted: false,
-//   volume: 100,
-//   sounds: [],
-// }, {
-//   fs,
-//   audioContext,
-// }))
-
-// const tabSource = reactive(new TabSourceNode({
-//   isMuted: false,
-//   volume: 100,
-//   sounds: [],
-// }, {
-//   fs,
-//   audioContext,
-// }))
-
 const nodes = reactive(audioNodesManager.restore({fs, audioContext}));
 
+function addNode(name: string) {
+  if (name === 'playlist') {
+    nodes.push(reactive(new PlaylistGroupNode({
+       currentTrack: 0,
+       currentTrackTime: 0,
+       volume: 100,
+       isMuted: false,
+       sounds: [],
+    }, {
+       fs,
+       audioContext,
+    })))
+  } else if (name === 'sfx') {
+    nodes.push(reactive(new SfxGroupNode({
+       isMuted: false,
+       volume: 100,
+       sounds: [],
+    }, {
+       fs,
+       audioContext,
+    })))
+  } else if (name === 'tab') {
+    nodes.push(reactive(new TabSourceNode({
+       isMuted: false,
+       volume: 100,
+       sounds: [],
+    }, {
+       fs,
+       audioContext,
+    })))
+  }
+}
+
+const deleteNode = (node: SoundNode) => {
+  node.stop?.();
+  node.disconnect();
+  // @ts-ignore
+  nodes.splice(nodes.indexOf(node), 1);
+}
+
 watch(() => nodes, debounce((newNodes) => {
   console.log('NEW_NODES', newNodes);
   audioNodesManager.store(newNodes);
@@ -116,5 +144,22 @@ watch(() => deviceManager.audioDevices.length, () => {
   gap: 3rem 1rem;
   padding: 1rem;
 }
+
+.soundboard-add-card {
+
+}
+
+.soundboard-add-card__btn {
+  text-align: center;
+  border: 1px solid;
+  margin: 0.25rem;
+  background: var(--box-color-900);
+  border:  1px solid rgba(from var(--box-color) r g b / 0.2);
+  cursor: pointer;
+}
+
+.soundboard-add-card__btn:hover {
+  background: var(--box-color-800);
+}
 </style>