diff --git a/public/index.html b/public/index.html index aa069f2..7ee7975 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,14 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + React App diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 3784575..0000000 --- a/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/src/App/App.css b/src/App/App.css new file mode 100644 index 0000000..dcbc810 --- /dev/null +++ b/src/App/App.css @@ -0,0 +1,13 @@ +.center { + margin: auto; + width: fit-content; + display: flex; + justify-content: center; + flex-direction: column; + height: 100vh; +} + +h1 { + color: white; + text-align: center; +} \ No newline at end of file diff --git a/src/App/App.js b/src/App/App.js new file mode 100644 index 0000000..350a12f --- /dev/null +++ b/src/App/App.js @@ -0,0 +1,19 @@ +import "./App.css"; +import { VALUE } from "../Button/Button"; +import { Board } from "../Board/Board"; +import { useState } from "react"; + +function App() { + const [nextValue, setNextValue] = useState(VALUE.X); + function alternateNextValue() { + setNextValue(nextValue === VALUE.X ? VALUE.O : VALUE.X); + } + return ( +
+

Turn of {nextValue}

+ +
+ ); +} + +export default App; diff --git a/src/App.test.js b/src/App/App.test.js similarity index 100% rename from src/App.test.js rename to src/App/App.test.js diff --git a/src/Board/Board.js b/src/Board/Board.js new file mode 100644 index 0000000..74cf7a2 --- /dev/null +++ b/src/Board/Board.js @@ -0,0 +1,44 @@ +import { useState } from "react"; +import { Button, VALUE } from "../Button/Button"; + +export function Board({ onBoardClick, nextValue }) { + const [values, setValues] = useState([ + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + VALUE.EMPTY, + ]); + + function handleClick(i) { + if (values[i] === VALUE.EMPTY) { + let newValues = values.slice(); + newValues[i] = nextValue; + setValues(newValues); + onBoardClick(); + } + } + return ( +
+
+
+
+
+
+
+
+ ); +} diff --git a/src/Button/Button.css b/src/Button/Button.css new file mode 100644 index 0000000..bbb0cb7 --- /dev/null +++ b/src/Button/Button.css @@ -0,0 +1,15 @@ +.board-button { + background-color: transparent; + border: 7px solid #00ffdd; + font-size: 40px; + color: #00ffdd; + border-radius: 25px; + margin: 5px; + aspect-ratio: 1; + height: 70px; + transition: 0.15s; +} + +.board-button:hover { + box-shadow: #00ffdd 0px 4px 20px; +} \ No newline at end of file diff --git a/src/Button/Button.js b/src/Button/Button.js new file mode 100644 index 0000000..2bd2af3 --- /dev/null +++ b/src/Button/Button.js @@ -0,0 +1,15 @@ +import "./Button.css"; + +export const VALUE = { + EMPTY: "", + X: , + O: , +}; + +export function Button({ value, onButtonClick }) { + return ( + + ); +} diff --git a/src/index.css b/src/index.css index ec2585e..fdc603a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,3 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + background-color: #06066b; } diff --git a/src/index.js b/src/index.js index d563c0f..cd46dd4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; +import App from './App/App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file