👍 盤面の幅を変更可能にしたら、borderWidth が適切ではなくなっていたので修正

Author: murosan

src/components/App.test.tsx

@@ -32,3 +32,28 @@ it('ボードエリアの幅が指定されていたら style をつける', asy
   expect(wrapper.find('SideInfo')).toHaveLength(0)
   expect(wrapper.find('.AppContainer').html()).toContain('style="width:800px"')
 })
+
+it('ボードエリアの幅によって Border-i クラスをつける', async () => {
+  // isThinking, appWidth, BorderWidth
+  type Case = [boolean, number | null, number]
+  const cases: Case[] = [
+    [false, null, 0],
+    [false, 1500, 3],
+    [false, 800, 2],
+    [false, 700, 1],
+    [true, null, 0],
+    [true, 1000, 3],
+    [true, 534, 2],
+    [true, 533, 1],
+  ]
+
+  for (let [isThinking, appWidth, borderwidth] of cases) {
+    const store: Store = defaultStore()
+    if (isThinking) await store.engineState.setState(Thinking)
+    if (appWidth) await store.config.setAppWidth(appWidth)
+    const wrapper = shallow(() => <App />, store)
+    expect(wrapper.find('.App')).toHaveLength(1)
+    if (appWidth) expect(wrapper.find(`.Border-${borderwidth}`)).toHaveLength(1)
+    else expect(wrapper.find(`.Border-${borderwidth}`)).toHaveLength(0)
+  }
+})

src/components/App.tsx

@@ -12,8 +12,22 @@ const App: FC = () => {
   const { appWidth } = config
 
   const isThinking: boolean = engineState.state === Thinking
-  const className = 'App App-' + (isThinking ? 'SideInfo' : 'BoardOnly')
 
+  const classes: string[] = ['App']
+  if (isThinking) classes.push('App-SideInfo')
+  else classes.push('App-BoardOnly')
+
+  if (appWidth) {
+    const w = (n: number) => {
+      if (isThinking) return (n * 2) / 3
+      return n
+    }
+    if (appWidth >= w(1500)) classes.push('Border-3')
+    if (appWidth >= w(800)) classes.push('Border-2')
+    classes.push('Border-1')
+  }
+
+  const className = classes.join(' ')
   const style: CSSProperties = { width: appWidth ? `${appWidth}px` : '100%' }
 
   return (

src/components/engine/connection/form/Range.tsx

@@ -13,7 +13,8 @@ const Range: FC<Props> = (props: Props) => {
   // inputValue が Number && inRange のとき、 val に値をセットするようにしているため
   // val と inputValue が一致していれば正しい値
   const isValid: boolean = value.toString() === inputValue
-  const className: string = 'FormTextInput' + (isValid ? '' : 'FormTextInvalid')
+  const className: string =
+    'FormTextInput' + (isValid ? '' : ' FormTextInvalid')
   const labelText: string = `${name}(${min}~${max})`
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/components/shogi/Cell.scss

@@ -5,19 +5,36 @@ $ImgComponentsPath: '../../img/components';
 $ImgPiecesPath: '../../img/pieces';
 
 $borderColor: rgb(0, 0, 0);
-$borderWidth: 0.15vw;
 $edgeTextSize: 1.2vw;
 
+@mixin bordered($borderWidth: 0.15vw) {
+  .Piece-Bordered {
+    border-bottom: $borderWidth solid $borderColor;
+    border-right: $borderWidth solid $borderColor;
+  }
+
+  .Piece-Left {
+    border-left: $borderWidth solid $borderColor;
+  }
+
+  .Piece-Top {
+    border-top: $borderWidth solid $borderColor;
+  }
+}
+
+@include bordered();
+
+@for $i from 1 through 3 {
+  .App.Border-#{$i} {
+    @include bordered(#{$i}px);
+  }
+}
+
 .Piece {
   @include backImgCenter;
   position: relative;
 }
 
-.Piece-Bordered {
-  border-bottom: $borderWidth solid $borderColor;
-  border-right: $borderWidth solid $borderColor;
-}
-
 .Piece-Turn {
   &:hover {
     background-color: $GreenHover;
@@ -38,18 +55,10 @@ $edgeTextSize: 1.2vw;
   background-color: $GreenHover;
 }
 
-.Piece-Left {
-  border-left: $borderWidth solid $borderColor;
-}
-
-.Piece-Top {
-  border-top: $borderWidth solid $borderColor;
-}
-
 .Piece-Star {
   &::before {
-    $pos: $borderWidth * -3.9;
-    $width: $borderWidth * 7;
+    $pos: 3.35% * -3.9;
+    $width: 3.35% * 7;
     content: '';
     position: absolute;
     right: $pos;