added back button to state page and added cards to the hidenseek page

Author: AdityaSingh-7

src/assets/styles/capital.css

@@ -204,62 +204,73 @@
   opacity: 0.3;
 }
 
-.location-card {
-  & .location-details {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 0.75rem 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.location-card .location-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
 
-    & .label {
-      font-style: italic;
-      color: light-dark(rgb(14, 62, 125), yellow);
-    }
-  }
+.location-card .location-details .label {
+  font-style: italic;
+  color: light-dark(rgb(14, 62, 125), yellow);
 }
 
 /* Random card color variations */
-.location-card:nth-child(8n + 1) {
-  background: var(--card-color-1);
+.location-card.color-card-color-1 {
+  background-color: var(--card-color-1);
   color: white;
 }
 
-.location-card:nth-child(8n + 2) {
-  background: var(--card-color-2);
+.location-card.color-card-color-2 {
+  background-color: var(--card-color-2);
   color: white;
 }
 
-.location-card:nth-child(8n + 3) {
-  background: var(--card-color-3);
+.location-card.color-card-color-3 {
+  background-color: var(--card-color-3);
   color: white;
 }
 
-.location-card:nth-child(8n + 4) {
-  background: var(--card-color-4);
+.location-card.color-card-color-4 {
+  background-color: var(--card-color-4);
   color: white;
 }
 
-.location-card:nth-child(8n + 5) {
-  background: var(--card-color-5);
+.location-card.color-card-color-5 {
+  background-color: var(--card-color-5);
   color: white;
 }
 
-.location-card:nth-child(8n + 6) {
-  background: var(--card-color-6);
+.location-card.color-card-color-6 {
+  background-color: var(--card-color-6);
   color: white;
 }
 
-.location-card:nth-child(8n + 7) {
-  background: var(--card-color-7);
+.location-card.color-card-color-7 {
+  background-color: var(--card-color-7);
   color: white;
 }
 
-.location-card:nth-child(8n + 8) {
-  background: var(--card-color-8);
+.location-card.color-card-color-8 {
+  background-color: var(--card-color-8);
   color: white;
 }
 
+/* Remove the previous nth-child color selectors */
+.location-card:nth-child(8n + 1),
+.location-card:nth-child(8n + 2),
+.location-card:nth-child(8n + 3),
+.location-card:nth-child(8n + 4),
+.location-card:nth-child(8n + 5),
+.location-card:nth-child(8n + 6),
+.location-card:nth-child(8n + 7),
+.location-card:nth-child(8n + 8) {
+  background-color: transparent;
+  color: inherit;
+}
+
 dialog#helpModal {
   border: none;
   border-radius: 10px;

src/assets/styles/map/state.css

@@ -38,28 +38,37 @@
   box-shadow: var(--shadow-md);
 }
 
-/* SVG Container (Left Side) */
 #state-svg-container {
   flex: 0.8;
-  padding: calc(var(--spacing-unit) * 1);
+  /*padding: calc(var(--spacing-unit) * 1);*/
   background-color: var(--secondary-bg);
   border-radius: 8px;
   box-shadow: var(--shadow-md);
+  display: flex;
+  flex-direction: column;
 }
 
 #state-svg-container h3 {
-  margin-bottom: calc(var(--spacing-unit) * 1.5);
+  /*margin-bottom: calc(var(--spacing-unit) * 1);*/
   color: var(--primary-text);
   font-size: 1.5rem;
   text-align: center;
 }
 
 #state-svg {
   width: 100%;
-  height: auto;
-  min-height: 300px;
+  height: 50%; /* Change from min-height to height */
+  flex-grow: 1; /* Allow it to grow and fill available space */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+#state-svg svg {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* Ensure the SVG fits within the container */
+}
 /* Right Content */
 .right-content {
   flex: 1.2;

src/components/Capitals.astro

@@ -2,13 +2,26 @@
 export interface Props {
   stateList: any[];
   utList: any[];
-  // Removed colorPalette prop since we're now using CSS variables
-  // Removed getContrastColor prop since we're using white text for all cards
 }
 
 import "@/assets/styles/capital.css";
 
 const { stateList, utList } = Astro.props;
+
+// Create a function to generate a color class based on index
+function getColorClass(index: number) {
+  const colorClasses = [
+    'card-color-1', 
+    'card-color-2', 
+    'card-color-3', 
+    'card-color-4', 
+    'card-color-5', 
+    'card-color-6', 
+    'card-color-7', 
+    'card-color-8'
+  ];
+  return colorClasses[index % colorClasses.length];
+}
 ---
 
 <div class="geographical-mosaic">
@@ -43,8 +56,8 @@ const { stateList, utList } = Astro.props;
 
       <div class="location-grid">
         {
-          stateList.map((state) => (
-            <div class="location-card">
+          stateList.map((state, index) => (
+            <div class={`location-card color-${getColorClass(index)}`}>
               <div class="card-inner">
                 <h3 class="location-name">{state.name}</h3>
                 <div class="location-details">
@@ -71,8 +84,8 @@ const { stateList, utList } = Astro.props;
 
       <div class="location-grid">
         {
-          utList.map((ut) => (
-            <div class="location-card">
+          utList.map((ut, index) => (
+            <div class={`location-card color-${getColorClass(index)}`}>
               <div class="card-inner">
                 <h3 class="location-name">{ut.name}</h3>
                 <div class="location-details">
@@ -137,4 +150,4 @@ const { stateList, utList } = Astro.props;
     card.addEventListener("mouseenter", () => card.classList.add("hover-effect"));
     card.addEventListener("mouseleave", () => card.classList.remove("hover-effect"));
   });
-</script>
+</script>

src/components/Puzzle.astro

@@ -28,9 +28,6 @@
         Shuffle
       </button>
       <button id="clearBtn" class="control-btn">
-        <!--<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M19 7l-7 7-7-7" stroke-width="2" stroke-linecap="round"></path>
-        </svg>-->
         Clear
       </button>
       <select id="difficultySelect" class="control-btn">
@@ -81,9 +78,9 @@
     // Changing the color generation for better visibility in help mode
     // Using more pastel colors with higher lightness and lower alpha
     const hue = Math.floor(Math.random() * 360); // Random hue (0-359)
-    const saturation = 80 + Math.floor(Math.random() * 15); // 80-95% saturation
-    const lightness = 70 + Math.floor(Math.random() * 15); // 70-85% lightness - lighter colors
-    const alpha = 0.7; // Slightly more opaque for better distinction
+    const saturation = 80 + Math.floor(Math.random() * 15);
+    const lightness = 70 + Math.floor(Math.random() * 15); 
+    const alpha = 0.7; 
     return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
   }
 

src/pages/capitals.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "@/layouts/Base";
-import LocationMosaic from "../components/Capitals.astro";
-import { locations } from "../data/location.ts";
+import LocationMosaic from "@/components/Capitals.astro";
+import { locations } from "@/data/location.ts";
 import Help from "@/components/Help.astro";
 
 const meta = {