File tree Expand file tree Collapse file tree 4 files changed +67
-18
lines changed Expand file tree Collapse file tree 4 files changed +67
-18
lines changed Original file line number Diff line number Diff line change @@ -32,3 +32,28 @@ it('ボードエリアの幅が指定されていたら style をつける', asy
32
32
expect ( wrapper . find ( 'SideInfo' ) ) . toHaveLength ( 0 )
33
33
expect ( wrapper . find ( '.AppContainer' ) . html ( ) ) . toContain ( 'style="width:800px"' )
34
34
} )
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
+ } )
Original file line number Diff line number Diff line change @@ -12,8 +12,22 @@ const App: FC = () => {
12
12
const { appWidth } = config
13
13
14
14
const isThinking : boolean = engineState . state === Thinking
15
- const className = 'App App-' + ( isThinking ? 'SideInfo' : 'BoardOnly' )
16
15
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 ( ' ' )
17
31
const style : CSSProperties = { width : appWidth ? `${ appWidth } px` : '100%' }
18
32
19
33
return (
Original file line number Diff line number Diff line change @@ -13,7 +13,8 @@ const Range: FC<Props> = (props: Props) => {
13
13
// inputValue が Number && inRange のとき、 val に値をセットするようにしているため
14
14
// val と inputValue が一致していれば正しい値
15
15
const isValid : boolean = value . toString ( ) === inputValue
16
- const className : string = 'FormTextInput' + ( isValid ? '' : 'FormTextInvalid' )
16
+ const className : string =
17
+ 'FormTextInput' + ( isValid ? '' : ' FormTextInvalid' )
17
18
const labelText : string = `${ name } (${ min } ~${ max } )`
18
19
19
20
const onChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
Original file line number Diff line number Diff line change @@ -5,19 +5,36 @@ $ImgComponentsPath: '../../img/components';
5
5
$ImgPiecesPath : ' ../../img/pieces' ;
6
6
7
7
$borderColor : rgb (0 , 0 , 0 );
8
- $borderWidth : 0.15vw ;
9
8
$edgeTextSize : 1.2vw ;
10
9
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
+
11
33
.Piece {
12
34
@include backImgCenter ;
13
35
position : relative ;
14
36
}
15
37
16
- .Piece-Bordered {
17
- border-bottom : $borderWidth solid $borderColor ;
18
- border-right : $borderWidth solid $borderColor ;
19
- }
20
-
21
38
.Piece-Turn {
22
39
& :hover {
23
40
background-color : $GreenHover ;
@@ -38,18 +55,10 @@ $edgeTextSize: 1.2vw;
38
55
background-color : $GreenHover ;
39
56
}
40
57
41
- .Piece-Left {
42
- border-left : $borderWidth solid $borderColor ;
43
- }
44
-
45
- .Piece-Top {
46
- border-top : $borderWidth solid $borderColor ;
47
- }
48
-
49
58
.Piece-Star {
50
59
& ::before {
51
- $pos : $borderWidth * -3.9 ;
52
- $width : $borderWidth * 7 ;
60
+ $pos : 3.35 % * -3.9 ;
61
+ $width : 3.35 % * 7 ;
53
62
content : ' ' ;
54
63
position : absolute ;
55
64
right : $pos ;
You can’t perform that action at this time.
0 commit comments