├── .gitattributes
├── img
├── favicon.ico
├── Milky-Long.gif
├── Multi-Long.gif
├── BB-Background.png
├── Cookie_mark.png
├── Milky-Front.gif
├── Muffin_mark.png
├── Multi-Front.gif
├── favicon-16x16.png
├── favicon-32x32.png
├── Muffin-Boss-Front.gif
├── Muffin-Boss-Long.gif
├── apple-touch-icon.png
├── android-chrome-192x192.png
└── android-chrome-512x512.png
├── files
├── Pufony-1.otf
└── Bakey-Battle_Stuff.docx
├── desktop.ini
├── css
├── scss
│ ├── buttons.css.map
│ ├── buttons.css
│ └── buttons.scss
├── style_front.css.map
├── style.css.map
├── style_front.scss
├── style.scss
├── style_front.css
└── style.css
├── README.md
├── pages
├── ch_front.html
├── ru_front.html
├── ch.html
├── en.html
└── ru.html
├── index.html
└── js
├── script_ch.js
├── script_ru.js
└── script.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/favicon.ico
--------------------------------------------------------------------------------
/files/Pufony-1.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/files/Pufony-1.otf
--------------------------------------------------------------------------------
/img/Milky-Long.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Milky-Long.gif
--------------------------------------------------------------------------------
/img/Multi-Long.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Multi-Long.gif
--------------------------------------------------------------------------------
/img/BB-Background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/BB-Background.png
--------------------------------------------------------------------------------
/img/Cookie_mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Cookie_mark.png
--------------------------------------------------------------------------------
/img/Milky-Front.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Milky-Front.gif
--------------------------------------------------------------------------------
/img/Muffin_mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Muffin_mark.png
--------------------------------------------------------------------------------
/img/Multi-Front.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Multi-Front.gif
--------------------------------------------------------------------------------
/img/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/favicon-16x16.png
--------------------------------------------------------------------------------
/img/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/favicon-32x32.png
--------------------------------------------------------------------------------
/img/Muffin-Boss-Front.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Muffin-Boss-Front.gif
--------------------------------------------------------------------------------
/img/Muffin-Boss-Long.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/Muffin-Boss-Long.gif
--------------------------------------------------------------------------------
/img/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/apple-touch-icon.png
--------------------------------------------------------------------------------
/files/Bakey-Battle_Stuff.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/files/Bakey-Battle_Stuff.docx
--------------------------------------------------------------------------------
/img/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/android-chrome-192x192.png
--------------------------------------------------------------------------------
/img/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/theomorphic/Bakery-Battle/HEAD/img/android-chrome-512x512.png
--------------------------------------------------------------------------------
/desktop.ini:
--------------------------------------------------------------------------------
1 | [.ShellClassInfo]
2 | IconResource=C:\ico\Bakery-Battle.ico,0
3 | [ViewState]
4 | Mode=
5 | Vid=
6 | FolderType=Generic
7 |
--------------------------------------------------------------------------------
/css/scss/buttons.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["buttons.scss","buttons.css"],"names":[],"mappings":"AAAA;EACC,gCAAA;EACA,aAAA;EACA,gBAAA;EACA,UAAA;EACA,wBAAA;ACCD;ADEC;EACI,gBAAA;EACA,aAAA;EACA,kBAAA;ACAL;ADGK;EACC,cAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;ACDN;;ADOA;EACC,kBAAA;EACA,aAAA;EACA,YAAA;EACA,MAAA;EACA,OAAA;EACA,yBAAA;EACA,WAAA;EACA,gBAAA;EACA,UAAA;EACA,kBAAA;ACJD;;ADSA;EACI,cAAA;ACNJ;;ADSA;EACC,OAAA;EACA,UAAA;ACND;;ADQA;EACC,YAAA;EACA,UAAA;ACLD;;ADOA;EACC,YAAA;EACA,UAAA;ACJD","file":"buttons.css"}
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bakery Battle
2 | Сrisp and critical Tic-Tac-Toe in the bakery setting. A simple JavaScript Web Game with AI and jQuery solution.
3 |
4 | ### There's 3 optinal ways to play this game:
5 | * against **Da Muffin**, wich is a hard level with AI player;
6 | * against your friend who you'd like to punch;
7 | * agaisnt **Milky**, wich is an easy level with AI player;
8 |
9 | The game is available in **English and Russian**
10 |
11 | Choose your destiny and a field cell. And don't forget **to star the game!**
12 |
13 | Let's see you have a try: https://theomorphic.github.io/Bakery-Battle
14 |
--------------------------------------------------------------------------------
/css/scss/buttons.css:
--------------------------------------------------------------------------------
1 | ul {
2 | transform: translate(-50%, -50%);
3 | display: flex;
4 | overflow: hidden;
5 | padding: 0;
6 | background-color: bisque;
7 | }
8 | ul li {
9 | list-style: none;
10 | width: 10.4vw;
11 | border-radius: 10%;
12 | }
13 | ul li a {
14 | display: block;
15 | padding: 0.5vh;
16 | text-align: center;
17 | color: black;
18 | transition: 0.5s;
19 | text-decoration: none;
20 | font-weight: bold;
21 | font-size: 1.9vh;
22 | letter-spacing: 1px;
23 | }
24 |
25 | .slide {
26 | position: absolute;
27 | width: 10.4vw;
28 | height: 100%;
29 | top: 0;
30 | left: 0;
31 | background-color: #E0B179;
32 | z-index: -1;
33 | transition: 0.5s;
34 | opacity: 0;
35 | border-radius: 10%;
36 | }
37 |
38 | ul li.active a {
39 | color: #262626;
40 | }
41 |
42 | ul li:nth-child(1).active ~ .slide {
43 | left: 0;
44 | opacity: 1;
45 | }
46 |
47 | ul li:nth-child(2).active ~ .slide {
48 | left: 21.3vh;
49 | opacity: 1;
50 | }
51 |
52 | ul li:nth-child(3).active ~ .slide {
53 | left: 42.6vh;
54 | opacity: 1;
55 | }/*# sourceMappingURL=buttons.css.map */
--------------------------------------------------------------------------------
/css/scss/buttons.scss:
--------------------------------------------------------------------------------
1 | ul{
2 | transform: translate(-50%, -50%);
3 | display: flex;
4 | overflow: hidden;
5 | padding: 0;
6 | background-color: bisque;
7 |
8 |
9 | li{
10 | list-style: none;
11 | width: 10.4vw;
12 | border-radius: 10%;
13 |
14 |
15 | a{
16 | display: block;
17 | padding: 0.5vh;
18 | text-align: center;
19 | color: black;
20 | transition: 0.5s;
21 | text-decoration: none;
22 | font-weight: bold;
23 | font-size: 1.9vh;
24 | letter-spacing: 1px;
25 | }
26 |
27 | }
28 | }
29 |
30 | .slide{
31 | position: absolute;
32 | width: 10.4vw;
33 | height: 100%;
34 | top: 0;
35 | left: 0;
36 | background-color: #E0B179;
37 | z-index: -1;
38 | transition: 0.5s;
39 | opacity: 0;
40 | border-radius: 10%;
41 |
42 |
43 | }
44 |
45 | ul li.active a{
46 | color: #262626;
47 | }
48 |
49 | ul li:nth-child(1).active ~ .slide{
50 | left: 0;
51 | opacity: 1;
52 | }
53 | ul li:nth-child(2).active ~ .slide{
54 | left: 21.3vh;
55 | opacity: 1;
56 | }
57 | ul li:nth-child(3).active ~ .slide{
58 | left: 42.6vh;
59 | opacity: 1;
60 | }
--------------------------------------------------------------------------------
/css/style_front.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["style_front.scss","scss/buttons.scss","style_front.css"],"names":[],"mappings":"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","file":"style_front.css"}
--------------------------------------------------------------------------------
/pages/ch_front.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 饼干战
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
欢迎, 伟大面包师傅
39 | 规则很简单:
40 | 你最好烤饼干否则你被饼干烤
41 | 这是井字游戏一样,不过更美味
42 |
43 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/pages/ru_front.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Сдобная Схватка
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
Приветствую, о Могучий Пекарь!
39 | Правила очень просты:
40 | Подгорят либо враги, либо у тебя.
41 | Это как крестики-нолики, только пышнее!
42 |
43 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Bakery Battle
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
Greetings, Mighty Baker!
39 | The rules are simple:
40 | You better burn 'em all or be bitten.
41 | It's like Tic-Tac-Toe but tastier!
42 |
43 |
44 |
52 |
53 |
54 |
55 |
56 |
57 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/css/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["style.scss","scss/buttons.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
--------------------------------------------------------------------------------
/pages/ch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 饼干战
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
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 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
content
63 |
继续游戏
64 |
65 |
66 |
67 |
68 |
77 |
78 |
79 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/pages/en.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Bakery Battle
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
Da Rough Muffin
29 |
The roughest Muffin in da
30 | world is comming for ya!
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
content
64 |
Keep bakering!
65 |
66 |
67 |
68 |
69 |
78 |
79 |
80 |
88 |
89 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/pages/ru.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Сдобная Схватка
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
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 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
content
64 |
Не сбавляй жару!
65 |
66 |
67 |
68 |
69 |
78 |
79 |
80 |
88 |
89 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/js/script_ch.js:
--------------------------------------------------------------------------------
1 | const area = document.getElementById('area');
2 | const btn_change1 = document.getElementById('btn-change1');
3 | const btn_change2 = document.getElementById('btn-change2');
4 | const btn_change3 = document.getElementById('btn-change3');
5 |
6 |
7 | const lang_switch_eng = document.getElementById('lang-switch-eng');
8 | const lang_switch_ch = document.getElementById('lang-switch-ch');
9 | const lang_switch_ru = document.getElementById('lang-switch-ru');
10 |
11 |
12 | const MODE_2P = '2 Players';
13 | const MODE_AI = 'AI';
14 | const MODE_NINNY = 'Ninny';
15 |
16 | const X_MARK = '
';
17 | const O_MARK = '
';
18 |
19 | let mark = X_MARK;
20 | let mode = MODE_AI;
21 |
22 | let result = '';
23 | const contentWrapper = document.getElementById('content');
24 | const modalResult = document.getElementById('modal-result-wrapper');
25 | const overlay = document.getElementById('overlay');
26 | const btnClose = document.getElementById('btn-close');
27 |
28 | function get_boxes()
29 | {
30 | let boxes = [9];
31 | let i = 0;
32 | for (i = 0; i < 9; i++) {
33 | boxes[i] = document.getElementById('box' + i).innerHTML;
34 | }
35 | return boxes;
36 | }
37 |
38 | function reload()
39 | {
40 | mark = X_MARK;
41 | for (i = 0; i < 9; i++)
42 | document.getElementById('box' + i).innerHTML = '';
43 | }
44 |
45 |
46 | btn_change1.addEventListener('click', e=>{
47 | mode = MODE_AI;
48 | document.getElementById("enemyName").innerHTML = "大马芬";
49 | document.getElementById("enemyDesc").innerHTML = "世界上最粗暴的马芬";
50 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Muffin-Boss-Long.gif')";
51 | reload();
52 | });
53 | btn_change2.addEventListener('click', e=>{
54 | mode = MODE_2P;
55 | document.getElementById("enemyName").innerHTML = "多人游戏";
56 | document.getElementById("enemyDesc").innerHTML = "在残忍姜饼的战斗上
挑战你的朋友或者敌人";
57 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Multi-Long.gif')";
58 |
59 | reload();
60 | });
61 | btn_change3.addEventListener('click', e=>{
62 | mode = MODE_NINNY;
63 | document.getElementById("enemyName").innerHTML = "酥饼干";
64 | document.getElementById("enemyDesc").innerHTML = `我们新兵饼干是菜鸟
但不是手到擒来`;
65 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Milky-Long.gif')";
66 |
67 |
68 | reload();
69 | });
70 |
71 | area.addEventListener('click', e=>{
72 | if (e.target.className == 'box') {
73 | if (e.target.innerHTML == "") {
74 | e.target.innerHTML = mark;
75 | if (check())
76 | if (mode != MODE_2P)
77 | ai();
78 | }
79 | }
80 | });
81 |
82 | function get_empty(boxes)
83 | {
84 | let empty = [];
85 | let i = 0;
86 | for (i in boxes)
87 | if (boxes[i] == "")
88 | empty.push(i);
89 | return empty;
90 | }
91 |
92 | function mark_reverse(mark)
93 | {
94 | if (mark == X_MARK)
95 | return O_MARK;
96 | return X_MARK;
97 | }
98 |
99 | function one_step_win()
100 | {
101 | let boxes, result;
102 | for (i = 0; i < 9; i++) {
103 | boxes = get_boxes();
104 | if (boxes[i] == O_MARK || boxes[i] == X_MARK)
105 | continue;
106 | boxes[i] = O_MARK;
107 | result = check_win(boxes);
108 | if (result)
109 | return i;
110 | }
111 | for (i = 0; i < 9; i++) {
112 | boxes = get_boxes();
113 | if (boxes[i] == O_MARK || boxes[i] == X_MARK)
114 | continue;
115 | boxes[i] = X_MARK;
116 | result = check_win(boxes);
117 | if (result)
118 | return i;
119 | }
120 | return -1;
121 | }
122 |
123 | function is_empty(cell)
124 | {
125 | let boxes = get_boxes();
126 | if (boxes[cell] == O_MARK || boxes[cell] == X_MARK)
127 | return 0;
128 | return 1;
129 | }
130 |
131 | function ai()
132 | {
133 | let choice, result, boxes, empty;
134 | boxes = get_boxes();
135 | empty = get_empty(boxes);
136 | const best_choices = [4, 0, 2, 6, 8, 1, 3, 5, 7];
137 | if (mode == MODE_AI) {
138 | result = one_step_win();
139 | if (result != -1) {
140 | choice = result;
141 | } else {
142 | for (i = 0; i < 5; i++) {
143 | if (is_empty(best_choices[i])) {
144 | choice = best_choices[i];
145 | break;
146 | }
147 | }
148 | }
149 | } else if (mode == MODE_NINNY) {
150 | choice = empty[Math.round(Math.random() * (empty.length - 1))];
151 | }
152 | target = document.getElementById('box' + choice);
153 | target.innerHTML = O_MARK;
154 | check();
155 | }
156 |
157 | function check_win(boxes)
158 | {
159 | const lines = [
160 | [0,1,2],
161 | [3,4,5],
162 | [6,7,8],
163 | [0,3,6],
164 | [1,4,7],
165 | [2,5,8],
166 | [0,4,8],
167 | [2,4,6]];
168 | let i = 0;
169 | for (i in lines) {
170 | if (boxes[lines[i][0]] == X_MARK &&
171 | boxes[lines[i][1]] == X_MARK &&
172 | boxes[lines[i][2]] == X_MARK) {
173 | return X_MARK;
174 | } else if (boxes[lines[i][0]] == O_MARK &&
175 | boxes[lines[i][1]] == O_MARK &&
176 | boxes[lines[i][2]] == O_MARK) {
177 | return O_MARK;
178 | }
179 | }
180 | if (get_empty(boxes).length == 0) {
181 | return 1;
182 | }
183 | return 0;
184 | }
185 |
186 | function check()
187 | {
188 | mark = mark_reverse(mark);
189 | switch (check_win(get_boxes())) {
190 | case X_MARK:
191 | result = '你赢了! 饼干';
192 | prepareResult(result);
193 | return 0;
194 | break;
195 | case O_MARK:
196 | result = '你输了. 蛋糕';
197 | prepareResult(result);
198 | return 0;
199 | case 1:
200 | prepareResult(0);
201 | return 0;
202 | }
203 | return 1;
204 | }
205 | const prepareResult = winner => {
206 | let message = `${winner}煎熟好了`;
207 | if (winner == 0)
208 | message = '平局';
209 | contentWrapper.innerHTML = message;
210 | modalResult.style.display = 'block';
211 | }
212 |
213 | const closeModal = () => {
214 | modalResult.style.display = 'none';
215 | reload();
216 | }
217 |
218 | overlay.addEventListener('click', closeModal);
219 | btnClose.addEventListener('click', closeModal);
220 |
221 |
222 |
--------------------------------------------------------------------------------
/js/script_ru.js:
--------------------------------------------------------------------------------
1 | const area = document.getElementById('area');
2 | const btn_change1 = document.getElementById('btn-change1');
3 | const btn_change2 = document.getElementById('btn-change2');
4 | const btn_change3 = document.getElementById('btn-change3');
5 |
6 |
7 | const lang_switch_eng = document.getElementById('lang-switch-eng');
8 | const lang_switch_ch = document.getElementById('lang-switch-ch');
9 | const lang_switch_ru = document.getElementById('lang-switch-ru');
10 |
11 |
12 | const MODE_2P = '2 Players';
13 | const MODE_AI = 'AI';
14 | const MODE_NINNY = 'Ninny';
15 |
16 | const X_MARK = '
';
17 | const O_MARK = '
';
18 |
19 | let mark = X_MARK;
20 | let mode = MODE_AI;
21 |
22 | let result = '';
23 | const contentWrapper = document.getElementById('content');
24 | const modalResult = document.getElementById('modal-result-wrapper');
25 | const overlay = document.getElementById('overlay');
26 | const btnClose = document.getElementById('btn-close');
27 |
28 | function get_boxes()
29 | {
30 | let boxes = [9];
31 | let i = 0;
32 | for (i = 0; i < 9; i++) {
33 | boxes[i] = document.getElementById('box' + i).innerHTML;
34 | }
35 | return boxes;
36 | }
37 |
38 | function reload()
39 | {
40 | mark = X_MARK;
41 | for (i = 0; i < 9; i++)
42 | document.getElementById('box' + i).innerHTML = '';
43 | }
44 |
45 |
46 | btn_change1.addEventListener('click', e=>{
47 | mode = MODE_AI;
48 | document.getElementById("enemyName").innerHTML = "Грубый Маффин";
49 | document.getElementById("enemyDesc").innerHTML = `Огрубевший и злой Маффин
50 | сейчас сам съест тебя!`;
51 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Muffin-Boss-Long.gif')";
52 | reload();
53 | });
54 | btn_change2.addEventListener('click', e=>{
55 | mode = MODE_2P;
56 | document.getElementById("enemyName").innerHTML = "Мультиплеер";
57 | document.getElementById("enemyDesc").innerHTML = `Кликни недруга иль друга,
сойдитесь в битве на хлебном поле`;
58 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Multi-Long.gif')";
59 |
60 | reload();
61 | });
62 | btn_change3.addEventListener('click', e=>{
63 | mode = MODE_NINNY;
64 | document.getElementById("enemyName").innerHTML = "Печенюшка";
65 | document.getElementById("enemyDesc").innerHTML = `Молочное печенье съесть легко,
оно пока стреляет в молоко`;
66 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Milky-Long.gif')";
67 |
68 |
69 | reload();
70 | });
71 |
72 | area.addEventListener('click', e=>{
73 | if (e.target.className == 'box') {
74 | if (e.target.innerHTML == "") {
75 | e.target.innerHTML = mark;
76 | if (check())
77 | if (mode != MODE_2P)
78 | ai();
79 | }
80 | }
81 | });
82 |
83 | function get_empty(boxes)
84 | {
85 | let empty = [];
86 | let i = 0;
87 | for (i in boxes)
88 | if (boxes[i] == "")
89 | empty.push(i);
90 | return empty;
91 | }
92 |
93 | function mark_reverse(mark)
94 | {
95 | if (mark == X_MARK)
96 | return O_MARK;
97 | return X_MARK;
98 | }
99 |
100 | function one_step_win()
101 | {
102 | let boxes, result;
103 | for (i = 0; i < 9; i++) {
104 | boxes = get_boxes();
105 | if (boxes[i] == O_MARK || boxes[i] == X_MARK)
106 | continue;
107 | boxes[i] = O_MARK;
108 | result = check_win(boxes);
109 | if (result)
110 | return i;
111 | }
112 | for (i = 0; i < 9; i++) {
113 | boxes = get_boxes();
114 | if (boxes[i] == O_MARK || boxes[i] == X_MARK)
115 | continue;
116 | boxes[i] = X_MARK;
117 | result = check_win(boxes);
118 | if (result)
119 | return i;
120 | }
121 | return -1;
122 | }
123 |
124 | function is_empty(cell)
125 | {
126 | let boxes = get_boxes();
127 | if (boxes[cell] == O_MARK || boxes[cell] == X_MARK)
128 | return 0;
129 | return 1;
130 | }
131 |
132 | function ai()
133 | {
134 | let choice, result, boxes, empty;
135 | boxes = get_boxes();
136 | empty = get_empty(boxes);
137 | const best_choices = [4, 0, 2, 6, 8, 1, 3, 5, 7];
138 | if (mode == MODE_AI) {
139 | result = one_step_win();
140 | if (result != -1) {
141 | choice = result;
142 | } else {
143 | for (i = 0; i < 5; i++) {
144 | if (is_empty(best_choices[i])) {
145 | choice = best_choices[i];
146 | break;
147 | }
148 | }
149 | }
150 | } else if (mode == MODE_NINNY) {
151 | choice = empty[Math.round(Math.random() * (empty.length - 1))];
152 | }
153 | target = document.getElementById('box' + choice);
154 | target.innerHTML = O_MARK;
155 | check();
156 | }
157 |
158 | function check_win(boxes)
159 | {
160 | const lines = [
161 | [0,1,2],
162 | [3,4,5],
163 | [6,7,8],
164 | [0,3,6],
165 | [1,4,7],
166 | [2,5,8],
167 | [0,4,8],
168 | [2,4,6]];
169 | let i = 0;
170 | for (i in lines) {
171 | if (boxes[lines[i][0]] == X_MARK &&
172 | boxes[lines[i][1]] == X_MARK &&
173 | boxes[lines[i][2]] == X_MARK) {
174 | return X_MARK;
175 | } else if (boxes[lines[i][0]] == O_MARK &&
176 | boxes[lines[i][1]] == O_MARK &&
177 | boxes[lines[i][2]] == O_MARK) {
178 | return O_MARK;
179 | }
180 | }
181 | if (get_empty(boxes).length == 0) {
182 | return 1;
183 | }
184 | return 0;
185 | }
186 |
187 | function check()
188 | {
189 | mark = mark_reverse(mark);
190 | switch (check_win(get_boxes())) {
191 | case X_MARK:
192 | result = 'Победа! Маффины';
193 | prepareResult(result);
194 | return 0;
195 | break;
196 | case O_MARK:
197 | result = 'Поражение. Печеньки';
198 | prepareResult(result);
199 | return 0;
200 | case 1:
201 | prepareResult(0);
202 | return 0;
203 | }
204 | return 1;
205 | }
206 | const prepareResult = winner => {
207 | let message = `${winner} погорели!`;
208 | if (winner == 0)
209 | message = 'Ничья! Всё уже остыло давно.';
210 | contentWrapper.innerHTML = message;
211 | modalResult.style.display = 'block';
212 | }
213 |
214 | const closeModal = () => {
215 | modalResult.style.display = 'none';
216 | reload();
217 | }
218 |
219 | overlay.addEventListener('click', closeModal);
220 | btnClose.addEventListener('click', closeModal);
221 |
222 |
223 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const area = document.getElementById('area');
2 | const btn_change1 = document.getElementById('btn-change1');
3 | const btn_change2 = document.getElementById('btn-change2');
4 | const btn_change3 = document.getElementById('btn-change3');
5 |
6 |
7 | const lang_switch_eng = document.getElementById('lang-switch-eng');
8 | const lang_switch_ch = document.getElementById('lang-switch-ch');
9 | const lang_switch_ru = document.getElementById('lang-switch-ru');
10 |
11 |
12 | const MODE_2P = '2 Players';
13 | const MODE_AI = 'AI';
14 | const MODE_NINNY = 'Ninny';
15 |
16 | const X_MARK = '
';
17 | const O_MARK = '
';
18 |
19 | let mark = X_MARK;
20 | let mode = MODE_AI;
21 |
22 | let result = '';
23 | const contentWrapper = document.getElementById('content');
24 | const modalResult = document.getElementById('modal-result-wrapper');
25 | const overlay = document.getElementById('overlay');
26 | const btnClose = document.getElementById('btn-close');
27 |
28 | function get_boxes()
29 | {
30 | let boxes = [9];
31 | let i = 0;
32 | for (i = 0; i < 9; i++) {
33 | boxes[i] = document.getElementById('box' + i).innerHTML;
34 | }
35 | return boxes;
36 | }
37 |
38 | function reload()
39 | {
40 | mark = X_MARK;
41 | for (i = 0; i < 9; i++)
42 | document.getElementById('box' + i).innerHTML = '';
43 | }
44 |
45 |
46 |
47 | btn_change1.addEventListener('click', e=>{
48 | mode = MODE_AI;
49 | document.getElementById("enemyName").innerHTML = "Da Rough Muffin";
50 | document.getElementById("enemyDesc").innerHTML = `The roughest Muffin in da
51 | world is comming for ya!`;
52 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Muffin-Boss-Long.gif')";
53 | reload();
54 | });
55 | btn_change2.addEventListener('click', e=>{
56 | mode = MODE_2P;
57 | document.getElementById("enemyName").innerHTML = "Multiplayer";
58 | document.getElementById("enemyDesc").innerHTML = `Challenge your friend or foe in
a relentless gingerbread battle!`;
59 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Multi-Long.gif')";
60 |
61 | reload();
62 | });
63 | btn_change3.addEventListener('click', e=>{
64 | mode = MODE_NINNY;
65 | document.getElementById("enemyName").innerHTML = "Milky";
66 | document.getElementById("enemyDesc").innerHTML = `Our rookie-cookie is a newbie
but you can't milk it!`;
67 | document.getElementById("enemyImg").style.backgroundImage = "url('../img/Milky-Long.gif')";
68 |
69 | //style.backgroundImage
70 | reload();
71 | });
72 |
73 | area.addEventListener('click', e=>{
74 | if (e.target.className == 'box') {
75 | if (e.target.innerHTML == "") {
76 | e.target.innerHTML = mark;
77 | if (check())
78 | if (mode != MODE_2P)
79 | ai();
80 | }
81 | }
82 | });
83 |
84 | function get_empty(boxes)
85 | {
86 | let empty = [];
87 | let i = 0;
88 | for (i in boxes)
89 | if (boxes[i] == "")
90 | empty.push(i);
91 | return empty;
92 | }
93 |
94 | function mark_reverse(mark)
95 | {
96 | if (mark == X_MARK)
97 | return O_MARK;
98 | return X_MARK;
99 | }
100 |
101 | function one_step_win()
102 | {
103 | let boxes, result;
104 | for (i = 0; i < 9; i++) {
105 | boxes = get_boxes();
106 | if (boxes[i] == O_MARK || boxes[i] == X_MARK)
107 | continue;
108 | boxes[i] = O_MARK;
109 | result = check_win(boxes);
110 | if (result)
111 | return i;
112 | }
113 | for (i = 0; i < 9; i++) {
114 | boxes = get_boxes();
115 | if (boxes[i] == O_MARK || boxes[i] == X_MARK)
116 | continue;
117 | boxes[i] = X_MARK;
118 | result = check_win(boxes);
119 | if (result)
120 | return i;
121 | }
122 | return -1;
123 | }
124 |
125 | function is_empty(cell)
126 | {
127 | let boxes = get_boxes();
128 | if (boxes[cell] == O_MARK || boxes[cell] == X_MARK)
129 | return 0;
130 | return 1;
131 | }
132 |
133 | function ai()
134 | {
135 | let choice, result, boxes, empty;
136 | boxes = get_boxes();
137 | empty = get_empty(boxes);
138 | const best_choices = [4, 0, 2, 6, 8, 1, 3, 5, 7];
139 | if (mode == MODE_AI) {
140 | result = one_step_win();
141 | if (result != -1) {
142 | choice = result;
143 | } else {
144 | for (i = 0; i < 5; i++) {
145 | if (is_empty(best_choices[i])) {
146 | choice = best_choices[i];
147 | break;
148 | }
149 | }
150 | }
151 | } else if (mode == MODE_NINNY) {
152 | choice = empty[Math.round(Math.random() * (empty.length - 1))];
153 | }
154 | target = document.getElementById('box' + choice);
155 | target.innerHTML = O_MARK;
156 | check();
157 | }
158 |
159 | function check_win(boxes)
160 | {
161 | const lines = [
162 | [0,1,2],
163 | [3,4,5],
164 | [6,7,8],
165 | [0,3,6],
166 | [1,4,7],
167 | [2,5,8],
168 | [0,4,8],
169 | [2,4,6]];
170 | let i = 0;
171 | for (i in lines) {
172 | if (boxes[lines[i][0]] == X_MARK &&
173 | boxes[lines[i][1]] == X_MARK &&
174 | boxes[lines[i][2]] == X_MARK) {
175 | return X_MARK;
176 | } else if (boxes[lines[i][0]] == O_MARK &&
177 | boxes[lines[i][1]] == O_MARK &&
178 | boxes[lines[i][2]] == O_MARK) {
179 | return O_MARK;
180 | }
181 | }
182 | if (get_empty(boxes).length == 0) {
183 | return 1;
184 | }
185 | return 0;
186 | }
187 |
188 | function check()
189 | {
190 | mark = mark_reverse(mark);
191 | switch (check_win(get_boxes())) {
192 | case X_MARK:
193 | result = 'Victory! Biscuits';
194 | prepareResult(result);
195 | return 0;
196 | break;
197 | case O_MARK:
198 | result = 'Defeat. Cookies';
199 | prepareResult(result);
200 | return 0;
201 | case 1:
202 | prepareResult(0);
203 | return 0;
204 | }
205 | return 1;
206 | }
207 | const prepareResult = winner => {
208 | let message = `${winner} are burnt!`;
209 | if (winner == 0)
210 | message = `Dead heat! It's gone cold.`;
211 | contentWrapper.innerHTML = message;
212 | modalResult.style.display = 'block';
213 | }
214 |
215 | const closeModal = () => {
216 | modalResult.style.display = 'none';
217 | reload();
218 | }
219 |
220 | overlay.addEventListener('click', closeModal);
221 | btnClose.addEventListener('click', closeModal);
222 |
223 |
224 |
--------------------------------------------------------------------------------
/css/style_front.scss:
--------------------------------------------------------------------------------
1 | @import "./scss/buttons.scss";
2 | @import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
3 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap');
4 |
5 | @font-face {
6 | font-family: Pufony;
7 | src: url(../files/Pufony-1.otf);
8 | }
9 |
10 |
11 |
12 |
13 | *{
14 | margin: 0;
15 | padding: 0;
16 | box-sizing: border-box;
17 | user-select: none;
18 | }
19 |
20 | html{
21 | font-size: 1.5vh;
22 | font-family: 'Press Start 2P', cursive;
23 | background-color: bisque;
24 | }
25 |
26 | .ch_lng{
27 | font-family: 'Noto Sans SC', sans-serif;
28 | }
29 |
30 | .ch_size1{
31 | font-size: 2vh;
32 | }
33 |
34 |
35 | body{
36 | min-width: 41vw;
37 | width: 100%;
38 | margin: 0 auto;
39 | display: flex;
40 | flex-direction: column;
41 | overflow-x: hidden;
42 | }
43 |
44 | header,
45 | footer{
46 | width: inherit;
47 | min-width: inherit;
48 | overflow-x: hidden;
49 |
50 | background-color: #E0B179;
51 |
52 |
53 | nav{
54 | margin: 0 auto;
55 | display: flex;
56 | justify-content: center;
57 | align-items: center;
58 | text-align: center;
59 |
60 |
61 | }
62 |
63 | h1{
64 | font-size: 4.3vh;
65 | letter-spacing: 0.5vh;
66 | }
67 | }
68 |
69 | header{
70 | top: 0;
71 | }
72 |
73 | footer{
74 | bottom: 0;
75 | display: flex;
76 | flex-direction: column;
77 | align-items: center;
78 | padding: 2.2vh;
79 | justify-content: space-between;
80 |
81 | .autor{
82 | display: flex;
83 | padding: 2.2vh 0vh 0vh 0vh;
84 | font-size: 2.7vh;
85 | color: black;
86 | text-decoration: none;
87 | font-family: Pufony;
88 |
89 | b{
90 | text-align: center;
91 | }
92 | }
93 |
94 | .autor:hover{
95 | font-size: 3vh;
96 | transition: all 0.4s ease;
97 | }
98 |
99 | .lang-buttons{
100 | display: flex;
101 | flex-direction: row;
102 | justify-content: center;
103 | align-items: center;
104 | }
105 |
106 |
107 |
108 | .eng-btn,
109 | .ch-btn,
110 | .ru-btn{
111 | color: #000000;
112 | text-decoration: none;
113 | padding: 1vh;
114 | background-color: #ffe4c4;
115 | border-radius: 10%;
116 | border-color: #000000;
117 | border: 2px solid black;
118 | box-shadow: 0px 1px 2px rgba($color: #000000, $alpha: 1.0);
119 | margin-left: 0.5vw;
120 | margin-right: 0.5vw;
121 |
122 | }
123 |
124 |
125 |
126 |
127 | .ch-btn{
128 | font-family: 'Noto Sans SC', sans-serif;
129 | }
130 |
131 | .eng-btn:hover,
132 | .ch-btn:hover,
133 | .ru-btn:hover{
134 | background-color: #E0B179;
135 | }
136 |
137 | .eng-btn:active,
138 | .ch-btn:active,
139 | .ru-btn:active{
140 | background-color: #A87B45;
141 | }
142 | }
143 |
144 | main{
145 | flex-grow: 1;
146 | padding: 2.1vh;
147 | min-height: 76vh;
148 |
149 |
150 | .main-header{
151 | max-width: 39vw;
152 | margin: auto;
153 | justify-content: center;
154 | align-items: center;
155 |
156 | .notice{
157 | display: flex;
158 | justify-content: center;
159 | text-align: center;
160 | margin-top: 4.3vh;
161 |
162 | }
163 |
164 | @media (min-width:320px) and (max-width:850px){
165 | .notice{
166 |
167 | margin-top: 2.3vh;
168 | margin-bottom: 2vh;
169 | }
170 | }
171 | }
172 |
173 |
174 | .welcome_text{
175 | display: flex;
176 | flex-direction: column;
177 | text-align: center;
178 | padding: 2.1vh;
179 | border: #000000 2px solid;
180 | border-radius: 2%;
181 | box-shadow: 0px 1px 3px rgba($color: #000000, $alpha: 1.0);
182 | line-height: 4.2vh;
183 |
184 |
185 | }
186 |
187 |
188 | @media (min-width: 619px) and (max-width: 640px){
189 |
190 | .welcome_text{
191 | padding: 1.5vh;
192 |
193 | }
194 |
195 | }
196 |
197 |
198 |
199 |
200 | @media (min-width: 510px) and (max-width: 540px){
201 |
202 | .welcome_text{
203 | padding: 1vh;
204 |
205 | }
206 |
207 | }
208 |
209 | @media (min-width: 360px) and (max-width: 509px){
210 |
211 | .welcome_text{
212 |
213 | padding: 1vh;
214 | line-height: 3.2vh;
215 | font-size: 0.7rem;
216 |
217 | }
218 |
219 | }
220 |
221 | @media (min-width: 320px) and (max-width: 359px){
222 |
223 | .welcome_text{
224 |
225 | padding: 1vh;
226 | line-height: 2.2vh;
227 | font-size: 0.6rem;
228 |
229 | }
230 |
231 | }
232 |
233 | .the_start_button{
234 | display: flex;
235 | flex-direction: column;
236 | align-items: center;
237 | justify-content: center;
238 | max-height: 22vh;
239 | line-height: 2.2vh;
240 |
241 | .start_btn{
242 | text-align: center;
243 | padding: 3.2vh 2.1vh;
244 | margin-top: 5.3vh;
245 | background-color: #E0B179;
246 | border: #000000 2px solid;
247 | border-radius: 2%;
248 | box-shadow: 0px 1px 3px rgba($color: #000000, $alpha: 1.0);
249 | text-decoration: none;
250 | color: black;
251 | font-size: 1.7vh;
252 | text-transform: uppercase;
253 |
254 | }
255 |
256 | .start_btn__ch{
257 | font-size: 2vh;
258 | }
259 |
260 |
261 | .start_btn:hover{
262 | font-size: 1.8vh;
263 | transition: all 0.4s ease;
264 | }
265 |
266 | .start_btn__ch:hover{
267 | font-size: 2.1vh;
268 | }
269 |
270 | .start_btn:active{
271 | background-color: #765C3D;
272 | }
273 |
274 | @media (min-width: 320px) and (max-width: 525px){
275 |
276 | .start_btn{
277 | padding: 3.2vh 2.1vh;
278 | margin-top: 5.3vh;
279 | font-size: 1.5vh;
280 | padding: 1.6vh 1.5vh;
281 |
282 | }
283 |
284 | .start_btn:hover{
285 | font-size: 1.6vh;
286 | }
287 |
288 |
289 | }
290 | }
291 |
292 |
293 |
294 | .enemies{
295 | display: flex;
296 | margin-bottom: 6%;
297 | align-items: center;
298 | justify-content: center;
299 | max-width: 39vw;
300 |
301 |
302 | .enemy_muf_gif,
303 | .enemy_mil_gif{
304 | width: 160px;
305 | height: 160px;
306 | }
307 |
308 | .enemy_mul_gif{
309 | width: 200px;
310 | height: 200px;
311 | }
312 |
313 | @media (min-width: 441px) and (max-width: 500px){
314 |
315 | .enemy_muf_gif,
316 | .enemy_mil_gif{
317 | width: 140px;
318 | height: 140px;
319 | }
320 |
321 | .enemy_mul_gif{
322 | width: 180px;
323 | height: 180px;
324 | }
325 | }
326 |
327 | @media (min-width: 385px) and (max-width: 440px){
328 |
329 | .enemy_muf_gif,
330 | .enemy_mil_gif{
331 | width: 120px;
332 | height: 120px;
333 | }
334 |
335 | .enemy_mul_gif{
336 | width: 160px;
337 | height: 160px;
338 | }
339 | }
340 |
341 |
342 | @media (min-width: 320px) and (max-width: 384px){
343 |
344 | .enemy_muf_gif,
345 | .enemy_mil_gif{
346 | width: 100px;
347 | height: 100px;
348 | }
349 |
350 | .enemy_mul_gif{
351 | width: 140px;
352 | height: 140px;
353 | }
354 | }
355 | }
356 |
357 |
358 | }
359 |
360 |
--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
1 | @import "./scss/buttons.scss";
2 | @import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
3 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap');
4 |
5 | @font-face {
6 | font-family: Pufony;
7 | src: url(../files/Pufony-1.otf);
8 | }
9 |
10 |
11 | *{
12 | margin: 0;
13 | padding: 0;
14 | box-sizing: border-box;
15 | user-select: none;
16 | }
17 |
18 | html{
19 | font-size: 1.5vh;
20 | font-family: 'Press Start 2P', cursive;
21 | background-color: bisque;
22 | }
23 |
24 | .ch_lng{
25 | font-family: 'Noto Sans SC', sans-serif;
26 | }
27 |
28 | .ch_size1{
29 | font-size: 2vh;
30 | }
31 |
32 | body{
33 | min-width: 41vw;
34 | width: 100%;
35 | margin: auto;
36 | min-height: 100vh;
37 | display: flex;
38 | flex-direction: column;
39 | overflow-x: hidden;
40 | }
41 |
42 | header,
43 | footer{
44 | width: inherit;
45 | min-width: inherit;
46 | background-color: #E0B179;
47 |
48 |
49 | nav{
50 | margin: 0 auto;
51 | display: flex;
52 | justify-content: center;
53 | align-items: center;
54 |
55 | }
56 |
57 | h1{
58 | font-size: 4.3vh;
59 | letter-spacing: 0.5vh;
60 | }
61 | }
62 |
63 | header{
64 | top: 0;
65 | }
66 |
67 | footer{
68 | bottom: 0;
69 | display: flex;
70 | flex-direction: column;
71 | align-items: center;
72 | // max-height: 133.86px;
73 | padding: 2.2vh;
74 |
75 | .autor{
76 | display: flex;
77 | padding: 2.2vh 0vh 0vh 0vh;
78 | font-size: 2.7vh;
79 | color: black;
80 | text-decoration: none;
81 | font-family: Pufony;
82 |
83 | b{
84 | text-align: center;
85 | }
86 | }
87 |
88 | .autor:hover{
89 | font-size: 3vh;
90 | transition: all 0.4s ease;
91 | }
92 |
93 | .lang-buttons{
94 | display: flex;
95 | flex-direction: row;
96 | justify-content: center;
97 | align-items: center;
98 | }
99 |
100 |
101 | .eng-btn,
102 | .ch-btn,
103 | .ru-btn{
104 | color: #000000;
105 | text-decoration: none;
106 | padding: 1vh;
107 | background-color: #ffe4c4;
108 | border-radius: 10%;
109 | border-color: #000000;
110 | border: 2px solid black;
111 | box-shadow: 0px 1px 2px rgba($color: #000000, $alpha: 1.0);
112 | margin-left: 0.5vw;
113 | margin-right: 0.5vw;
114 | }
115 |
116 | .ch-btn{
117 | font-family: 'Noto Sans SC', sans-serif;
118 | }
119 |
120 | .eng-btn:hover,
121 | .ch-btn:hover,
122 | .ru-btn:hover{
123 | background-color: #E0B179;
124 | }
125 |
126 | .eng-btn:active,
127 | .ch-btn:active,
128 | .ru-btn:active{
129 | background-color: #A87B45;
130 | }
131 | }
132 |
133 | main{
134 | flex-grow: 1;
135 | padding: 2.1vh;
136 | min-height: 76vh;
137 |
138 |
139 | .main-header{
140 | max-width: 39vw;
141 | margin: auto;
142 | justify-content: center;
143 | background-color: #ffe4c4;
144 | background-image: url(../img/BB-Background.png);
145 | background-repeat: no-repeat;
146 | }
147 |
148 | .enemies{
149 | display: flex;
150 | margin-bottom: 6%;
151 | align-items: center;
152 | justify-content: center;
153 |
154 |
155 | .enemy{
156 | background-image: url(../img/Muffin-Boss-Long.gif);
157 | background-repeat: no-repeat;
158 | background-size: contain;
159 | width: 180px;
160 | height: 180px;
161 |
162 | }
163 | .enemy-text{
164 | margin-left: 3.2vh;
165 | text-align: center;
166 |
167 | h2{
168 | margin-bottom: 1vh;
169 | }
170 | p{
171 | line-height: 2.7vh;
172 | }
173 | }
174 | }
175 |
176 | .area-wrapper{
177 | width: 100%;
178 | height: 100%;
179 | display: flex;
180 | justify-content: center;
181 | align-items: center;
182 | margin-bottom: 6%;
183 |
184 | #area{
185 | width: 32vh;
186 | height: 32vh;
187 | display: flex;
188 | flex-wrap: wrap;
189 |
190 | .box{
191 | width: 10.6vh;
192 | height: 10.6vh;
193 | background-color: blanchedalmond;
194 | border: 2px solid black;
195 | box-sizing: border-box;
196 | font-size: 3.6vh;
197 | color: black;
198 | display: flex;
199 | justify-content: center;
200 | align-items: center;
201 | font-weight: bold;
202 | cursor: pointer;
203 | transition: all 0.4s ease;
204 | border-radius: 5%;
205 | border-color: #42231e;
206 | border-width: 3px;
207 | box-shadow: 0px 1px 5px rgba($color: #000000, $alpha: 1.0);
208 |
209 |
210 |
211 | }
212 |
213 | .box:hover{
214 | background-color: #E0B179;
215 | }
216 |
217 | .box:active{
218 | background-color: #765C3D;
219 | }
220 | }
221 |
222 | @media (min-width: 641px) and (max-width: 707px){
223 | #area{
224 | width: 29vh;
225 | height: 29vh;
226 | .box{
227 | width: 9.6vh;
228 | height: 9.6vh;
229 | }
230 | }
231 | }
232 |
233 | @media (min-width: 574px) and (max-width: 640px){
234 | #area{
235 | width: 26vh;
236 | height: 26vh;
237 | .box{
238 | width: 8.6vh;
239 | height: 8.6vh;
240 | }
241 | }
242 | }
243 |
244 | @media (min-width: 507px) and (max-width: 573px){
245 | #area{
246 | width: 23vh;
247 | height: 23vh;
248 | .box{
249 | width: 7.6vh;
250 | height: 7.6vh;
251 | font-size: 2.6vh;
252 | }
253 | }
254 | }
255 |
256 | @media (min-width: 441px) and (max-width: 508px){
257 | #area{
258 | width: 20vh;
259 | height: 20vh;
260 | .box{
261 | width: 6.6vh;
262 | height: 6.6vh;
263 | }
264 | }
265 | }
266 |
267 | @media (min-width: 374px) and (max-width: 440px){
268 | #area{
269 | width: 17vh;
270 | height: 17vh;
271 | .box{
272 | width: 5.6vh;
273 | height: 5.6vh;
274 | }
275 | }
276 | }
277 |
278 | @media (min-width: 320px) and (max-width: 375px){
279 | #area{
280 | width: 14vh;
281 | height: 14vh;
282 | .box{
283 | width: 4.6vh;
284 | height: 4.6vh;
285 | }
286 | }
287 | }
288 | }
289 |
290 |
291 | }
292 |
293 | .thebuttons{
294 | width: 100%;
295 | height: 100%;
296 | display: flex;
297 | justify-content: center;
298 | align-items: center;
299 | max-width: 31.25vw;
300 | margin-left: 40vh;
301 | margin-top: 11.2vh;
302 | }
303 |
304 | #modal-result-wrapper{
305 | width: 100%;
306 | height: 100%;
307 | position: fixed;
308 | top: 0;
309 | left: 0;
310 | display: none;
311 |
312 | #overlay{
313 | width: 100%;
314 | height: 100%;
315 | top: 0;
316 | left: 0;
317 | background-color: rgba(0,0,0,0.8);
318 |
319 |
320 | #modal-window{
321 | width: 300px;
322 | height: 180px;
323 | border: 3px solid black;
324 | background-color: bisque;
325 | position: absolute;
326 | top: 50%;
327 | left: 50%;
328 | transform: translate(-50%, -50%);
329 | display: flex;
330 | flex-flow: column;
331 | justify-content: space-between;
332 | align-items: center;
333 | font-size: 30px;
334 | box-shadow: 0px 1px 5px rgba($color: #000000, $alpha: 1.0);
335 |
336 |
337 |
338 | #content{
339 | justify-content: center;
340 | align-items: center;
341 | text-align: center;
342 | width: 300px;
343 | height: 70px;
344 | padding: 1rem;
345 | font-size: 20px;
346 | line-height: 25px;
347 |
348 | }
349 |
350 | #btn-close{
351 | width: 300px;
352 | height: 80px;
353 | background-color: #A87B45;
354 | color: black;
355 | cursor: pointer;
356 | font-size: 30px;
357 | border: 3px solid black;
358 | padding: 1rem;
359 | font-size: 20px;
360 | justify-content: center;
361 | align-items: center;
362 | text-align: center;
363 | }
364 | }
365 | }
366 | }
--------------------------------------------------------------------------------
/css/style_front.css:
--------------------------------------------------------------------------------
1 | @import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
2 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap");
3 | ul {
4 | transform: translate(-50%, -50%);
5 | display: flex;
6 | overflow: hidden;
7 | padding: 0;
8 | background-color: bisque;
9 | }
10 | ul li {
11 | list-style: none;
12 | width: 10.4vw;
13 | border-radius: 10%;
14 | }
15 | ul li a {
16 | display: block;
17 | padding: 0.5vh;
18 | text-align: center;
19 | color: black;
20 | transition: 0.5s;
21 | text-decoration: none;
22 | font-weight: bold;
23 | font-size: 1.9vh;
24 | letter-spacing: 1px;
25 | }
26 |
27 | .slide {
28 | position: absolute;
29 | width: 10.4vw;
30 | height: 100%;
31 | top: 0;
32 | left: 0;
33 | background-color: #E0B179;
34 | z-index: -1;
35 | transition: 0.5s;
36 | opacity: 0;
37 | border-radius: 10%;
38 | }
39 |
40 | ul li.active a {
41 | color: #262626;
42 | }
43 |
44 | ul li:nth-child(1).active ~ .slide {
45 | left: 0;
46 | opacity: 1;
47 | }
48 |
49 | ul li:nth-child(2).active ~ .slide {
50 | left: 21.3vh;
51 | opacity: 1;
52 | }
53 |
54 | ul li:nth-child(3).active ~ .slide {
55 | left: 42.6vh;
56 | opacity: 1;
57 | }
58 |
59 | @font-face {
60 | font-family: Pufony;
61 | src: url(../files/Pufony-1.otf);
62 | }
63 | * {
64 | margin: 0;
65 | padding: 0;
66 | box-sizing: border-box;
67 | -webkit-user-select: none;
68 | -moz-user-select: none;
69 | -ms-user-select: none;
70 | user-select: none;
71 | }
72 |
73 | html {
74 | font-size: 1.5vh;
75 | font-family: "Press Start 2P", cursive;
76 | background-color: bisque;
77 | }
78 |
79 | .ch_lng {
80 | font-family: "Noto Sans SC", sans-serif;
81 | }
82 |
83 | .ch_size1 {
84 | font-size: 2vh;
85 | }
86 |
87 | body {
88 | min-width: 41vw;
89 | width: 100%;
90 | margin: 0 auto;
91 | display: flex;
92 | flex-direction: column;
93 | overflow-x: hidden;
94 | }
95 |
96 | header,
97 | footer {
98 | width: inherit;
99 | min-width: inherit;
100 | overflow-x: hidden;
101 | background-color: #E0B179;
102 | }
103 | header nav,
104 | footer nav {
105 | margin: 0 auto;
106 | display: flex;
107 | justify-content: center;
108 | align-items: center;
109 | text-align: center;
110 | }
111 | header h1,
112 | footer h1 {
113 | font-size: 4.3vh;
114 | letter-spacing: 0.5vh;
115 | }
116 |
117 | header {
118 | top: 0;
119 | }
120 |
121 | footer {
122 | bottom: 0;
123 | display: flex;
124 | flex-direction: column;
125 | align-items: center;
126 | padding: 2.2vh;
127 | justify-content: space-between;
128 | }
129 | footer .autor {
130 | display: flex;
131 | padding: 2.2vh 0vh 0vh 0vh;
132 | font-size: 2.7vh;
133 | color: black;
134 | text-decoration: none;
135 | font-family: Pufony;
136 | }
137 | footer .autor b {
138 | text-align: center;
139 | }
140 | footer .autor:hover {
141 | font-size: 3vh;
142 | transition: all 0.4s ease;
143 | }
144 | footer .lang-buttons {
145 | display: flex;
146 | flex-direction: row;
147 | justify-content: center;
148 | align-items: center;
149 | }
150 | footer .eng-btn,
151 | footer .ch-btn,
152 | footer .ru-btn {
153 | color: #000000;
154 | text-decoration: none;
155 | padding: 1vh;
156 | background-color: #ffe4c4;
157 | border-radius: 10%;
158 | border-color: #000000;
159 | border: 2px solid black;
160 | box-shadow: 0px 1px 2px black;
161 | margin-left: 0.5vw;
162 | margin-right: 0.5vw;
163 | }
164 | footer .ch-btn {
165 | font-family: "Noto Sans SC", sans-serif;
166 | }
167 | footer .eng-btn:hover,
168 | footer .ch-btn:hover,
169 | footer .ru-btn:hover {
170 | background-color: #E0B179;
171 | }
172 | footer .eng-btn:active,
173 | footer .ch-btn:active,
174 | footer .ru-btn:active {
175 | background-color: #A87B45;
176 | }
177 |
178 | main {
179 | flex-grow: 1;
180 | padding: 2.1vh;
181 | min-height: 76vh;
182 | }
183 | main .main-header {
184 | max-width: 39vw;
185 | margin: auto;
186 | justify-content: center;
187 | align-items: center;
188 | }
189 | main .main-header .notice {
190 | display: flex;
191 | justify-content: center;
192 | text-align: center;
193 | margin-top: 4.3vh;
194 | }
195 | @media (min-width: 320px) and (max-width: 850px) {
196 | main .main-header .notice {
197 | margin-top: 2.3vh;
198 | margin-bottom: 2vh;
199 | }
200 | }
201 | main .welcome_text {
202 | display: flex;
203 | flex-direction: column;
204 | text-align: center;
205 | padding: 2.1vh;
206 | border: #000000 2px solid;
207 | border-radius: 2%;
208 | box-shadow: 0px 1px 3px black;
209 | line-height: 4.2vh;
210 | }
211 | @media (min-width: 619px) and (max-width: 640px) {
212 | main .welcome_text {
213 | padding: 1.5vh;
214 | }
215 | }
216 | @media (min-width: 510px) and (max-width: 540px) {
217 | main .welcome_text {
218 | padding: 1vh;
219 | }
220 | }
221 | @media (min-width: 360px) and (max-width: 509px) {
222 | main .welcome_text {
223 | padding: 1vh;
224 | line-height: 3.2vh;
225 | font-size: 0.7rem;
226 | }
227 | }
228 | @media (min-width: 320px) and (max-width: 359px) {
229 | main .welcome_text {
230 | padding: 1vh;
231 | line-height: 2.2vh;
232 | font-size: 0.6rem;
233 | }
234 | }
235 | main .the_start_button {
236 | display: flex;
237 | flex-direction: column;
238 | align-items: center;
239 | justify-content: center;
240 | max-height: 22vh;
241 | line-height: 2.2vh;
242 | }
243 | main .the_start_button .start_btn {
244 | text-align: center;
245 | padding: 3.2vh 2.1vh;
246 | margin-top: 5.3vh;
247 | background-color: #E0B179;
248 | border: #000000 2px solid;
249 | border-radius: 2%;
250 | box-shadow: 0px 1px 3px black;
251 | text-decoration: none;
252 | color: black;
253 | font-size: 1.7vh;
254 | text-transform: uppercase;
255 | }
256 | main .the_start_button .start_btn__ch {
257 | font-size: 2vh;
258 | }
259 | main .the_start_button .start_btn:hover {
260 | font-size: 1.8vh;
261 | transition: all 0.4s ease;
262 | }
263 | main .the_start_button .start_btn__ch:hover {
264 | font-size: 2.1vh;
265 | }
266 | main .the_start_button .start_btn:active {
267 | background-color: #765C3D;
268 | }
269 | @media (min-width: 320px) and (max-width: 525px) {
270 | main .the_start_button .start_btn {
271 | padding: 3.2vh 2.1vh;
272 | margin-top: 5.3vh;
273 | font-size: 1.5vh;
274 | padding: 1.6vh 1.5vh;
275 | }
276 | main .the_start_button .start_btn:hover {
277 | font-size: 1.6vh;
278 | }
279 | }
280 | main .enemies {
281 | display: flex;
282 | margin-bottom: 6%;
283 | align-items: center;
284 | justify-content: center;
285 | max-width: 39vw;
286 | }
287 | main .enemies .enemy_muf_gif,
288 | main .enemies .enemy_mil_gif {
289 | width: 160px;
290 | height: 160px;
291 | }
292 | main .enemies .enemy_mul_gif {
293 | width: 200px;
294 | height: 200px;
295 | }
296 | @media (min-width: 441px) and (max-width: 500px) {
297 | main .enemies .enemy_muf_gif,
298 | main .enemies .enemy_mil_gif {
299 | width: 140px;
300 | height: 140px;
301 | }
302 | main .enemies .enemy_mul_gif {
303 | width: 180px;
304 | height: 180px;
305 | }
306 | }
307 | @media (min-width: 385px) and (max-width: 440px) {
308 | main .enemies .enemy_muf_gif,
309 | main .enemies .enemy_mil_gif {
310 | width: 120px;
311 | height: 120px;
312 | }
313 | main .enemies .enemy_mul_gif {
314 | width: 160px;
315 | height: 160px;
316 | }
317 | }
318 | @media (min-width: 320px) and (max-width: 384px) {
319 | main .enemies .enemy_muf_gif,
320 | main .enemies .enemy_mil_gif {
321 | width: 100px;
322 | height: 100px;
323 | }
324 | main .enemies .enemy_mul_gif {
325 | width: 140px;
326 | height: 140px;
327 | }
328 | }/*# sourceMappingURL=style_front.css.map */
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
2 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap");
3 | ul {
4 | transform: translate(-50%, -50%);
5 | display: flex;
6 | overflow: hidden;
7 | padding: 0;
8 | background-color: bisque;
9 | }
10 | ul li {
11 | list-style: none;
12 | width: 10.4vw;
13 | border-radius: 10%;
14 | }
15 | ul li a {
16 | display: block;
17 | padding: 0.5vh;
18 | text-align: center;
19 | color: black;
20 | transition: 0.5s;
21 | text-decoration: none;
22 | font-weight: bold;
23 | font-size: 1.9vh;
24 | letter-spacing: 1px;
25 | }
26 |
27 | .slide {
28 | position: absolute;
29 | width: 10.4vw;
30 | height: 100%;
31 | top: 0;
32 | left: 0;
33 | background-color: #E0B179;
34 | z-index: -1;
35 | transition: 0.5s;
36 | opacity: 0;
37 | border-radius: 10%;
38 | }
39 |
40 | ul li.active a {
41 | color: #262626;
42 | }
43 |
44 | ul li:nth-child(1).active ~ .slide {
45 | left: 0;
46 | opacity: 1;
47 | }
48 |
49 | ul li:nth-child(2).active ~ .slide {
50 | left: 21.3vh;
51 | opacity: 1;
52 | }
53 |
54 | ul li:nth-child(3).active ~ .slide {
55 | left: 42.6vh;
56 | opacity: 1;
57 | }
58 |
59 | @font-face {
60 | font-family: Pufony;
61 | src: url(../files/Pufony-1.otf);
62 | }
63 | * {
64 | margin: 0;
65 | padding: 0;
66 | box-sizing: border-box;
67 | -webkit-user-select: none;
68 | -moz-user-select: none;
69 | -ms-user-select: none;
70 | user-select: none;
71 | }
72 |
73 | html {
74 | font-size: 1.5vh;
75 | font-family: "Press Start 2P", cursive;
76 | background-color: bisque;
77 | }
78 |
79 | .ch_lng {
80 | font-family: "Noto Sans SC", sans-serif;
81 | }
82 |
83 | .ch_size1 {
84 | font-size: 2vh;
85 | }
86 |
87 | body {
88 | min-width: 41vw;
89 | width: 100%;
90 | margin: auto;
91 | min-height: 100vh;
92 | display: flex;
93 | flex-direction: column;
94 | overflow-x: hidden;
95 | }
96 |
97 | header,
98 | footer {
99 | width: inherit;
100 | min-width: inherit;
101 | background-color: #E0B179;
102 | }
103 | header nav,
104 | footer nav {
105 | margin: 0 auto;
106 | display: flex;
107 | justify-content: center;
108 | align-items: center;
109 | }
110 | header h1,
111 | footer h1 {
112 | font-size: 4.3vh;
113 | letter-spacing: 0.5vh;
114 | }
115 |
116 | header {
117 | top: 0;
118 | }
119 |
120 | footer {
121 | bottom: 0;
122 | display: flex;
123 | flex-direction: column;
124 | align-items: center;
125 | padding: 2.2vh;
126 | }
127 | footer .autor {
128 | display: flex;
129 | padding: 2.2vh 0vh 0vh 0vh;
130 | font-size: 2.7vh;
131 | color: black;
132 | text-decoration: none;
133 | font-family: Pufony;
134 | }
135 | footer .autor b {
136 | text-align: center;
137 | }
138 | footer .autor:hover {
139 | font-size: 3vh;
140 | transition: all 0.4s ease;
141 | }
142 | footer .lang-buttons {
143 | display: flex;
144 | flex-direction: row;
145 | justify-content: center;
146 | align-items: center;
147 | }
148 | footer .eng-btn,
149 | footer .ch-btn,
150 | footer .ru-btn {
151 | color: #000000;
152 | text-decoration: none;
153 | padding: 1vh;
154 | background-color: #ffe4c4;
155 | border-radius: 10%;
156 | border-color: #000000;
157 | border: 2px solid black;
158 | box-shadow: 0px 1px 2px black;
159 | margin-left: 0.5vw;
160 | margin-right: 0.5vw;
161 | }
162 | footer .ch-btn {
163 | font-family: "Noto Sans SC", sans-serif;
164 | }
165 | footer .eng-btn:hover,
166 | footer .ch-btn:hover,
167 | footer .ru-btn:hover {
168 | background-color: #E0B179;
169 | }
170 | footer .eng-btn:active,
171 | footer .ch-btn:active,
172 | footer .ru-btn:active {
173 | background-color: #A87B45;
174 | }
175 |
176 | main {
177 | flex-grow: 1;
178 | padding: 2.1vh;
179 | min-height: 76vh;
180 | }
181 | main .main-header {
182 | max-width: 39vw;
183 | margin: auto;
184 | justify-content: center;
185 | background-color: #ffe4c4;
186 | background-image: url(../img/BB-Background.png);
187 | background-repeat: no-repeat;
188 | }
189 | main .enemies {
190 | display: flex;
191 | margin-bottom: 6%;
192 | align-items: center;
193 | justify-content: center;
194 | }
195 | main .enemies .enemy {
196 | background-image: url(../img/Muffin-Boss-Long.gif);
197 | background-repeat: no-repeat;
198 | background-size: contain;
199 | width: 180px;
200 | height: 180px;
201 | }
202 | main .enemies .enemy-text {
203 | margin-left: 3.2vh;
204 | text-align: center;
205 | }
206 | main .enemies .enemy-text h2 {
207 | margin-bottom: 1vh;
208 | }
209 | main .enemies .enemy-text p {
210 | line-height: 2.7vh;
211 | }
212 | main .area-wrapper {
213 | width: 100%;
214 | height: 100%;
215 | display: flex;
216 | justify-content: center;
217 | align-items: center;
218 | margin-bottom: 6%;
219 | }
220 | main .area-wrapper #area {
221 | width: 32vh;
222 | height: 32vh;
223 | display: flex;
224 | flex-wrap: wrap;
225 | }
226 | main .area-wrapper #area .box {
227 | width: 10.6vh;
228 | height: 10.6vh;
229 | background-color: blanchedalmond;
230 | border: 2px solid black;
231 | box-sizing: border-box;
232 | font-size: 3.6vh;
233 | color: black;
234 | display: flex;
235 | justify-content: center;
236 | align-items: center;
237 | font-weight: bold;
238 | cursor: pointer;
239 | transition: all 0.4s ease;
240 | border-radius: 5%;
241 | border-color: #42231e;
242 | border-width: 3px;
243 | box-shadow: 0px 1px 5px black;
244 | }
245 | main .area-wrapper #area .box:hover {
246 | background-color: #E0B179;
247 | }
248 | main .area-wrapper #area .box:active {
249 | background-color: #765C3D;
250 | }
251 | @media (min-width: 641px) and (max-width: 707px) {
252 | main .area-wrapper #area {
253 | width: 29vh;
254 | height: 29vh;
255 | }
256 | main .area-wrapper #area .box {
257 | width: 9.6vh;
258 | height: 9.6vh;
259 | }
260 | }
261 | @media (min-width: 574px) and (max-width: 640px) {
262 | main .area-wrapper #area {
263 | width: 26vh;
264 | height: 26vh;
265 | }
266 | main .area-wrapper #area .box {
267 | width: 8.6vh;
268 | height: 8.6vh;
269 | }
270 | }
271 | @media (min-width: 507px) and (max-width: 573px) {
272 | main .area-wrapper #area {
273 | width: 23vh;
274 | height: 23vh;
275 | }
276 | main .area-wrapper #area .box {
277 | width: 7.6vh;
278 | height: 7.6vh;
279 | font-size: 2.6vh;
280 | }
281 | }
282 | @media (min-width: 441px) and (max-width: 508px) {
283 | main .area-wrapper #area {
284 | width: 20vh;
285 | height: 20vh;
286 | }
287 | main .area-wrapper #area .box {
288 | width: 6.6vh;
289 | height: 6.6vh;
290 | }
291 | }
292 | @media (min-width: 374px) and (max-width: 440px) {
293 | main .area-wrapper #area {
294 | width: 17vh;
295 | height: 17vh;
296 | }
297 | main .area-wrapper #area .box {
298 | width: 5.6vh;
299 | height: 5.6vh;
300 | }
301 | }
302 | @media (min-width: 320px) and (max-width: 375px) {
303 | main .area-wrapper #area {
304 | width: 14vh;
305 | height: 14vh;
306 | }
307 | main .area-wrapper #area .box {
308 | width: 4.6vh;
309 | height: 4.6vh;
310 | }
311 | }
312 |
313 | .thebuttons {
314 | width: 100%;
315 | height: 100%;
316 | display: flex;
317 | justify-content: center;
318 | align-items: center;
319 | max-width: 31.25vw;
320 | margin-left: 40vh;
321 | margin-top: 11.2vh;
322 | }
323 |
324 | #modal-result-wrapper {
325 | width: 100%;
326 | height: 100%;
327 | position: fixed;
328 | top: 0;
329 | left: 0;
330 | display: none;
331 | }
332 | #modal-result-wrapper #overlay {
333 | width: 100%;
334 | height: 100%;
335 | top: 0;
336 | left: 0;
337 | background-color: rgba(0, 0, 0, 0.8);
338 | }
339 | #modal-result-wrapper #overlay #modal-window {
340 | width: 300px;
341 | height: 180px;
342 | border: 3px solid black;
343 | background-color: bisque;
344 | position: absolute;
345 | top: 50%;
346 | left: 50%;
347 | transform: translate(-50%, -50%);
348 | display: flex;
349 | flex-flow: column;
350 | justify-content: space-between;
351 | align-items: center;
352 | font-size: 30px;
353 | box-shadow: 0px 1px 5px black;
354 | }
355 | #modal-result-wrapper #overlay #modal-window #content {
356 | justify-content: center;
357 | align-items: center;
358 | text-align: center;
359 | width: 300px;
360 | height: 70px;
361 | padding: 1rem;
362 | font-size: 20px;
363 | line-height: 25px;
364 | }
365 | #modal-result-wrapper #overlay #modal-window #btn-close {
366 | width: 300px;
367 | height: 80px;
368 | background-color: #A87B45;
369 | color: black;
370 | cursor: pointer;
371 | font-size: 30px;
372 | border: 3px solid black;
373 | padding: 1rem;
374 | font-size: 20px;
375 | justify-content: center;
376 | align-items: center;
377 | text-align: center;
378 | }/*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------