From e4816e7eeee4f498e358a0c5e0ca5b286c63b6ba Mon Sep 17 00:00:00 2001
From: TinWoodman92 <chrhodgden@gmail.com>
Date: Sun, 14 Jan 2024 19:33:58 -0600
Subject: Initial commit

---
 .gitignore |  1 +
 app.js     | 38 ++++++++++++++++++++++++++++++++++++
 index.html | 24 +++++++++++++++++++++++
 readme.md  |  3 +++
 style.css  | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 131 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 app.js
 create mode 100644 index.html
 create mode 100644 readme.md
 create mode 100644 style.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c434074
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+_*
\ No newline at end of file
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..b804185
--- /dev/null
+++ b/app.js
@@ -0,0 +1,38 @@
+console.log('Hello from app.js');
+
+const turns = {true: 'X', false: 'O'};
+
+const boardTurn = function() {
+	console.log('clicked', this.id, this.bitBoard);
+};
+
+const squareClick = function() {
+	console.log('clicked', this.id, this.innerText, this.position);
+	if (this.innerText == '') {
+		//Mark board
+		this.innerText = this.board.turn;
+		//Update bitBoard
+		let pos = 9 * (this.board.turn==turns[false]);
+		pos += this.position - 1
+		this.board.bitBoard[pos] = 1;
+		//Switch player turn
+		this.board.turn = turns[this.board.turn==turns[false]]
+	};
+};
+
+const initBoard = function(board) {
+	board.squares = board.getElementsByClassName('square');	
+	board.squares = Array.from(board.squares);
+	board.squares.forEach(square => {
+		square.addEventListener('click', squareClick);
+		square.board = board;
+		square.position = parseInt(square.id.match(/\d+/)[0], 10);
+	});
+	board.addEventListener('click', boardTurn);
+	board.turn = turns[true];
+	board.bitBoard = Array(18).fill(0);
+};
+
+const board = document.getElementById('board'); 
+
+initBoard(board);
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c11b476
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Tit Tac Toe</title>
+	<link rel="stylesheet" href="style.css">
+	<script defer src="app.js"></script>
+</head>
+<body>
+	<h1>TIC TAC TOE</h1>
+	<div class="board", id="board">
+		<div class="square" id="square-1"></div>
+		<div class="square" id="square-2"></div>
+		<div class="square" id="square-3"></div>
+		<div class="square" id="square-4"></div>
+		<div class="square" id="square-5"></div>
+		<div class="square" id="square-6"></div>
+		<div class="square" id="square-7"></div>
+		<div class="square" id="square-8"></div>
+		<div class="square" id="square-9"></div>
+	</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..63cd580
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,3 @@
+# Tic Tac Toe web page
+
+under development for experience and reference
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..97ed162
--- /dev/null
+++ b/style.css
@@ -0,0 +1,65 @@
+:root{
+	--foreground-color: hsl(180, 50%, 50%);
+	--background-color: hsl(0, 0%, 0%);
+}
+
+@media (max-width: 600px) {
+	html {
+		font-size: 1.5rem; 
+	}
+}
+
+@media (min-width: 601px) {
+	html {
+		font-size: 1rem; 
+	}
+}
+
+body {
+	color: var(--foreground-color);
+	background-color: var(--background-color);
+}
+
+hr {
+	border-color: var(--foreground-color);
+}
+
+nav {
+	color: var(--foreground-color);
+	text-align: center;
+	clear: both;
+}
+
+.board {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+	max-width: 12rem; 
+	max-height: 12rem; 
+}
+
+.square {
+	border: 0.01rem solid var(--foreground-color);
+	height: 4rem;
+	width: 4rem;
+	font-size: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.square:nth-child(3n+1) {
+	border-left: 0;
+}
+
+.square:nth-child(3n+3) {
+	border-right: 0;
+}
+
+.square:nth-child(-n+3) {
+	border-top: 0;
+}
+
+.square:nth-child(n+6) {
+	border-bottom: 0;
+}
\ No newline at end of file
-- 
cgit v1.2.3