diff --git a/containers/react/package-lock.json b/containers/react/package-lock.json index 57a24e41..93292b28 100644 --- a/containers/react/package-lock.json +++ b/containers/react/package-lock.json @@ -22,6 +22,7 @@ "react-scripts": "5.0.1", "socket.io-client": "^4.6.1", "styled-components": "^5.3.10", + "typescript": "^5.0.4", "web-vitals": "^2.1.4" } }, @@ -20057,16 +20058,15 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "peer": true, + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", + "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=12.20" } }, "node_modules/unbox-primitive": { diff --git a/containers/react/package.json b/containers/react/package.json index d61f6f00..2a68b851 100644 --- a/containers/react/package.json +++ b/containers/react/package.json @@ -17,6 +17,7 @@ "react-scripts": "5.0.1", "socket.io-client": "^4.6.1", "styled-components": "^5.3.10", + "typescript": "^5.0.4", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/containers/react/src/DataBase/DataProfileUser.jsx b/containers/react/src/DataBase/DataProfileUser.jsx deleted file mode 100644 index 5c19e67c..00000000 --- a/containers/react/src/DataBase/DataProfileUser.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import DefaultPic from '../assets/profile.jpg'; - -const UserProfile = [ - { - Pic: DefaultPic, - UserName: "Dipper Ratman", - }, -] - -export default UserProfile \ No newline at end of file diff --git a/containers/react/src/DataBase/DataRank.js b/containers/react/src/DataBase/DataRank.js new file mode 100644 index 00000000..1bdcaf5e --- /dev/null +++ b/containers/react/src/DataBase/DataRank.js @@ -0,0 +1,58 @@ +export const Rank = [ + { + rank: '1', + name: 'jean', + }, + { + rank: '2', + name: 'marc', + }, + { + rank: '3', + name: 'dujardain', + }, + { + rank: '4', + name: 'mom', + }, + { + rank: '5', + name: 'fary', + }, + { + rank: '6', + name: 'aba', + }, + { + rank: '7', + name: 'preach', + }, + { + rank: '1', + name: 'jean', + }, + { + rank: '2', + name: 'marc', + }, + { + rank: '3', + name: 'dujardain', + }, + { + rank: '4', + name: 'mom', + }, + { + rank: '5', + name: 'fary', + }, + { + rank: '6', + name: 'aba', + }, + { + rank: '7', + name: 'preach', + }, +] \ No newline at end of file diff --git a/containers/react/src/DataBase/DataUserProfile.js b/containers/react/src/DataBase/DataUserProfile.js new file mode 100644 index 00000000..7563a575 --- /dev/null +++ b/containers/react/src/DataBase/DataUserProfile.js @@ -0,0 +1,8 @@ +import DefaultPic from '../assets/profile.jpg'; + +export const UserProfile = { + Pic: DefaultPic, + UserName: 'Dipper Ratman', + } + +// export default UserProfile \ No newline at end of file diff --git a/containers/react/src/components/App.jsx b/containers/react/src/components/App.jsx index 9fe51956..b5424f6f 100644 --- a/containers/react/src/components/App.jsx +++ b/containers/react/src/components/App.jsx @@ -4,7 +4,7 @@ import HomeLogin from "../pages/Home.js"; import Home from "../pages/Home.jsx"; -import PlayButton from "../pages/PlayButton.js"; +import PlayButton from "./Game/PlayButton.js"; import Field from "../pages/Field"; import Login42 from "../pages/Login42.js"; import Messages from "../pages/Messages.jsx"; @@ -15,6 +15,7 @@ import SuccessToken from '../script/tokenSuccess' import DoubleAuth from "../pages/2fa.js"; +import Game from "../pages/Game.jsx"; function AnimatedRoute () { const location = useLocation(); @@ -29,7 +30,7 @@ function AnimatedRoute () { }/> }/> - }/> + }/> }/> {/* }/> */} diff --git a/containers/react/src/pages/PlayButton.js b/containers/react/src/components/Game/PlayButton.js similarity index 65% rename from containers/react/src/pages/PlayButton.js rename to containers/react/src/components/Game/PlayButton.js index 4e98f900..041af86e 100644 --- a/containers/react/src/pages/PlayButton.js +++ b/containers/react/src/components/Game/PlayButton.js @@ -1,4 +1,4 @@ -import '../styles/field.css'; +import '../../styles/field.css'; // import { useHistory } from 'react-router-dom'; import { useNavigate } from "react-router-dom"; @@ -15,7 +15,11 @@ function PlayButton() {
{/* !buttonClicked && */} - +
+

Super Power

+

Obstacle

+

Faster and Faster

+
); } diff --git a/containers/react/src/components/Game/Ranking.jsx b/containers/react/src/components/Game/Ranking.jsx new file mode 100644 index 00000000..25a5bd06 --- /dev/null +++ b/containers/react/src/components/Game/Ranking.jsx @@ -0,0 +1,27 @@ +import React from "react" +import {Rank} from '../../DataBase/DataRank.js' +import defaultpic from '../../assets/profile.jpg' + +function Ranking(){ + return ( +
+

Ranking

+
+ {Rank.map((item, index) => { + return ( +
+
  • +
    +

    {item.rank}: {item.name}

    +
    + {/*

    {item.openent}

    */} +
    • +
    + ) + })} +
    +
    + ) +} + +export default Ranking \ No newline at end of file diff --git a/containers/react/src/components/Profile/EditName.jsx b/containers/react/src/components/Profile/EditName.jsx new file mode 100644 index 00000000..23e6263f --- /dev/null +++ b/containers/react/src/components/Profile/EditName.jsx @@ -0,0 +1,52 @@ +import {motion} from "framer-motion" +// import Backdrop from "./Sidebar/Backdrop" +import {Link} from 'react-router-dom'; +import { UserProfile } from "../../DataBase/DataUserProfile"; +import {useState} from 'react'; +import "../../styles/Profile.css" + +const dropIn = { + hidden: { + opacity: '0', + }, + visible: { + opacity: "1", + }, + exit: { + opacity: "0", + }, +} + +// const changeName = ({handleClose, name}) => { +// return ( +// UserProfile.UserName = name +// ) +// } + +const ModalEdit = ({ handleClose }) => { + // let new_name = ""; + const [username, setUserName] = useState(""); + const handler = e => + { + setUserName (e.target.value); + } + return ( + // + +

    Type your new name

    + +
    {UserProfile.UserName = username;}}> + change +
    +     + //     + + ) +} + +export default ModalEdit \ No newline at end of file diff --git a/containers/react/src/components/Profile/Win_Loss.jsx b/containers/react/src/components/Profile/Win_Loss.jsx new file mode 100644 index 00000000..9d61e859 --- /dev/null +++ b/containers/react/src/components/Profile/Win_Loss.jsx @@ -0,0 +1,77 @@ +// import PropTypes from "prop-types" +// import styled from 'styled-components'; +// import '../DataBase/DummyDBWinLoss.js' +// import '../DataBase/DataProfileUser.js' +import { DBWinLoss } from '../../DataBase/DummyDBWinLoss.js'; +import '../../styles/Win_Loss.css' +import { UserProfile } from '../../DataBase/DataUserProfile'; +// import color from '../../utils/style/color.js'; + + + +// const CardWrapper = styled.div` +// display: flex; +// flex-direction: column; +// padding: 15px; +// background-color: black; +// border-radius: 30px; +// width: 350px; +// transition: 200ms; +// margin-top: 50px; +// &:hover { +// cursor: pointer; +// box-shadow: 2px 2px 10px #b6b6b6; +// } +// ` + +// const CardLabel1 = styled.h1` +// color: #5843e4; +// // font-size: 22px; +// font-weight: bold; +// margin-bottom: 25px; +// ` +// const CardLabel2 = styled.span` +// color: #5843e4; +// font-size: 22px; +// font-weight: bold; +// display: flex; +// flex-direction: column; +// ` + +// const CardImage = styled.img` +// heigh: 80px; +// width: 80px; +// border-radius: 50%; +// ` + +function WinLoss() { + return ( + +
    +

    Match history Win/Loss

    +
    + {DBWinLoss.map((item, index) => { + return ( +
    +
  • +

    {item.title}

    +
    +

    {UserProfile.UserName}

    {item.score} {item.openent}

    +
    + {/*

    {item.openent}

    */} +
    • +
    + ) + })} +
    +
    + ) +} + +// Card.propTypes = { +// label: PropTypes.string, +// title: PropTypes.string.isRequired, +// picture: PropTypes.string, +// } + +export default WinLoss \ No newline at end of file diff --git a/containers/react/src/components/Sidebar/Modal.jsx b/containers/react/src/components/Sidebar/Modal.jsx index 40f211e1..ee606771 100644 --- a/containers/react/src/components/Sidebar/Modal.jsx +++ b/containers/react/src/components/Sidebar/Modal.jsx @@ -55,9 +55,11 @@ const Modal = ({ handleClose }) => {
    +
      {SidebarData.map((item, index) => { return ( - +
    • {item.icon} @@ -67,6 +69,8 @@ const Modal = ({ handleClose }) => { ) })} +
    +
    diff --git a/containers/react/src/components/Win_Loss.jsx b/containers/react/src/components/Win_Loss.jsx deleted file mode 100644 index 65436f9a..00000000 --- a/containers/react/src/components/Win_Loss.jsx +++ /dev/null @@ -1,67 +0,0 @@ -// import PropTypes from "prop-types" -import styled from 'styled-components'; -import '../DataBase/DummyDBWinLoss.js' -import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js'; -// import color from '../../utils/style/color.js'; - - - -const CardWrapper = styled.div` - display: flex; - flex-direction: column; - padding: 15px; - background-color: black; - // border-radius: 30px; - // width: 350px; - // transition: 200ms; - margin-top: 50px; - &:hover { - cursor: pointer; - box-shadow: 2px 2px 10px #b6b6b6; - } -` - -const CardLabel1 = styled.span` - color: #5843e4; - font-size: 22px; - font-weight: bold; - margin-bottom: 25px; -` -const CardLabel2 = styled.span` - color: #5843e4; - font-size: 22px; - font-weight: bold; - display: flex; - flex-direction: column; -` - -// const CardImage = styled.img` -// heigh: 80px; -// width: 80px; -// border-radius: 50%; -// ` - -function WinLoss() { - return ( - - Match history Win/Loss - {/* */} - {DBWinLoss.map((item, index) => { - return ( -
  • - {item.title} - {item.score} -
    • - ) - })} -     - ) -} - -// Card.propTypes = { -// label: PropTypes.string, -// title: PropTypes.string.isRequired, -// picture: PropTypes.string, -// } - -export default WinLoss \ No newline at end of file diff --git a/containers/react/src/pages/Game.jsx b/containers/react/src/pages/Game.jsx new file mode 100644 index 00000000..92d89c23 --- /dev/null +++ b/containers/react/src/pages/Game.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import PlayButton from "../components/Game/PlayButton"; +import Ranking from "../components/Game/Ranking"; +import '../styles/Game.css' + +function Game(){ + return ( +
    +
    + +
    +
    + +
    +
    + ) +} +export default Game \ No newline at end of file diff --git a/containers/react/src/pages/Home.jsx b/containers/react/src/pages/Home.jsx index 74357c06..474755ed 100644 --- a/containers/react/src/pages/Home.jsx +++ b/containers/react/src/pages/Home.jsx @@ -1,32 +1,62 @@ -import React from "react"; +import { React, useState } from "react"; import '../styles/Profile.css' -import '../styles/App.css' +// import '../styles/App.css' import DefaultPicture from "../assets/profile.jpg"; -// import WinLoss from "../components/Win_Loss"; -import { motion } from 'framer-motion' -// import {AiOutlineHistory} from 'react-icons/ai' +import WinLoss from "../components/Profile/Win_Loss"; +import { motion, AnimatePresence } from 'framer-motion' +import { AiFillEdit } from 'react-icons/ai' import { Link } from "react-router-dom"; -import UserProfile from "../DataBase/DataProfileUser"; +import ModalEdit from "../components/Profile/EditName"; +import {AiOutlineHistory} from 'react-icons/ai' +// import { Link } from "react-router-dom"; +import {UserProfile} from "../DataBase/DataUserProfile"; +function Profile () { + const [modalOpen, setModalOpen] = useState(false); + const close = () => setModalOpen(false); + const open = () => setModalOpen(true); + return ( +
    + Profile pic +

    {UserProfile.UserName}

    + (modalOpen ? close() : open())}> + + + + + null}> + {modalOpen && } + +
    + ) +} + function Home () { - let name = UserProfile.UserName + const [move, setmove ] = useState(false); return ( - -
    - Profile pic -

    Dipper Ratman

    - -
    -
    - Match history -
    -
    +
    + + + + + +
    + setmove(!move)}> + Match History + ) } diff --git a/containers/react/src/styles/App.css b/containers/react/src/styles/App.css index a41169e4..21d4943a 100644 --- a/containers/react/src/styles/App.css +++ b/containers/react/src/styles/App.css @@ -1,5 +1,7 @@ .App { text-align: center; + height: 100%; + width: 100%; background-color: black; } diff --git a/containers/react/src/styles/Game.css b/containers/react/src/styles/Game.css new file mode 100644 index 00000000..28cc1795 --- /dev/null +++ b/containers/react/src/styles/Game.css @@ -0,0 +1,28 @@ +.game{ + display:inline-flex; + margin: 50px; +} + +.rank_elements { + border-width:1px; + border-style:solid; + /* background-color: #5843e4; */ + border-color: grey; + /* overflow: scroll; */ + padding: 5px 100px; + font-size: 25px; +} + +.scroll { + /* border:3px; */ + /* background-color: #5843e4; */ + /* border-color: white; */ + overflow: scroll; + height: 70vh; +} + +.profilePic{ + height: 30px; + width: 30px; + border-radius: 50%; +} \ No newline at end of file diff --git a/containers/react/src/styles/Header.css b/containers/react/src/styles/Header.css index 0da0f3c1..81f24e09 100644 --- a/containers/react/src/styles/Header.css +++ b/containers/react/src/styles/Header.css @@ -41,6 +41,7 @@ /* justify-content: start; */ align-items: center; padding: 8px 0px 8px 16px; + list-style: none; height: 60px; } @@ -53,8 +54,10 @@ height: 100%; display: flex; align-items: center; - padding: 0 16px; - border-radius: 4px; + /* padding: 0 16px; */ + padding: 8px 8px 8px 8px; + + border-radius: 20px; } .nav-text a:hover { diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css index e9a41091..77843ff8 100644 --- a/containers/react/src/styles/Profile.css +++ b/containers/react/src/styles/Profile.css @@ -1,6 +1,12 @@ +.page { + text-align: center; + /* height: 50vh; */ + /* width: 50vh; */ + /* background-color: black; */ +} + .profile { flex-direction: row; - height: 100vh; color: white; } @@ -15,14 +21,73 @@ margin-top: 20px; } +.home{ + /* margin-top: -100px; */ + /* display:inline-block; */ + /* flex-direction: column; */ + /* position: absolute; */ + background-color: black; + text-align: center; + +} .history{ + display: inline-block; color: white; background-color: #5843e4; - border-radius: 4px; - padding: 8px 8px 8px 8px; - font-size: 30px; + border-radius: 20px; + padding: 14px; + font-size: 1.7rem; text-decoration: none; + font-weight: bold; +} + +.div_history { + flex-direction: row; + align-items: center; + margin-top: -80px; +} + +.edit_name { + margin-left: 2rem; + font-size: 1.7rem; + background: #5843e4; + color:#f5f5f5; + margin: 0 16px; + text-decoration: none; + padding: 10px 16px; + border-radius: 20px; +} + +.modal { + position:initial; + width: 400px; + height: 150px; + + margin: auto; + padding: 0 2rem; + border-radius: 12px; + display: flex; + flex-direction: column; + align-items: center; + background-color: rgb(42, 41, 41); +} + +.text { + background-color: black; + color: grey; + margin-bottom: 10px; +} + +.button{ + display: inline-block; + color: white; + background-color: #5843e4; + border-radius: 15px; + padding: 8px; + font-size: 20px; + text-decoration: none; + font-weight: bold; } /* canvas { margin-top: 20px; diff --git a/containers/react/src/styles/Win_Loss.css b/containers/react/src/styles/Win_Loss.css new file mode 100644 index 00000000..8fcc93d5 --- /dev/null +++ b/containers/react/src/styles/Win_Loss.css @@ -0,0 +1,75 @@ +.tab{ + display: flex; + flex-direction: column; + /* background-color: red; */ + height: 70vh; + /* padding: 15px; */ + /* overflow: scroll; */ + +} + +.scroll { + /* border:3px; */ + /* background-color: #5843e4; */ + /* border-color: white; */ + overflow: scroll; +} + +.elements { + border-width:1px; + border-style:solid; + /* background-color: #5843e4; */ + border-color: grey; + /* overflow: scroll; */ +} + +.title { + color: #5843e4; + /* font-size: 22px; */ + font-weight: bold; + margin-bottom: 25px; +} + +.content { + color: white; + /* font-size: 22px; */ + font-weight: bold; + display: flex; + flex-direction: column; + margin-bottom: 5px; +} + +.content2nd { + color: white; + /* font-size: 22px; */ + font-weight: bold; + display: flex; + flex-direction: row; + text-align: justify; + /* margin-bottom: 5px; */ +} + +.me { + text-align: start; +} + +.score { + text-align: center; +} + +.oponent { + align-items: flex-end; +} + +div::-webkit-scrollbar { + width: 1; +} + +div::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} + +div::-webkit-scrollbar-thumb { + background-color: red; + outline: 3px solid black; +} \ No newline at end of file diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css index 2971ff77..a96d36ff 100644 --- a/containers/react/src/styles/field.css +++ b/containers/react/src/styles/field.css @@ -1,5 +1,5 @@ .playButton { - background-color: rgb(0, 0, 0); + background-image: linear-gradient(90deg, #5843e4, #5a0760);; border-radius: 5vh; color: white; display: block; @@ -34,8 +34,8 @@ top: 0; left: 0; cursor: none; - width: 100%; - height: 100%; + /* width: 100%; */ + height: 100vh; } @media screen and (max-width: 768px) { @@ -51,4 +51,38 @@ height: 100%; width: 100%; } */ + } + + .checkbox{ + font-size: 25px; + left: 1px; + } + + + input[type=checkbox] { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; +} + +input[type=checkbox] { + border-radius: 4px; + height: 25px; + width: 25px; + background: grey; + /* border: 1px solid #ccc; */ +} + + input[type="checkbox"]:checked { + background: #5843e4; + margin:0px; + /* position: relative; */ + &:before { + font-family: FontAwesome; + /* content: '\f00c'; */ + display: block; + color: grey; + font-size: 40px; + /* position: absolute; */ + } } \ No newline at end of file