update

Author: VickScarlet

src/data/data.json

@@ -118,6 +118,24 @@
                     "ja": "君の残る命は："
                 }
             },
+            {
+                "id": "UI_DEATH",
+                "lang": {
+                    "en": "You can live to {MM}/{DD}/{YYYY} ",
+                    "zh": "你可以活到{YYYY}年{MM}月{DD}日",
+                    "zh-HK": "你可以活到{YYYY}年{MM}月{DD}日",
+                    "ja": "君は{YYYY}年{MM}月{DD}日まで生きられます"
+                }
+            },
+            {
+                "id": "UI_PERCENT_BEFORE",
+                "lang": {
+                    "en": "You are better than {percent}% of people",
+                    "zh": "你击败{percent}%的人",
+                    "zh-HK": "你擊敗{percent}%的人",
+                    "ja": "君は {pe​​rcent}% の人に勝ちました"
+                }
+            },
             {
                 "id": "UI_C/R",
                 "lang": {
@@ -5045,9 +5063,21 @@
             "altDilution": {
                 "key": "altDilution",
                 "value": 30
+            },
+            "lifeStd": {
+                "key": "lifeStd",
+                "value": 10
+            },
+            "year": {
+                "key": "year",
+                "value": 31536000
+            },
+            "month": {
+                "key": "month",
+                "value": 2628000
             }
         }
     },
-    "version": "2025-02-15T13:34:27.581Z",
-    "timestamp": "2025-02-15T13:34:27.581Z"
+    "version": "2025-02-16T07:49:48.605Z",
+    "timestamp": "2025-02-16T07:49:48.605Z"
 }

src/data/data.xlsx

@@ -1,6 +1,6 @@
 import { data, version } from '@/data/data.json'
 import { database } from '@/database'
-import { zoneRandom } from '@/utils'
+import { zoneRandom, cdf } from '@/utils'
 
 export { version }
 
@@ -309,3 +309,32 @@ export function getBaseLife(country: Country, age: Age, sex: Sex) {
         ? getConfig('lifeBaseRandom')
         : averageValue - ageValue
 }
+
+export function getLifeSeconds(life: number) {
+    return life * getConfig('year')
+}
+
+export function calcLife(seconds: number) {
+    const YEAR = getConfig('year')
+    const MONTH = getConfig('month')
+
+    const Y = Math.floor(seconds / YEAR)
+    const M = Math.floor((seconds - Y * YEAR) / MONTH)
+    const D = Math.floor((seconds - Y * YEAR - M * MONTH) / 86400)
+    const h = Math.floor((seconds / 3600) % 24)
+    const m = Math.floor((seconds / 60) % 60)
+    const s = Math.floor(seconds % 60)
+    return { Y, M, D, h, m, s }
+}
+
+export function percentBefore(
+    life: number,
+    country: Country,
+    age: Age,
+    sex: Sex
+) {
+    const x = life + age.value
+    const mean = country.life[sex.value]
+    const std = getConfig('lifeStd')
+    return (cdf(x, mean, std) * 100).toFixed(2).replace(/\.00$/, '')
+}

src/data/index.ts

@@ -1,3 +1,4 @@
-export { useLanguage } from './useLanguage'
-export { useTimeFormat } from './useTimeFormat'
+export { useLanguage, languages } from './useLanguage'
 export type { FormatData } from './useLanguage'
+
+export { useCountdown } from './useCountdown'

src/hooks/index.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react'
+import { fill0, callNow } from '@/utils'
+import { getLifeSeconds, calcLife } from '@/data'
+import type { FormatData } from './useLanguage'
+export interface Time extends FormatData {
+    YY: string
+    MM: string
+    DD: string
+    hh: string
+    mm: string
+    ss: string
+}
+
+export type Return = [
+    Time,
+    setTime: (time: number) => void,
+    setStart: (pass: number) => void
+]
+export function useCountdown(time: number, start: number): Return {
+    const [mt, setTime] = useState(time)
+    const [ms, setStart] = useState(start)
+    const [seconds, setSeconds] = useState(0)
+    const [data, setData] = useState<Time>({
+        YY: '00',
+        MM: '00',
+        DD: '00',
+        hh: '00',
+        mm: '00',
+        ss: '00',
+    })
+    useEffect(() => {
+        const life = calcLife(seconds)
+        setData({
+            YY: fill0(life.Y),
+            MM: fill0(life.M),
+            DD: fill0(life.D),
+            hh: fill0(life.h),
+            mm: fill0(life.m),
+            ss: fill0(life.s),
+        })
+    }, [seconds])
+    useEffect(() => {
+        const interval = setInterval(
+            callNow(() => {
+                const passed = Math.floor((Date.now() - ms) / 1000)
+                const life = getLifeSeconds(mt)
+                setSeconds(Math.max(life - passed, 0))
+            }),
+            1000
+        )
+        return () => clearInterval(interval)
+    }, [mt, ms])
+    return [data, setTime, setStart]
+}
+
+export default useCountdown

src/hooks/useCountdown.tsx

@@ -1,7 +1,15 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { query } from '@/data'
 
-type MapData = Map<string, Map<string | number, string>>
+const i18n = new Map()
+for (const { id: key, lang: langs } of query('i18n')) {
+    for (const [lang, value] of Object.entries(langs)) {
+        if (!i18n.has(lang)) i18n.set(lang, new Map())
+        i18n.get(lang)?.set(key, value)
+    }
+}
+
+export const languages = Array.from(i18n.keys())
 export interface FormatData {
     [key: string]: string | number
 }
@@ -12,40 +20,23 @@ function format(template: string, formatData: FormatData) {
 }
 
 function getLanguageFallback() {
-    const fallback = []
-    const userSettings = localStorage.getItem('language')
-    if (userSettings) fallback.push(userSettings)
+    const setting = localStorage.getItem('language')
+    if (setting && i18n.has(setting)) return setting
     const nav = navigator.language
     if (nav) {
-        fallback.push(nav)
-        fallback.push(nav.split('-')[0])
+        if (i18n.has(nav)) return nav
+        const lang = nav.split('-')[0]
+        if (i18n.has(lang)) return lang
     }
-    fallback.push('en')
-    return fallback
+    return 'en'
+}
+function saveLanguage(language: string) {
+    localStorage.setItem('language', language)
+    return language
 }
 
 export function useLanguage() {
-    const [language, setLanguage] = useState('')
-    const [i18n, setI18n] = useState<MapData | null>(null)
-    const [languages, setLanguages] = useState<string[]>([])
-    useEffect(() => {
-        const i18n = new Map()
-        for (const { id: key, lang: langs } of query('i18n')) {
-            for (const [lang, value] of Object.entries(langs)) {
-                if (!i18n.has(lang)) i18n.set(lang, new Map())
-                i18n.get(lang)?.set(key, value)
-            }
-        }
-        setI18n(i18n)
-        setLanguages(Array.from(i18n.keys()))
-        const fallback = getLanguageFallback()
-        for (const lang of fallback) {
-            if (i18n.has(lang)) {
-                setLanguage(lang)
-                return
-            }
-        }
-    }, [])
+    const [language, setLanguage] = useState(getLanguageFallback())
     return {
         t: (key: string | number, formatData?: FormatData) => {
             const template = i18n?.get(language)?.get(key) || key
@@ -55,10 +46,8 @@ export function useLanguage() {
             return format(template, formatData)
         },
         setLanguage: (lang: string) => {
-            localStorage.setItem('language', lang)
-            setLanguage(lang)
+            setLanguage(saveLanguage(lang))
         },
-        languages,
     }
 }
 

src/hooks/useLanguage.tsx

@@ -21,6 +21,7 @@ body {
     display: flex;
     place-items: center;
     min-height: 100vh;
+    white-space: pre-wrap;
 }
 
 ul {

src/hooks/useTimeFormat.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useLanguage } from '@/hooks'
+import { useLanguage, languages as langs } from '@/hooks'
 import { query, type Country, type Age, type Sex, type Base } from '@/data'
 import { Choose } from '@/components/Choose'
 import { type Options } from './ResultPage'
@@ -15,10 +15,6 @@ export interface OptionPageProps {
     onStart?: (options: Options) => void
 }
 
-interface Language extends Base {
-    value: string
-}
-
 interface Choosed<T extends Base> {
     choosed: true
     value: T['value']
@@ -33,21 +29,17 @@ interface UnChoosed {
 type ChooseResult<T extends Base> = Choosed<T> | UnChoosed
 
 export function OptionPage({ onStart }: OptionPageProps) {
-    const { t, setLanguage, languages: langs } = useLanguage()
+    const { t, setLanguage } = useLanguage()
     const [countrys, setCountrys] = useState<Country[]>([])
     const [ages, setAges] = useState<Age[]>([])
     const [sexs, setSexs] = useState<Sex[]>([])
-    const [languages, setLanguages] = useState<Language[]>([])
+
     useEffect(() => {
         setCountrys(query('country'))
         setAges(query('age'))
         setSexs(query('sex'))
     }, [])
 
-    useEffect(() => {
-        setLanguages(langs.map(value => ({ value })))
-    }, [langs])
-
     const [country, setCountry] = useState<ChooseResult<Country>>({
         value: 'UI_C/R',
         choosed: false,
@@ -114,7 +106,7 @@ export function OptionPage({ onStart }: OptionPageProps) {
             case 'language':
                 return (
                     <Choose
-                        list={languages}
+                        list={langs.map(value => ({ value }))}
                         onChoose={item => {
                             setLanguage(item.value)
                             setChoose('')

src/index.css

@@ -21,7 +21,8 @@
     }
 
     .timer{
-        font-size: 60px;
+        font-size: 80px;
+        max-width: 100vw;
         display: flex;
         flex-direction: column;
         text-align: center;
@@ -84,6 +85,10 @@
             font-family: Consolas, 'Courier New', Courier, monospace;
             font-weight: 900;
         }
+        .addition {
+            font-size: 0.3em;
+            text-align: left;
+        }
     }
 
     .achivements {