some theming, simple mode selection

timvancann · Feb 21, 2025 · ccd6210 · ccd6210
1 parent d14f49e
commit ccd6210
Show file tree

Hide file tree

Showing 2 changed files with 138 additions and 44 deletions.
diff --git a/chordflow_desktop/assets/tailwind.css b/chordflow_desktop/assets/tailwind.css
@@ -593,10 +593,6 @@ video {
   margin-right: auto;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .flex {
   display: flex;
 }
@@ -605,10 +601,22 @@ video {
   height: 2rem;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .w-8 {
   width: 2rem;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -623,47 +631,63 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
 
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
+.border-2 {
+  border-width: 2px;
 }
 
-.bg-blue-600 {
+.border-orange-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
+}
+
+.bg-amber-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
 
-.bg-red-400 {
+.bg-orange-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
 }
 
-.bg-blue-800 {
+.bg-stone-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
+  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1));
 }
 
-.bg-blue-100 {
+.bg-stone-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+  background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1));
 }
 
-.bg-blue-500 {
+.bg-zinc-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
 }
 
-.align-middle {
-  vertical-align: middle;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 
-.text-red-500 {
+.text-stone-300 {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+  color: rgb(214 211 209 / var(--tw-text-opacity, 1));
 }
 
 .transition-colors {

diff --git a/chordflow_desktop/src/main.rs b/chordflow_desktop/src/main.rs
@@ -1,13 +1,30 @@
 use std::time::{Duration, Instant};
 
 use chordflow_audio::audio::{play_audio, setup_audio};
-use chordflow_shared::{metronome::Metronome, practice_state::PracticState};
+use chordflow_music_theory::{
+    note::Note,
+    quality::Quality,
+    scale::{Scale, ScaleType},
+};
+use chordflow_shared::{
+    metronome::Metronome,
+    mode::Mode,
+    practice_state::{self, PracticState},
+    DiatonicOption, ModeOption,
+};
 use dioxus::prelude::*;
+use strum::IntoEnumIterator;
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
 const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 
+// orange-400
+// stone-500
+// zinc-900
+// amber-100
+// stone-300
+
 fn main() {
     dioxus::launch(App);
 }
@@ -24,6 +41,8 @@ fn App() -> Element {
         practice_state,
     );
 
+    let selected_mode = use_signal(|| ModeOption::Fourths);
+
     let num_bars = use_signal(|| metronome.read().num_bars);
     let num_beats = use_signal(|| metronome.read().num_beats);
 
@@ -32,18 +51,20 @@ fn App() -> Element {
         document::Link { rel: "icon", href: FAVICON }
         document::Link { rel: "stylesheet", href: MAIN_CSS }
         document::Link { rel: "stylesheet", href: TAILWIND_CSS }
+        body {
+            class: "bg-zinc-900 text-stone-300 w-screen h-screen",
 
-        div{
-            class: "container mx-auto mt-4",
-        MetronomeDisplay {
-            current_bar: *current_bar.read(),
-            current_beat: *current_beat.read(),
-            num_bars: *num_bars.read(),
-            num_beats: *num_beats.read(),
-        }
+        div { class: "container mx-auto space-y-8 bg-zinc-900 text-stone-300",
+
+            ModeSelectionDisplay { practice_state, selected_mode }
+            MetronomeDisplay {
+                current_bar: *current_bar.read(),
+                current_beat: *current_beat.read(),
+                num_bars: *num_bars.read(),
+                num_beats: *num_beats.read(),
+            }
 
-        PracticeStateDisplay {
-            practice_state: practice_state.read().clone()
+            PracticeStateDisplay { practice_state: practice_state.read().clone() }
         }
         }
     }
@@ -94,6 +115,60 @@ pub fn use_timer(
     metronome
 }
 
+#[derive(PartialEq, Props, Clone)]
+struct ModeSelectionDisplayProps {
+    practice_state: Signal<PracticState>,
+    selected_mode: Signal<ModeOption>,
+}
+
+#[component]
+fn ModeSelectionDisplay(props: ModeSelectionDisplayProps) -> Element {
+    let mut selected_mode = props.selected_mode;
+    let mut practice_state = props.practice_state;
+    let selected_style = "border-2 border-orange-400";
+    rsx! {
+        div { class: "space-y-4",
+            div { class: "flex justify-center gap-2",
+                for mode in ModeOption::iter() {
+                    div {
+                        class: format!("px-2 py-1 cursor-pointer rounded-full bg-stone-500  {}", if mode == *selected_mode.read() { selected_style } else { "" }),
+                        onclick: move |_| {
+                            selected_mode.set(mode);
+                            match *selected_mode.read() {
+                                ModeOption::Fourths => {
+                                    practice_state
+                                        .write()
+                                        .set_mode(
+                                            Mode::Fourths(chordflow_music_theory::quality::Quality::Minor),
+                                        )
+                                }
+                                ModeOption::Random => {
+                                    practice_state.write().set_mode(Mode::Random(Quality::iter().collect()))
+                                }
+                                ModeOption::Custom => practice_state.write().set_mode(Mode::Custom(None)),
+                                ModeOption::Diatonic => {
+                                    practice_state
+                                        .write()
+                                        .set_mode(
+                                            Mode::Diatonic(
+                                                Scale::new(
+                                                    Note::new(chordflow_music_theory::note::NoteLetter::C, 0),
+                                                    ScaleType::Diatonic,
+                                                ),
+                                                DiatonicOption::Incemental,
+                                            ),
+                                        )
+                                }
+                            };
+                        },
+                        {mode.to_string()}
+                    }
+                }
+            }
+        }
+    }
+}
+
 #[derive(PartialEq, Props, Clone)]
 struct MetronomeDisplayProps {
     current_bar: usize,
@@ -113,12 +188,11 @@ fn MetronomeDisplay(props: MetronomeDisplayProps) -> Element {
                     }
                     for tick in 0..props.num_beats {
                         if bar < props.current_bar || (bar == props.current_bar && tick < props.current_beat) {
-                            div { class: format!("w-8 h-8 rounded-full transition-colors bg-blue-500") }
+                            div { class: format!("w-8 h-8 rounded-full transition-colors bg-amber-100") }
                         } else if bar < props.current_bar || (bar == props.current_bar && tick == props.current_beat) {
-                            div { class: format!("w-8 h-8 rounded-full transition-colors bg-blue-800") }
-                            }
-                        else {
-                            div { class: format!("w-8 h-8 rounded-full transition-colors bg-blue-100") }
+                            div { class: format!("w-8 h-8 rounded-full transition-colors bg-orange-400") }
+                        } else {
+                            div { class: format!("w-8 h-8 rounded-full transition-colors bg-stone-300") }
                         }
                     }
                 }
@@ -134,13 +208,9 @@ struct PracticeStateDisplayProps {
 #[component]
 fn PracticeStateDisplay(props: PracticeStateDisplayProps) -> Element {
     rsx! {
-        p {
-            class: "text-red-500",
-            "Current Chord: {props.practice_state.current_chord}"
-        }
-        p {
-            class: "text-red-500",
-            "Next Chord: {props.practice_state.next_chord}"
+        div{
+        p { class: "", "Current Chord: {props.practice_state.current_chord}" }
+        p { class: "", "Next Chord: {props.practice_state.next_chord}" }
         }
     }
 }