chore: card & top btn css cleanup

card & top btn css cleanup; pwa; type declaration; clarr

Author: tomchen

.gitignore

@@ -14,6 +14,8 @@ public
 
 dev-dist
 
+src/styles/_variables.scss
+
 package.json.bk
 
 # MicrosoftOffice.gitignore

CHANGELOG.md

@@ -6,13 +6,13 @@ _To ensure you're using the latest version, open the game and press <kbd>Ctrl</k
 
 <!-- ## [v1.6.0](https://github.com/arcomage/arcomage-hd/compare/v1.5.0...v1.6.0) (2025-?-?) (in progress)
 
-- And more ([issue list](https://github.com/arcomage/arcomage-hd/issues?q=is%3Aissue+is%3Aclosed+closed%3A2025-02-24..*); [PR list](https://github.com/arcomage/arcomage-hd/pulls?q=is%3Apr+is%3Aclosed+merged%3A2025-02-24..*)) -->
+- And more ([issue list](https://github.com/arcomage/arcomage-hd/issues?q=is%3Aissue+is%3Aclosed+closed%3A2025-02-26..*); [PR list](https://github.com/arcomage/arcomage-hd/pulls?q=is%3Apr+is%3Aclosed+merged%3A2025-02-26..*)) -->
 
-## [v1.5.0](https://github.com/arcomage/arcomage-hd/compare/v1.4.3...v1.5.0) (2025-02-23) (in beta testing phase)
+## [v1.5.0](https://github.com/arcomage/arcomage-hd/compare/v1.4.3...v1.5.0) (2025-02-25) (in beta testing phase)
 
 - [Major Library changes](https://github.com/arcomage/arcomage-hd/issues/78)
   - Major Upgrade: React 19, Redux 5, RxJS 7.8, etc.
-  - Removed: Webpack and related libs, Yarn, Jest and related libs, Enzyme, Testing Library, MUI, Husky, commitlint, classnames, copy-to-clipboard, some eslint plugins, ts-node, etc.
+  - Removed: Webpack and related libs, Yarn, JSS, Jest and related libs, Enzyme, Testing Library, MUI, Husky, commitlint, classnames, copy-to-clipboard, some eslint plugins, ts-node, some polyfills (including pwacompat),etc.
   - Added: Bun, Vite, [React Compiler](https://react.dev/learn/react-compiler), clsx, etc.
 - [Automatic update (and/or showing notification) of the game in PWA or non PWA](https://github.com/arcomage/arcomage-hd/issues/106)
 - [Full control with mouse, touch device, keyboard, or gamepad](https://github.com/arcomage/arcomage-hd/issues/93) 🖱️📱⌨️🎮 ([instructions](gamecontrols.md)) (gamepad has basic support and is not fully finished)
@@ -26,7 +26,7 @@ _To ensure you're using the latest version, open the game and press <kbd>Ctrl</k
 - CI update, replaced husky git hooks with custom script
 - Docs update
 - Easter egg when clicking on birds
-- And more ([issue list](https://github.com/arcomage/arcomage-hd/issues?q=is%3Aissue+is%3Aclosed+closed%3A2025-01-26..2025-02-23); [PR list](https://github.com/arcomage/arcomage-hd/pulls?q=is%3Apr+is%3Aclosed+merged%3A2025-01-26..2025-02-23))
+- And more ([issue list](https://github.com/arcomage/arcomage-hd/issues?q=is%3Aissue+is%3Aclosed+closed%3A2025-01-26..2025-02-25); [PR list](https://github.com/arcomage/arcomage-hd/pulls?q=is%3Apr+is%3Aclosed+merged%3A2025-01-26..2025-02-25))
 
 ## [v1.4.0](https://github.com/arcomage/arcomage-hd/compare/v1.3.0...v1.4.3) ([2025-01-25](https://github.com/arcomage/arcomage-hd/tree/552bf596a98d403310345efe7afc7c067938d489))
 

DEVELOPMENT.md

@@ -5,7 +5,7 @@
 - Install dependencies:
   - `bun install`
 - Start the project in development mode:
-  - `bun start`
+  - `bun dev`
 - Before releasing a new version, run the checks:
   - `bun checkall`
   - `git add .`
@@ -30,8 +30,8 @@
 - `bun install`: Install dependencies
   - `bun install:nooptional`: Install dependencies without optional dependencies (temporarily remove optional dependencies in package.json and re-add them after install. Used by CI)
 - `bun upgrade`: Upgrade dependencies to the latest compatible versions
-- `bun start`: Start the project in development mode
-  - `bun start --host` or `bun preview --host`: Run the project in development/production mode and expose it to the local network (on devices on the same wifi/network, go to `http://192.168.?.?:PORT` to view the app)
+- `bun dev`: Start the project in development mode
+  - `bun dev --host` or `bun preview --host`: Run the project in development/production mode and expose it to the local network (on devices on the same wifi/network, go to `http://192.168.?.?:PORT` to view the app)
   - `./tools/manifest` generates json object of `manifest.json` and icon files from ./assets/logo/, it runs automatically before each start or build, see `vite.config.ts`
 - `bun run build`: Build the project in production mode
 - `bun preview`: Preview the built project in production mode (does not include build process)

README.md

@@ -108,7 +108,6 @@ The stack :
 <a href="https://vite.dev/" title="Vite"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/vite.svg" alt="Vite" width="21px" height="21px"></a>
 <a href="https://sass-lang.com/" title="Sass"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/sass.svg" alt="Sass" width="21px" height="21px"></a>
 <a href="https://tailwindcss.com/" title="Tailwind CSS"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/tailwindcss-icon.svg" alt="Tailwind CSS" width="21px" height="21px"></a>
-<a href="https://cssinjs.org/" title="JSS"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/jss.svg" alt="JSS" width="21px" height="21px"></a>
 <a href="https://prettier.io/" title="Prettier"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/prettier.svg" alt="Prettier" width="21px" height="21px"></a>
 <a href="https://eslint.org/" title="ESLint"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/eslint.svg" alt="ESLint" width="21px" height="21px"></a>
 <a href="https://github.com/postcss/postcss" title="PostCSS"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/postcss.svg" alt="PostCSS" width="21px" height="21px"></a>
@@ -127,6 +126,7 @@ Used in ≤1.4 but not in 1.5+:
 <p align="center">
 <a href="https://yarnpkg.com/" title="yarn"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/yarn.svg" alt="yarn" width="21px" height="21px"></a>
 <a href="https://webpack.js.org/" title="webpack"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/webpack.svg" alt="webpack" width="21px" height="21px"></a>
+<a href="https://cssinjs.org/" title="JSS"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/jss.svg" alt="JSS" width="21px" height="21px"></a>
 <a href="https://material-ui.com/" title="Material-UI"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/material-ui.svg" alt="Material-UI" width="21px" height="21px"></a>
 <a href="https://jestjs.io/" title="Jest"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/jest.svg" alt="Jest" width="21px" height="21px"></a>
 <a href="https://github.com/enzymejs/enzyme" title="Enzyme"><img src="https://raw.githubusercontent.com/arcomage/arcomage-hd/main/misc/readme_images/stack/enzyme.svg" alt="Enzyme" width="21px" height="21px"></a>

bun.lock

@@ -10,7 +10,6 @@
         "clsx": "^2.1.1",
         "immer": "^10.1.1",
         "peerjs": "^1.5.4",
-        "pwacompat": "^2.0.17",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-helmet-async": "^2.0.5",
@@ -1709,8 +1708,6 @@
 
     "punycode": ["[email protected]", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
-    "pwacompat": ["[email protected]", "", {}, "sha512-6Du7IZdIy7cHiv7AhtDy4X2QRM8IAD5DII69mt5qWibC2d15ZU8DmBG1WdZKekG11cChSu4zkSUGPF9sweOl6w=="],
-
     "qs": ["[email protected]", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w=="],
 
     "query-string": ["[email protected]", "", { "dependencies": { "decode-uri-component": "^0.2.0", "object-assign": "^4.1.0", "strict-uri-encode": "^1.0.0" } }, "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw=="],

index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <title>%APP_TITLE%</title>
     <link rel="canonical" href="%APP_URL%" />
-    <link rel="manifest" href="%APP_PWAMANIFESTJSON%" />
     <link rel="icon" type="image/svg+xml" href="%APP_FAVICONSVG%" />
     <link rel="alternate icon" href="%APP_FAVICONICO%" />
     <meta name="title" content="%APP_TITLE%" data-rh="true" />

package.json

@@ -8,14 +8,15 @@
   },
   "scripts": {
     "install:nooptional": "bun tools/rm-optional-deps/remove.ts && bun install && bun tools/rm-optional-deps/restore.ts",
-    "start": "vite",
+    "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "checkall": "bun format && bun lint && bun typecheck && bun test",
     "format": "prettier --check '**/*.{ts,tsx,js,jsx,mjs,mjsx,cjs,cjsx}'",
     "lint": "eslint",
     "typecheck": "tsc --noEmit",
     "version": "bun ./tools/version/bump.ts",
+    "sassvar": "bun ./tools/sass-var-gen",
     "tool:zhconvert": "bun ./tools/zhconvert",
     "tool:imgpc": "bun ./tools/img-processing/crop && bun ./tools/img-processing/upscale",
     "tool:imgmin": "bun ./tools/img-min/index.ts",
@@ -64,7 +65,6 @@
     "clsx": "^2.1.1",
     "immer": "^10.1.1",
     "peerjs": "^1.5.4",
-    "pwacompat": "^2.0.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-helmet-async": "^2.0.5",
@@ -147,4 +147,4 @@
       "last 1 edge version"
     ]
   }
-}
+}

src/components/Card.module.scss

@@ -0,0 +1,145 @@
+@use '../styles/_variables.scss' as *;
+
+$cardGradient: linear-gradient(
+  to left,
+  rgba(
+    $cardGradientSideRgb,
+    $cardGradientSideRgb,
+    $cardGradientSideRgb,
+    $cardGradientSideOpacity
+  ),
+  rgba(0, 0, 0, 0),
+  rgba(
+    $cardGradientSideRgb,
+    $cardGradientSideRgb,
+    $cardGradientSideRgb,
+    $cardGradientSideOpacity
+  )
+);
+
+.main {
+  // 'will-change: opacity' has bug and cannot be set here
+  will-change: transform, left, top;
+  transition-property: opacity, transform, left, top;
+  transition-timing-function: ease-in-out;
+  transition-duration: #{$cardTransitionDuration}ms;
+}
+.cardname {
+  @apply m-1 shadow text-center tracking-tight;
+  height: calc(var(--cardwidth) * 0.094 * 1.1);
+  line-height: calc(var(--cardwidth) * 0.094 * 1.1);
+}
+.isflipped {
+  transform: translateX(-100%) translateZ(0) rotateY(-179.99deg);
+}
+.cardeffect {
+  @apply absolute rounded;
+  transform-style: preserve-3d;
+  transform-origin: center right;
+}
+.cardfront {
+  @apply absolute top-0 bottom-0 left-0 right-0 rounded;
+  background-image: url('../../assets/img/noise.webp');
+  backface-visibility: hidden;
+  will-change: transform, left, top;
+  transition-property: opacity, transform, left, top;
+  transition-timing-function: ease-in-out;
+  transition-duration: #{$cardTransitionDuration}ms;
+  &::before {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    background: $cardGradient;
+  }
+}
+.unusableopacity {
+  opacity: $unusableCardOpacity;
+}
+.cardback {
+  @apply absolute top-0 bottom-0 left-0 right-0 rounded;
+  will-change: transform, left, top;
+  transition-property: opacity, transform, left, top;
+  transition-timing-function: ease-in-out;
+  transition-duration: #{$cardTransitionDuration}ms;
+  transform: translateX(0) translateZ(0) rotateY(180deg);
+  backface-visibility: hidden;
+  &::before {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    background: $cardGradient;
+  }
+}
+.cardbackhard {
+  @apply absolute rounded shadow-lg;
+  &::before {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    background: $cardGradient;
+  }
+}
+.cardbackimage {
+  @apply w-full h-full bg-cover;
+  background-image: url('../../assets/img/cardback.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.imagewrapper {
+  @apply relative m-1 shadow bg-no-repeat bg-cover bg-center;
+  // width: calc(100% - 0.25rem * 2),
+  height: calc((100% / 63 * 47 - 0.5rem) / 22 * 13);
+}
+.imageholder {
+  @apply w-full h-full bg-cover;
+}
+.discarded {
+  @apply absolute top-0 left-0 w-full h-full flex justify-center items-center text-red-500 font-bold uppercase text-shadow-stroke;
+  font-size: 125%;
+}
+.text {
+  @apply m-2 flex flex-wrap items-center justify-center;
+  // width: calc(100% - 0.25rem * 2),
+  height: calc(
+    100% - (var(--cardwidth) * 0.094 * 1.1 + 0.25rem + 0.25rem) -
+      (0.5rem + 0.5rem) - (100% / 63 * 47 - 0.5rem) / 22 * 13
+  );
+}
+.textholder {
+  @apply leading-tight break-words text-center;
+}
+.resall {
+  @apply absolute bottom-1 right-1 text-center font-bold;
+  width: calc(var(--cardwidth) * 0.2);
+  height: calc(var(--cardwidth) * 0.2);
+  line-height: calc(var(--cardwidth) * 0.2);
+}
+.resbg {
+  @apply absolute top-0 left-0 w-full h-full;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  opacity: $resbgOpacity;
+  &.brick {
+    background-image: url('../../assets/img/brick.svg');
+  }
+  &.gem {
+    background-image: url('../../assets/img/gem.svg');
+  }
+  &.recruit {
+    background-image: url('../../assets/img/recruit.svg');
+  }
+}
+.cost {
+  @apply absolute top-0 left-0 w-full h-full;
+}