Skip to content

Commit 236c461

Browse files
blueedgetechnoblueedgetechno
committed
Hail nodejs
1 parent d2b030c commit 236c461

File tree

3 files changed

+111
-41
lines changed

3 files changed

+111
-41
lines changed

‎lib/view/index.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,25 @@ function couple(x) {
1818
export default class Root extends React.PureComponent {
1919
constructor(props){
2020
super(props);
21-
this.state = {
22-
desc: "",
23-
id: "",
24-
finished: 0,
25-
changed: 0,
26-
createnv: false,
27-
timeremaining: 0,
28-
profimg: "//imgbin.com/png/LGzVdNb1/computer-icons-avatar-user-login-png"
29-
};
30-
3121
// this.state = {
32-
// desc: "codeforces div 2",
33-
// id: 1397,
22+
// desc: "",
23+
// id: "",
3424
// finished: 0,
35-
// changed: 1,
25+
// changed: 0,
3626
// createnv: false,
37-
// timeremaining: 84600,
38-
// profimg: "//templates.joomla-monster.com/joomla30/jm-news-portal/components/com_djclassifieds/assets/images/default_profile.png"
27+
// timeremaining: 0,
28+
// profimg: "//imgbin.com/png/LGzVdNb1/computer-icons-avatar-user-login-png"
3929
// };
30+
31+
this.state = {
32+
desc: "codeforces div 2",
33+
id: 1397,
34+
finished: 0,
35+
changed: 1,
36+
createnv: false,
37+
timeremaining: 84600,
38+
profimg: "//templates.joomla-monster.com/joomla30/jm-news-portal/components/com_djclassifieds/assets/images/default_profile.png"
39+
};
4040
}
4141

4242
timesolver(s){
@@ -155,7 +155,7 @@ export default class Root extends React.PureComponent {
155155
{this.state.changed==1 ? (
156156
<div className="waiting">
157157
<this.Timer sec={this.state.timeremaining} />
158-
<button onClick={()=>this.fetchtimeremaining()} >Refresh</button>
158+
<button onClick={()=>this.fetchtimeremaining()}>Refresh</button>
159159
<Play/>
160160
</div>
161161
):null}

‎lib/view/play.js‎

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,70 @@ export default class Play extends React.PureComponent {
77
super(props);
88
this.state = {
99
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]
1313
],
14-
done: false
14+
done: false,
15+
image: ""
1516
}
1617

1718
}
1819

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+
1947
componentWillReceiveProps(nextProps) {
2048
this.setState({});
2149
}
2250

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+
2374
isvalid(x,y){
2475
return x >= 0 && x < 3 && y >= 0 && y < 3;
2576
}
@@ -51,7 +102,6 @@ export default class Play extends React.PureComponent {
51102
puzzle.style.display = "none";
52103
var finalimage = puzzle.parentElement.children[0];
53104
finalimage.hidden = false;
54-
55105
}
56106
}
57107

@@ -111,23 +161,34 @@ export default class Play extends React.PureComponent {
111161
return (
112162
<div className="container">
113163
<br/>
114-
<div className="page" title="Profile presentation">
164+
<div className="page">
115165
<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}/>
117167
</div>
118168
<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+
})}
128177
</div>
178+
<button className="nextbutton" onClick={this.reset.bind(this)}>Next</button>
129179
</div>
130180
</div>
131181
)
132182
}
133183
}
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");

‎styles/codeblue.less‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -530,7 +530,7 @@ body {
530530
width: 33%;
531531
height: 33%;
532532
background: #f4f4f4;
533-
background: url("https://images.unsplash.com/photo-1559633657-c3008b46bac6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80");
533+
// background: url("https://images.unsplash.com/photo-1559633657-c3008b46bac6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80");
534534
background-size: 280px;
535535
}
536536

@@ -544,34 +544,43 @@ body {
544544
}
545545

546546
.p2 {
547-
background-position: 50% 0;
547+
background-position: 50% 0 !important;
548548
}
549549

550550
.p3 {
551-
background-position: 100% 0;
551+
background-position: 100% 0 !important;
552552
}
553553

554554
.p4 {
555-
background-position: 0 50%;
555+
background-position: 0 50% !important;
556556
}
557557

558558
.p5 {
559-
background-position: 50% 50%;
559+
background-position: 50% 50% !important;
560560
}
561561

562562
.p6 {
563-
background-position: 100% 50%;
563+
background-position: 100% 50% !important;
564564
}
565565

566566
.p7 {
567-
background-position: 0 100%;
567+
background-position: 0 100% !important;
568568
}
569569

570570
.p8 {
571-
background-position: 50% 100%;
571+
background-position: 50% 100% !important;
572572
}
573573

574574
.p9 {
575-
background-position: 100% 100%;
575+
background-position: 100% 100% !important;
576576
opacity: 0;
577577
}
578+
579+
.nextbutton{
580+
padding: 0px !important;
581+
width: 50px !important;
582+
height: 30px !important;
583+
font-size: 1em !important;
584+
margin: 0;
585+
transform: translate(120px,-30px);
586+
}

0 commit comments

Comments
 (0)