From 9404b4988d5d10b39edef19fae568285d62c781f Mon Sep 17 00:00:00 2001
From: Your Name <youremail@yourdomain.com>
Date: Thu, 24 Nov 2022 10:22:37 +0200
Subject: [PATCH] Organized the components styles and utils a little bit

---
 src/App.jsx                         | 95 ++---------------------------
 src/components/Game.jsx             | 40 ++++++++++++
 src/components/Header.jsx           |  7 +++
 src/components/Intro.jsx            | 21 +++++++
 src/components/Target.jsx           | 21 +++++++
 src/{Target.css => styles/main.css} |  0
 src/utils/randomNumber.js           |  4 ++
 7 files changed, 97 insertions(+), 91 deletions(-)
 create mode 100644 src/components/Game.jsx
 create mode 100644 src/components/Header.jsx
 create mode 100644 src/components/Intro.jsx
 create mode 100644 src/components/Target.jsx
 rename src/{Target.css => styles/main.css} (100%)
 create mode 100644 src/utils/randomNumber.js

diff --git a/src/App.jsx b/src/App.jsx
index eba9af6..e5701d1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,94 +1,7 @@
-import React, { useState, useEffect } from "react"
-import './Target.css';
-
-function randomNumber() {
-    const num = Math.floor(Math.random() * 80);
-    return num;
-}
-
-function Header(props) {
-    return (
-        <header>
-            <span>Targets hit: {props.count} <br></br> Seconds left: {props.seconds}</span>
-        </header>
-    );
-}
-
-function Target(props) {
-    const [style, setStyle] = useState({
-        position: 'absolute',
-        top: '50%',
-        right: '50%'
-    });
-
-    return (
-        <button onClick={() => {
-            props.setCount(props.count + 1)
-            setStyle({
-                ...style,
-                top: `${randomNumber()}%`,
-                right: `${randomNumber()}%`
-            })
-        }} style={style} className="target">PRESS</button>
-    );
-}
-
-function GameOver(props) {
-    return (
-        <div className="intro">
-            <h1>Finish!</h1>
-            <p>You hit {props.count} targets in the span of 30 seconds!</p>
-            <button onClick={() => props.setShow(false)}>Try again</button>
-        </div>
-    );
-}
-
-function Game(props) {
-    const [count, setCount] = useState(0);
-
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            if (props.seconds > 0) {
-                props.setSeconds(props.seconds - 1);
-            } else {
-                clearTimeout(timer);
-            }
-        }, 1000);
-    });
-    if (props.seconds !== 0) {
-        return (
-            <div className="game">
-                <Header count={count} seconds={props.seconds} />
-                <div className="targets">
-                    <Target count={count} setCount={setCount} />
-                </div>
-            </div>
-        );
-    }
-    return (
-        <GameOver setShow={props.setShow} count={count}/>
-    );
-}
-
-function Intro(props) {
-    const [temp, setTemp] = useState(30);
-
-    return (
-        <div className="intro">
-            <h1>Welcome to Aim Test</h1>
-            <p>Try to hit as many targets in the time limit</p>
-            <p><strong>Good Luck</strong></p>
-            <label>Enter time limit: 
-                <input type="number" value={temp} onChange={(e) => setTemp(e.target.value)}/>
-            </label>
-            <br></br>
-            <button className="next-btn" onClick={() => {
-                props.setSeconds(temp);
-                props.setShow(true);
-            }}>Start Game</button>
-        </div>
-    );
-}
+import React, { useState } from "react"
+import { Game } from "./components/Game";
+import { Intro } from "./components/Intro";
+import './styles/main.css'
 
 export default function App() {
     const [show, setShow] = useState(false);
diff --git a/src/components/Game.jsx b/src/components/Game.jsx
new file mode 100644
index 0000000..aae8472
--- /dev/null
+++ b/src/components/Game.jsx
@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { Header } from "./Header";
+import { Target } from "./Target";
+
+export function GameOver(props) {
+    return (
+        <div className="intro">
+            <h1>Finish!</h1>
+            <p>You hit {props.count} targets in the span of 30 seconds!</p>
+            <button onClick={() => props.setShow(false)}>Try again</button>
+        </div>
+    );
+}
+
+export function Game(props) {
+    const [count, setCount] = useState(0);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (props.seconds > 0) {
+                props.setSeconds(props.seconds - 1);
+            } else {
+                clearTimeout(timer);
+            }
+        }, 1000);
+    });
+    if (props.seconds !== 0) {
+        return (
+            <div className="game">
+                <Header count={count} seconds={props.seconds} />
+                <div className="targets">
+                    <Target count={count} setCount={setCount} />
+                </div>
+            </div>
+        );
+    }
+    return (
+        <GameOver setShow={props.setShow} count={count}/>
+    );
+}
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..7299abb
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,7 @@
+export function Header(props) {
+    return (
+        <header>
+            <span>Targets hit: {props.count} <br></br> Seconds left: {props.seconds}</span>
+        </header>
+    );
+}
\ No newline at end of file
diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
new file mode 100644
index 0000000..1f37400
--- /dev/null
+++ b/src/components/Intro.jsx
@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+export function Intro(props) {
+    const [temp, setTemp] = useState(30);
+
+    return (
+        <div className="intro">
+            <h1>Welcome to Aim Test</h1>
+            <p>Try to hit as many targets in the time limit</p>
+            <p><strong>Good Luck</strong></p>
+            <label>Enter time limit: 
+                <input type="number" value={temp} onChange={(e) => setTemp(e.target.value)}/>
+            </label>
+            <br></br>
+            <button className="next-btn" onClick={() => {
+                props.setSeconds(temp);
+                props.setShow(true);
+            }}>Start Game</button>
+        </div>
+    );
+}
diff --git a/src/components/Target.jsx b/src/components/Target.jsx
new file mode 100644
index 0000000..24d8d55
--- /dev/null
+++ b/src/components/Target.jsx
@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { randomNumber } from "../utils/randomNumber";
+
+export function Target(props) {
+    const [style, setStyle] = useState({
+        position: 'absolute',
+        top: '50%',
+        right: '50%'
+    });
+
+    return (
+        <button onClick={() => {
+            props.setCount(props.count + 1)
+            setStyle({
+                ...style,
+                top: `${randomNumber()}%`,
+                right: `${randomNumber()}%`
+            })
+        }} style={style} className="target">PRESS</button>
+    );
+}
\ No newline at end of file
diff --git a/src/Target.css b/src/styles/main.css
similarity index 100%
rename from src/Target.css
rename to src/styles/main.css
diff --git a/src/utils/randomNumber.js b/src/utils/randomNumber.js
new file mode 100644
index 0000000..856ed38
--- /dev/null
+++ b/src/utils/randomNumber.js
@@ -0,0 +1,4 @@
+export function randomNumber() {
+    const num = Math.floor(Math.random() * 80);
+    return num;
+}
\ No newline at end of file