From 05b904ff6cfc72e1a05f9e7f60a1703cd0f09e5e Mon Sep 17 00:00:00 2001
From: Wrymouth <jacco.potters@outlook.com>
Date: Sun, 23 Apr 2023 23:22:34 +0200
Subject: [PATCH 1/2] create buttons for adding segments

---
 mamar-web/src/app/doc/SegmentMap.tsx | 17 ++++++++++++++
 mamar-web/src/app/store/variation.ts | 34 ++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/mamar-web/src/app/doc/SegmentMap.tsx b/mamar-web/src/app/doc/SegmentMap.tsx
index 7ba9ad8..520041a 100644
--- a/mamar-web/src/app/doc/SegmentMap.tsx
+++ b/mamar-web/src/app/doc/SegmentMap.tsx
@@ -6,6 +6,7 @@ import styles from "./SegmentMap.module.scss"
 
 import TrackControls from "../emu/TrackControls"
 import { useBgm, useDoc, useVariation } from "../store"
+import { variationReducer } from "../store/variation"
 import useSelection, { SelectionProvider } from "../util/hooks/useSelection"
 
 interface Loop {
@@ -81,6 +82,16 @@ function PianoRollThumbnail({ trackIndex, trackListIndex }: { trackIndex: number
     }
 }
 
+function useAddNewSegment() {
+    const [variation, dispatch] = useVariation()
+    return () => dispatch({ type: "add_segment", id: variation?.segments.length ?? 1, trackList: variation?.segments.length ?? 1 }) // new action
+}
+
+function useAddLoopStart() {
+    const [variation, dispatch] = useVariation()
+    return () => dispatch({ type: "add_loop_start", id: variation?.segments.length ?? 1, labelIndex: variation?.segments.length ?? 1 }) // new action
+}
+
 function Container() {
     const [variation] = useVariation()
     const selection = useSelection()
@@ -126,12 +137,18 @@ function Container() {
                     }
                 })}
             </tr>)}
+
         </tbody>}
     </table>
+
 }
 
 export default function SegmentMap() {
+    const addLoopStart = useAddLoopStart()
+    const addNewSegment = useAddNewSegment()
     return <SelectionProvider>
         <Container />
+        <button onClick={addLoopStart}>Add loop start</button>
+        <button onClick={addNewSegment}>Add new region</button>
     </SelectionProvider>
 }
diff --git a/mamar-web/src/app/store/variation.ts b/mamar-web/src/app/store/variation.ts
index aacc9b5..0334a53 100644
--- a/mamar-web/src/app/store/variation.ts
+++ b/mamar-web/src/app/store/variation.ts
@@ -12,6 +12,14 @@ export type VariationAction = {
     type: "move_segment"
     id: number
     toIndex: number
+} | {
+    type: "add_segment"
+    id: number
+    trackList: number
+} | {
+    type: "add_loop_start"
+    id: number
+    labelIndex: number
 }
 
 export function variationReducer(variation: Variation, action: VariationAction): Variation {
@@ -73,6 +81,32 @@ export function variationReducer(variation: Variation, action: VariationAction):
         } else {
             return variation
         }
+    case "add_segment":
+        const newSeg: Segment = {
+            type: "Subseg",
+            id: action.id,
+            trackList: action.trackList,
+        }
+        return {
+            ...variation,
+            segments: [
+                ...variation.segments,
+                newSeg,
+            ],
+        }
+    case "add_loop_start":
+        const startLoopSeg: Segment = {
+            id: action.id,
+            type: "StartLoop",
+            label_index: action.labelIndex,
+        }
+        return {
+            ...variation,
+            segments: [
+                ...variation.segments,
+                startLoopSeg,
+            ],
+        }
     }
 }
 

From 8bfe985d4dd11c7e57ed6beeac610cce7aace03d Mon Sep 17 00:00:00 2001
From: Wrymouth <jacco.potters@outlook.com>
Date: Mon, 24 Apr 2023 00:20:14 +0200
Subject: [PATCH 2/2] add loop subsegment and endloop segment to loop action

---
 mamar-web/src/app/doc/SegmentMap.tsx |  2 +-
 mamar-web/src/app/store/variation.ts | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/mamar-web/src/app/doc/SegmentMap.tsx b/mamar-web/src/app/doc/SegmentMap.tsx
index 520041a..74a00a2 100644
--- a/mamar-web/src/app/doc/SegmentMap.tsx
+++ b/mamar-web/src/app/doc/SegmentMap.tsx
@@ -89,7 +89,7 @@ function useAddNewSegment() {
 
 function useAddLoopStart() {
     const [variation, dispatch] = useVariation()
-    return () => dispatch({ type: "add_loop_start", id: variation?.segments.length ?? 1, labelIndex: variation?.segments.length ?? 1 }) // new action
+    return () => dispatch({ type: "add_loop_start", id: variation?.segments.length ?? 1, iterCount: 0 }) // new action
 }
 
 function Container() {
diff --git a/mamar-web/src/app/store/variation.ts b/mamar-web/src/app/store/variation.ts
index 0334a53..382b047 100644
--- a/mamar-web/src/app/store/variation.ts
+++ b/mamar-web/src/app/store/variation.ts
@@ -19,7 +19,7 @@ export type VariationAction = {
 } | {
     type: "add_loop_start"
     id: number
-    labelIndex: number
+    iterCount: number
 }
 
 export function variationReducer(variation: Variation, action: VariationAction): Variation {
@@ -94,20 +94,35 @@ export function variationReducer(variation: Variation, action: VariationAction):
                 newSeg,
             ],
         }
-    case "add_loop_start":
+    case "add_loop_start": {
+
         const startLoopSeg: Segment = {
             id: action.id,
             type: "StartLoop",
-            label_index: action.labelIndex,
+            label_index: variation.segments.length ?? 0,
+        }
+        const loopSubSeg: Segment = {
+            type: "Subseg",
+            id: action.id + 1,
+            trackList: variation.segments.length + 1,
+        }
+        const endLoopSeg: Segment = {
+            type: "EndLoop",
+            id: action.id + 2,
+            label_index: variation.segments.length + 2,
+            iter_count: action.iterCount,
         }
         return {
             ...variation,
             segments: [
                 ...variation.segments,
                 startLoopSeg,
+                loopSubSeg,
+                endLoopSeg,
             ],
         }
     }
+    }
 }
 
 export const useVariation = (index?: number, docId?: string): [Variation | undefined, (action: VariationAction) => void] => {