feat(settings): add tweakpane menu + delete current loop button

domi7777 · Nov 1, 2024 · 3ad53c1 · 3ad53c1
1 parent 6a9b70b
commit 3ad53c1
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
     <title>Larsen app</title>
       <style>
           body {
@@ -14,15 +13,70 @@
               max-width: 100%;
               height: 100%;
           }
+          #phaser-container {
+            overflow: auto;
+          }
+          /*tweakpane target*/
+          #settings {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+          }
+          /*top container*/
+          #settings .tp-rotv {
+            border-radius: 5px 0 0 0;
+          }
+          /*title button*/
+          #settings .tp-rotv_b {
+            padding: 0 0.75rem 0 0.75rem;
+          }
+          /*title text*/
+          #settings .tp-rotv_t {
+            font-family: Icons;
+            font-size: large;
+          }
+          /*expand tweakpane icon*/
+          #settings .tp-rotv_m {
+            display: none;
+          }
+          /* fixme does not seem to do anything*/
+          .tp-rotv-expanded {
+            min-width: 100%;
+          }
+          /* tweak pane custom theme built at https://tweakpane.github.io/docs/theming/#builder */
+          :root {
+            --tp-base-background-color: hsla(0, 0%, 10%, 0.8);
+            --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
+            --tp-button-background-color: hsla(0, 0%, 80%, 1);
+            --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
+            --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);
+            --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);
+            --tp-button-foreground-color: hsla(0, 0%, 0%, 0.8);
+            --tp-container-background-color: hsla(0, 0%, 0%, 0.3);
+            --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);
+            --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);
+            --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);
+            --tp-container-foreground-color: hsla(0, 0%, 100%, 0.5);
+            --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);
+            --tp-input-background-color: hsla(0, 0%, 0%, 0.3);
+            --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);
+            --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);
+            --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);
+            --tp-input-foreground-color: hsla(0, 0%, 100%, 0.5);
+            --tp-label-foreground-color: hsla(0, 0%, 100%, 0.5);
+            --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
+            --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
+          }
       </style>
   </head>
   <body style="padding: 0;margin: 0">
     <div id="root" style>
         <img src="./icons/pwa-512x512.png" alt="loading" style="width:100%;height:100%" />
     </div>
+    <div id="settings"></div>
     <div id="phaser-container"></div>
     <script type="module" src="/src/main.tsx"></script>
-<!--    TODO move in menu or sth-->
+<!--    TODO move in settings menu-->
 <!--    <p style="text-align:center;padding:10px">-->
 <!--        <a href="https://github.com/domi7777/larsen">-->
 <!--            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:white;">-->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,9 +13,11 @@
   "dependencies": {
     "phaser": "^3.85.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tweakpane": "^4.0.4"
   },
   "devDependencies": {
+    "@tweakpane/core": "^2.0.4",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

diff --git a/src/Game.tsx b/src/Game.tsx
@@ -3,6 +3,7 @@ import {loadFonts} from './utils/fonts.ts';
 import {LoopTracksScene} from './scenes/LoopTracksScene.ts';
 import {isDarkMode} from './settings/color-settings.ts';
 import {EmptyScene} from './scenes/EmptyScene.ts';
+import {TweakPane} from './settings/TweakPane.ts';
 
 function resizeGame(game: Phaser.Game) {
   const width = window.innerWidth;
@@ -32,10 +33,13 @@ export const Game = () => {
           activePointers: 4, // Allow four active pointers for multi-touch
         },
       });
+      const tweakPane = new TweakPane(game);
       window.addEventListener('resize', () => {
         resizeGame(game);
+        tweakPane.resize();
       });
       game.scene.start(LoopTracksScene.key);
+      resizeGame(game);
     });
   }
   return <></>;

diff --git a/src/Loop.ts b/src/Loop.ts
@@ -9,6 +9,7 @@ type LoopState = 'readyToRecord' | 'recording' | 'readyToPlay' | 'playing';
 
 export class Loop {
   constructor(private trackIndex: number) {
+    this.log('Loop created');
   }
 
   private state : LoopState = 'readyToRecord';
@@ -58,6 +59,14 @@ export class Loop {
     return this.state === 'readyToRecord';
   }
 
+  destroy() {
+    if (this.isPlaying()) {
+      this.stopPlaying();
+    }
+    this.loop = [];
+    this.log('Loop destroyed');
+  }
+
   private nextState() {
     switch (this.state) {
     case 'readyToRecord':

diff --git a/src/scenes/LoopTracksScene.ts b/src/scenes/LoopTracksScene.ts
@@ -34,10 +34,12 @@ type Track = {
 
 export class LoopTracksScene extends Phaser.Scene {
   static key = 'LoopTracksScene';
-  private tracks!: Track[]
+  private static tracks: Track[]
+  private static instance: LoopTracksScene;
 
   constructor() {
     super(LoopTracksScene.key);
+    LoopTracksScene.instance = this;
   }
 
   static numTracks = 5;
@@ -48,6 +50,17 @@ export class LoopTracksScene extends Phaser.Scene {
     return Math.max(height, width) / 10;
   }
 
+  static deleteCurrentTrack() {
+    const track = LoopTracksScene.tracks.find(track => track.selected);
+    if (track) {
+      track.loop.destroy();
+      track.loop = new Loop(LoopTracksScene.tracks.indexOf(track));
+      LoopTracksScene.instance.updateControlsState();
+    } else {
+      console.error('No track selected');
+    }
+  }
+
   create() {
     this.cameras.main
       .setOrigin(0, 0)
@@ -59,12 +72,12 @@ export class LoopTracksScene extends Phaser.Scene {
       this.updateControlsState();
     });
     this.events.on('instrument-played', ({instrument}: {instrument: Sample}) => {
-      this.tracks.find(track => track.selected)?.loop?.addInstrument(instrument);
+      LoopTracksScene.tracks.find(track => track.selected)?.loop?.addInstrument(instrument);
     });
   }
 
   private createTracks() {
-    this.tracks = new Array(LoopTracksScene.numTracks).fill(null).map((_, index) => {
+    LoopTracksScene.tracks = new Array(LoopTracksScene.numTracks).fill(null).map((_, index) => {
       return {
         loop: new Loop(index),
         button: this.add.rectangle()
@@ -98,7 +111,7 @@ export class LoopTracksScene extends Phaser.Scene {
   }
 
   private handleControlClicked(index: number) {
-    const track = this.tracks[index];
+    const track = LoopTracksScene.tracks[index];
     track.loop.handleClick();
     this.updateControlsState();
   }
@@ -108,7 +121,7 @@ export class LoopTracksScene extends Phaser.Scene {
     const buttonWidth = isPortrait ? window.innerWidth / LoopTracksScene.numTracks : LoopTracksScene.sceneWidthHeight;
     const buttonHeight = isPortrait ? LoopTracksScene.sceneWidthHeight : window.innerHeight / LoopTracksScene.numTracks;
 
-    this.tracks.forEach(({button, buttonText, buttonSelectedCircle, controlIcon}, index) => {
+    LoopTracksScene.tracks.forEach(({button, buttonText, buttonSelectedCircle, controlIcon}, index) => {
       const x = isPortrait ? buttonWidth * index : 0;
       const y = isPortrait ? -1 : buttonHeight * index;
       button.setSize(buttonWidth, buttonHeight).setPosition(x, y);
@@ -137,9 +150,9 @@ export class LoopTracksScene extends Phaser.Scene {
   }
 
   private selectTrack(index: number) {
-    const track = this.tracks[index];
+    const track = LoopTracksScene.tracks[index];
     if (!track.selected) {
-      const previousTrack = this.tracks.find(track => track.selected);
+      const previousTrack = LoopTracksScene.tracks.find(track => track.selected);
       if (previousTrack) {
         previousTrack.selected = false;
         if (previousTrack.loop.isRecording()) {
@@ -166,7 +179,7 @@ export class LoopTracksScene extends Phaser.Scene {
   }
 
   private updateControlsState() {
-    this.tracks.forEach((track, index) => {
+    LoopTracksScene.tracks.forEach((track, index) => {
       track.button.setFillStyle(hexToColor(trackColorsState.unselected));
       track.buttonText.setColor(track.selected ? '#000' : '#FFF')
       track.buttonSelectedCircle.setFillStyle(hexToColor(track.selected ? '#FFF' : '#000'));

diff --git a/src/settings/TweakPane.ts b/src/settings/TweakPane.ts
@@ -0,0 +1,48 @@
+import Phaser from 'phaser';
+import {Pane} from 'tweakpane';
+import {LoopTracksScene} from '../scenes/LoopTracksScene.ts';
+
+export class TweakPane {
+
+  constructor(private game: Phaser.Game) {
+    const pane = new Pane({
+      title: 'Settings',
+      expanded: false,
+      container: document.getElementById('settings')!
+    });
+    pane.on('fold', (e) => {
+      if(e.expanded){
+        this.game.pause();
+      }else{
+        this.game.resume();
+      }
+    });
+    pane.addButton({title: 'Delete current loop'}).on('click', (e) => {
+      LoopTracksScene.deleteCurrentTrack();
+      e.native.preventDefault();
+    });
+
+    // test panels
+    // const PARAMS = {
+    //   factor: 123,
+    //   title: 'hello',
+    //   color: '#ff0055',
+    // };
+    //
+    // pane.addBinding(PARAMS, 'factor');
+    // pane.addBinding(PARAMS, 'title');
+    // pane.addBinding(PARAMS, 'color');
+    this.resize();
+  }
+
+  resize() {
+    // tweak pane dom elements resizing
+    const maxMinGameSize = Math.min(this.game.canvas.width, this.game.canvas.height);
+    const fontSize = maxMinGameSize / 40 + 'px';
+    const buttonHeight = maxMinGameSize / 10 + 'px';
+    document.querySelectorAll('button').forEach(button => {
+      button.style.fontSize = fontSize;
+      button.style.height = buttonHeight;
+    });
+  }
+}