feat: clsx lib, button active effect

package.json

@@ -64,7 +64,7 @@
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.4.2",
     "@tailwindcss/forms": "^0.5.10",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "howler": "^2.2.4",
     "immer": "^9.0.21",
     "peerjs": "^1.5.4",
@@ -176,4 +176,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/Card.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, memo, useRef } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 
 import { useAppSelector, useAppDispatch } from '../utils/hooks/useAppDispatch'

src/components/Resource.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import { GameSizeContext } from '../utils/contexts/GameSizeContext'
 

src/components/Status.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import Resource, { calcStatusWidth } from './Resource'
 import { useAppSelector } from '../utils/hooks/useAppDispatch'

src/components/TableCommon.tsx

@@ -3,7 +3,7 @@ import Status from './Status'
 import Tower from './Tower'
 import Wall from './Wall'
 import Bird from './effects/Bird'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 
 import { useAppSelector } from '../utils/hooks/useAppDispatch'

src/components/TableP.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useContext } from 'react'
 import Card from './Card'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 
 import { useAppSelector } from '../utils/hooks/useAppDispatch'
@@ -56,6 +56,7 @@ const TableP = () => {
       winWidth={winWidth}
     >
       <TooltipAll
+        // TODO allUnusableTip should only be shown when player is able to select card
         title={allUnusable && !discardMode ? _.i18n('allUnusableTip') : ''}
         placement="top"
         enterTouchDelay={0}

src/components/Tower.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useRef } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import { GameSizeContext } from '../utils/contexts/GameSizeContext'
 import TowerOrWallNumber from './TowerOrWallNumber'

src/components/Wall.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useRef } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import { GameSizeContext } from '../utils/contexts/GameSizeContext'
 import TowerOrWallNumber from './TowerOrWallNumber'

src/components/buttons/ButtonFullscreen.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import { I18nContext } from '../../i18n/I18nContext'
 import {

src/components/buttons/ButtonGithub.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import TooltipAll from '../special/TooltipAll'
 import { githubUrl } from '../../constants/devSettings'

src/components/buttons/ButtonHelp.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import {
   useAppSelector,

src/components/buttons/ButtonLangPref.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import {
   useAppSelector,

src/components/buttons/ButtonPref.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import {
   useAppSelector,

src/components/buttons/ButtonSgPref.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import {
   useAppSelector,

src/components/effects/Bird.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 
 import bird from '../../../assets/img/bird.svg'

src/components/effects/NumberChangeVisual.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 
 import explosion from '../../../assets/img/explosion.webp'

src/components/effects/NumberDiff.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import { numberDiffDuration } from '../../constants/visuals'
 

src/components/screens/EndScreen.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect, useState } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 
 import winImg from '../../../assets/img/end_win.svg'

src/components/screens/LandscapeNotice.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import Window from './Window'
 

src/components/screens/LangPref.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import {
   useAppSelector,
   useAppDispatch,

src/components/screens/Window.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect, useRef, useState } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { createUseStyles } from 'react-jss'
 import { useAppDispatch } from '../../utils/hooks/useAppDispatch'
 

src/components/special/DiscardModeNotice.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react'
-import cx from 'classnames'
+import cx from 'clsx'
 import { I18nContext } from '../../i18n/I18nContext'
 
 type PropType = {

src/i18n/cards/en.ts

@@ -123,7 +123,7 @@ export const cardsI18n: DataCardsI18nType = [
   },
   {
     name: 'Flood Water',
-    desc: 'Player(s) w/ lowest wall are -1 Dungeon and 2 damage to tower',
+    desc: 'Player(s) with lowest wall are -1 Dungeon and 2 damage to tower',
   },
   {
     name: 'Barracks',

src/i18n/cards/zh-Hans.ts

@@ -159,7 +159,7 @@ export const cardsI18n: DataCardsI18nType = [
   },
   {
     name: '怪石缠身',
-    desc: '城堡+3，这张牌不能换，只能使用',
+    desc: '城堡+3，这张牌不能弃换，只能使用',
   },
   {
     name: '太阳耀斑',

src/i18n/cards/zh-Hant.ts

@@ -159,7 +159,7 @@ export const cardsI18n: DataCardsI18nType = [
   },
   {
     name: '怪石纏身',
-    desc: '塔樓+3，這張牌不能換，只能使用',
+    desc: '塔樓+3，這張牌不能棄換，只能使用',
   },
   {
     name: '太陽耀斑',

src/window.scss

@@ -106,6 +106,11 @@
         @apply bg-red-500 hover:bg-red-400 border-red-700 hover:border-red-500 absolute w-12 h-12 -top-6 ltr:-right-6 rtl:-left-6 bg-no-repeat bg-contain bg-center;
         background-image: url('../assets/img/x.svg');
       }
+      &:active {
+        @apply border-b-0;
+        padding-top: calc(0.5rem + 2px);
+        padding-bottom: calc(0.5rem + 2px);
+      }
     }
 
     .number-input {
@@ -283,6 +288,11 @@
         .copied,
         button {
           @apply flex-grow-0 py-1 ltr:ml-2 rtl:mr-2;
+          &:active {
+            @apply border-b-0;
+            padding-top: calc(0.25rem + 2px);
+            padding-bottom: calc(0.25rem + 2px);
+          }
         }
         .copied {
           @apply px-1 opacity-0;

yarn.lock

@@ -4397,7 +4397,7 @@ __metadata:
     "@vue/preload-webpack-plugin": ^2.0.0
     "@wojtekmaj/enzyme-adapter-react-17": ^0.8.0
     autoprefixer: ^10.4.20
-    classnames: ^2.5.1
+    clsx: ^2.1.1
     convert-excel-to-json: ^1.7.0
     copy-webpack-plugin: ^12.0.2
     cross-env: ^7.0.3
@@ -5724,13 +5724,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.5.1":
-  version: 2.5.1
-  resolution: "classnames@npm:2.5.1"
-  checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
-  languageName: node
-  linkType: hard
-
 "clean-css@npm:^5.2.2":
   version: 5.2.4
   resolution: "clean-css@npm:5.2.4"