update: phone style

apps/web/src/Game.css

@@ -13,7 +13,7 @@
     > .section {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         width: 100%;
         padding: 0;
         box-sizing: border-box;
@@ -24,7 +24,7 @@
             align-items: center;
             font-weight: bold;
             width: 100%;
-            height: 2rem;
+            height: calc(2rem * var(--ratio));
             color: var(--base-text-color);
             border: 0.0625rem solid var(--base-text-color);
             border-bottom: 0.1875rem solid var(--color-primary);

apps/web/src/components/Talent.css

@@ -4,8 +4,8 @@
     justify-content: space-between;
     align-items: center;
     padding: 0 1rem;
-    height: 2rem;
+    height: calc(2rem * var(--ratio));
-    font-size: 1rem;
+    font-size: calc(1rem * var(--ratio-font));
     gap: 1rem;
     color: var(--color);
     background: var(--background, var(--base-background-color));
@@ -17,13 +17,26 @@
     &.selected {
         --color: var(--base-background-color);
         --background: var(--grade-color);
-        &:hover { --background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
+        
+        @media (hover: hover) {
+            &:hover { background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
+        }
+        &:active { 
+            background: oklch(from var(--grade-color) calc(l + 0.1) c h);
+            transition: none;
+        }
+    }
+    @media (hover: hover) {
+        &:hover { background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
+    }
+    &:active { 
+        background: oklch(from var(--grade-color) calc(l + 0.5) c h);
+        transition: none;
     }
-    &:hover { --background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
     .talent-name { font-weight: bold; }
     .talent-description {
         color: oklch(from var(--color) calc(l + 0.1) c h);
-        font-size: 0.85rem;
+        font-size: calc(0.85rem * var(--ratio-font));
         user-select: none;
         &::before { content: '['; margin-right: 0.125rem; }
         &::after { content: ']'; margin-left: 0.125rem; }
@@ -32,8 +45,18 @@
 }
 html[data-theme='dark'] {
     .talent{ 
-        &:hover {--background: oklch(from var(--grade-color) calc(l - 0.5) c h);}
+        @media (hover: hover) {
-        &.selected:hover { --background: oklch(from var(--grade-color) calc(l - 0.1) c h);}
+            &:hover { background: oklch(from var(--grade-color) calc(l - 0.5) c h); }
+            &.selected:hover { background: oklch(from var(--grade-color) calc(l - 0.1) c h); }
+        }
+        &:active { 
+            background: oklch(from var(--grade-color) calc(l - 0.5) c h); 
+            transition: none;
+        }
+        &.selected:active { 
+            background: oklch(from var(--grade-color) calc(l - 0.1) c h);
+            transition: none;
+        }
         .talent-description { color: oklch(from var(--color) calc(l - 0.2) c h); }
     }
 }

apps/web/src/components/TextSvg.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect, useRef } from 'react'
+export interface Props {
+    text: string
+    className: string
+}
+
+export function TextSvg({ text, className }: Readonly<Props>) {
+    const [height, setHeight] = useState(0)
+    const [width, setWidth] = useState(0)
+    const textRef = useRef<SVGTextElement>(null)
+    useEffect(() => {
+        if (!textRef.current) return
+        const { width, height } = textRef.current.getBBox()
+        setWidth(width)
+        setHeight(height)
+    }, [text, className, textRef])
+    return (
+        <svg
+            className={className}
+            fill="currentColor"
+            viewBox={`0 0 ${width} ${height}`}
+        >
+            <text
+                ref={textRef}
+                fontSize={10}
+                style={{
+                    transform: 'translate(50%,50%)',
+                    textAnchor: 'middle',
+                    dominantBaseline: 'central',
+                }}
+            >
+                {text}
+            </text>
+        </svg>
+    )
+}
+export default TextSvg

apps/web/src/containers/Alloc.css

@@ -8,7 +8,7 @@
     .allocation-input {
         display: flex;
         gap: 0;
-        height: 2rem;
+        height: calc(2rem * var(--ratio));
         border: 0.0625rem solid var(--grade-color);
         color: var(--grade-color);
         box-sizing: border-box;
@@ -46,11 +46,12 @@
         left: 0;
         transform: translateY(-100%);
         margin: 0;
+        font-size: calc(1rem * var(--ratio-font));
         li {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            height: 2rem;
+            height: calc(2rem * var(--ratio));
             padding: 0 0.5rem;
             gap: 0.5rem;
         }
@@ -67,6 +68,7 @@
         margin: 0;
         list-style: none;
         width: 100%;
+        font-size: calc(1rem * var(--ratio-font));
         > li {
             flex: 1 0;
             display: flex;
@@ -77,7 +79,7 @@
             gap: 0;
             > span {
                 width: 100%;
-                height: 2rem;
+                height: calc(2rem * var(--ratio));
                 color: var(--base-background-color);
                 background: var(--grade-color);
                 border: 0.0625rem solid var(--grade-color);
@@ -100,8 +102,8 @@
             > button {
                 --style-color: var(--left-color);
                 flex: 1;
-                font-size: 1rem;
+                font-size: calc(1rem * var(--ratio-font));
-                height: 2rem;
+                height: calc(2rem * var(--ratio));
                 width: 6rem;
                 padding: 0;
             }

apps/web/src/containers/Home.css

@@ -5,15 +5,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        h1 {
+        .main { font-weight: bold; }
-            font-size: 4rem;
-            margin: 0;
-            font-weight: bold;
-        }
-        h2 {
-            font-size: 2rem;
-            margin: 0;
-        }
     }
     .theme-toggle-btn {
         position: fixed;

apps/web/src/containers/Home.tsx

@@ -1,4 +1,5 @@
 import { useRemake } from '@remake/hooks'
+import { TextSvg } from '@/components/TextSvg'
 import { ThemeToggle } from '@/components/ThemeToggle'
 import './Home.css'
 
@@ -7,10 +8,10 @@ export default function Home() {
     return (
         <div className="screen home">
             <div className="title">
-                <h1>人生重开模拟器</h1>
+                <TextSvg text="人生重开模拟器" className="main" />
-                <h2>这垃圾人生一秒也不想待了</h2>
+                <TextSvg text="这垃圾人生一秒也不想待了" className="sub" />
             </div>
-            <button className="primary" onClick={remake}>
+            <button className="primary focus" onClick={remake}>
                 立即重开
             </button>
             <ThemeToggle />

apps/web/src/containers/Play.css

@@ -107,8 +107,8 @@
         > button {
             flex: 1 0;
             min-width: 6rem;
-            font-size: 1.25rem;
+            font-size: calc(1.25rem * var(--ratio-font));
-            height: 2.5rem;
+            height: calc(2.5rem * var(--ratio));
         }
     }
 }

apps/web/src/containers/Summary.css

@@ -37,7 +37,7 @@
     ul.talent-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         width: 100%;
     }
 }

apps/web/src/containers/TalentPick.css

@@ -7,7 +7,7 @@
     ul.talent-list {
         display: flex;
         flex-direction: column;
-        gap: 0.5rem;
+        gap: calc(0.5rem * var(--ratio));
         li {
             display: flex;
             align-items: center;

apps/web/src/containers/TalentPick.tsx

@@ -14,8 +14,11 @@ export default function TalentPick() {
     if (!pulled)
         return (
             <div className="screen talent-pick">
-                <button className="primary font-mono" onClick={() => puller()}>
+                <button
-                    {PullCount}连抽!
+                    className="primary font-mono focus"
+                    onClick={() => puller()}
+                >
+                    {PullCount} 连抽!
                 </button>
             </div>
         )

apps/web/src/styles/common.css

@@ -1,7 +1,12 @@
+:root {
+    --ratio: 1;
+    --ratio-font: 1;
+    color: var(--base-text-color); 
+}
+
 html { transition: all 0.2s ease-in-out; }
 html[data-theme='light'] { color-scheme: light; }
 html[data-theme='dark'] { color-scheme: dark; }
-:root { color: var(--base-text-color); }
 .hide-scrollbar,
 html {
     overflow-y: auto;
@@ -51,22 +56,42 @@ button {
     box-sizing: border-box;
     border: var(--border-color) 0.0625rem solid;
     background: var(--background-color);
-    font-size: 1.2rem;
+    font-size: calc(1.2rem * var(--ratio-font));
     font-weight: bold;
     padding: 0 1rem;
-    height: 2.5rem;
+    height: calc(2.5rem * var(--ratio));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     user-select: none;
     transition: all 0.2s ease-in-out;
-    &:hover {
+    outline: none;
-        --background-color: var(--style-color);
+    @media (hover: hover) {
-        --text-color: var(--style-background);
+        &:hover {
+            border: var(--style-background) 0.0625rem solid;
+            background: var(--style-color);
+            color: var(--style-background);
+        }
     }
+
+    &:active {
+        border: var(--style-background) 0.0625rem solid;
+        background: var(--style-color);
+        color: var(--style-background);
+        transition: none;
+    }
+
     &.primary { --style-color: var(--color-primary); }
     &.info { --style-color: var(--color-info); }
     &.error { --style-color: var(--color-error); }
+    &.focus {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc(3.5rem * var(--ratio));
+        font-size: calc(1.6rem * var(--ratio-font));
+        font-weight: bold;
+    }
 }
 
 ul {
@@ -76,7 +101,7 @@ ul {
 }
 
 input {
-    font-size: 1rem;
+    font-size: calc(1rem * var(--ratio-font));
     padding: 0;
     margin: 0;
     border: none;
@@ -91,4 +116,10 @@ input {
     &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 }
 
-@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
+@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
+@media screen and (orientation: portrait) and (pointer: coarse) {
+    :root {
+        --ratio: 1.5;
+        --ratio-font: 1.2;
+    }
+}