feat: 实现桌面控制组件

src/features/game/components/desktop/desktop-status.tsx

@@ -0,0 +1,54 @@
+import statusCenter from '@/assets/system/status-center.webp'
+import statusLine from '@/assets/system/status-line.webp'
+import { DesktopCountdown } from '@/features/game/components/desktop/desktop-countdown.tsx'
+import { DesktopTitle } from '@/features/game/components/desktop/desktop-title.tsx'
+
+export function DesktopStatusLine() {
+  return (
+    <div className={'relative w-full flex flex-col text-design-22'}>
+      <div
+        className="w-full h-design-60 bg-no-repeat bg-center flex items-center justify-center"
+        style={{
+          backgroundImage: `url(${statusLine})`,
+          backgroundSize: '100% 100%',
+        }}
+      >
+        <div className={'flex-1 flex items-center justify-center'}>
+          <div>Odds: 1:33</div>
+          <div>Streak: X2</div>
+          <div>Limit: 100</div>
+        </div>
+        <div
+          className="w-design-360 h-[105px] font-countdown bg-no-repeat bg-center bg-contain flex items-center justify-center"
+          style={{ backgroundImage: `url(${statusCenter})` }}
+        >
+          <DesktopCountdown
+            initialSeconds={30}
+            onComplete={() => {
+              console.log('countdown finished')
+            }}
+          />
+        </div>
+        <div className={'flex-1 flex items-center justify-center gap-10'}>
+          <div>Round ID:20241026120</div>
+          <div className={'flex items-center gap-2'}>
+            <div className={'flex items-center gap-2'}>
+              <div
+                className={'w-design-20 h-design-20 bg-[#78FF7F] rounded-[50%]'}
+              ></div>
+              <div className={'text-[#78FF7F]'}>OPEN</div>
+            </div>
+            <div>(Menerima Taruhan)</div>
+          </div>
+        </div>
+      </div>
+      <div
+        className={
+          'absolute top-design-60 left-1/2 -translate-x-1/2 -z-10 w-full px-design-16'
+        }
+      >
+        <DesktopTitle />
+      </div>
+    </div>
+  )
+}