-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (180 loc) · 9.58 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
<!DOCTYPE html>
<html lang="en" data-theme="mytheme" class="bg-primary">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shorcut icon" href="./img/profile.jpg">
<title>Battle of Wirwir</title>
<link rel="stylesheet" href="./src/output.css">
<!-- box icon -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<main class="pb-20">
<!-- title section -->
<section id="title" class="container lg:w-1/2 py-4 px-4 text-center">
<h1 class="text-neutral text-5xl textShadow">Battle of wirwir</h1>
<p class="text-md tracking-wider md:w-2/3 mx-auto mt-2 text-neutral opacity-60">a battle between the
strongest men, only for real men</p>
</section>
<!-- end -->
<!-- main section -->
<section class="container lg:w-1/2 px-4 mt-10 font-upheval relative">
<!-- rules -->
<button class="flex flex-wrap items-center gap-2 bg-accent mb-3 py-1 px-4 border-2 border-neutral"
onclick="rulesModal.showModal()">
<i class='bx bx-info-square text-xl'></i>
<p href="" class="underline tracking-widest">How to play</p>
</button>
<!-- computer section -->
<div class="box-comp w-full border-2 border-neutral pt-2 pb-12 px-4 mb-2">
<!-- status computer -->
<div class="flex flex-wrap w-full justify-between mb-4">
<h3 class="tracking-widest">Computer</h3>
<div class="tracking-widest flex items-center gap-1">
<h3 class="tracking-widest text-xl"><span id="hpCom">5</span>x</h3>
<i class='bx bx-heart-square text-3xl'></i>
</div>
</div>
<!-- card Computer -->
<div class="cardComp w-44 p-3 border-2 border-neutral mx-auto shadowCard bg-secondary">
<img id="imgComp" src="./img/rand.png"
class="rounded-full w-32 h-32 object-cover object-top mx-auto ">
<h4 id="nameCom" class="tracking-wider text-center text-md mt-3 mb-3">????</h4>
<div
class="flex flex-wrap justify-center border-t-2 border-neutral border-dashed w-3/4 mx-auto py-2">
<p class="text-sm tracking-widest">atk : <span class="atkCom">??</span></p>
</div>
</div>
</div>
<!-- end -->
<!-- info -->
<div class="containerHasil w-full p-4 border-2 border-neutral mx-auto">
<h1 id="hasil" class="text-center text-xl tracking-widest"></h1>
</div>
<!-- end -->
<!-- player section -->
<div class="box-player w-full border-2 border-neutral pt-10 pb-3 px-5 mt-2">
<!-- card player -->
<div class="cardContainer flex flex-wrap justify-center gap-4">
<div id="mrIroni" class="cardPlayer shadowCard">
<img src="./img/ironi.png"
class="rounded-full w-24 h-24 md:w-32 md:h-32 object-cover object-top mx-auto ">
<h4 class="tracking-wider text-center text-md mt-3 mb-3">MR. ironi</h4>
<div
class="flex flex-wrap justify-between border-t-2 border-neutral border-dashed w-3/4 mx-auto py-2">
<p class="text-sm tracking-widest">atk : <span class="atk">39</span></p>
<p class="text-sm">hp : <span class="hpCard" data-hp="2">2</span></p>
</div>
</div>
<div id="bagasBaterflai" class="cardPlayer shadowCard">
<img src="./img/masFuad.jpeg"
class="rounded-full w-24 h-24 md:w-32 md:h-32 object-cover object-top mx-auto ">
<h4 class="tracking-wider text-center text-md mt-3 mb-3">mas fuad</h4>
<div
class="flex flex-wrap justify-between border-t-2 border-neutral border-dashed w-3/4 mx-auto py-2">
<p class="text-sm tracking-widest">atk : <span class="atk">20</span></p>
<p class="text-sm">hp : <span class="hpCard" data-hp="2">2</span></p>
</div>
</div>
<div id="sigitRendang" class="cardPlayer shadowCard">
<img src="./img/reyhanKecap.jpeg"
class="rounded-full w-24 h-24 md:w-32 md:h-32 object-cover object-top mx-auto ">
<h4 class="tracking-wider text-center text-md mt-3 mb-3">reyhan kecap</h4>
<div
class="flex flex-wrap justify-between border-t-2 border-neutral border-dashed w-3/4 mx-auto py-2">
<p class="text-sm tracking-wider">atk : <span class="atk">50</span></p>
<p class="text-sm">hp : <span class="hpCard" data-hp="1">1</span></p>
</div>
</div>
</div>
<!-- status -->
<div class="flex flex-wrap w-full justify-between mt-10">
<div class="tracking-widest flex items-center gap-1">
<i class='bx bx-heart-square text-3xl'></i>
<h3 class="tracking-widest text-xl"><span id="hpPlay">5</span>x</h3>
</div>
<h3 class="tracking-widest">Player</h3>
</div>
</div>
<!-- end -->
</section>
<!-- end -->
</main>
<!-- modal info winner -->
<div id="win" class="infoModal hidden transition-all">
<div class="modalBody ">
<img src="./img/winPlayer.gif" class="w-1/2 h-56 mx-auto object-cover">
<h1 class="text-3xl text-center tracking-widest mt-5">👑 we have the winner 👑</h1>
<p class="text-md text-center tracking-widest">bro sedang memasak</p>
<button id="btnCloseWin" class="block p-3 border-2 border-neutral mx-auto mt-5">close</button>
</div>
</div>
<!-- end -->
<!-- modal info loser -->
<div id="lose" class="infoModal hidden transition-all">
<div class="modalBody ">
<img src="./img/losePlayer.gif" class="w-1/2 h-56 mx-auto object-cover">
<h1 class="text-3xl text-center tracking-widest mt-5">🤡 you're a loser 🤡</h1>
<p class="text-md text-center tracking-widest">Sepertinya anda kurang beruntung</p>
<p class="text-sm text-center tracking-widest opacity-40">awokawokawok kalah sama bot</p>
<button id="btnCloseLose" class="block p-3 border-2 border-neutral mx-auto mt-5">close</button>
</div>
</div>
<!-- end -->
<!-- modal rules -->
<dialog id="rulesModal" class="modal">
<div class="modal-box tracking-widest bg-secondary">
<i class='bx bx-right-arrow-alt text-neutral text-3xl'></i>
<h3 class="font-bold text-lg mb-5">how to play !!</h3>
<ul class="list-disc list-outside text-sm opacity-75">
<li>pilih salah satu kartu untuk memulai permainan dan komputer juga akan memilih kartu</li>
<li>pemenang di tentukan berdasarkan jumalah atk yang terbesar</li>
<li>jika kalah, hp pada kartu akan berkurang 1</li>
<li>jika hp pada kartu bernilai 0, maka kartu tidak bisa di pakai</li>
<li>game akan berakhir ketika hp player/computer bernilai 0</li>
<li>good luck .</li>
</ul>
<div class="modal-action">
<form method="dialog">
<!-- if there is a button in form, it will close the modal -->
<button class="btn border-2">Close</button>
</form>
</div>
</div>
</dialog>
<!-- end -->
<!-- footer -->
<footer
class="footer footer-center p-10 border-t-2 mt-8 border-primary-content text-primary-content bottom-0 shadow-lg">
<aside>
<div class="avatar">
<div class="w-24 rounded-full">
<img src="./img/profile.jpg" />
</div>
</div>
<p class="font-bold tracking-wider">
~ Created by Stanley Beraksi / <span class="opacity-60">Albretus</span> ~
</p>
<p class="tracking-wider">Copyright © 2024 - All right reserved</p>
</aside>
<nav>
<div class="grid grid-flow-col gap-4">
<a href="https://www.instagram.com/alberrr.e/" target="_blank">
<i class='bx bxl-instagram-alt text-neutral text-3xl bx-spin-hover'></i>
</a>
<a href="https://twitter.com/BochiI1874293" target="_blank">
<i class='bx bxl-twitter text-neutral text-3xl bx-spin-hover'></i>
</a>
<a href="https://github.com/Albretus2" target="_blank">
<i class='bx bxl-github text-neutral text-3xl bx-spin-hover'></i>
</a>
<a href="https://www.youtube.com/channel/UCAc4EVbQ8DlYm3aTntDNBZw" target="_blank">
<i class='bx bxl-youtube text-neutral text-3xl bx-spin-hover'></i>
</a>
</div>
</nav>
</footer>
<script src="./src/script.js"></script>
</body>
</html>