Merge pull request #56 from Al-Mikan/#24-bold

[fix] NumberText

renderer/components/items/NumText.tsx

@@ -17,6 +17,7 @@ const NumText = ({
   view_digits,
   is_headzero_displayed = false,
 }: Props) => {
+  const lineSpace = 55
   if (n < 0 || 10 ** view_digits <= n) {
     throw new Error(`範囲外の数値が入力されました => ${n}`)
   }
@@ -45,7 +46,7 @@ const NumText = ({
           return (
             <Sprite
               image={`/static/img/number/0.png`}
-              x={50 * i}
+              x={lineSpace * i}
               visible={is_headzero_displayed || i + 1 === digit_array.length} // [0] は表示する
               key={i}
             />
@@ -54,7 +55,7 @@ const NumText = ({
           return (
             <Sprite
               image={`/static/img/number/${v}.png`}
-              x={50 * i}
+              x={lineSpace * i}
               key={i}
               visible={true} // 何故かないと一部の桁が非表示になる
             />

renderer/components/items/Timer.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { Container, Sprite } from '@inlet/react-pixi'
 
-import Num from './Num'
+import WhiteNum from './WhiteNum'
 import { shouldStrToNum } from '../../utils/common'
 import { BasicSpriteProps } from '../../types/sprite'
 
@@ -31,14 +31,14 @@ const Timer = ({ x = 0, y = 0, scale = 1, time, setTime }: Props) => {
 
   return (
     <Container x={x} y={y} scale={scale}>
-      <Num n={shouldStrToNum(time[0])} x={0} />
-      <Num n={shouldStrToNum(time[1])} x={50} />
-      <Sprite image="/static/img/number/colon.png" x={100} />
-      <Num n={shouldStrToNum(time[3])} x={150} />
-      <Num n={shouldStrToNum(time[4])} x={200} />
-      <Sprite image="/static/img/number/colon.png" x={250} />
-      <Num n={shouldStrToNum(time[6])} x={300} />
-      <Num n={shouldStrToNum(time[7])} x={350} />
+      <WhiteNum n={shouldStrToNum(time[0])} x={0} />
+      <WhiteNum n={shouldStrToNum(time[1])} x={50} />
+      <Sprite image="/static/img/white-border-number/colon.png" x={115} y={5} />
+      <WhiteNum n={shouldStrToNum(time[3])} x={150} />
+      <WhiteNum n={shouldStrToNum(time[4])} x={200} />
+      <Sprite image="/static/img/white-border-number/colon.png" x={265} y={5} />
+      <WhiteNum n={shouldStrToNum(time[6])} x={300} />
+      <WhiteNum n={shouldStrToNum(time[7])} x={350} />
     </Container>
   )
 }

renderer/components/items/WhiteNum.tsx

@@ -0,0 +1,21 @@
+import { Sprite } from '@inlet/react-pixi'
+
+import { BasicSpriteProps } from '../../types/sprite'
+
+interface Props extends BasicSpriteProps {
+  n: number
+}
+
+const WhiteNum = ({ x = 0, y = 0, scale = 1, n }: Props) => {
+  if (n < 0 && 9 < n) throw new Error('0～9以外の数値は表示出来ません')
+  return (
+    <Sprite
+      image={`/static/img/white-border-number/${n}.png`}
+      x={x}
+      y={y}
+      scale={scale}
+    />
+  )
+}
+
+export default WhiteNum

renderer/components/modals/ResultModal.tsx

@@ -29,6 +29,7 @@ const ResultModal = ({
   score,
   handleClickToHome,
 }: Props) => {
+  const lineSpace = 55
   const [dragMode, setDragMode] = useState(false)
   const [pos, setPos] = useState<Position>({ x: x, y: y })
   const [beforeMousePos, setBeforeMousePos] = useState<Position>({ x: 0, y: 0 })
@@ -105,12 +106,12 @@ const ResultModal = ({
           }
         />
         <Container x={270} y={20}>
-          <Num n={shouldStrToNum(time[0])} x={50 * 0} />
-          <Num n={shouldStrToNum(time[1])} x={50 * 1} />
+          <Num n={shouldStrToNum(time[0])} x={lineSpace * 0} y={-15} />
+          <Num n={shouldStrToNum(time[1])} x={lineSpace * 1} y={-15} />
           <Text
             text="h"
             anchor={0.5}
-            x={50 * 2 + 20}
+            x={lineSpace * 2 + 20}
             y={40}
             style={
               new TextStyle({
@@ -120,12 +121,12 @@ const ResultModal = ({
               })
             }
           />
-          <Num n={shouldStrToNum(time[3])} x={50 * 3} />
-          <Num n={shouldStrToNum(time[4])} x={50 * 4} />
+          <Num n={shouldStrToNum(time[3])} x={lineSpace * 3} y={-15} />
+          <Num n={shouldStrToNum(time[4])} x={lineSpace * 4} y={-15} />
           <Text
             text="m"
             anchor={0.5}
-            x={50 * 5 + 20}
+            x={lineSpace * 5 + 20}
             y={40}
             style={
               new TextStyle({
@@ -155,16 +156,16 @@ const ResultModal = ({
         <NumText
           n={shouldStrTimeToSecondNum(time)}
           view_digits={5}
-          x={230}
-          y={-20}
+          x={190}
+          y={-35}
+          is_headzero_displayed={true}
         />
       </Container>
       {/* COIN */}
       <Container x={-80} y={75} scale={0.5}>
         <Coin x={-20} scale={0.7} />
-        <NumText n={coins} view_digits={3} x={315} y={-30} />
+        <NumText n={coins} view_digits={5} x={170} y={-45} />
       </Container>
-
       {/* SCORE */}
       <Container x={-140} y={100} scale={0.5}>
         <Text
@@ -181,11 +182,11 @@ const ResultModal = ({
           }
         />
         {score > 0 ? (
-          <NumText n={score} view_digits={3} x={440} y={19} />
+          <NumText n={score} view_digits={3} x={400} y={19} />
         ) : (
           <Text
             text="---"
-            x={440}
+            x={430}
             y={10}
             style={
               new TextStyle({

renderer/components/modals/ShopModal.tsx

@@ -142,7 +142,7 @@ const SettingModal = ({
       </Container>
       <Container x={40} y={130} scale={0.5}>
         <Coin />
-        <NumText n={coins} view_digits={4} x={70} y={-25} />
+        <NumText n={coins} view_digits={4} x={70} y={-40} />
       </Container>
       <CloseBtn
         handleClick={handleClickToHome}

renderer/components/use-contexts/Home.tsx

@@ -152,14 +152,14 @@ const Home = ({ router }: Props) => {
             n={ex.get_level()}
             view_digits={3}
             x={180}
-            y={0}
+            y={-15}
             scale={0.5}
             is_headzero_displayed={true}
           />
         </Container>
         <Container x={1370} y={200} scale={0.6}>
           <Coin scale={0.8} />
-          <NumText n={coins} view_digits={4} x={30} y={-20} scale={0.8} />
+          <NumText n={coins} view_digits={4} x={30} y={-35} scale={0.8} />
         </Container>
         <LifeGauge
           n={hp.get_health_point_formatted(10)}
@@ -169,7 +169,7 @@ const Home = ({ router }: Props) => {
         />
         <Container x={1300} y={350} scale={0.6}>
           <CuteFish x={40} y={8} scale={0.5} />
-          <NumText n={fish} view_digits={4} x={100} y={-25} />
+          <NumText n={fish} view_digits={4} x={100} y={-40} />
         </Container>
         <DayText x={1300} y={400} text={String(playTime)} />
         <Sprite image="/static/img/board.png" x={140} scale={1} />