From 53b8ce70955264808a61562b81758c7a9dc065ff Mon Sep 17 00:00:00 2001
From: itoshi <kkzemeow@gmail.com>
Date: Tue, 28 Apr 2026 11:04:09 +0300
Subject: [PATCH] feat: udpate route widget

---
 src/client/src/components/widgets/RouteWidget.jsx    |  9 ++++++++-
 src/client/src/styles/RouteWidget.css                | 12 ++++++++++++
 .../webgl-prototype/RouteWidget.module.css           | 12 ++++++++++++
 .../route-preview/webgl-prototype/RouteWidget.tsx    | 10 +++++++++-
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/client/src/components/widgets/RouteWidget.jsx b/src/client/src/components/widgets/RouteWidget.jsx
index 97ef721..a1c9fe8 100644
--- a/src/client/src/components/widgets/RouteWidget.jsx
+++ b/src/client/src/components/widgets/RouteWidget.jsx
@@ -64,6 +64,13 @@ const RouteWidget = observer(() => {
   }, [context?.endStopId, isLoading, selectedLanguage]);
 
   const shouldAnimate = (text, maxLength) => text?.length > maxLength;
+  const getNumberSizeClass = (text) => {
+    const length = text?.length || 0;
+    if (length <= 2) return "";
+    if (length === 3) return "route-widget-number--3";
+    if (length === 4) return "route-widget-number--4";
+    return "route-widget-number--5";
+  };
   const getLabelSizeClass = (text) => {
     const length = text?.length || 0;
 
@@ -77,7 +84,7 @@ const RouteWidget = observer(() => {
   const routeZhSubtitle = `${startStationZh?.name} - ${endStationZh?.name}`;
   return (
     <div className="route-widget">
-      <div className="route-widget-number">
+      <div className={`route-widget-number ${getNumberSizeClass(route?.route_sys_number || context?.routeNumber)}`}>
         {route?.route_sys_number || context?.routeNumber || ""}
       </div>
       <div className="route-widget-content">
diff --git a/src/client/src/styles/RouteWidget.css b/src/client/src/styles/RouteWidget.css
index 394cce7..37cfcba 100644
--- a/src/client/src/styles/RouteWidget.css
+++ b/src/client/src/styles/RouteWidget.css
@@ -59,6 +59,18 @@
   font-weight: 900;
 }
 
+.route-widget-number--3 {
+  font-size: 50px;
+}
+
+.route-widget-number--4 {
+  font-size: 38px;
+}
+
+.route-widget-number--5 {
+  font-size: 30px;
+}
+
 .route-widget-content {
   overflow: hidden;
   width: 257px;
diff --git a/src/pages/Route/route-preview/webgl-prototype/RouteWidget.module.css b/src/pages/Route/route-preview/webgl-prototype/RouteWidget.module.css
index 1de8dc3..f690ad3 100644
--- a/src/pages/Route/route-preview/webgl-prototype/RouteWidget.module.css
+++ b/src/pages/Route/route-preview/webgl-prototype/RouteWidget.module.css
@@ -59,6 +59,18 @@
   font-weight: 900;
 }
 
+.route-widget-number--3 {
+  font-size: 50px;
+}
+
+.route-widget-number--4 {
+  font-size: 38px;
+}
+
+.route-widget-number--5 {
+  font-size: 30px;
+}
+
 .route-widget-content {
   overflow: hidden;
   width: 257px;
diff --git a/src/pages/Route/route-preview/webgl-prototype/RouteWidget.tsx b/src/pages/Route/route-preview/webgl-prototype/RouteWidget.tsx
index 0e00e4a..18eb256 100644
--- a/src/pages/Route/route-preview/webgl-prototype/RouteWidget.tsx
+++ b/src/pages/Route/route-preview/webgl-prototype/RouteWidget.tsx
@@ -6,6 +6,14 @@ import { observer } from "mobx-react-lite";
 const shouldAnimate = (text: string | undefined, maxLength: number) =>
   (text?.length ?? 0) > maxLength;
 
+const getNumberSizeClass = (text: string | undefined) => {
+  const length = text?.length ?? 0;
+  if (length <= 2) return "";
+  if (length === 3) return styles["route-widget-number--3"];
+  if (length === 4) return styles["route-widget-number--4"];
+  return styles["route-widget-number--5"];
+};
+
 const getLabelSizeClass = (text: string | undefined) => {
   const length = text?.length ?? 0;
   if (length <= 40) return "";
@@ -33,7 +41,7 @@ export const RouteWidget = observer(() => {
 
   return (
     <div className={styles["route-widget"]} style={{ position: "relative" }}>
-      <div className={styles["route-widget-number"]}>
+      <div className={[styles["route-widget-number"], getNumberSizeClass(routeData?.route_sys_number)].join(" ")}>
         {routeData?.route_sys_number || ""}
       </div>
       <div className={styles["route-widget-content"]}>