Added the horizontal and vertical switch button

Author: Ciphrox

src/assets/styles/panel.css

@@ -53,11 +53,9 @@
 
 .panel__options {
   grid-area: option;
-  display: grid;
-  grid-auto-flow: column;
-  align-content: center;
-  grid-template-columns: 30% 1fr 30%;
-  align-self: baseline;
+  display: flex;
+  gap: 2rem;
+  padding: 1rem;
 }
 
 .range__option {
@@ -180,37 +178,36 @@ input[type="radio"] {
 label {
   background-color: var(--orientation__bg--8);
   color: var(--panel__cell__txt--6);
-  border-radius: 0.5rem;
-  transition: all 0.5s;
+  border-radius: 1rem;
+  padding: 0.5rem 2rem;
+  transition: all 0.3s ease;
   cursor: pointer;
-  font-size: x-large;
-  display: inline-block;
-  transform-origin: center;
-  transform-style: preserve-3d;
-  transform-box: view-box;
-  transition-delay: 2ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 
-.horizontal {
-  transform: rotateZ(0deg);
-  width: 10rem;
-  height: 3rem;
-  justify-self: end;
+.horizontal, .vertical {
+  width: 5rem;
+  height: 5rem;
 }
 
-.vertical {
-  transform: rotateZ(0deg);
-  height: 10rem;
-  width: 3rem;
+.icon {
+  font-size: 2rem;
 }
 
 label:hover {
   background-color: var(--orientation__bg--9);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 label:has(input[type="radio"]:checked) {
   color: var(--panel__cell__txt--6);
   background-color: var(--label__bg--10);
+  transform: translateY(1px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 /* range slider */

src/pages/panel.astro

@@ -13,6 +13,18 @@ import "@/assets/styles/common.css";
     />
   </Fragment>
   <article class="tv container__panel">
+    <section id="option-box" class="panel__options">
+      <label class="vertical" for="vertical">
+        <input type="radio" class="orientation" name="orientation" id="vertical" value="X" />
+        <span class="icon">↕️</span>
+      </label>
+
+      <label class="horizontal" for="horizontal">
+        <input type="radio" class="orientation" name="orientation" id="horizontal" value="Y" />
+        <span class="icon">↔️</span>
+      </label>
+    </section>
+
     <section class="scene">
       <letter-panel>
         <div class="panel" id="panel"></div>
@@ -30,6 +42,7 @@ import "@/assets/styles/common.css";
   // Define the behaviour for our new type of HTML element.
   class LetterPanel extends HTMLElement {
     #panel;
+    #orientationPanel;
     #orientation = "Y";
     #selectedIndex = 0;
     #radius = "0px";
@@ -39,7 +52,7 @@ import "@/assets/styles/common.css";
     constructor() {
       super();
       this.#panel = this.querySelector("#panel") as HTMLElement;
-      //this.checkPanel();
+      this.#orientationPanel = document.querySelectorAll(".orientation");
       this.#emitEvent();
     }
 
@@ -55,6 +68,19 @@ import "@/assets/styles/common.css";
         console.log({ charCode, code, keyCode, key });
         this.onKeyChange(keyCode);
       });
+
+      this.#orientationPanel.forEach((radio) => {
+        radio.addEventListener(
+          "click",
+          (e: Event) => {
+            const target = e.target as HTMLInputElement;
+            this.#orientation = target.value;
+            this.changePanel();
+            target.blur(); //unfocus the radio button
+          },
+          false
+        );
+      });
     }
 
     doTheMath() {