diff --git a/react_online_calculator/public/index.html b/front/premium_store/public/index.html similarity index 54% rename from react_online_calculator/public/index.html rename to front/premium_store/public/index.html index ede1a59..49e3bb6 100644 --- a/react_online_calculator/public/index.html +++ b/front/premium_store/public/index.html @@ -3,9 +3,11 @@ - React App + + Premium store of our games! :) +
- + \ No newline at end of file diff --git a/front/premium_store/src/components/MainHead.jsx b/front/premium_store/src/components/MainHead.jsx new file mode 100644 index 0000000..6922e2a --- /dev/null +++ b/front/premium_store/src/components/MainHead.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import '../styles/App.css'; +import { NavLink } from 'react-router-dom'; + +//компонент с кнопками навигации по сайту +const MainHead = (props) => { + + return( +
+
+

Мир танков

+
+
+ +
+
+ ) +} + +export default MainHead; \ No newline at end of file diff --git a/front/premium_store/src/components/items/GameClient/ClientItem.css b/front/premium_store/src/components/items/GameClient/ClientItem.css new file mode 100644 index 0000000..b757d6d --- /dev/null +++ b/front/premium_store/src/components/items/GameClient/ClientItem.css @@ -0,0 +1,37 @@ +.client-card{ + display: flex; + width: 100%; + padding: 15px; + margin-top: 5px; + border: 5px solid; + border-color: #14A76C; + border-radius: 10px; + justify-content: space-around; + align-items: center; + font-family: Courier, monospace; + font-weight: 900; +} + +.client-attribute{ + padding: 5px; + border-radius: 10px; + background-color: #FF652F; + font-family: Courier, monospace; + font-weight: 900; + align-items: center; +} + +.client-button-group{ + display: flex; + width: 20%; + justify-content: space-around; + align-items: center; +} + +.client-button{ + padding: 10px; + border-radius: 10px; + background-color: #FF652F; + font-family: Courier, monospace; + font-weight: 900; +} \ No newline at end of file diff --git a/front/premium_store/src/components/items/GameClient/ClientItem.jsx b/front/premium_store/src/components/items/GameClient/ClientItem.jsx new file mode 100644 index 0000000..46d385a --- /dev/null +++ b/front/premium_store/src/components/items/GameClient/ClientItem.jsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import axios from 'axios'; +import './ClientItem.css'; +import ModalClient from './ModalClient'; +import ModalTankNation from '../Nation/ModalTankNation'; + +const ClientItem = (data) => { + + const [client, setClient] = useState(null); + + //состояние для контроля вызова модального окна + const[modal, setModal] = useState(false); + + //состояние для вызова окна показа списка танков нации + const[modalNation, setModalNation] = useState(false); + + function deleteClient(){ + axios.delete('http://localhost:8080/client/' + data.clientItem.id) + .then((response) => { + console.log("Удаление уровня с id " + data.clientItem.id) + }); + } + + return ( +
+

id: {data.clientItem.id}

+

Никнейм: {data.clientItem.nickName}

+

Баланс: {data.clientItem.balance}

+

Почта: {data.clientItem.email}

+
+ + + + + +
+
+ ); +}; + +export default ClientItem diff --git a/front/premium_store/src/components/items/GameClient/ClientList.jsx b/front/premium_store/src/components/items/GameClient/ClientList.jsx new file mode 100644 index 0000000..cb9da20 --- /dev/null +++ b/front/premium_store/src/components/items/GameClient/ClientList.jsx @@ -0,0 +1,22 @@ +import React, { useEffect} from 'react'; +import ClientItem from './ClientItem'; + +const ClientList = (clients) => { + return ( +
+
+

+ Список существующих клиентов: +

+
+ {clients.clientItems.map((clientItem) => + + )} +
+ ); +} + +export default ClientList; diff --git a/front/premium_store/src/components/items/GameClient/ModalClient.jsx b/front/premium_store/src/components/items/GameClient/ModalClient.jsx new file mode 100644 index 0000000..0d45517 --- /dev/null +++ b/front/premium_store/src/components/items/GameClient/ModalClient.jsx @@ -0,0 +1,106 @@ +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import cl from '../GameClient/ModalClient.module.css'; +import '../../AddClient.css'; + +const ModalClient = ({data, visible, setVisible}) => { + + //для обновления уровня + const [clientNickName, setClientNickName] = useState(data.nickName); + + const [clientEmail, setClientEmail] = useState(data.email); + + const [clientBalance, setClientBalance] = useState(data.balance); + + const [clientTank, setClientTank] = useState(null); + + const [tankItems, setTankItems] = useState([]); + + useEffect(() => { + console.log('Обращение к БД'); + axios.get('http://localhost:8080/tank/') + .then((responce) => { + console.log(responce.data); + setTankItems(responce.data) + }); + }, []) + + //для контроля видимости модалки + const rootClasses = [cl.myModal]; + + if(visible) + { + rootClasses.push(cl.active); + } + + //добавление нового уровня + function updateLevel(){ + axios.put('http://localhost:8080/client/' + data.id + '?nickName=' + + clientNickName + '&email=' + clientEmail + '&balance=' + clientBalance + '&tankId=' + clientTank) + .then((response) => { + console.log("Обновление клиента с id " + data.id) + }); + setVisible(false); + } + + const getChoiceNation = (newId) => { + setClientTank(tankItems[newId - 1].id); + } + + return ( +
setVisible(false)}> +
e.stopPropagation()}> +

+ Никнейм: + setClientNickName(e.target.value)} + /> +

+

+ Почта: + setClientEmail(e.target.value)} + /> +

+

+ Баланс: + setClientBalance(e.target.value)} + /> +

+

+ Выберите новый танк: + +

+ +
+
+ ); +} + +export default ModalClient diff --git a/front/premium_store/src/components/items/GameClient/ModalClient.module.css b/front/premium_store/src/components/items/GameClient/ModalClient.module.css new file mode 100644 index 0000000..c1ae730 --- /dev/null +++ b/front/premium_store/src/components/items/GameClient/ModalClient.module.css @@ -0,0 +1,34 @@ +.myModal{ + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + background: rgba(0, 0, 0, 0.8); +} + +.myModal.active{ + display: flex; + justify-content: center; + align-items: center; +} + +.myModalContent{ + display: inline-block; + padding: 15px; + background: #FF652F; + border-radius: 16px; + min-width: 300px; + min-height: 100px; + justify-content: space-between; + align-items: center; +} + +.modalButton{ + padding: 5px; + border-radius: 10px; + background-color: #FFE430; + font-family: Courier, monospace; + font-weight: 900; +} \ No newline at end of file diff --git a/front/premium_store/src/components/items/Level/LevelItem.css b/front/premium_store/src/components/items/Level/LevelItem.css new file mode 100644 index 0000000..7a16b64 --- /dev/null +++ b/front/premium_store/src/components/items/Level/LevelItem.css @@ -0,0 +1,37 @@ +.level-card{ + display: flex; + width: 100%; + padding: 15px; + margin-top: 5px; + border: 5px solid; + border-color: #14A76C; + border-radius: 10px; + justify-content: space-around; + align-items: center; + font-family: Courier, monospace; + font-weight: 900; +} + +.level-attribute{ + padding: 5px; + border-radius: 10px; + background-color: #FF652F; + font-family: Courier, monospace; + font-weight: 900; + align-items: center; +} + +.level-button-group{ + display: flex; + width: 20%; + justify-content: space-around; + align-items: center; +} + +.level-button{ + padding: 10px; + border-radius: 10px; + background-color: #FF652F; + font-family: Courier, monospace; + font-weight: 900; +} \ No newline at end of file diff --git a/front/premium_store/src/components/items/Level/LevelItem.jsx b/front/premium_store/src/components/items/Level/LevelItem.jsx new file mode 100644 index 0000000..98f2c4a --- /dev/null +++ b/front/premium_store/src/components/items/Level/LevelItem.jsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; +import axios from 'axios'; +import './LevelItem.css'; +import ModalLevel from './ModalLevel'; + +//отвечает за отдельно взятый уровень (вывод карточки с ним) +const LevelItem = (data) => { + + const [level, setLevel] = useState(null); + + //состояние для контроля вызова модального окна + const[modal, setModal] = useState(false); + + function deleteLevel(){ + axios.delete('http://localhost:8080/level/' + data.levelItem.id) + .then((response) => { + console.log("Удаление уровня с id " + data.levelItem.id) + }); + } + + return ( +
+

id: {data.levelItem.id}

+

уровень: {data.levelItem.level}

+
+ + + +
+
+ ); +}; + +export default LevelItem; \ No newline at end of file diff --git a/front/premium_store/src/components/items/Level/LevelList.jsx b/front/premium_store/src/components/items/Level/LevelList.jsx new file mode 100644 index 0000000..abbdc64 --- /dev/null +++ b/front/premium_store/src/components/items/Level/LevelList.jsx @@ -0,0 +1,25 @@ +import React, { useEffect} from 'react'; +import LevelItem from './LevelItem'; + +//const host = import.meta.env.VITE_API_URL; + +//отвечает за список всех уровней. Передаём сюда пропсом массив уровней +const LevelList = (levels) => { + return ( +
+
+

+ Список существующих уровней: +

+
+ {levels.levelItems.map((levelItem) => + + )} +
+ ); +}; + +export default LevelList; \ No newline at end of file diff --git a/front/premium_store/src/components/items/Level/ModalLevel.jsx b/front/premium_store/src/components/items/Level/ModalLevel.jsx new file mode 100644 index 0000000..3e88f71 --- /dev/null +++ b/front/premium_store/src/components/items/Level/ModalLevel.jsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import axios from 'axios'; +import cl from './ModalLevel.module.css'; +import '../../AddLevel.css'; + +const ModalLevel = ({data, visible, setVisible}) => { + + //для обновления уровня + const [level, setLevel] = useState(data.level); + + //для контроля видимости модалки + const rootClasses = [cl.myModal]; + + if(visible) + { + rootClasses.push(cl.active); + } + + //добавление нового уровня + function updateLevel(){ + setLevel() + axios.put('http://localhost:8080/level/' + data.id + '?Level=' + level) + .then((response) => { + console.log("Обновление уровня с id " + data.id) + }); + setVisible(false); + } + + return ( +
setVisible(false)}> +
e.stopPropagation()}> + setLevel(e.target.value)} + /> + +
+
+ ); +}; + +export default ModalLevel; diff --git a/front/premium_store/src/components/items/Level/ModalLevel.module.css b/front/premium_store/src/components/items/Level/ModalLevel.module.css new file mode 100644 index 0000000..eb43c27 --- /dev/null +++ b/front/premium_store/src/components/items/Level/ModalLevel.module.css @@ -0,0 +1,34 @@ +.myModal{ + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + background: rgba(0, 0, 0, 0.8); +} + +.myModal.active{ + display: flex; + justify-content: center; + align-items: center; +} + +.myModalContent{ + display: flex; + padding: 15px; + background: #FF652F; + border-radius: 16px; + min-width: 300px; + min-height: 100px; + justify-content: space-between; + align-items: center; +} + +.modalButton{ + padding: 5px; + border-radius: 10px; + background-color: #FFE430; + font-family: Courier, monospace; + font-weight: 900; +} \ No newline at end of file diff --git a/front/premium_store/src/components/items/Nation/ModalNation.jsx b/front/premium_store/src/components/items/Nation/ModalNation.jsx new file mode 100644 index 0000000..5ad9b7b --- /dev/null +++ b/front/premium_store/src/components/items/Nation/ModalNation.jsx @@ -0,0 +1,50 @@ +import React, { useState } from 'react'; +import axios from 'axios'; +import cl from './ModalNation.module.css'; +import '../../AddNation.css'; + +const ModalNation = ({data, visible, setVisible}) => { + //для обновления уровня + const [nation, setNation] = useState(data.nation); + + const nullId = 0; + + //для контроля видимости модалки + const rootClasses = [cl.myModal]; + + if(visible) + { + rootClasses.push(cl.active); + } + + //добавление новой нации + function updateLevel(){ + setNation() + axios.put('http://localhost:8080/nation/' + data.id + '?nation=' + nation + '&tankId=' + nullId) + .then((response) => { + console.log("Обновление нации с id " + data.id) + }); + setVisible(false); + } + + return ( +
setVisible(false)}> +
e.stopPropagation()}> + setNation(e.target.value)} + /> + +
+
+ ); +} + +export default ModalNation diff --git a/front/premium_store/src/components/items/Nation/ModalNation.module.css b/front/premium_store/src/components/items/Nation/ModalNation.module.css new file mode 100644 index 0000000..eb43c27 --- /dev/null +++ b/front/premium_store/src/components/items/Nation/ModalNation.module.css @@ -0,0 +1,34 @@ +.myModal{ + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + background: rgba(0, 0, 0, 0.8); +} + +.myModal.active{ + display: flex; + justify-content: center; + align-items: center; +} + +.myModalContent{ + display: flex; + padding: 15px; + background: #FF652F; + border-radius: 16px; + min-width: 300px; + min-height: 100px; + justify-content: space-between; + align-items: center; +} + +.modalButton{ + padding: 5px; + border-radius: 10px; + background-color: #FFE430; + font-family: Courier, monospace; + font-weight: 900; +} \ No newline at end of file diff --git a/front/premium_store/src/index.js b/front/premium_store/src/index.js new file mode 100644 index 0000000..8b1c250 --- /dev/null +++ b/front/premium_store/src/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + +); diff --git a/react_online_calculator/src/index.js b/react_online_calculator/src/index.js deleted file mode 100644 index 1e3dad1..0000000 --- a/react_online_calculator/src/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App'; - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - //document.getElementById('root'); - для работы этого надо поставит запятую после - //и делаем import 'react-dom', вместо 'react-dom/client' -); -