adding X & O vectorsdev

5 files changed, 29 insertions, 1 deletions

diff --git a/app.js b/app.js
index 158168b..3007f69 100644
--- a/app.js
+++ b/app.js
@@ -1,5 +1,13 @@
 console.log('Hello from app.js');
 
+fetch('svg/x.svg')
+	.then(response => response.text())
+	.then(fileContents => {
+		console.log(fileContents);
+	})
+	.catch(error => console.error('Error reading the file:', error));
+
+
 const turns = {true: 'X', false: 'O'};
 
 const getXBoard = function() {
diff --git a/style.css b/style.css
index 97ed162..5ade367 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,8 @@
 :root{
 	--foreground-color: hsl(180, 50%, 50%);
 	--background-color: hsl(0, 0%, 0%);
+	--x-color: hsl(300, 100%, 50%);
+	--o-color: hsl(180, 100%, 50%);
 }
 
 @media (max-width: 600px) {
@@ -62,4 +64,15 @@ nav {
 
 .square:nth-child(n+6) {
 	border-bottom: 0;
-}
\ No newline at end of file
+}
+
+.x {
+	stroke-width: var(--stroke-width);
+	stroke: var(--x-color);
+}
+
+.o {
+	stroke-width: var(--stroke-width);
+	stroke: var(--o-color);
+	fill-opacity: 0;
+}
diff --git a/img/favicon.svg b/svg/favicon.svg
index 96b4eab..96b4eab 100644
--- a/img/favicon.svg
+++ b/svg/favicon.svg
diff --git a/svg/o.svg b/svg/o.svg
new file mode 100644
index 0000000..60d3c75
--- /dev/null
+++ b/svg/o.svg
@@ -0,0 +1,3 @@
+<svg width='100' height='100' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+	<circle class='o' cx='85' cy='85' r='12'/>
+</svg>
\ No newline at end of file
diff --git a/svg/x.svg b/svg/x.svg
new file mode 100644
index 0000000..f572665
--- /dev/null
+++ b/svg/x.svg
@@ -0,0 +1,4 @@
+<svg width='100' height='100' viewbox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+	<path class='x' d='M3 3, 27 27'/>
+	<path class='x' d='M27 3, 3 27'/>
+</svg>
\ No newline at end of file