├── .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 |
19 | 22 |
23 |
24 |
25 |
26 | 27 | Da Muffin 28 | 29 | 30 | Multi 31 | 32 | 33 | Milky 34 | 35 |
36 | 37 |
38 |

欢迎, 伟大面包师傅

39 |

规则很简单:

40 |

你最好烤饼干否则你被饼干烤

41 |

这是井字游戏一样,不过更美味

42 |
43 |
44 | 开始游戏,别事儿 45 |
46 |

不要相信马芬!

47 |
48 |
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 | Da Muffin 28 | 29 | 30 | Multi 31 | 32 | 33 | Milky 34 | 35 |
36 | 37 |
38 |

Приветствую, о Могучий Пекарь!

39 |

Правила очень просты:

40 |

Подгорят либо враги, либо у тебя.

41 |

Это как крестики-нолики, только пышнее!

42 |
43 |
44 | Кроши врагов, а не батон 45 |
46 |

Маффины - не кексы, нет им доверия!

47 |
48 |
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 | Da Muffin 28 | 29 | 30 | Multi 31 | 32 | 33 | Milky 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 |
45 | Start the game not troubles 46 | 47 |
48 |

And don't trust the Muffs!

49 |
50 | 51 |
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 |
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 | 55 |
56 |
57 |
58 | 59 | 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 |
50 | 56 |
57 |
58 |
59 | 60 | 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 |
50 | 56 |
57 |
58 |
59 | 60 | 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 */ --------------------------------------------------------------------------------