-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (112 loc) · 5.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/css/mean.css" />
<title>Black Devil</title>
</head>
<body>
<div id="app">
<div class="container-md ">
<div class="row m-0 p-0 ">
<div class="col p-0">
<h1 class="display-1 text-light mt-3 fw-bold text-center">Black Devil</h1>
<span class="fs-1 fw-bold text-light text-uppercase">score : </span>
<span class="fs-1 fw-bold fst-italic meanColor"> {{score - bet}}</span><span class="text-light fs-1">$</span>
</div>
<div class="row row-cols-2 p-3 mx-auto border border-mean position-relative ">
<div class="bg-container row row-cols-2 col-12 p-0 ">
<div class="playerBG"></div>
<div class="dealerBG "></div>
</div>
<div class=" d-flex justify-content-around ">
<img class="img-fulid col-3" :src="diceImg('p1')" alt="the dice img" />
<img class="img-fulid col-3" :src="diceImg('p2')" alt="the dice img" />
<img class="img-fulid col-3" :src="diceImg('p3')" alt="the dice img" />
</div>
<div class="display-6 text-light text-uppercase text-center m-auto">
{{resultMessage}}</div>
<div class="my-3 d-flex flex-column">
<span class="text-light fw-bold fs-max text-center">
{{pTotal}}
</span>
<span class=" display-3 fw-blod meanColor text-center mb-4">Player</span>
</div>
<div class="my-3 d-flex flex-column">
<span class="text-light fw-bold fs-max text-center">
{{dTotal}}
</span>
<span class="display-3 meanColor text-center">Dealer</span>
</div>
<div class="col-12">
<button
class=" btn btn-lg btn-mean position-relative fw-bold px-5 fs-1 start-50 translate-middle rounded-pill"
v-on:click="roll()">
Roll
</button>
</div>
<div class=" my-auto ">
<div class="d-flex justify-content-between">
<span class="text-light fs-4 text-uppercase align-self-center">your bet</span>
<div class="d-flex col-3 flex-column flex-md-row justify-content-end">
<span class="fw-bold fs-4 text-light text-center px-2 mt-md-2 bet-btn no-select "
v-on:click="addBet()">▲</span>
<span class="text-light rounded-3 d-inline fw-bold fs-4 m-0 bet-bg">
{{bet}}$
</span>
<span class="fw-bold fs-4 text-light text-center px-2 mt-md-2 bet-btn no-select "
v-on:click="subBet()">▼</span>
</div>
</div>
<div>
<label for="betting" class="form-label d-none">betting slider</label>
<input type="range" min="0" :max="score" class="form-range" step="1" name="betting" id="betting"
v-model="bet" />
<div class="d-flex justify-content-around">
<button class="btn btn-outline-light" v-on:click="setBet(5)">20%</button>
<button class="btn btn-outline-light" v-on:click="setBet(2)">50%</button><button
class="btn btn-outline-light" v-on:click="setBet(1.25)">80%</button>
</div>
</div>
</div>
<div class="d-flex justify-content-around ">
<img class="img-fulid col-3" :src="diceImg('d1')" alt="the dice img" />
<img class="img-fulid col-3" :src="diceImg('d2')" alt="the dice img" />
<img class="img-fulid col-3" :src="diceImg('d3')" alt="the dice img" />
</div>
</div>
<div>
<h2 class="display-3 text-light mt-4">The Rules ▼</h2>
<p class=" fs-2 lead text-light text-capitalize">
this game is inspired by blackjack, the goal is you play against a dealer to get 12 or as close to it
without passing
it.
</p>
<ol class="text-light">
<li class="fs-2">you have to set a bet before you play if you win you win your bet you start the game with a
credet of 500$ don't lose it
</li>
<li class="fs-3">if your total dice is equal to 12 or less you win
</li>
<li class="fs-3">if the dealer has a bigger total than you but not more than 12 you lose
</li>
<li class="fs-3">if the dealer is over 12 you win eminently
</li>
<li class="fs-3">if you and the dealer have equle total you lose noting
</li>
<li class="fs-3">if you get three dice each one is a number four you win double your bet</li>
</ol>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="assets/js/app.js" type="module"></script>
</body>
</html>