Skip to content

Commit 1a26d6d

Browse files
SuperZombiSuperZombi
committed
Added history and menu
1 parent 92352c2 commit 1a26d6d

File tree

4 files changed

+236
-17
lines changed

4 files changed

+236
-17
lines changed

‎index.html

+23-3
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@
33
<head>
44
<title>Monty Hall problem</title>
55
<link rel="icon" type="image/png" href="images/car.png"/>
6-
<link rel="stylesheet" href="main.css">
7-
<script src="main.js"></script>
86
<meta name='viewport' content='width=device-width'>
97
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
8+
9+
<link rel="stylesheet" href="main.css">
10+
<link rel="stylesheet" href="menu.css">
11+
<script src="main.js"></script>
12+
1013
<!-- og:zone -->
11-
<meta property="og:image" content="https://superzombi.github.io/monty_hall/images/preview.jpeg">
14+
<meta property="og:image" content="images/preview.jpeg">
1215
<meta property="og:title" content="Monty Hall problem">
1316
</head>
1417
<body>
@@ -34,5 +37,22 @@
3437
<a href="#uk">uk</a>
3538
</div>
3639
</div>
40+
41+
<div id="menuToggle">
42+
<input type="checkbox"/>
43+
44+
<span></span>
45+
<span></span>
46+
<span></span>
47+
48+
<ul id="menu">
49+
<details id="history-spoiler">
50+
<summary id="history-title">History</summary>
51+
<div id="history-counter" style="margin-left: 10px;">0/0</div>
52+
<div id="history">
53+
</div>
54+
</details>
55+
</ul>
56+
</div>
3757
</body>
3858
</html>

‎main.css

+48
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ html, body{
163163
bottom: 2px;
164164
width: 100%;
165165
text-align: center;
166+
user-select: none;
166167
}
167168
#footer a{
168169
color: lightgrey;
@@ -174,6 +175,53 @@ html, body{
174175
font-weight: bold;
175176
}
176177

178+
#history-spoiler{
179+
overflow: auto;
180+
height: 100%;
181+
}
182+
.history-element{
183+
border-bottom: 2px solid grey;
184+
margin-bottom: 5px;
185+
}
186+
.history-element:last-child{
187+
border-bottom: none;
188+
}
189+
#history-title{
190+
font-size: 16pt;
191+
font-weight: bold;
192+
padding: 15px 0;
193+
cursor: pointer;
194+
}
195+
.history-element .title{
196+
font-size: 14pt;
197+
text-align: center;
198+
font-weight: bold;
199+
}
200+
.history-element .title.win{
201+
color: #00ca00;
202+
}
203+
.history-element .title.lose{
204+
color: red;
205+
}
206+
.history-element .cards{
207+
display: flex;
208+
}
209+
.history-element .cards .card{
210+
height: 130px;
211+
width: 100%;
212+
background: brown;
213+
margin: 10px;
214+
border-radius: 8px;
215+
box-sizing: border-box;
216+
filter: drop-shadow(0 0 2px grey);
217+
}
218+
.history-element .cards .card.prize{
219+
background: gold;
220+
}
221+
222+
.history-element .cards .card.selected{
223+
border: 4px solid orange;
224+
}
177225

178226

179227
@media(max-width: 500px){

‎main.js

+64-14
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ class Game {
2222
remove_door.classList.add("removed")
2323

2424
if (document.querySelectorAll('#doors > .door:not(.removed)').length == 1){
25-
this.onGameEnd(true)
2625
document.querySelector('#doors > .door:not(.removed)').classList.add("prize")
26+
this.onGameEnd(true)
2727
} else{
2828
callback()
2929
}
@@ -37,41 +37,53 @@ var LANG = {
3737
"title": "Monty Hall problem",
3838
"game": ["Imagine that you are on a TV game.\nThere is a prize behind one of the doors, the rest are empty.\nChoose one of the doors:",
3939
"The host removes one of the empty doors and asks you:\n— Are you sure of your choice?"],
40-
"win": "Congratulations! You won a prize!!! 🎉🎉🎉",
41-
"lose": "Unfortunately you lost 😢",
40+
"on_win": "Congratulations! You won a prize!!! 🎉🎉🎉",
41+
"on_lose": "Unfortunately you lost 😢",
4242

4343
"select": "Select",
4444
"skip": "Skip",
45-
"again": "Repeat"
45+
"again": "Repeat",
46+
47+
"history": "History",
48+
"win": "Win",
49+
"lose": "Loss"
4650
},
4751
"ru": {
4852
"title": "Парадокс Монти Холла",
4953
"game": ["Представьте что вы на телеигре.\nЗа одной из дверей приз, остальные пустые.\nВыберите одну из дверей:",
5054
"Ведущий убирает одну из пустых дверей и спрашивает вас:\n— Вы уверены в своём выборе?"],
51-
"win": "Ура! Вы выиграли приз!!! 🎉🎉🎉",
52-
"lose": "К сожалению, вы проиграли 😢",
55+
"on_win": "Ура! Вы выиграли приз!!! 🎉🎉🎉",
56+
"on_lose": "К сожалению, вы проиграли 😢",
5357

5458
"select": "Выбрать",
5559
"skip": "Пропустить",
56-
"again": "Повторить"
60+
"again": "Повторить",
61+
62+
"history": "История",
63+
"win": "Победа",
64+
"lose": "Поражение"
5765
},
5866
"uk": {
5967
"title": "Парадокс Монті Голла",
6068
"game": ["Уявіть, що ви на телегрі.\nЗа однією з дверей приз, інші порожні.\nВиберіть одну з дверей:",
6169
"Ведучий прибирає одну з порожніх дверей і запитує вас: - Ви впевнені у своєму виборі?"],
62-
"win": "Ура! Ви виграли приз! 🎉🎉🎉",
63-
"lose": "На жаль, ви програли 😢",
70+
"on_win": "Ура! Ви виграли приз! 🎉🎉🎉",
71+
"on_lose": "На жаль, ви програли 😢",
6472

6573
"select": "Вибрати",
6674
"skip": "Пропустити",
67-
"again": "Повторити"
75+
"again": "Повторити",
76+
77+
"history": "Історія",
78+
"win": "Перемога",
79+
"lose": "Поразка"
6880
}
6981
}
7082

7183
var canSelect = true;
72-
var skiper, game;
84+
var skiper, game, user_lang;
7385
function main(){
74-
let user_lang = langEngine()
86+
user_lang = langEngine()
7587
localize(LANG[user_lang])
7688

7789
document.querySelector("#skip button").onclick = _=>{
@@ -115,12 +127,17 @@ function main(){
115127
game.onGameEnd = function(result){
116128
clear()
117129
if (result){
118-
skiper = print(LANG[user_lang].win)
130+
skiper = print(LANG[user_lang].on_win)
119131
document.querySelector("#titles").classList.add("win")
120132
} else{
121-
skiper = print(LANG[user_lang].lose)
133+
skiper = print(LANG[user_lang].on_lose)
122134
document.querySelector("#titles").classList.add("lose")
123135
}
136+
137+
pushHistory(result, {
138+
prize_door: document.querySelector("#doors > .door.prize").getAttribute("num"),
139+
selected_door: document.querySelector("#doors > .door.selected").getAttribute("num")
140+
})
124141

125142
setTimeout(_=>{
126143
button.innerHTML = LANG[user_lang].again
@@ -216,4 +233,37 @@ function localize(dict){
216233
document.title = dict.title
217234
document.querySelector("#skip button").innerHTML = dict.skip
218235
document.querySelector("#select-button button").innerHTML = dict.select
236+
document.querySelector("#history-title").innerHTML = dict.history
237+
}
238+
239+
function pushHistory(result, cards){
240+
let count = document.querySelector("#history-counter").innerHTML.split("/").map(e=>parseInt(e))
241+
count[1]++;
242+
let element = parseHTML(`<div class="history-element">
243+
<div class="title"></div>
244+
<div class="cards">
245+
<div class="card"></div>
246+
<div class="card"></div>
247+
<div class="card"></div>
248+
</div>
249+
</div>`)
250+
if (result){
251+
count[0]++;
252+
element.querySelector(".title").classList.add("win")
253+
element.querySelector(".title").innerHTML = LANG[user_lang].win
254+
} else {
255+
element.querySelector(".title").classList.add("lose")
256+
element.querySelector(".title").innerHTML = LANG[user_lang].lose
257+
}
258+
element.querySelector(`.cards .card:nth-child(${cards.prize_door})`).classList.add("prize")
259+
element.querySelector(`.cards .card:nth-child(${cards.selected_door})`).classList.add("selected")
260+
document.querySelector("#history").appendChild(element)
261+
262+
document.querySelector("#history-counter").innerHTML = count.join("/")
263+
}
264+
265+
function parseHTML(txt) {
266+
var t = document.createElement('template');
267+
t.innerHTML = txt;
268+
return t.content.firstChild;
219269
}

‎menu.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
#menuToggle {
2+
display: block;
3+
position: fixed;
4+
bottom: 10px;
5+
left: 12px;
6+
z-index: 1;
7+
user-select: none;
8+
}
9+
10+
#menuToggle a {
11+
text-decoration: none;
12+
color: #232323;
13+
transition: color 0.3s ease;
14+
}
15+
16+
#menuToggle a:hover {
17+
color: tomato;
18+
}
19+
20+
21+
#menuToggle input {
22+
display: block;
23+
width: 32px;
24+
height: 32px;
25+
position: absolute;
26+
top: -7px;
27+
left: -5px;
28+
cursor: pointer;
29+
opacity: 0;
30+
z-index: 2;
31+
}
32+
33+
#menuToggle span {
34+
display: block;
35+
width: 33px;
36+
height: 4px;
37+
margin-bottom: 5px;
38+
position: relative;
39+
background: #cdcdcd;
40+
border-radius: 3px;
41+
z-index: 1;
42+
transform-origin: 4px 0px;
43+
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
44+
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
45+
opacity 0.55s ease;
46+
}
47+
48+
#menuToggle span:first-child {
49+
transform-origin: 0% 0%;
50+
}
51+
52+
#menuToggle span:nth-last-child(2) {
53+
transform-origin: 0% 100%;
54+
}
55+
56+
#menuToggle input:checked ~ span {
57+
opacity: 1;
58+
transform: rotate(45deg) translate(-2px, -1px);
59+
background: #232323;
60+
}
61+
62+
#menuToggle input:checked ~ span:nth-last-child(3) {
63+
opacity: 0;
64+
transform: rotate(0deg) scale(0.2, 0.2);
65+
}
66+
67+
#menuToggle input:checked ~ span:nth-last-child(2) {
68+
transform: rotate(-45deg) translate(0, -1px);
69+
}
70+
71+
72+
#menu {
73+
position: fixed;
74+
top: 0;
75+
left: 0;
76+
width: 300px;
77+
height: 100%;
78+
margin: 0;
79+
padding-left: 42px;
80+
padding-top: 5px;
81+
background: #ededed;
82+
list-style-type: none;
83+
transform-origin: 0% 0%;
84+
transform: translate(-100%, 0);
85+
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
86+
}
87+
88+
#menu li {
89+
padding: 10px 0;
90+
font-size: 22px;
91+
}
92+
93+
#menuToggle input:checked ~ ul {
94+
transform: none;
95+
}
96+
97+
@media(max-width: 500px){
98+
#menu {
99+
width: calc(100vw - 42px);
100+
}
101+
}

0 commit comments

Comments
 (0)