Skip to content

Commit 8c8ce5e

Browse files
tanhongittanhongit
committed
edit css replay button
1 parent fadec9d commit 8c8ce5e

File tree

3 files changed

+153
-32
lines changed

3 files changed

+153
-32
lines changed

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>JavaScript-Tic-Tac-Toe-Project</title>
8-
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
98
<link rel="stylesheet" href="./public/css/style.css">
109
</head>
1110

@@ -29,8 +28,9 @@
2928
</table>
3029
<div class="endgame">
3130
<div class="text"></div>
32-
<button class="replay" onClick="startGame()">Replay</button>
31+
<button class="custom-btn btn-2" onClick="startGame()">Replay</button>
3332
</div>
33+
<a class="replay" onClick="startGame()" data-title="Replay Tic Tac Toe"></a>
3434
<script src="./public/js/script.js"></script>
3535
</body>
3636

‎public/css/style.css‎

Lines changed: 117 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,126 @@
1+
body {
2+
background: #e0e5ec;
3+
}
4+
15
td {
2-
border : 2px solid #333;
3-
height : 100px;
4-
width : 100px;
5-
text-align : center;
6-
vertical-align: middle;
7-
font-family : "Comic Sans MS", cursive, sans-serif;
8-
font-size : 70px;
9-
cursor : pointer;
6+
border : 2px solid #333;
7+
height : 100px;
8+
width : 100px;
9+
text-align : center;
10+
vertical-align: middle;
11+
font-family : "Comic Sans MS", cursive, sans-serif;
12+
font-size : 70px;
13+
cursor : pointer;
1014
}
1115

1216
table {
13-
border-collapse: collapse;
14-
position : absolute;
15-
left : 50%;
16-
margin-left : -155px;
17-
top : 50px;
17+
border-collapse: collapse;
18+
position : absolute;
19+
left : 50%;
20+
margin-left : -155px;
21+
top : 100px;
1822
}
1923

20-
table tr:first-child td {
21-
/* border-top: 0; */
24+
.endgame {
25+
display : none;
26+
width : 200px;
27+
top : 120px;
28+
background-color: rgba(37, 167, 54, 0.8);
29+
position : absolute;
30+
left : 50%;
31+
margin-left : -100px;
32+
padding-top : 50px;
33+
padding-bottom : 50px;
34+
text-align : center;
35+
border-radius : 5px;
36+
color : white;
37+
font-size : 2em;
2238
}
2339

24-
.endgame {
25-
display : none;
26-
width : 200px;
27-
top : 120px;
28-
background-color: rgba(37, 167, 54, 0.8);
29-
position : absolute;
30-
left : 50%;
31-
margin-left : -100px;
32-
padding-top : 50px;
33-
padding-bottom : 50px;
34-
text-align : center;
35-
border-radius : 5px;
36-
color : white;
37-
font-size : 2em;
40+
button {
41+
margin: 20px;
42+
}
43+
44+
.custom-btn {
45+
width : 130px;
46+
height : 40px;
47+
color : #fff;
48+
border-radius: 5px;
49+
padding : 10px 25px;
50+
font-family : 'Lato', sans-serif;
51+
font-weight : 500;
52+
background : transparent;
53+
cursor : pointer;
54+
transition : all 0.3s ease;
55+
position : relative;
56+
display : inline-block;
57+
box-shadow : inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
58+
7px 7px 20px 0px rgba(0, 0, 0, .1),
59+
4px 4px 5px 0px rgba(0, 0, 0, .1);
60+
}
61+
62+
.btn-2 {
63+
background: rgb(96, 9, 240);
64+
background: linear-gradient(0deg, rgba(96, 9, 240, 1) 0%, rgba(129, 5, 240, 1) 100%);
65+
border : none;
66+
67+
}
68+
69+
.btn-2:before {
70+
height: 0%;
71+
width : 2px;
72+
}
73+
74+
.btn-2:hover {
75+
box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
76+
-4px -4px 6px 0 rgba(116, 125, 136, .5),
77+
inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
78+
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
79+
}
80+
81+
@media (min-width: 1080px) {
82+
.replay {
83+
left : 45%;
84+
font-family : "Comic Sans MS", cursive, sans-serif;
85+
position : relative;
86+
display : inline-block;
87+
padding : 1.2em 2em;
88+
text-decoration: none;
89+
text-align : center;
90+
cursor : pointer;
91+
user-select : none;
92+
color : white;
93+
}
94+
95+
.replay::before {
96+
content : '';
97+
position : absolute;
98+
top : 0;
99+
left : 0%;
100+
bottom : 0;
101+
right : 0;
102+
background : linear-gradient(135deg, #6e8efb, #a777e3);
103+
border-radius: 4px;
104+
transition : box-shadow .5s ease, transform .2s ease;
105+
will-change : transform;
106+
box-shadow : 0 2px 5px rgba(0, 0, 0, .2);
107+
transform :
108+
translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
109+
}
110+
111+
.replay:hover::before {
112+
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
113+
}
114+
115+
.replay::after {
116+
position : relative;
117+
display : inline-block;
118+
content : attr(data-title);
119+
transition : transform .2s ease;
120+
font-weight : bold;
121+
letter-spacing: .01em;
122+
will-change : transform;
123+
transform :
124+
translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
125+
}
38126
}

‎public/js/script.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ function emptySquares() {
9696
return origBoard.filter(s => typeof s == 'number');
9797
}
9898

99-
function bestSpot() {
99+
function bestSpot() {
100100
// //Find all blank cells and get first element from blank cell. So the AI will always play the first slot
101101
// return emptySquares()[0];
102102

@@ -176,4 +176,37 @@ function minimax(newBoard, player) {
176176
}
177177

178178
return moves[bestMove];
179+
}
180+
181+
const docStyle = document.documentElement.style
182+
const aElem = document.querySelector('a')
183+
const boundingClientRect = aElem.getBoundingClientRect()
184+
185+
aElem.onmousemove = function (e) {
186+
187+
const x = e.clientX - boundingClientRect.left
188+
const y = e.clientY - boundingClientRect.top
189+
190+
const xc = boundingClientRect.width / 2
191+
const yc = boundingClientRect.height / 2
192+
193+
const dx = x - xc
194+
const dy = y - yc
195+
196+
docStyle.setProperty('--rx', `${dy / -1}deg`)
197+
docStyle.setProperty('--ry', `${dx / 10}deg`)
198+
}
199+
200+
aElem.onmouseleave = function (e) {
201+
docStyle.setProperty('--ty', '0')
202+
docStyle.setProperty('--rx', '0')
203+
docStyle.setProperty('--ry', '0')
204+
}
205+
206+
aElem.onmousedown = function (e) {
207+
docStyle.setProperty('--tz', '-25px')
208+
}
209+
210+
document.body.onmouseup = function (e) {
211+
docStyle.setProperty('--tz', '-12px')
179212
}

0 commit comments

Comments
 (0)