deploy

src/App.js

@@ -1,24 +1,14 @@
-import logo from './logo.svg';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './screens/Home.js'
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Routes>
+        <Route path='/' element={<Home />} />
+      </Routes>
+    </Router>
   );
 }
 

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/screens/Home.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import '../styles/styles.css'
+
+class Home extends Component {
+  render() {
+    return (
+        <div className='center'>
+          <div className='logo'>
+            <center><p className='logo'><b>Sprint Battleship</b></p></center>
+          </div>
+          <button className='main'><p>Новая игра</p></button>
+          <div className='space'></div>
+          <button className='main'><p>Присоединиться</p></button>
+        </div>
+    );
+  }
+}
+
+export default Home;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/styles/styles.css

@@ -0,0 +1,33 @@
+p {
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+}
+
+.logo {
+    font-size: 70px;
+}
+
+.space {
+    height: 150px;
+}
+
+.main {
+    position: fixed;
+    left: 50%;
+    width: 400px;
+    margin-left: -200px;
+    height: 100px;
+    background-color: white;
+    font-size: 20px;
+}
+
+.main:hover {
+    background-color: lightgray;
+}
+
+.center {
+    position: absolute;
+    top: 25%;
+    left: 25%;
+    width: 50%;
+    height: 50%;
+}