Skip to content

Commit 9a26e04

Browse files
committed
👍 盤面の幅を変更可能にしたら、borderWidth が適切ではなくなっていたので修正
1 parent 0c49088 commit 9a26e04

File tree

4 files changed

+67
-18
lines changed

4 files changed

+67
-18
lines changed

src/components/App.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,28 @@ it('ボードエリアの幅が指定されていたら style をつける', asy
3232
expect(wrapper.find('SideInfo')).toHaveLength(0)
3333
expect(wrapper.find('.AppContainer').html()).toContain('style="width:800px"')
3434
})
35+
36+
it('ボードエリアの幅によって Border-i クラスをつける', async () => {
37+
// isThinking, appWidth, BorderWidth
38+
type Case = [boolean, number | null, number]
39+
const cases: Case[] = [
40+
[false, null, 0],
41+
[false, 1500, 3],
42+
[false, 800, 2],
43+
[false, 700, 1],
44+
[true, null, 0],
45+
[true, 1000, 3],
46+
[true, 534, 2],
47+
[true, 533, 1],
48+
]
49+
50+
for (let [isThinking, appWidth, borderwidth] of cases) {
51+
const store: Store = defaultStore()
52+
if (isThinking) await store.engineState.setState(Thinking)
53+
if (appWidth) await store.config.setAppWidth(appWidth)
54+
const wrapper = shallow(() => <App />, store)
55+
expect(wrapper.find('.App')).toHaveLength(1)
56+
if (appWidth) expect(wrapper.find(`.Border-${borderwidth}`)).toHaveLength(1)
57+
else expect(wrapper.find(`.Border-${borderwidth}`)).toHaveLength(0)
58+
}
59+
})

src/components/App.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,22 @@ const App: FC = () => {
1212
const { appWidth } = config
1313

1414
const isThinking: boolean = engineState.state === Thinking
15-
const className = 'App App-' + (isThinking ? 'SideInfo' : 'BoardOnly')
1615

16+
const classes: string[] = ['App']
17+
if (isThinking) classes.push('App-SideInfo')
18+
else classes.push('App-BoardOnly')
19+
20+
if (appWidth) {
21+
const w = (n: number) => {
22+
if (isThinking) return (n * 2) / 3
23+
return n
24+
}
25+
if (appWidth >= w(1500)) classes.push('Border-3')
26+
if (appWidth >= w(800)) classes.push('Border-2')
27+
classes.push('Border-1')
28+
}
29+
30+
const className = classes.join(' ')
1731
const style: CSSProperties = { width: appWidth ? `${appWidth}px` : '100%' }
1832

1933
return (

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const Range: FC<Props> = (props: Props) => {
1313
// inputValue が Number && inRange のとき、 val に値をセットするようにしているため
1414
// val と inputValue が一致していれば正しい値
1515
const isValid: boolean = value.toString() === inputValue
16-
const className: string = 'FormTextInput' + (isValid ? '' : 'FormTextInvalid')
16+
const className: string =
17+
'FormTextInput' + (isValid ? '' : ' FormTextInvalid')
1718
const labelText: string = `${name}(${min}~${max})`
1819

1920
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/components/shogi/Cell.scss

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,36 @@ $ImgComponentsPath: '../../img/components';
55
$ImgPiecesPath: '../../img/pieces';
66

77
$borderColor: rgb(0, 0, 0);
8-
$borderWidth: 0.15vw;
98
$edgeTextSize: 1.2vw;
109

10+
@mixin bordered($borderWidth: 0.15vw) {
11+
.Piece-Bordered {
12+
border-bottom: $borderWidth solid $borderColor;
13+
border-right: $borderWidth solid $borderColor;
14+
}
15+
16+
.Piece-Left {
17+
border-left: $borderWidth solid $borderColor;
18+
}
19+
20+
.Piece-Top {
21+
border-top: $borderWidth solid $borderColor;
22+
}
23+
}
24+
25+
@include bordered();
26+
27+
@for $i from 1 through 3 {
28+
.App.Border-#{$i} {
29+
@include bordered(#{$i}px);
30+
}
31+
}
32+
1133
.Piece {
1234
@include backImgCenter;
1335
position: relative;
1436
}
1537

16-
.Piece-Bordered {
17-
border-bottom: $borderWidth solid $borderColor;
18-
border-right: $borderWidth solid $borderColor;
19-
}
20-
2138
.Piece-Turn {
2239
&:hover {
2340
background-color: $GreenHover;
@@ -38,18 +55,10 @@ $edgeTextSize: 1.2vw;
3855
background-color: $GreenHover;
3956
}
4057

41-
.Piece-Left {
42-
border-left: $borderWidth solid $borderColor;
43-
}
44-
45-
.Piece-Top {
46-
border-top: $borderWidth solid $borderColor;
47-
}
48-
4958
.Piece-Star {
5059
&::before {
51-
$pos: $borderWidth * -3.9;
52-
$width: $borderWidth * 7;
60+
$pos: 3.35% * -3.9;
61+
$width: 3.35% * 7;
5362
content: '';
5463
position: absolute;
5564
right: $pos;

0 commit comments

Comments
 (0)