-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (174 loc) · 9.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Rock-paper-scissors game with alpinejs & tailwind">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Rock, Paper, Scissors</title>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="./build/tailwind.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style"
href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap">
<link rel="stylesheet" onload="this.onload=null;this.removeAttribute('media');"
href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap">
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: #71b6ff; }
[x-cloak] {
display: none;
}
</style>
</head>
<body>
<div x-data="game()" class="flex flex-col p-7 min-h-screen text-white font-barlow-semi-condensed bg-gradient-radial from-outer-radial to-inner-radial">
<header class="lg:w-1/2 lg:mx-auto mb-5 border-2 border-gray-400 flex justify-between items-center p-2 rounded-xl">
<div class="px-3 pt-1">
<img src="images/logo.svg" alt="logo" class="h-16 lg:h-28">
</div>
<div class="bg-white px-5 py-3 lg:px-10 rounded-lg text-center text-gray-700">
<h1 class="text-xs lg:text-lg tracking-widest uppercase text-blue-500">Score</h1>
<span class="text-4xl lg:text-6xl" x-text="score"></span>
</div>
</header>
<main class="lg:px-14 lg:mx-auto flex flex-col flex-1 justify-center">
<div x-show="! isPicked" class="grid grid-cols-2 place-items-center gap-y-7 lg:gap-x-20 lg:gap-y-10 mt-20">
<div @click="pickOption('rock')" class="cursor-pointer bg-gradient-to-b from-red-500 p-3 lg:p-5 rounded-full to-red-400 border-b-4 border-red-600">
<div class="bg-white grid h-24 w-24 lg:h-28 lg:w-28 place-items-center rounded-full border-t-4">
<img src="images/icon-rock.svg" alt="rock icon">
</div>
</div>
<div @click="pickOption('paper')" class="cursor-pointer bg-gradient-to-b from-blue-500 p-3 lg:p-5 rounded-full to-blue-400 border-b-4 border-blue-600">
<div class="bg-white grid h-24 w-24 lg:h-28 lg:w-28 place-items-center rounded-full border-t-4">
<img src="images/icon-paper.svg" alt="paper icon">
</div>
</div>
<div @click="pickOption('scissors')" class="cursor-pointer bg-gradient-to-b from-yellow-500 p-3 lg:p-5 rounded-full to-yellow-400 col-start-1 col-end-3 border-b-4 border-yellow-600">
<div class="bg-white grid h-24 w-24 lg:h-28 lg:w-28 place-items-center rounded-full border-t-4">
<img src="images/icon-scissors.svg" alt="scissors icon">
</div>
</div>
</div>
<div x-cloak x-show="isPicked">
<div class="grid grid-cols-2 lg:grid-cols-5 place-items-center gap-x-10">
<div class="relative flex flex-col items-center lg:col-start-2">
<div class="bg-white p-12 rounded-full" :class="result == 'You Win' ? 'bg-opacity-5' : 'bg-opacity-0'">
<div class="bg-white p-10 rounded-full" :class="result == 'You Win' ? 'bg-opacity-5' : 'bg-opacity-0'">
<div
class="bg-gradient-to-b p-3 lg:p-6 rounded-full border-b-4"
:class="{
'from-red-500 to-red-400 border-red-500' : pickedOption == 'rock',
'from-yellow-500 to-yellow-400 border-yellow-500' : pickedOption == 'scissors',
'from-blue-500 to-blue-400 border-blue-500' : pickedOption == 'paper'
}"
>
<div class="bg-white grid h-24 w-24 lg:h-32 lg:w-32 place-items-center rounded-full col-start-1 col-end-3 border-t-4">
<img x-show="pickedOption == 'rock'" src="images/icon-rock.svg" alt="rock icon">
<img x-show="pickedOption == 'paper'" src="images/icon-paper.svg" alt="paper icon">
<img x-show="pickedOption == 'scissors'" src="images/icon-scissors.svg" alt="scissors icon">
</div>
</div>
</div>
</div>
<h1 class="bottom-8 lg:top-0 absolute mt-5 uppercase lg:text-2xl">You picked</h1>
</div>
<div x-cloak x-show="result" class="lg:row-start-1 lg:col-start-3 col-end-3 col-start-1 flex flex-col items-center lg:mb-10">
<h1 x-text="result" class="min-w-max font-bold mb-5 mt-5 text-5xl text-center tracking-widest uppercase"></h1>
<button @click="restart()" class="w-2/3 bg-white font-bold px-10 py-3 rounded-xl text-gray-500 text-lg tracking-widest uppercase min-w-max">Play Again</button>
</div>
<div class="col-start-2 lg:col-start-4 row-start-1 overflow-hidden relative flex flex-col items-center">
<div class="bg-white p-12 rounded-full" :class="result == 'You Lose' ? 'bg-opacity-5' : 'bg-opacity-0'">
<div class="bg-white p-10 rounded-full" :class="result == 'You Lose' ? 'bg-opacity-5' : 'bg-opacity-0'">
<div
class="bg-gradient-to-b from-red-500 p-3 lg:p-6 rounded-full to-red-400 border-b-4"
:class="{
'from-red-500 to-red-400 border-red-500' : housePickedOption == 'rock',
'from-yellow-500 to-yellow-400 border-yellow-500' : housePickedOption == 'scissors',
'from-blue-500 to-blue-400 border-blue-500' : housePickedOption == 'paper'
}">
<div class="bg-white grid h-24 w-24 lg:h-32 lg:w-32 place-items-center rounded-full col-start-1 col-end-3 border-t-4">
<img x-show="housePickedOption == 'rock'" src="images/icon-rock.svg" alt="rock icon">
<img x-show="housePickedOption == 'paper'" src="images/icon-paper.svg" alt="paper icon">
<img x-show="housePickedOption == 'scissors'" src="images/icon-scissors.svg" alt="scissors icon">
</div>
</div>
</div>
</div>
<h1 class="bottom-8 lg:top-0 absolute mt-5 uppercase lg:text-2xl">The House picked</h1>
</div>
</div>
</div>
<div class="flex lg:hidden justify-center mt-auto mb-10">
<button @click="openModal = true" class="border border-gray-400 px-10 py-2.5 rounded-xl text-lg tracking-widest uppercase">Rules</button>
</div>
<div x-cloak x-show="openModal" class="fixed inset-0 grid place-items-center">
<div class="md:rounded-lg bg-white h-screen w-full lg:h-1/2 lg:w-1/3 flex flex-col justify-between lg:justify-center items-center px-10 py-20">
<div class="lg:flex lg:justify-between w-full mb-10">
<h1 class="font-bold text-4xl text-center text-gray-600 uppercase">Rules</h1>
<button class="hidden lg:block">
<img @click="openModal = false" src="images/icon-close.svg" alt="close icon" class="w-6">
</button>
</div>
<img src="images/image-rules.svg" alt="image of Rules">
<button class="block md:hidden">
<img @click="openModal = false" src="images/icon-close.svg" alt="close icon" class="w-6">
</button>
</div>
</div>
</main>
<div class="hidden lg:block mt-auto mb-10 text-right">
<button @click="openModal = true" class="border border-gray-400 px-10 py-2.5 rounded-xl text-lg tracking-widest uppercase">Rules</button>
</div>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Aung Htet Paing</a>.
</footer>
</div>
<script>
function game() {
return {
options: ['rock', 'paper', 'scissors'],
isPicked: false,
score: 0,
pickedOption: '',
housePickedOption: '',
result: '',
openModal: false,
pickOption(option) {
this.pickedOption = option
this.isPicked = true
this.housePick()
this.checkResult()
if(this.result == 'You Lose' && this.score != 0) {
this.score--
} else if(this.result == 'You Win') {
this.score++
}
},
checkResult() {
if(this.pickedOption == this.housePickedOption) {
this.result = 'Draw Match'
} else if (this.pickedOption == 'rock') {
this.result = this.housePickedOption == 'paper' ? 'You Lose' : 'You Win'
} else if (this.pickedOption == 'paper'){
this.result = this.housePickedOption == 'scissors' ? 'You Lose' : 'You Win'
} else {
this.result = this.housePickedOption == 'rock' ? 'You Lose' : 'You Win'
}
},
housePick() {
let index = Math.floor(Math.random() * 3)
this.housePickedOption = this.options[index]
},
restart() {
this.isPicked = false
this.pickedOption = ''
this.housePickedOption = ''
this.result = ''
}
}
}
</script>
</body>
</html>