Merge pull request #1 from W0x3R/dev-page

Dev page
W0x3R · Jan 14, 2024 · bcbf17f · bcbf17f
2 parents dd47057 + 40bb4a2
commit bcbf17f
Show file tree

Hide file tree

Showing 22 changed files with 776 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+prepros.config
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# Naughts-and-crosses
+# Naughts-and-crosses
+
+# w0x3r.github.io/Naughts-and-crosses/
diff --git a/css/style.css b/css/style.css
diff --git a/images/1.jpg b/images/1.jpg
diff --git a/images/fav-icons/android-chrome-192x192.png b/images/fav-icons/android-chrome-192x192.png
diff --git a/images/fav-icons/android-chrome-512x512.png b/images/fav-icons/android-chrome-512x512.png
diff --git a/images/fav-icons/apple-touch-icon.png b/images/fav-icons/apple-touch-icon.png
diff --git a/images/fav-icons/browserconfig.xml b/images/fav-icons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="./images/favicon/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/images/fav-icons/favicon-16x16.png b/images/fav-icons/favicon-16x16.png
diff --git a/images/fav-icons/favicon-32x32.png b/images/fav-icons/favicon-32x32.png
diff --git a/images/fav-icons/favicon.ico b/images/fav-icons/favicon.ico
diff --git a/images/fav-icons/mstile-150x150.png b/images/fav-icons/mstile-150x150.png
diff --git a/images/fav-icons/safari-pinned-tab.svg b/images/fav-icons/safari-pinned-tab.svg
diff --git a/images/fav-icons/site.webmanifest b/images/fav-icons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "Naughts and crosses",
+    "short_name": "Naughts and crosses",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Naughts and crosses</title>
+	<link rel="apple-touch-icon" sizes="180x180" href="./images/fav-icons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="./images/fav-icons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="./images/fav-icons/favicon-16x16.png">
+	<link rel="manifest" href="./images/fav-icons/site.webmanifest">
+	<link rel="mask-icon" href="./images/fav-icons/safari-pinned-tab.svg" color="#000000">
+	<link rel="shortcut icon" href="./images/fav-icons/favicon.ico">
+	<meta name="msapplication-TileColor" content="#ffffff">
+	<meta name="msapplication-config" content="./images/favicon/browserconfig.xml">
+	<meta name="theme-color" content="#ffffff">
+	<link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+	<div class="container">
+		<main class="main">
+			<div class="main__res"></div>
+			<div class="main__square">
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+				<div class="main__square-item"></div>
+			</div>
+			<button class="main__button">NEW GAME</button>
+		</main>
+		<div class="footer">
+			<h1 class="footer__title"><a href="https://github.com/W0x3R" target="_blank">Naughts
+					and
+					crosses</a></h1>
+		</div>
+	</div>
+	<script src="./js/index.js"></script>
+</body>
+
+</html>
diff --git a/js/index.js b/js/index.js
diff --git a/src/images/1.jpg b/src/images/1.jpg
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1,82 @@
+const square = document.querySelector('.main__square');
+const squareElements = document.querySelectorAll('.main__square-item')
+const res = document.querySelector('.main__res')
+const newGameButton = document.querySelector('.main__button')
+
+let count = 0;
+
+function cross(target) {
+	if (count % 2 === 0 && target.textContent === '') {
+		target.textContent = '◯'
+		target.classList.add('o')
+		count++
+	}
+}
+
+function zero(target) {
+	if (count % 2 !== 0 && target.textContent === '') {
+		target.textContent = '✕'
+		target.classList.add('x')
+		count++
+	}
+}
+
+function init(e) {
+	cross(e.target)
+	zero(e.target)
+	showWin()
+}
+
+square.addEventListener('click', init)
+
+function showWin() {
+	let comboOfWin = [
+		[0, 1, 2],
+		[3, 4, 5],
+		[6, 7, 8],
+		[0, 3, 6],
+		[1, 4, 7],
+		[2, 5, 8],
+		[0, 4, 8],
+		[2, 4, 6],
+	]
+
+	for (let i = 0; i < comboOfWin.length; i++) {
+		if (squareElements[comboOfWin[i][0]].classList.contains('x') && squareElements[comboOfWin[i][1]].classList.contains('x') && squareElements[comboOfWin[i][2]].classList.contains('x')) {
+			square.removeEventListener('click', init)
+			setTimeout(() => {
+				squareElements[comboOfWin[i][0]].classList.add('main__square-item_win')
+				squareElements[comboOfWin[i][1]].classList.add('main__square-item_win')
+				squareElements[comboOfWin[i][2]].classList.add('main__square-item_win')
+				res.textContent = 'X WIN'
+			}, 250)
+		}
+		else if (squareElements[comboOfWin[i][0]].classList.contains('o') && squareElements[comboOfWin[i][1]].classList.contains('o') && squareElements[comboOfWin[i][2]].classList.contains('o')) {
+			square.removeEventListener('click', init)
+			setTimeout(() => {
+				squareElements[comboOfWin[i][0]].classList.add('main__square-item_win')
+				squareElements[comboOfWin[i][1]].classList.add('main__square-item_win')
+				squareElements[comboOfWin[i][2]].classList.add('main__square-item_win')
+				res.textContent = '0 WIN'
+			}, 250)
+
+		}
+		else if (count === 9) {
+			res.textContent = 'GAME DRAW'
+			square.removeEventListener('click', init)
+		}
+	}
+}
+
+function newGame() {
+	count = 0;
+	squareElements.forEach(e => {
+		e.textContent = ''
+		e.classList.remove('x', 'o', 'main__square-item_win')
+	})
+	res.textContent = ''
+	square.addEventListener('click', init)
+}
+
+newGameButton.addEventListener('click', newGame)
+
diff --git a/src/sass/_adaptive.scss b/src/sass/_adaptive.scss
@@ -0,0 +1,13 @@
+.main {
+	&__square {
+		@media screen and (max-width: 680px) {
+			@include width-height(300px, 300px);
+
+			&-item {
+				@media screen and (max-width: 680px) {
+					@include width-height(100px, 100px);
+				}
+			}
+		}
+	}
+}
diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
@@ -0,0 +1,12 @@
+@mixin flexBox($flex-direction: row, $align-items: normal, $justify-content: normal, $flex-wrap: nowrap) {
+	display: flex;
+	flex-direction: $flex-direction;
+	align-items: $align-items;
+	justify-content: $justify-content;
+	flex-wrap: $flex-wrap;
+}
+
+@mixin width-height($width, $height) {
+	width: $width;
+	height: $height;
+}