@@ -7,19 +7,70 @@ export default class Play extends React.PureComponent {
7
7
super ( props ) ;
8
8
this . state = {
9
9
a : [
10
- [ 4 , 3 , 8 ] ,
11
- [ 2 , 5 , 7 ] ,
12
- [ 1 , 6 , 9 ]
10
+ [ 1 , 2 , 3 ] ,
11
+ [ 4 , 5 , 6 ] ,
12
+ [ 7 , 8 , 9 ]
13
13
] ,
14
- done : false
14
+ done : false ,
15
+ image : ""
15
16
}
16
17
17
18
}
18
19
20
+ mix ( ) {
21
+ var a = [
22
+ [ 1 , 2 , 3 ] ,
23
+ [ 4 , 5 , 6 ] ,
24
+ [ 7 , 8 , 9 ]
25
+ ]
26
+
27
+ var d = [ [ 0 , 1 ] , [ 0 , - 1 ] , [ 1 , 0 ] , [ - 1 , 0 ] ]
28
+
29
+ var n = 100
30
+ var x = 2 , y = 2
31
+ var b = 0
32
+
33
+ while ( n ) {
34
+ b = Math . floor ( Math . random ( ) * 4 )
35
+ if ( this . isvalid ( x + d [ b ] [ 0 ] , y + d [ b ] [ 1 ] ) ) {
36
+ a [ x ] [ y ] = a [ x + d [ b ] [ 0 ] ] [ y + d [ b ] [ 1 ] ]
37
+ a [ x + d [ b ] [ 0 ] ] [ y + d [ b ] [ 1 ] ] = 9
38
+ x += d [ b ] [ 0 ]
39
+ y += d [ b ] [ 1 ]
40
+ n --
41
+ }
42
+ }
43
+
44
+ this . setState ( { a :a } )
45
+ }
46
+
19
47
componentWillReceiveProps ( nextProps ) {
20
48
this . setState ( { } ) ;
21
49
}
22
50
51
+ reset ( ele ) {
52
+ this . setState ( { done :false , image : "" } )
53
+ var puzzle = ele . target . parentElement . children [ 1 ] ;
54
+ puzzle . style . display = "flex" ;
55
+ var finalimage = puzzle . parentElement . children [ 0 ] ;
56
+ finalimage . hidden = true ;
57
+ this . fetchimage ( )
58
+ this . mix ( )
59
+ }
60
+
61
+ fetchimage ( ) {
62
+ fetch ( "https://source.unsplash.com/random/280x280" ) . then ( res => {
63
+ this . setState ( { image : res . url } )
64
+ } ) . catch ( err => {
65
+ this . setState ( { image : "https://images.unsplash.com/photo-1595496710086-d69bff2ccb19?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=400" } )
66
+ } )
67
+ }
68
+
69
+ componentWillMount ( ) {
70
+ this . fetchimage ( )
71
+ this . mix ( )
72
+ }
73
+
23
74
isvalid ( x , y ) {
24
75
return x >= 0 && x < 3 && y >= 0 && y < 3 ;
25
76
}
@@ -51,7 +102,6 @@ export default class Play extends React.PureComponent {
51
102
puzzle . style . display = "none" ;
52
103
var finalimage = puzzle . parentElement . children [ 0 ] ;
53
104
finalimage . hidden = false ;
54
-
55
105
}
56
106
}
57
107
@@ -111,23 +161,34 @@ export default class Play extends React.PureComponent {
111
161
return (
112
162
< div className = "container" >
113
163
< br />
114
- < div className = "page" title = "Profile presentation" >
164
+ < div className = "page" >
115
165
< div className = "finalimage" hidden >
116
- < img src = "https://images.unsplash.com/photo-1559633657-c3008b46bac6?ixlib=rb-1.2.1 & ixid = eyJhcHBfaWQiOjEyMDd9 & auto = format & fit = crop & w = 1100 & q = 80 " />
166
+ < img src = { this . state . image } />
117
167
</ div >
118
168
< div className = "puzzle" >
119
- < div className = "piece p4" onClick = { this . move . bind ( this ) } > </ div >
120
- < div className = "piece p3" onClick = { this . move . bind ( this ) } > </ div >
121
- < div className = "piece p8" onClick = { this . move . bind ( this ) } > </ div >
122
- < div className = "piece p2" onClick = { this . move . bind ( this ) } > </ div >
123
- < div className = "piece p5" onClick = { this . move . bind ( this ) } > </ div >
124
- < div className = "piece p7" onClick = { this . move . bind ( this ) } > </ div >
125
- < div className = "piece p1" onClick = { this . move . bind ( this ) } > </ div >
126
- < div className = "piece p6" onClick = { this . move . bind ( this ) } > </ div >
127
- < div className = "piece p9" onClick = { this . move . bind ( this ) } > </ div >
169
+ { this . state . a && this . state . a . map ( row => {
170
+ return row . map ( piece => {
171
+ return < div className = { "piece p" + piece }
172
+ onClick = { this . move . bind ( this ) }
173
+ style = { { background : "url(" + this . state . image + ")" } }
174
+ > </ div >
175
+ } )
176
+ } ) }
128
177
</ div >
178
+ < button className = "nextbutton" onClick = { this . reset . bind ( this ) } > Next</ button >
129
179
</ div >
130
180
</ div >
131
181
)
132
182
}
133
183
}
184
+
185
+ // <div className="piece p4" onClick={this.move.bind(this)}></div>
186
+ // <div className="piece p3" onClick={this.move.bind(this)}></div>
187
+ // <div className="piece p8" onClick={this.move.bind(this)}></div>
188
+ // <div className="piece p2" onClick={this.move.bind(this)}></div>
189
+ // <div className="piece p5" onClick={this.move.bind(this)}></div>
190
+ // <div className="piece p7" onClick={this.move.bind(this)}></div>
191
+ // <div className="piece p1" onClick={this.move.bind(this)}></div>
192
+ // <div className="piece p6" onClick={this.move.bind(this)}></div>
193
+ // <div className="piece p9" onClick={this.move.bind(this)}></div>
194
+ // background: url("https://images.unsplash.com/photo-1559633657-c3008b46bac6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80");
0 commit comments