deploy

.deploy/deploy-dev.yaml

@@ -0,0 +1,14 @@
+version: "3.4"
+
+
+services:
+
+  front:
+    image: mathwave/sprint-repo:battleship-front
+    deploy:
+      mode: replicated
+      restart_policy:
+        condition: any
+      update_config:
+        parallelism: 1
+        order: start-first

.deploy/deploy-prod.yaml

@@ -0,0 +1,14 @@
+version: "3.4"
+
+
+services:
+
+  front:
+    image: mathwave/sprint-repo:battleship-front
+    deploy:
+      mode: replicated
+      restart_policy:
+        condition: any
+      update_config:
+        parallelism: 1
+        order: start-first

.gitlab-ci.yml

@@ -0,0 +1,43 @@
+stages:
+  - build
+  - deploy-dev
+  - deploy-prod
+
+build:
+  stage: build
+  tags:
+    - dev
+  before_script:
+    - docker login -u mathwave -p $DOCKERHUB_PASSWORD
+  script:
+    - docker build -t mathwave/sprint-repo:battleship-front .
+    - docker push mathwave/sprint-repo:battleship-front
+
+.deploy:
+  before_script:
+    - docker login -u mathwave -p $DOCKERHUB_PASSWORD
+
+deploy-dev:
+  extends:
+    - .deploy
+  stage: deploy-dev
+  tags:
+    - dev
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "master"'
+      when: on_success
+    - when: manual
+  script:
+    - docker stack deploy -c ./.deploy/deploy-dev.yaml battleship
+
+deploy-prod:
+  extends:
+    - .deploy
+  stage: deploy-prod
+  tags:
+    - prod
+  only:
+    - master
+  when: manual
+  script:
+    - docker stack deploy -c ./.deploy/deploy-prod.yaml battleship

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:13.12.0-alpine
+
+WORKDIR /app
+
+ENV PATH /app/node_modules/.bin:$PATH
+
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install --silent
+RUN npm install react-scripts@3.4.1 -g --silent
+
+COPY . ./
+
+CMD ["npm", "start"]

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

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%;
+}