add link to chartview from score views

4 files changed, 30 insertions, 5 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 533a099..1abe8ba 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
+    "crypto-js": "^4.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
@@ -18,6 +19,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 8e2841c..d1ac6f6 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.11
         version: 4.1.11(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -27,6 +30,9 @@ importers:
       '@eslint/js':
         specifier: ^9.25.0
         version: 9.30.0
+      '@types/crypto-js':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@types/react':
         specifier: ^19.1.2
         version: 19.1.8
@@ -589,6 +595,9 @@ packages:
   '@types/babel__traverse@7.20.7':
     resolution: {integrity: sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==}
 
+  '@types/crypto-js@4.2.2':
+    resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -742,6 +751,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1774,6 +1786,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.27.7
 
+  '@types/crypto-js@4.2.2': {}
+
   '@types/estree@1.0.8': {}
 
   '@types/json-schema@7.0.15': {}
@@ -1960,6 +1974,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@4.2.0: {}
+
   csstype@3.1.3: {}
 
   debug@4.4.1:
diff --git a/frontend/src/components/displays/DancerushScoreDisplay.tsx b/frontend/src/components/displays/DancerushScoreDisplay.tsx
index 4799787..e3bae96 100644
--- a/frontend/src/components/displays/DancerushScoreDisplay.tsx
+++ b/frontend/src/components/displays/DancerushScoreDisplay.tsx
@@ -1,7 +1,9 @@
 import React from "react";
+import {Link} from "react-router";
 import { globalSkipKeys } from "../../types/constants";
 import dancerushEasyImg from "../../assets/games/dancerush/easy.webp";
 import dancerushNormalImg from "../../assets/games/dancerush/normal.webp";
+import SHA1 from "crypto-js/sha1";
 
 interface Score {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -273,7 +275,7 @@ const DancerushScoreDisplay: React.FC<ScoreDisplayProps> = ({
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const { primary, mainStats, expandable, others, timestamp } =
             getScoreEntries(score);
-
+          const chartIdHash = SHA1(`dancerush${score.title}${score.artist}`).toString();
           return (
             <div
               key={score.id || index}
@@ -283,7 +285,7 @@ const DancerushScoreDisplay: React.FC<ScoreDisplayProps> = ({
               <div className="flex items-start justify-between mb-4">
                 <div className="flex-1 min-w-0">
                   {!hideTitleArtist && (
-                    <>
+                    <Link to={`/chart?chartId=${chartIdHash}`}>
                       <h3 className="text-lg font-semibold text-white mb-1 break-words leading-tight">
                         {score.title || score.song || "Unknown Title"}
                       </h3>
@@ -292,7 +294,7 @@ const DancerushScoreDisplay: React.FC<ScoreDisplayProps> = ({
                           {score.artist}
                         </p>
                       )}
-                    </>
+                    </Link>
                   )}
                   {showUsername && score.username && (
                     <p className="text-slate-500 text-xs break-words leading-tight">
diff --git a/frontend/src/components/displays/GenericScoreDisplay.tsx b/frontend/src/components/displays/GenericScoreDisplay.tsx
index 66bfe2a..255c804 100644
--- a/frontend/src/components/displays/GenericScoreDisplay.tsx
+++ b/frontend/src/components/displays/GenericScoreDisplay.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import SHA1 from "crypto-js/sha1";
+import { Link } from "react-router";
 import { globalSkipKeys } from "../../types/constants";
 
 interface Score {
@@ -73,6 +75,8 @@ const ScoreDisplay: React.FC<ScoreDisplayProps> = ({
     "grade",
   ];
   const expandableKeys = ["judgements", "optional"];
+  // get ?game=
+  const internalGameName =new URLSearchParams(window.location.search).get("game") || "dancerush";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const formatValue = (value: any, key: string): string => {
     if (value === null || value === undefined) return "N/A";
@@ -266,6 +270,7 @@ const ScoreDisplay: React.FC<ScoreDisplayProps> = ({
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
         {sortedScores.map((score, index) => {
+          const chartIdHash = SHA1(`${internalGameName}${score.title}${score.artist}`).toString();
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const { primary, mainStats, expandable, others, timestamp } =
             getScoreEntries(score);
@@ -279,7 +284,7 @@ const ScoreDisplay: React.FC<ScoreDisplayProps> = ({
               <div className="flex items-start justify-between mb-4">
                 <div className="flex-1 min-w-0">
                   {!hideTitleArtist && (
-                    <>
+                    <Link to={`/chart?chartId=${chartIdHash}`}>
                       <h3 className="text-lg font-semibold text-white mb-1 break-words leading-tight">
                         {score.title || score.song || "Unknown Title"}
                       </h3>
@@ -288,7 +293,7 @@ const ScoreDisplay: React.FC<ScoreDisplayProps> = ({
                           {score.artist}
                         </p>
                       )}
-                    </>
+                    </Link>
                   )}
                   {showUsername && score.username && (
                     <p className="text-slate-500 text-xs break-words leading-tight">