From 7347c7216da4c9e36ca823b15a1ef72988e70c10 Mon Sep 17 00:00:00 2001
From: babali42 <bab07ali@gmail.com>
Date: Mon, 7 Oct 2024 21:51:39 +0200
Subject: [PATCH] add highligths

---
 .../sequencer/sequencer.component.html        |  7 ++-
 .../sequencer/sequencer.component.scss        | 60 ++++++++++++-------
 .../sequencer/sequencer.component.ts          |  1 +
 src/app/styles/mixins.scss                    |  5 ++
 4 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/app/components/sequencer/sequencer.component.html b/src/app/components/sequencer/sequencer.component.html
index 3bd2005..6d3f63a 100644
--- a/src/app/components/sequencer/sequencer.component.html
+++ b/src/app/components/sequencer/sequencer.component.html
@@ -4,8 +4,11 @@ <h3 class="track-name">{{ track.name }}</h3>
     <div id="track" [class.sixteen-steps]="track.steps.length == StepLengths.sixteen"
          [class.thirty-two-steps]="track.steps.length == StepLengths.thirty_two"
          [class.sixty-four-steps]="track.steps.length == StepLengths.sixty_four">
-      <div *ngFor="let step of track.steps; let i = index" class="step" [class.active]="step"
-           [class.current]="i === this.soundService.index"></div>
+      <div *ngFor="let step of track.steps; let i = index" class="step"
+           [class.active]="step"
+           [class.current]="i === soundService.index"
+           [class.highlight]="Math.floor(i / 4) % 2 === 0">
+      </div>
     </div>
   </article>
 </section>
diff --git a/src/app/components/sequencer/sequencer.component.scss b/src/app/components/sequencer/sequencer.component.scss
index 4280aac..727f0bd 100644
--- a/src/app/components/sequencer/sequencer.component.scss
+++ b/src/app/components/sequencer/sequencer.component.scss
@@ -1,5 +1,9 @@
 @import "../../styles/styles";
 
+$step-size: 40px;
+$border-radius: 4px;
+$gap: 4px;
+
 :host {
   overflow-x: auto;
 }
@@ -10,52 +14,68 @@
 
 #track-container {
   display: flex;
-  margin: 4px 0 0 0;
+  margin-top: $gap;
 }
 
 #track {
   display: grid;
   grid-template-rows: repeat(1, 1fr);
-  gap: 4px;
-}
-
-.sixteen-steps {
-  grid-template-columns: repeat(16, 1fr);
+  gap: $gap;
 }
 
-.thirty-two-steps {
-  grid-template-columns: repeat(32, 1fr);
+@mixin step-grid($columns) {
+  grid-template-columns: repeat($columns, 1fr);
 }
 
-.sixty-four-steps {
-  grid-template-columns: repeat(64, 1fr);
-}
+.sixteen-steps { @include step-grid(16); }
+.thirty-two-steps { @include step-grid(32); }
+.sixty-four-steps { @include step-grid(64); }
 
 .step {
-  height: 40px;
-  width: 40px;
+  height: $step-size;
+  width: $step-size;
   background-color: var(--backgroundColor);
-  border-radius: 4px;
+  border-radius: $border-radius;
   cursor: pointer;
-  border: solid 1px var(--borderColor);
+  border: 1px solid var(--borderColor);
 }
 
 .current {
-  background: repeating-linear-gradient(-45deg, var(--backgroundColor), var(--backgroundColor) 10px, var(--textColor) 5px, var(--textColor) 15px);
+  background: repeating-linear-gradient(
+      -45deg,
+      var(--backgroundColor), var(--backgroundColor) 10px,
+      var(--textColor) 5px, var(--textColor) 15px
+  );
 }
 
-.active {
+.active, .active.highlight {
   background-color: $color3_purple;
 
   &.current {
-    background: repeating-linear-gradient(-45deg, $color3_purple, $color3_purple 10px, var(--backgroundColor) 5px, var(--backgroundColor) 15px);
+    background: repeating-linear-gradient(
+        -45deg,
+        $color3_purple, $color3_purple 10px,
+        var(--backgroundColor) 5px, var(--backgroundColor) 15px
+    );
   }
 }
 
+.highlight {
+  background: var(--gridHighLightColor);
+}
+
+.current.highlight {
+  background: repeating-linear-gradient(
+      -45deg,
+      var(--gridHighLightColor), var(--gridHighLightColor) 10px,
+      var(--textColor) 5px, var(--textColor) 15px
+  );
+}
+
 .tracks-container {
   display: grid;
   grid-template-columns: max-content auto;
-  gap: 4px 14px;
+  gap: $gap 14px;
 }
 
 .track-container {
@@ -64,5 +84,5 @@
 
 .track-name {
   white-space: nowrap;
-  height: 40px;
+  height: $step-size;
 }
diff --git a/src/app/components/sequencer/sequencer.component.ts b/src/app/components/sequencer/sequencer.component.ts
index 69555ba..94ce177 100644
--- a/src/app/components/sequencer/sequencer.component.ts
+++ b/src/app/components/sequencer/sequencer.component.ts
@@ -18,5 +18,6 @@ export class SequencerComponent {
   }
 
   protected readonly StepLengths = StepLengths;
+  protected readonly Math = Math;
 }
 
diff --git a/src/app/styles/mixins.scss b/src/app/styles/mixins.scss
index 2776ea8..43e507e 100644
--- a/src/app/styles/mixins.scss
+++ b/src/app/styles/mixins.scss
@@ -15,6 +15,9 @@ $borderColor_dark: white;
 $sideBarColor_light: #EBFBFF;
 $sideBarColor_dark: #312c30;
 
+$gridHighLightColor_light: #e8e8e8;
+$gridHighLightColor_dark: #474747;
+
 // mixin that enables css variables in light mode
 @mixin lighten() {
   --backgroundColor: #{$bgColor_light};
@@ -23,6 +26,7 @@ $sideBarColor_dark: #312c30;
   --textColor: #{$textColor_light};
   --borderColor: #{$borderColor_light};
   --menuButtonColor: #{$color1_light_blue};
+  --gridHighLightColor: #{$gridHighLightColor_light};
 }
 
 // mixin that enables css variables in dark mode
@@ -33,4 +37,5 @@ $sideBarColor_dark: #312c30;
   --textColor: #{$textColor_dark};
   --borderColor: #{$borderColor_dark};
   --menuButtonColor: #{$color3_purple};
+  --gridHighLightColor: #{$gridHighLightColor_dark};
 }