add basic daily answer encryption

6 files changed, 121 insertions, 12 deletions

diff --git a/src/app.tsx b/src/app.tsx
index 7c4c81d..4eeccc8 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -3,8 +3,8 @@ import _ from "lodash";
 
 import { Song } from "./types/song";
 import { GuessState, GuessType } from "./types/guess";
+import { getDailySolution } from "./helpers/fetchSolution";
 
-import { todaysSolution } from "./helpers";
 
 import { Header, InfoPopUp, Game, Footer } from "./components";
 
@@ -22,6 +22,7 @@ function App() {
   const [currentTry, setCurrentTry] = React.useState<number>(0);
   const [selectedSong, setSelectedSong] = React.useState<Song>();
   const [didGuess, setDidGuess] = React.useState<boolean>(false);
+  const [todaysSolution, setTodaysSolution] = React.useState<Song | null>(null);
 
   const firstRun = localStorage.getItem("firstRun") === null;
 
@@ -59,6 +60,10 @@ function App() {
   let statsVersion = JSON.parse(localStorage.getItem("version") || "1");
 
   React.useEffect(() => {
+    getDailySolution().then(solution => setTodaysSolution(solution));
+  }, []);
+
+  React.useEffect(() => {
     if (Array.isArray(stats)) {
       const visitedToday = _.isEqual(
         todaysSolution,
@@ -78,8 +83,6 @@ function App() {
         setDidGuess(didGuess);
       }
     } else {
-      // initialize stats
-      // useEffect below does rest
       stats = [];
       stats.push({
         solution: todaysSolution,
@@ -168,7 +171,7 @@ function App() {
     let state = GuessState.Incorrect;
     if (selectedSong === todaysSolution) {
       state = GuessState.Correct;
-    } else if (selectedSong?.artist === todaysSolution.artist) {
+    } else if (selectedSong?.artist === todaysSolution?.artist) {
       state = GuessState.PartiallyCorrect
     }
 
@@ -195,6 +198,10 @@ function App() {
     }
   }, [guesses, selectedSong]);
 
+  if (todaysSolution === null) {
+    return null;
+  }
+
   return (
     <main>
       <Header openInfoPopUp={openInfoPopUp} />
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index e2747c3..3ba4c7c 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -20,13 +20,8 @@ export function Footer() {
   return (
     <footer>
       <Styled.Text>
-        Made with <IoHeart /> by{" "}
-        <Styled.Link href="https://epicwolverine.com">
-          EpicWolverine
-        </Styled.Link>
-        {" "}based on the work of{" "}
-        <Styled.Link href="https://twitter.com/synowski_maciej">
-          Maciej Synowski
+        <Styled.Link href="">
+          Source Code
         </Styled.Link>
       </Styled.Text>
       {showDebugButton &&
diff --git a/src/constants/index.ts b/src/constants/index.ts
index bf50a38..9d6bd5f 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,5 +1,5 @@
 export { appName } from "./appName";
 export { playTimes } from "./playTimes";
-export { songs } from "./songs";
+export { songs } from "../data/songs";
 export { startDate } from "./startDate";
 export { theme } from "./theme";
diff --git a/src/data/songs.ts b/src/data/songs.ts
new file mode 100644
index 0000000..7b760b2
--- /dev/null
+++ b/src/data/songs.ts
@@ -0,0 +1,4 @@
+export const songs = [
+  { artist: "KiiiKiii", name: "Strawberry Cheesegame", youtubeId: "CQSY6FeT68I" },
+  { artist: "ifeye", name: "r u ok?", youtubeId: "tEF6aKhfPaQ" },
+];
diff --git a/src/helpers/fetchSolution.ts b/src/helpers/fetchSolution.ts
new file mode 100644
index 0000000..b43722a
--- /dev/null
+++ b/src/helpers/fetchSolution.ts
@@ -0,0 +1,52 @@
+import { Song } from "../types/song";
+
+const SALT = process.env.HEARDLE_SALT ?? 'changeme';
+const API_URL = process.env.HEARDLE_API_URL ?? 'http://localhost:3001';
+
+function hexToBytes(hex: string): Uint8Array {
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < hex.length; i += 2) {
+    bytes[i / 2] = parseInt(hex.slice(i, i + 2), 16);
+  }
+  return bytes;
+}
+
+
+async function getDailyKey(): Promise<CryptoKey> {
+  const enc = new TextEncoder();
+  const date = new Date().toISOString().split('T')[0];
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(date),
+    'PBKDF2',
+    false,
+    ['deriveKey'],
+  );
+  return crypto.subtle.deriveKey(
+    { name: 'PBKDF2', salt: enc.encode(SALT), iterations: 100_000, hash: 'SHA-256' },
+    keyMaterial,
+    { name: 'AES-GCM', length: 256 },
+    false,
+    ['decrypt'],
+  );
+}
+
+export async function getDailySolution(): Promise<Song> {
+  const solutionData = await fetch(`${API_URL}/today`);
+  if (!solutionData.ok) {
+    throw new Error(`Failed to fetch solution: ${solutionData.statusText}`);
+  }
+  const { iv, tag, data } = await solutionData.json();
+  const key = await getDailyKey();
+  const ciphertext = hexToBytes(data);
+  const authTag = hexToBytes(tag);
+  const combined = new Uint8Array(ciphertext.length + authTag.length);
+  combined.set(ciphertext);
+  combined.set(authTag, ciphertext.length);
+  const decrypted = await crypto.subtle.decrypt(
+    { name: 'AES-GCM', iv: hexToBytes(iv) },
+    key,
+    combined,
+  );
+  return JSON.parse(new TextDecoder().decode(decrypted)) as Song;
+}
diff --git a/src/helpers/fetchSongs.ts b/src/helpers/fetchSongs.ts
new file mode 100644
index 0000000..5ae0d83
--- /dev/null
+++ b/src/helpers/fetchSongs.ts
@@ -0,0 +1,51 @@
+import { Song } from "../types/song";
+let cachedSongs: Song[] | null = null;
+function fuzzyMatch(input: string): string {
+  return input.toLowerCase().replace(/[^0-9a-z ]/gi, '');
+}
+
+
+export async function fetchSongs(useCache=true): Promise<Song[]> {
+  if (useCache && cachedSongs) {
+    return cachedSongs;
+  }
+
+  try {
+    const response = await fetch('/songs');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const songsData: Song[] = await response.json();
+    cachedSongs = songsData;
+    return songsData;
+  } catch (error) {
+    console.error("Failed to fetch songs:", error);
+    throw error;
+  }
+}
+
+export async function searchSongs(searchTerm: string): Promise<Song[]> {
+  const songsToSearch = await fetchSongs();
+
+  const processedSearchTerm = fuzzyMatch(searchTerm);
+
+  const matchingSongs = songsToSearch
+    .filter((song: Song) => {
+      const songName = fuzzyMatch(song.name);
+      const songArtist = fuzzyMatch(song.artist);
+
+      if (songArtist.includes(processedSearchTerm) || songName.includes(processedSearchTerm)) {
+        return true;
+      }
+      return false;
+    })
+    .sort((a, b) =>
+      a.artist.toLowerCase().localeCompare(b.artist.toLocaleLowerCase())
+       || a.name.toLowerCase().localeCompare(b.name.toLocaleLowerCase())
+    );
+
+  return matchingSongs;
+}
+export function getCachedSongs(): Song[] | null {
+  return cachedSongs;
+}