forgot about functions, still LET'S GO (test req)

src/seqta/ui/Animation.ts

@@ -4,10 +4,10 @@
  * @param {number} [minDuration=1] - The minimum animation duration in seconds.
  * @param {number} [maxDuration=10] - The maximum animation duration in seconds.
  */
-export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) {
+export function updateBgDurations(speed: any, minDuration = 0.5, maxDuration = 10) {
   // Class names to look for
   const bgClasses = ['bg', 'bg2', 'bg3'];
-  let reversedValue;
+  let reversedValue: any;
 
   if (speed.bksliderinput === undefined) {
     // Reverse the slider direction to align with the animation
@@ -20,7 +20,7 @@ export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) {
   const durationRange = maxDuration - minDuration;
   
   // Function to calculate animation duration
-  const calcDuration = (baseValue, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange;
+  const calcDuration = (baseValue: number, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange;
   
   // Iterate through each class name to update its animation duration
   bgClasses.forEach((className, index) => {
@@ -32,6 +32,6 @@ export function updateBgDurations(speed, minDuration = 0.5, maxDuration = 10) {
     
     const offset = index * 0.05;
     const duration = calcDuration(reversedValue, offset);
-    elements[0].style.animationDuration = `${duration}s`;
+    (elements[0] as HTMLElement).style.animationDuration = `${duration}s`;
   });
 }

src/seqta/ui/ImageBackgrounds.ts

@@ -11,5 +11,5 @@ export async function appendBackgroundToUI() {
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
   background.src = browser.runtime.getURL('backgrounds/background.html');
-  parent.appendChild(background);
+  parent!.appendChild(background);
 }

src/seqta/ui/Loading.ts

@@ -8,7 +8,7 @@ const loadingSpinner = `
     <svg height="220" width="220" viewBox="0 0 1000 1000" class="outer-circle svg"><path xmlns="http://www.w3.org/2000/svg" style="fill:currentColor; stroke:none;" d="M456 954L456 946C438.715 945.258 420.843 941.462 404 937.65C369.403 929.822 335.739 918.116 304 902.247C255.981 878.237 211.768 846.374 175.09 807C62.5744 686.214 23.1598 509.033 78.6921 353C96.4653 303.062 122.84 256.974 156.424 216C207.709 153.43 278.099 103.658 355 78C372.453 72.1767 389.992 67.0399 408 63.2107C413.31 62.0816 418.647 60.9853 424 60.0811C426.508 59.6575 430.352 59.6852 432.397 57.9869C434.897 55.9098 434 50.8766 434 48C417.656 48.1353 400.764 53.1855 385 57.1265C338.517 68.7473 294.608 88.2827 254 113.576C215.673 137.45 181.285 167.835 151.87 202C33.9725 338.933 8.37009 541.243 89.2485 703C110.949 746.4 139.693 786.693 174 821C210.688 857.688 253.047 888.542 300 910.781C332.484 926.167 365.934 937.716 401 945.65C418.745 949.666 437.768 953.624 456 954z"/></svg>
     `;
 
-export function AppendLoadingSymbol(givenID, position) {
+export function AppendLoadingSymbol(givenID: any, position: any) {
   let loadingsymbol = stringToHTML(String.raw`
     <div id="${givenID}">
     ${loadingSpinner}
@@ -79,5 +79,5 @@ export default function loading() {
 }</div></div>`,
   );
   var html = document.getElementsByTagName('html')[0];
-  html.append(loadinghtml.firstChild);
+  html.append(loadinghtml.firstChild!);
 }

src/seqta/ui/Themes.ts

@@ -4,31 +4,31 @@ import localforage from 'localforage';
 let currentThemeClass = '';
 
 // Utility function to fetch and parse JSON
-const fetchJSON = async (url) => {
+const fetchJSON = async (url: any) => {
   const res = await fetch(url, {cache: 'no-store'});
   return await res.json();
 };
 
 // Utility function to fetch and parse text
-const fetchText = async (url) => {
+const fetchText = async (url: any) => {
   const res = await fetch(url);
   return await res.text();
 };
 
 // Check if the theme already exists in IndexedDB
-const themeExistsInDB = async (themeName) => {
+const themeExistsInDB = async (themeName: any) => {
   return (await localforage.getItem(`css_${themeName}`)) !== null;
 };
 
 // Fetch theme details (CSS, images, className, darkMode, defaultColour) from a given URL
-const fetchThemeJSON = async (url) => {
+const fetchThemeJSON = async (url: any) => {
   const { css, images, className, darkMode, defaultColour } = await fetchJSON(url);
   const cssText = await fetchText(css);
   return { css: cssText, images, className, darkMode, defaultColour };
 };
 
 // Save individual image to IndexedDB
-const saveImageToDB = async (themeName, cssVar, imageUrl) => {
+const saveImageToDB = async (themeName: any, cssVar: any, imageUrl: any) => {
   try {
     const response = await fetch(imageUrl);
     if (!response.ok) throw new Error(response.statusText);
@@ -40,14 +40,21 @@ const saveImageToDB = async (themeName, cssVar, imageUrl) => {
 };
 
 // Save theme details to storage via localForage
-const saveToIndexedDB = async (theme, themeName) => {
+const saveToIndexedDB = async (theme: any, themeName: any) => {
   await localforage.setItem(`css_${themeName}`, theme);
   await Promise.all(Object.entries(theme.images).map(([cssVar, imageUrl]) => saveImageToDB(themeName, cssVar, imageUrl)));
 };
 
+declare global {
+  interface Window {
+      currentThemeStyle: any;
+      currentThemeClass: any;
+  }
+}
+
 // Apply theme from storage via localForage to document, including dark mode and default color
-const applyTheme = async (themeName) => {
+const applyTheme = async (themeName: any) => {
-  const { css, className, images, darkMode, defaultColour } = await localforage.getItem(`css_${themeName}`);
+  const { css, className, images, darkMode, defaultColour }: any = await localforage.getItem(`css_${themeName}`);
   
   const newStyle = document.createElement('style');
   newStyle.innerHTML = css;
@@ -70,7 +77,7 @@ const applyTheme = async (themeName) => {
   if (images) {
     await Promise.all(
       Object.keys(images).map(async (cssVar) => {
-        const imageData = await localforage.getItem(`images_${themeName}_${cssVar}`);
+        const imageData: any = await localforage.getItem(`images_${themeName}_${cssVar}`);
         const objectURL = URL.createObjectURL(imageData);
         document.documentElement.style.setProperty(cssVar, `url(${objectURL})`);
       })
@@ -88,13 +95,13 @@ export const listThemes = async () => {
   };
 };
 
-export const downloadTheme = async (themeName, themeUrl) => {
+export const downloadTheme = async (themeName: any, themeUrl: any) => {
   const themeData = await fetchThemeJSON(themeUrl);
   await saveToIndexedDB(themeData, themeName);
   await setTheme(themeName, themeUrl);
 };
 
-export const deleteTheme = async (themeName) => {
+export const deleteTheme = async (themeName: any) => {
   const currentTheme = await localforage.getItem('selectedTheme');
   if (currentTheme === themeName) {
     await disableTheme();
@@ -105,7 +112,7 @@ export const deleteTheme = async (themeName) => {
   );
 };
 
-export const setTheme = async (themeName, themeUrl) => {
+export const setTheme = async (themeName: any, themeUrl: any) => {
   if (!(await themeExistsInDB(themeName))) {
     await downloadTheme(themeName, themeUrl);
   }
@@ -142,7 +149,7 @@ export const disableTheme = async () => {
   // Remove any applied image URLs from the root element
   const currentTheme = await localforage.getItem('selectedTheme');
   if (currentTheme) {
-    const themeData = await localforage.getItem(`css_${currentTheme}`);
+    const themeData: any = await localforage.getItem(`css_${currentTheme}`);
     if (themeData && themeData.images) {
       Object.keys(themeData.images).forEach(cssVar => {
         document.documentElement.style.removeProperty(cssVar);

src/seqta/ui/colors/ColorLuminance.ts

@@ -1,6 +1,6 @@
 import Color from 'color';
 
-function adjustLuminance(color, lum) {
+function adjustLuminance(color: any, lum: any) {
   let adjustedColor = Color(color.toLowerCase());
   const rgbObj = adjustedColor.rgb().object();
   
@@ -14,7 +14,7 @@ function adjustLuminance(color, lum) {
   return adjustedColor.string();
 }
 
-export default function ColorLuminance(color, lum = 0) {
+export default function ColorLuminance(color: any, lum = 0) {
   const colorRegex = /rgba?\(([^)]+)\)/gi;  // Case-insensitive match for rgb() or rgba()
   
   if (color.toLowerCase().includes('gradient')) {
@@ -31,7 +31,7 @@ export default function ColorLuminance(color, lum = 0) {
     // Adjust luminance for each unique color stop
     for (let colorStop of uniqueColorSet) {
       const adjustedColor = adjustLuminance(colorStop, lum);
-      gradient = gradient.replace(new RegExp(colorStop, 'gi'), adjustedColor);
+      gradient = gradient.replace(new RegExp(colorStop as string, 'gi'), adjustedColor);
     }
     
     return gradient;

src/seqta/ui/colors/Manager.ts

@@ -5,13 +5,13 @@ import ColorLuminance from './ColorLuminance.js';
 import { onError } from '../../utils/onError.js';
 
 // Helper functions
-const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value);
+const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
-const getChromeURL = (path) => browser.runtime.getURL(path);
+const getChromeURL = (path: any) => browser.runtime.getURL(path);
-const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
+const applyProperties = (props: any) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
-let DarkMode = null;
+let DarkMode: any = null;
 
-export function updateAllColors(storedSetting, newColor = null) {
+export function updateAllColors(storedSetting: any, newColor = null) {
   // Determine the color to use
   const selectedColor = newColor || storedSetting.selectedColor;
 
@@ -63,7 +63,7 @@ export function updateAllColors(storedSetting, newColor = null) {
 
   // Set favicon, if storedSetting is provided
   if (DarkMode !== null) {
-    document.querySelector('link[rel*=\'icon\']').href = getChromeURL('icons/icon-48.png');
+    (document.querySelector('link[rel*=\'icon\']')! as HTMLLinkElement).href = getChromeURL('icons/icon-48.png');
   }
 
   let alliframes = document.getElementsByTagName('iframe');
@@ -77,11 +77,11 @@ export function updateAllColors(storedSetting, newColor = null) {
     }
     
     console.log(element);
-    console.log(element.contentDocument.documentElement);
+    console.log(element.contentDocument!.documentElement);
 
-    element.contentDocument.documentElement.childNodes[1].style.color =
+    (element.contentDocument!.documentElement.childNodes[1] as HTMLIFrameElement).style.color =
       DarkMode ? 'white' : 'black';
-    element.contentDocument.documentElement.firstChild.appendChild(
+    element.contentDocument!.documentElement.firstChild!.appendChild(
       fileref,
     );
   }
@@ -90,7 +90,7 @@ export function updateAllColors(storedSetting, newColor = null) {
 export function getDarkMode() {
   return new Promise((resolve, reject) => {
     const result = browser.storage.local.get('DarkMode')
-    function open (result) {
+    function open (result: any) {
       if (browser.runtime.lastError) {
         return reject(browser.runtime.lastError);
       }

src/seqta/ui/colors/lightenAndPaleColor.ts

@@ -1,7 +1,7 @@
 import Color from 'color';
 
 
-export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) {
+export function lightenAndPaleColor(inputColor: any, lightenFactor = 0.75, paleFactor = 0.55) {
   if (inputColor.includes('gradient')) {
     const baseColor = findMatchingColor(inputColor);
 
@@ -27,9 +27,9 @@ export function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor
   return result;
 }
 // Utility function to average an array of Color objects
-function averageColors(colors) {
+function averageColors(colors: any) {
   let avgR = 0, avgG = 0, avgB = 0;
-  colors.forEach(color => {
+  colors.forEach((color: any) => {
     avgR += color.red();
     avgG += color.green();
     avgB += color.blue();
@@ -37,7 +37,7 @@ function averageColors(colors) {
   return Color.rgb(avgR / colors.length, avgG / colors.length, avgB / colors.length);
 }
 // Main function to find a matching color for a CSS gradient
-function findMatchingColor(cssGradient) {
+function findMatchingColor(cssGradient: any) {
   try {
     // Step 1: Parse the gradient to extract color stops (case-insensitive)
     const regex = /#[0-9a-fA-F]{6}|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)/gi;
@@ -48,10 +48,10 @@ function findMatchingColor(cssGradient) {
     }
 
     // Normalize and trim the color stops
-    const normalizedColorStops = colorStops.map(color => color.toLowerCase().replace(/\s+/g, ''));
+    const normalizedColorStops = colorStops.map((color: any) => color.toLowerCase().replace(/\s+/g, ''));
 
     // Convert the color stops to Color objects
-    const colorObjects = normalizedColorStops.map(color => Color(color));
+    const colorObjects = normalizedColorStops.map((color: any) => Color(color));
 
     // Step 2: Average the color stops
     const baseColor = averageColors(colorObjects);
@@ -59,7 +59,7 @@ function findMatchingColor(cssGradient) {
 
     // Step 4: Return the matching color in HEX format
     return baseColor.hex();
-  } catch (err) {
+  } catch (err: any) {
     console.error(`Error: ${err.message}`);
     return null;
   }

src/seqta/utils/FileUpload.ts

@@ -5,7 +5,7 @@
  * @returns {Promise} A promise that resolves to the response from the server.
  * @throws {Error} If no file is provided or if there is an error during upload.
  */
-export async function UploadImage(file) {
+export async function UploadImage(file: any) {
   // Ensuring that file is provided
   if (!file) {
     throw new Error("No file provided");
@@ -28,12 +28,12 @@ export async function UploadImage(file) {
   };
 
   // Making the fetch request and returning the promise
-  return fetch('/seqta/student/file/upload/xhr2', requestOptions)
+  return await fetch('/seqta/student/file/upload/xhr2', requestOptions)
-    .then(response => {
+    .then(async response => {
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`);
       }
-      const json = response.json();
+      const json = await response.json();
       return `/seqta/student/load/file?type=message&file=${json.uuid}`;
     })
     .catch(error => {

src/seqta/utils/MessageListener.ts

@@ -8,7 +8,7 @@ export class MessageHandler {
     browser.runtime.onMessage.addListener(this.routeMessage.bind(this));
   }
 
-  routeMessage(request, sender, sendResponse) {
+  routeMessage(request: any, sender: any, sendResponse: any) {
     switch (request.info) {
 
     case 'EditSidebar':

src/seqta/utils/StorageListener.ts

@@ -12,13 +12,15 @@ import {
 import { updateBgDurations } from '../ui/Animation.js';
 import { getDarkMode, updateAllColors } from '../ui/colors/Manager.js';
 
+
 export default class StorageListener {
+  darkMode: any;
   constructor() {
     this.darkMode = getDarkMode();
     browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
   }
 
-  handleStorageChanges(changes) {
+  handleStorageChanges(changes: any) {
     Object.keys(changes).forEach((changeKey) => {
       switch (changeKey) {
 
@@ -60,7 +62,7 @@ export default class StorageListener {
           CreateBackground();
         } else {
           RemoveBackground();
-          document.getElementById('container').style.background = 'var(--background-secondary)';
+          document.getElementById('container')!.style.background = 'var(--background-secondary)';
         }
         break;
 
@@ -80,7 +82,7 @@ export default class StorageListener {
     });
   }  
 
-  handleSelectedColorChange(newColor) {
+  handleSelectedColorChange(newColor: any) {
     try {
       updateAllColors(this.darkMode, newColor);
     } catch (err) {
@@ -88,7 +90,7 @@ export default class StorageListener {
     }
   }
 
-  handleNotificationCollectorChange(details) {
+  handleNotificationCollectorChange(details: any) {
     if (details.newValue) {
       enableNotificationCollector();
     } else {
@@ -96,7 +98,7 @@ export default class StorageListener {
     }
   }
 
-  handleCustomShortcutsChange(oldValue, newValue) {
+  handleCustomShortcutsChange(oldValue: any, newValue: any) {
     // Check for addition
     if (newValue.length > oldValue.length) {
       CreateCustomShortcutDiv(newValue[oldValue.length]);
@@ -104,9 +106,9 @@ export default class StorageListener {
     // Check for removal
     else if (newValue.length < oldValue.length) {
       const removedElement = oldValue.find(
-        (oldItem) =>
+        (oldItem: any) =>
           !newValue.some(
-            (newItem) => JSON.stringify(oldItem) === JSON.stringify(newItem)
+            (newItem: any) => JSON.stringify(oldItem) === JSON.stringify(newItem)
           )
       );
 
@@ -116,10 +118,10 @@ export default class StorageListener {
     }
   }
 
-  handleShortcutsChange(oldValue, newValue) {
+  handleShortcutsChange(oldValue: any, newValue: any) {
     // Find Added Shortcuts
-    const addedShortcuts = newValue.filter(newItem => {
+    const addedShortcuts = newValue.filter((newItem: any) => {
-      const isAdded = oldValue.some(oldItem => {
+      const isAdded = oldValue.some((oldItem: any) => {
         const match = oldItem.name === newItem.name;
         const wasDisabled = !oldItem.enabled;
         const isEnabled = newItem.enabled;        
@@ -130,8 +132,8 @@ export default class StorageListener {
     });
   
     // Find Removed Shortcuts
-    const removedShortcuts = newValue.filter(newItem => {
+    const removedShortcuts = newValue.filter((newItem: any) => {
-      const isRemoved = oldValue.some(oldItem => {
+      const isRemoved = oldValue.some((oldItem: any) => {
         const match = oldItem.name === newItem.name;
         const wasEnabled = oldItem.enabled;  // Was enabled in the old array
         const isDisabled = !newItem.enabled;  // Is disabled in the new array

src/seqta/utils/onError.ts

@@ -1 +1 @@
-export function onError (error) { console.log(`Error: ${error}`) }
+export function onError (error: string) { console.log(`Error: ${error}`) }