fix build issue

Author: AdityaSingh-7

src/components/Capitals.astro

@@ -90,12 +90,12 @@ const { stateList, utList } = Astro.props;
 </div>
 
 <script>
-  const searchBar = document.getElementById("searchBar");
-  const clearButton = document.querySelector(".clear-button");
-  const statesCountElement = document.getElementById("statesCount");
-  const utsCountElement = document.getElementById("utsCount");
+  const searchBar = document.getElementById("searchBar") as HTMLInputElement;
+  const clearButton = document.querySelector(".clear-button") as HTMLElement;
+  const statesCountElement = document.getElementById("statesCount") as HTMLElement;
+  const utsCountElement = document.getElementById("utsCount") as HTMLElement;
 
-  const updateCounts = (query) => {
+  const updateCounts = (query: string) => {
     const statesTotal = statesCountElement.dataset.total;
     const utsTotal = utsCountElement.dataset.total;
 
@@ -116,10 +116,10 @@ const { stateList, utList } = Astro.props;
 
   searchBar.addEventListener("input", function () {
     const query = this.value.toLowerCase().trim();
-    const cards = document.querySelectorAll(".location-card");
+    const cards = document.querySelectorAll(".location-card") as NodeListOf<HTMLElement>;
 
     cards.forEach((card) => {
-      const name = card.querySelector(".location-name").textContent.toLowerCase();
+      const name = (card.querySelector(".location-name")as any).textContent.toLowerCase();
       card.style.display = name.startsWith(query) ? "" : "none";
     });
 

src/components/DrawKeyboard.astro

@@ -1,7 +1,6 @@
 ---
-import { alphabetMapper } from "../mappers/alphabet";
-import { IMAGE_DIR, colorBox, fontBox, numberBox } from "../utils/draw";
-import { getRandomValue } from "../utils/index";
+import { alphabetMapper } from "@/mappers/alphabet";
+import { IMAGE_DIR, colorBox, fontBox, numberBox } from "@/utils/draw";
 //import "@/assets/styles/draw.css"; 
 ---
 
@@ -28,8 +27,7 @@ import { getRandomValue } from "../utils/index";
     numberBox,
     alphabetMapper,
     IMAGE_DIR
-  }}
->
+  }} is:inline>
   // Initialize state
   let currentFontIndex = 0;
   let isUpperCase = true;

src/components/FeedbackForm.astro

@@ -31,11 +31,11 @@ import "@/assets/styles/feedback.css";
 </div>
 
 <script>
-  const form = document.getElementById("feedbackForm");
-  const errorDiv = document.getElementById("errorMessage");
-  const submitButton = document.getElementById("submitButton");
+  const form = document.getElementById("feedbackForm")as HTMLFormElement;
+  const errorDiv = document.getElementById("errorMessage") as HTMLDivElement;
+  const submitButton = document.getElementById("submitButton") as HTMLButtonElement;
 
-  function showError(message) {
+  function showError(message: string) {
     errorDiv.textContent = message;
     errorDiv.style.display = "block";
   }

src/components/HideSeekGame.astro

@@ -27,7 +27,7 @@ const letterRows = [
   <!-- Letter Grid -->
   <main class="letter-grid" id="letter-container">
     {
-      letterRows.map((row, rowIndex) => (
+      letterRows.map((row) => (
         <div class="letter-row">
           {row.map((letter) => (
             <div class="letter-box" data-letter={letter} data-visible="false">
@@ -42,10 +42,10 @@ const letterRows = [
 
 <script>
   document.addEventListener("DOMContentLoaded", () => {
-    const letterContainer = document.getElementById("letter-container");
-    const dialog = document.getElementById("game-instructions");
-    const closeButton = document.getElementById("close-instructions");
-    const helpButton = document.getElementById("help-button");
+    const letterContainer = document.getElementById("letter-container") as HTMLDivElement;
+    const dialog = document.getElementById("game-instructions") as HTMLDialogElement;
+    const closeButton = document.getElementById("close-instructions") as HTMLButtonElement;
+    const helpButton = document.getElementById("help-button") as HTMLButtonElement;
 
     // Open instructions modal when help button is clicked
     helpButton.addEventListener("click", () => {

src/components/Puzzle.astro

@@ -69,7 +69,7 @@
   <div id="grid" class="grid"></div>
 </div>
 
-<script type="module">
+<script type="module" is:inline>
   import crosswordData from "/public/mocks/cross.json";
 
   // Use the imported JSON data for word sets.

src/components/SeeknHide.astro

@@ -47,8 +47,8 @@ const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)
   ];
 
   const defaultColor = "#0b1f54";
-  const main = document.getElementById("main");
-  const words = document.querySelectorAll(".word");
+  const main = document.getElementById("main") as HTMLElement;
+  const words = document.querySelectorAll(".word") as NodeListOf<HTMLElement>;
 
   // Track active letter elements
   const activeLetters = new Set();
@@ -80,7 +80,7 @@ const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)
     });
   });
 
-  function toggleLetterVisibility(wordElement) {
+  function toggleLetterVisibility(wordElement: HTMLElement) {
     const letter = wordElement.getAttribute("data-letter");
 
     if (wordElement.classList.contains("active")) {
@@ -97,7 +97,7 @@ const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)
     }
   }
 
-  function showLetter(letter) {
+  function showLetter(letter: string) {
     words.forEach((word) => {
       if (word.getAttribute("data-letter") === letter.toUpperCase()) {
         toggleLetterVisibility(word);

src/components/canvasDialogue.astro

@@ -73,10 +73,10 @@ import "@/assets/styles/canvas.css";
     }
 
     initializeElements() {
-      this.input = document.getElementById("name");
-      this.canvasContainer = document.getElementById("canvasDiv");
-      this.fullCheckbox = document.getElementById("full");
-      this.fontFamilySelect = document.getElementById("fontFamily");
+      this.input = document.getElementById("name") as HTMLInputElement;
+      this.canvasContainer = document.getElementById("canvasDiv")as HTMLDivElement;
+      this.fullCheckbox = document.getElementById("full")as HTMLDivElement;
+      this.fontFamilySelect = document.getElementById("fontFamily")as HTMLDivElement;;
     }
 
     bindEvents() {
@@ -85,7 +85,7 @@ import "@/assets/styles/canvas.css";
       });
     }
 
-    handleClick(event) {
+    handleClick(event:any) {
       const variant = event.target.dataset.variant;
 
       switch (variant) {
@@ -104,17 +104,17 @@ import "@/assets/styles/canvas.css";
       }
     }
 
-    createCanvas(text) {
-      const canvas = document.createElement("canvas");
+    createCanvas(text:string) {
+      const canvas = document.createElement("canvas") as HTMLCanvasElement;
       canvas.width = 300;
       canvas.height = 200;
-      const ctx = canvas.getContext("2d");
+      const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
       // Get selected colors
-      const cardColorSelect = document.getElementById("cardColor");
+      const cardColorSelect = document.getElementById("cardColor") as HTMLSelectElement;
       const cardColor = cardColorSelect.value === "random" ? this.getChildFriendlyColor() : cardColorSelect.value;
 
-      const fontColorSelect = document.getElementById("fontColor");
+      const fontColorSelect = document.getElementById("fontColor") as HTMLSelectElement;
       let fontColor = fontColorSelect.value;
       if (fontColor === "random") {
         fontColor = this.getRandomFontColor();
@@ -170,7 +170,7 @@ import "@/assets/styles/canvas.css";
         ? text
         : text
             .split(" ")
-            .map((w) => w[0])
+            .map((w:any) => w[0])
             .join("")
             .toUpperCase();
 
@@ -203,9 +203,9 @@ import "@/assets/styles/canvas.css";
 
     resetSettings() {
       this.fullCheckbox.checked = false;
-      document.getElementById("cardColor").value = "random";
-      document.getElementById("fontColor").value = "white";
-      document.getElementById("fontFamily").value = "Comic Sans MS";
+      (document.getElementById("cardColor") as HTMLInputElement).value = "random";
+      (document.getElementById("fontColor") as HTMLInputElement).value = "white";
+      (document.getElementById("fontFamily") as HTMLInputElement).value = "Comic Sans MS";
     }
   }