fix: performance issues for styled-componnt CSS animations

4 files changed, 37 insertions, 26 deletions

diff --git a/src/app/create/page.styles.ts b/src/app/create/page.styles.ts
index 341ba08..b54e095 100644
--- a/src/app/create/page.styles.ts
+++ b/src/app/create/page.styles.ts
@@ -85,6 +85,19 @@ export const GenerateButton = styled.button`
   }
 `;
 
+export const ModeButton = styled.button<{ $active: boolean }>`
+  height: 42px;
+  padding: 0 24px;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  background-color: ${(p) => (p.$active ? "#1a1a1a" : "#e5e5e5")};
+  color: ${(p) => (p.$active ? "#fff" : "#1a1a1a")};
+  transition: background-color 0.15s;
+`;
+
 export const OutputSection = styled.div`
   margin-top: 32px;
   display: flex;
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 016c930..d1537d4 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { MdLibraryMusic } from "react-icons/md";
 import { FaCopy, FaCheck, FaExternalLinkAlt } from "react-icons/fa";
 import { Root, Navbar, Logo, LogoIcon, NavLink } from "../styles/shared";
@@ -14,6 +14,7 @@ import {
   Divider,
   Row,
   GenerateButton,
+  ModeButton,
   OutputSection,
   OutputLabel,
   CodeBox,
@@ -108,13 +109,7 @@ export default function CreatePage() {
   };
 
   const playerPath = mode === "typing" ? "/typing" : "/player";
-  const shareUrl = useMemo(
-    () =>
-      code
-        ? `${typeof window !== "undefined" ? window.location.origin : ""}${playerPath}?code=${code}`
-        : "",
-    [code, playerPath]
-  );
+  const shareUrl = code ? `${playerPath}?code=${code}` : "";
 
   return (
     <Root>
@@ -136,32 +131,26 @@ export default function CreatePage() {
 
         <Form>
           <Row>
-            <GenerateButton
+            <ModeButton
+              $active={mode === "karaoke"}
               onClick={() => {
                 setMode("karaoke");
                 setCode(null);
                 resetCopyStates();
               }}
-              style={{
-                backgroundColor: mode === "karaoke" ? "#1a1a1a" : "#e5e5e5",
-                color: mode === "karaoke" ? "#fff" : "#1a1a1a",
-              }}
             >
               MoekyunKaraoke
-            </GenerateButton>
-            <GenerateButton
+            </ModeButton>
+            <ModeButton
+              $active={mode === "typing"}
               onClick={() => {
                 setMode("typing");
                 setCode(null);
                 resetCopyStates();
               }}
-              style={{
-                backgroundColor: mode === "typing" ? "#1a1a1a" : "#e5e5e5",
-                color: mode === "typing" ? "#fff" : "#1a1a1a",
-              }}
             >
               LRC-Type
-            </GenerateButton>
+            </ModeButton>
           </Row>
 
           <Divider />
diff --git a/src/app/game/game.utils.ts b/src/app/game/game.utils.ts
index 73d2884..6177d2c 100644
--- a/src/app/game/game.utils.ts
+++ b/src/app/game/game.utils.ts
@@ -27,7 +27,10 @@ export function parseLrcLines(lrcText: string): GameLine[] {
 
     if (timestamps.length === 0) continue;
 
-    const content = rawLine.slice(lastIndex).trim();
+    const content = rawLine
+      .slice(lastIndex)
+      .replace(/\([^)]*\)/g, "")
+      .trim();
     if (!content) continue;
 
     for (const ms of timestamps) {
@@ -42,4 +45,4 @@ export function parseLrcLines(lrcText: string): GameLine[] {
 export function formatTime(ms: number): string {
   const s = Math.max(0, Math.floor(ms / 1000));
   return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
-}
\ No newline at end of file
+}
diff --git a/src/app/game/page.styles.ts b/src/app/game/page.styles.ts
index 1ced4cc..e8a2678 100644
--- a/src/app/game/page.styles.ts
+++ b/src/app/game/page.styles.ts
@@ -186,11 +186,14 @@ export const LineTimingBar = styled.div`
   overflow: hidden;
 `;
 
-export const LineTimingFill = styled.div<{ $pct: number }>`
+export const LineTimingFill = styled.div.attrs<{ $pct: number }>((props) => ({
+  style: {
+    width: `${props.$pct}%`,
+  },
+}))<{ $pct: number }>`
   height: 100%;
   border-radius: 2px;
   background: #7c3aed;
-  width: ${({ $pct }) => $pct}%;
   transition: width 0.1s linear;
 `;
 
@@ -313,11 +316,14 @@ export const ProgressWrap = styled.div`
   cursor: pointer;
 `;
 
-export const ProgressFill = styled.div<{ $pct: number }>`
+export const ProgressFill = styled.div.attrs<{ $pct: number }>((props) => ({
+  style: {
+    width: `${props.$pct}%`,
+  },
+}))<{ $pct: number }>`
   height: 100%;
   background: #7c3aed;
   border-radius: 3px;
-  width: ${({ $pct }) => $pct}%;
   transition: width 0.3s linear;
 `;