From 5c7fe53484e332b1a81b394516acd191841b867c Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 26 Oct 2023 21:19:11 +0100
Subject: [PATCH] update score

---
 public/assets/logos/beatsaver.png      | Bin 0 -> 1721 bytes
 src/components/icons/BeatSaverLogo.tsx |  30 +++++++++++++++++++++
 src/components/player/Score.tsx        |  35 ++++++++++++++++---------
 3 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 public/assets/logos/beatsaver.png
 create mode 100644 src/components/icons/BeatSaverLogo.tsx

diff --git a/public/assets/logos/beatsaver.png b/public/assets/logos/beatsaver.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b48bdd86bf92a2143984ac2212bb92b11245740
GIT binary patch
literal 1721
zcmV;q21fabP)<h;3K|Lk000e1NJLTq006WA006WI0{{R33KRAK00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#jZjQfMNDaNg#bo%06cO4JBt8He*i*-07icRLx})N
zdjLRx077;EJ$(Q{a{xR40FeLx|NQ`u_W+CQ0E55)YN7yG{{WBJ0D02@b@Tv==Kz83
z0EN2%XWRgLoB&nD0BxuMT>t(4{|uP_pw_bhV%Gq8i~vjjO|$>)_x~=Y|GDA+*zW(5
z(EoG7{{xhk08y+zOalM_01k9gPE!E+hhpDHxi8Bg$P%nOYOTNw000F|Nkl<Zc-rmV
zjdHR&5C&iotrdSNC?W#V3iyX||Ce_HXpdTfglv*^=G*B7Jd=5|NgUF2I{)fgqlw-n
zr4L4LLmqSuEy+vMjPCF)$ir?g3BoAyyeJBTq^G~ZXitn}5zQSZUdFMrnMaFcjDE2D
zy&&2+zH6;XS+4KQqs$m!H!nQLx7MaPo6SsfwI*yY_#7ZN&mDJ7#M7b(eC;Av_j}<y
zc2`$%$u?JRJYV2d6Z2+iJ(zPgYISb*E%V8ot1YzZDsvtYtm<krUUgw!zcv@@B|de%
z8K=6*j8WZe#;2w+V^h<aaj9v|nAG%UJZcs*7B!n0hnm%lLCtPfuWn;jt!`&lt8Qyn
zscvspr{*!MQuCSBsCmsQ)cj`oY6!DzHH=xV8p<qF4QH08hBV7k!<yx&q0KVX@MiI9
z5oXb9F=nx9QD%{9ab|I9k!De9v1T!9(Pj~9@n(3n3^TM^ju}=h%M7WOXNFVDG()N7
znqkzk%@At&W`4B_Gp|~WnNO|C%%fIkZm(8pZmU*nZl_jlZlhLjW>;e{v#N2J+0<Cf
zENVPvdNn39ts0k^PL0h>qsC`$R%0|bsd1X?)mY7SYP{xZb=^1HDAX^$8pmyZt<LYK
zED@Va_2Ye+2{Fg0&Be_V#|w<#dtgH&@EmuA+FYumY<#<O*G(c6X4|$em#JN?_BWxX
zm*zolL7Lr6Ie7ZBOOMC&P#x>_a()X)KG2q_Ry_SVoR6pPFH-wmZ9tM@s7FRHS2)ml
zCJwvwwEw!*=}?srGSpr+E?S2cI<BJ5QDowL+<$-F*V(Q~^`e*OLsyiJVu;V%(<3;q
zZFQ<$C)E07q+{9XxJ|qLUook)vVoYE6BYfVn|Mp9=!a?dqV_u~w7il2JMI3|cY2vp
zph-MTb<^(Iy#2A8(YhvMB34g326H(PCuPgqh+V|%ryafduH}hdTpFewgL#^7Ps_!n
z+%Jh+UFxSDi<vCrzdNR3FCS`AsXo(+o6W^Q8`r(5E^cdT@4(Dt=aFws``7*SXq*W<
z1f*c*d=^GY_xHFpAV-&2gxdZ&!I>WpF1h+M5OPSg4|_nfmwi0^tB}E`kfW`AhBOBs
zPygOTkoqXnEJjTm>9*!l4g7<Rz55nx7NNFN(Pjba%Tc%)Tus&Rc+Jpinuf=3hE{K-
zm_gMP4G+c)scvp~P-Z}NW2E8CaO$Rp2Wf^<H#Iz1GmyF=($Hogbt=~kp{{RuBFq5l
z+DMBr^Q-F`o+vZF`l!Insji8%NHd?hy5Wg6bEzv2Euzgl>Z&zdyt%!)s^Q5nw^mm)
zJUQmp>a9w1JN4^^C(qnU{j%Z7G`CT|inLsF3-ybJC)>=de$nvcn_1O=Bdx;Bs!mau
znbdz8o+>ko`Z?0-%na(MhNsfZpg!U;)2bgMt=deferR~=&2;MfLkk8omHKWC$6=;X
z|BuFErctNp%+2cC+JebUG1j|N@qHa8Gllwa-ln??Dl<hw?EDXxng7>G6=q(w8Z)0-
zm6=Da&fH$D(%e?9*4$35+T2F1-psDXU}jb0Fte$#m|4_#%=BtZW?D5aGo2cnnMRGz
z+^oiEZc^hk*Q>Fb>%JPtYrd&hvv)FI)$VHcz|NndL~Jh9`7NLOh|J8jkJ?<^m+>5b
zy}G_sIwQku`I{*FK>d_0QAeAlOV~xNEH_4P&Tmv@;oMpJu0_iA<Bb=-!IQzmu@*$$
z#wm)BGp+juk28;SBgqzFL@Hcln$hpPMUC`vPb;c7*5BvF@y>9flbQ@W|LRu%0Xb(g
z4UT;(IsgCwS9(-fbW&k=AaHVTW@&6?Aar?fWguyAbYlPjc%0+%3<z;nC@9KL%gjmT
zQUC)Z3oc^|6C)E#lN19JAVh#P!(;;^vs56<*wo0x%)}hT2g`s+ph_+P>K74o@<KJ0
P00000NkvXXu0mjfpXf-d

literal 0
HcmV?d00001

diff --git a/src/components/icons/BeatSaverLogo.tsx b/src/components/icons/BeatSaverLogo.tsx
new file mode 100644
index 0000000..9de0812
--- /dev/null
+++ b/src/components/icons/BeatSaverLogo.tsx
@@ -0,0 +1,30 @@
+type BeatSaverLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function BeatSaverLogo({
+  size = 32,
+  className,
+}: BeatSaverLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 200 200"
+      version="1.1"
+      className={className}
+    >
+      <g fill="none" stroke="#000000" stroke-width="10">
+        <path d="M 100,7 189,47 100,87 12,47 Z" stroke-linejoin="round"></path>
+        <path
+          d="M 189,47 189,155 100,196 12,155 12,47"
+          stroke-linejoin="round"
+        ></path>
+        <path d="M 100,87 100,196" stroke-linejoin="round"></path>
+        <path d="M 26,77 85,106 53,130 Z" stroke-linejoin="round"></path>
+      </g>
+    </svg>
+  );
+}
diff --git a/src/components/player/Score.tsx b/src/components/player/Score.tsx
index 3fe10d4..b10774a 100644
--- a/src/components/player/Score.tsx
+++ b/src/components/player/Score.tsx
@@ -31,7 +31,8 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
   const diffColor = songDifficultyToColor(diffName);
 
   return (
-    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1.2fr_6fr_3fr] xl:grid-cols-[1fr_6fr_3fr]">
+    // <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1fr_6fr_0.4fr_1.3fr]">
+    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.8fr_6fr_1.3fr]">
       <div className="ml-3 flex flex-col items-start justify-center">
         <div className="hidden w-fit flex-row items-center justify-start gap-1 md:flex">
           <GlobeAsiaAustraliaIcon width={20} height={20} />
@@ -56,32 +57,40 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
             loading="lazy"
           />
           <div
-            className="absolute mt-12 cursor-default divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"
+            className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"
             style={{
               backgroundColor: diffColor,
             }}
           >
-            <p className="text-white" title={diffName}>
-              {leaderboard.ranked ? (
-                <div className="flex items-center justify-center gap-[2px]">
-                  <StarIcon width={13} height={13} />
-                  {leaderboard.stars.toFixed(2)}
-                </div>
-              ) : (
-                diffName
-              )}
-            </p>
+            {leaderboard.ranked ? (
+              <div className="flex items-center justify-center gap-[2px]">
+                <StarIcon width={13} height={13} />
+                {leaderboard.stars.toFixed(2)}
+              </div>
+            ) : (
+              <p>{diffName}</p>
+            )}
           </div>
         </div>
         {/* Song Info */}
         <div className="w-fit truncate text-blue-500">
-          <p>{leaderboard.songName}</p>
+          <p className="font-bold">{leaderboard.songName}</p>
           <p className="text-blue-300">
             {leaderboard.songAuthorName}{" "}
             <span className="text-gray-200">{leaderboard.levelAuthorName}</span>
           </p>
         </div>
       </div>
+
+      {/* Score Buttons */}
+      {/* <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
+        <button className="rounded-md bg-gray-500">
+          <Link href={`https://beatsaver.com/maps/${leaderboard.songHash}`}>
+            <BeatSaverLogo size={24} className="p-[2.5px]" />
+          </Link>
+        </button>
+      </div> */}
+
       <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
         <div className="flex flex-col md:hidden">
           {/* Score rank */}