Merge branch 'master' into master

.github/workflows/i18n.yml

@@ -0,0 +1,23 @@
+name: Validate locale
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  check_locale:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: |
+          sudo apt install -y lua5.3
+          sudo npm install -g pnpm
+          pnpm install
+
+      - name: Build & Validate
+        run: node scripts/check-locale.mjs

components/ExternalVideo.ts

@@ -1,17 +1,20 @@
-type ExternalBilibiliVideo = {
-    type: 'bilibili'
+export type ExternalVideo = {
+    type: 'bilibili' | 'youtube'
     vid: string
+    // Bilibili only
     pid?: number
 }
 
-export type ExternalVideo = ExternalBilibiliVideo
-
-export function toVideoLink(e: ExternalVideo) {
+export function toVideoLink(e: ExternalVideo): string {
     switch (e.type) {
         case 'bilibili': {
             return `https://www.bilibili.com/video/${e.vid}${
                 e.pid ? `?p=${e.pid}` : ''
             }`
         }
+        case 'youtube': {
+            return `https://www.youtube.com/watch?v=${e.vid}`
+        }
     }
+    return ''
 }

components/cards/CardCard.tsx

@@ -1,9 +1,10 @@
-import { Card } from '@mantine/core'
-import { CardType } from 'hoshimi-types/ProtoEnum'
+import { Card, Group } from '@mantine/core'
+import { AttributeType, CardType } from 'hoshimi-types/ProtoEnum'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 
 import { getAssetSlug } from './CardAsset'
+import PropValueBg from './PropValueBg'
 
 import getCardColor from '#utils/getCardColor'
 import { APIResponseOf, UnArray } from '#utils/api'
@@ -13,13 +14,24 @@ const CardCard = ({
     card,
     nameCn,
 }: {
-    card: UnArray<APIResponseOf<'Card'>>
+    card: UnArray<APIResponseOf<'Card/List'>>
     nameCn?: string
 }) => {
     const $v = useTranslations('vendor')
     const $vc = useTranslations('v-chr')
     const $t = useTranslations('cards')
-    const { id, name, characterId, assetId, type, initialRarity } = card
+    const {
+        id,
+        name,
+        characterId,
+        assetId,
+        type,
+        initialRarity,
+        vocalPt,
+        dancePt,
+        visualPt,
+        staminaPt,
+    } = card
 
     const assetImage =
         initialRarity < 5 ? (
@@ -47,6 +59,13 @@ const CardCard = ({
             />
         )
 
+    const cardColor = getCardColor({
+        // shall be safe since large RatioPermil gives larger Pt
+        vocalRatioPermil: vocalPt,
+        danceRatioPermil: dancePt,
+        visualRatioPermil: visualPt,
+    })
+
     return (
         <Link href={`/cards/${id}`} passHref>
             <a className="no-underline">
@@ -65,11 +84,34 @@ const CardCard = ({
                         )}
                     </div>
 
-                    <p>
+                    <div className="my-2">
                         {$vc(characterId)} / {$v(CardType[type])} /{' '}
-                        {$v(getCardColor(card))} / {$t('Initially')}{' '}
+                        {$v(AttributeType[cardColor])} / {$t('Initially')}{' '}
                         {initialRarity}★
-                    </p>
+                    </div>
+
+                    <Group className="gap-1">
+                        <PropValueBg
+                            type={AttributeType.Vocal}
+                            bold={cardColor === AttributeType.Vocal}
+                            value={vocalPt}
+                        />
+                        <PropValueBg
+                            type={AttributeType.Dance}
+                            bold={cardColor === AttributeType.Dance}
+                            value={dancePt}
+                        />
+                        <PropValueBg
+                            type={AttributeType.Visual}
+                            bold={cardColor === AttributeType.Visual}
+                            value={visualPt}
+                        />
+                        <PropValueBg
+                            type={'stamina'}
+                            bold={false}
+                            value={staminaPt}
+                        />
+                    </Group>
                 </Card>
             </a>
         </Link>

components/cards/CardItem.tsx

@@ -29,8 +29,7 @@ import { APIResponseOf, UnArray } from '#utils/api'
 import { CharacterId } from '#data/vendor/characterId'
 import useFrontendApi from '#utils/useFrontendApi'
 import CCIDTable from '#data/ccid'
-
-const MAX_LEVEL = 200
+import { MAX_LEVEL } from '#utils/constants'
 
 const CardItem = ({
     card,

components/cards/PropValueBg.tsx

@@ -0,0 +1,38 @@
+import { AttributeType } from 'hoshimi-types/ProtoEnum'
+import { useTranslations } from 'next-intl'
+
+import getCardColorClassName from '#utils/getCardColorClassName'
+
+function formatNumber(n: number) {
+    // add commas to number
+    return n.toLocaleString('en-US')
+}
+
+const PropValueBg = ({
+    type,
+    bold,
+    value,
+}: {
+    type: AttributeType | 'stamina'
+    bold: boolean
+    value: number
+}) => {
+    const $v = useTranslations('vendor')
+    return (
+        <span
+            className={`text-lg px-1 border-solid border-0 border-b-4 rounded ${
+                getCardColorClassName(type as AttributeType, 'border-') ||
+                'border-stamina'
+            } ${bold ? 'font-bold' : ''}${
+                // generate their CSS
+                // eslint-disable-next-line no-constant-condition
+                0 ? 'border-vocal border-dance border-visual' : ''
+            }`}
+            aria-label={$v(AttributeType[type as AttributeType] || 'Stamina')}
+        >
+            {formatNumber(value)}
+        </span>
+    )
+}
+
+export default PropValueBg

components/cards/Props.tsx

@@ -3,7 +3,10 @@ import { Grid, Skeleton } from '@mantine/core'
 import type { Card, CardRarity } from 'hoshimi-types/ProtoMaster'
 
 import useApi from '#utils/useApi'
+import getCardColor from '#utils/getCardColor'
 import Paths from '#utils/paths'
+import getCardColorClassName from '#utils/getCardColorClassName'
+import calcPropValue from '#utils/calcPropValue'
 
 const Props = ({
     level,
@@ -27,29 +30,21 @@ const Props = ({
         (x) => x.id === cardParameterId && x.level === level
     )?.[0]
 
-    const valueAtMaxType = Math.max(
-        vocalRatioPermil,
-        danceRatioPermil,
-        visualRatioPermil
-    )
-
     if (!parameterInfo) {
         return <Skeleton height={100} />
     }
 
     const calc = (base: number) =>
-        Math.floor(
-            (Math.floor((Number(parameterInfo.value) * base) / 1000) *
-                rarityInfo.parameterBonusPermil) /
-                1000
+        calcPropValue(
+            base,
+            Number(parameterInfo.value),
+            rarityInfo.parameterBonusPermil
         )
 
-    const stamina = Math.floor(
-        (Math.floor(
-            (Number(parameterInfo.staminaValue) * staminaRatioPermil) / 1000
-        ) *
-            rarityInfo.parameterBonusPermil) /
-            1000
+    const stamina = calcPropValue(
+        staminaRatioPermil,
+        Number(parameterInfo.staminaValue),
+        rarityInfo.parameterBonusPermil
     )
 
     const mental = 100
@@ -64,14 +59,9 @@ const Props = ({
         mental * 2 +
         critical * 3
 
-    const cardColorClassName =
-        vocalRatioPermil === valueAtMaxType
-            ? 'text-vocal'
-            : danceRatioPermil === valueAtMaxType
-            ? 'text-dance'
-            : visualRatioPermil === valueAtMaxType
-            ? 'text-visual'
-            : ''
+    const cardColorClassName = getCardColorClassName(
+        getCardColor({ vocalRatioPermil, danceRatioPermil, visualRatioPermil })
+    )
 
     return (
         <Grid className="text-lg">

components/eventstories/EventStoryView.tsx

@@ -8,9 +8,15 @@ import { toVideoLink } from '#components/ExternalVideo'
 import AssetImage from '#components/AssetImage'
 import useFrontendApi from '#utils/useFrontendApi'
 
-const EventEpisodeDetail = ({ story }: { story: APIResponseOf<'Story'> }) => {
+const EventEpisodeDetail = ({
+    id,
+    story,
+}: {
+    id: string
+    story: APIResponseOf<'Story'>
+}) => {
     const $c = useTranslations('common')
-    const { id, name: jaName, description } = story
+    const { name: jaName, description } = story
     const locale = useLocale()
     const { data: VideoInfoData, isSuccess } = useFrontendApi(
         'eventStories',
@@ -48,7 +54,7 @@ const EventEpisodeDetail = ({ story }: { story: APIResponseOf<'Story'> }) => {
                 ) : (
                     <div className="mt-4 text-gray-500">
                         {$c('no_trans', {
-                            field: `data[{id}]`,
+                            field: `data[${id}]`,
                             file: 'data/eventStories.data.ts',
                         })}
                     </div>
@@ -104,7 +110,7 @@ const EventStoryEpisodeList = ({
                 ))}
             </Group>
             {StoryData ? (
-                <EventEpisodeDetail story={StoryData} />
+                <EventEpisodeDetail id={selectedStoryId} story={StoryData} />
             ) : (
                 <div className="text-gray-500 text-center">
                     {$c('Loading...')}

components/search/CardWithSkills.tsx

@@ -26,6 +26,7 @@ const CardWithSkills = ({
     highlightedSkills: string[]
     skillData: Skill[]
 }) => {
+    const $t = useTranslations('search')
     const $v = useTranslations('vendor')
     const $vc = useTranslations('v-chr')
 
@@ -51,14 +52,14 @@ const CardWithSkills = ({
                             `${$vc(characterId)}/卡牌/${cardCcid.ccid}`
                         )}
                     >
-                        Wiki 页面
+                        {$t('Wiki Page (Chinese)')}
                     </a>
                 </>
             )}
             <br />
             <span>
                 {$vc(characterId)} / {$v(CardType[type])} / {$v(cardColor)} /{' '}
-                {initialRarity}★ / 发布于 {releaseDateFmt}
+                {initialRarity}★ / {$t('Released')} {releaseDateFmt}
             </span>
 
             <Grid className="mt-1">

data/cardStories.data.ts

@@ -68,6 +68,21 @@ const dataKotono: D = {
             video: { type: 'bilibili', vid: 'av299927963' },
         },
     },
+    'card-ktn-05-kiok-00': {
+        // 泡沫の悲しみ、思いは胸に
+        1: {
+            name: '作为嘉宾的那个人',
+            video: { type: 'bilibili', vid: 'av561192387' },
+        },
+        2: {
+            name: '志同道合的人',
+            video: { type: 'bilibili', vid: 'av558644549' },
+        },
+        3: {
+            name: '胸中的记忆',
+            video: { type: 'bilibili', vid: 'av473715057' },
+        },
+    },
 }
 
 // 伊吹渚
@@ -800,6 +815,24 @@ const dataYu: D = {
             video: { type: 'bilibili', vid: 'av215108612' },
         },
     },
+    'card-yu-05-fest-00': {
+        // 甘えん坊の鈴村さん
+        1: {
+            name: '感冒了呢',
+            video: { type: 'bilibili', vid: 'av303469442' },
+        },
+        2: {
+            name: '我的、第一次的人',
+            video: { type: 'bilibili', vid: 'av431099060' },
+        },
+        3: {
+            name: '被温柔对待了',
+            video: { type: 'bilibili', vid: 'av473573795' },
+        },
+        phone: {
+            video: { type: 'bilibili', vid: 'av261082054' },
+        },
+    },
 }
 
 // 奥山堇
@@ -862,6 +895,21 @@ const dataSumire: D = {
         },
         3: { name: 'TODO', video: { type: 'bilibili', vid: 'av594759853' } },
     },
+    'card-smr-05-fest-00': {
+        // 歌詠み花
+        1: {
+            name: '全部都忘记拿了！？',
+            video: { type: 'bilibili', vid: 'av431081244' },
+        },
+        2: {
+            name: '加油努力学习吧——！',
+            video: { type: 'bilibili', vid: 'av388570805' },
+        },
+        3: {
+            name: '哥哥欺负人～！',
+            video: { type: 'bilibili', vid: 'av688554744' },
+        },
+    },
 }
 
 // ---- LizNoir ----