rank et option de jeu
This commit is contained in:
PrStein
parent
6d0839f047
commit
a7d2917f91
10
containers/react/package-lock.json
generated
10
containers/react/package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import DefaultPic from '../assets/profile.jpg';
|
||||
|
||||
const UserProfile = [
|
||||
{
|
||||
Pic: DefaultPic,
|
||||
UserName: "Dipper Ratman",
|
||||
},
|
||||
]
|
||||
|
||||
export default UserProfile
|
||||
58
containers/react/src/DataBase/DataRank.js
Normal file
58
containers/react/src/DataBase/DataRank.js
Normal file
@ -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',
|
||||
},
|
||||
]
|
||||
8
containers/react/src/DataBase/DataUserProfile.js
Normal file
8
containers/react/src/DataBase/DataUserProfile.js
Normal file
@ -0,0 +1,8 @@
|
||||
import DefaultPic from '../assets/profile.jpg';
|
||||
|
||||
export const UserProfile = {
|
||||
Pic: DefaultPic,
|
||||
UserName: 'Dipper Ratman',
|
||||
}
|
||||
|
||||
// export default UserProfile
|
||||
@ -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 () {
|
||||
|
||||
<Route exact path="/token" element={<SuccessToken />}/>
|
||||
<Route path="/game" element={<PlayButton />}/>
|
||||
<Route exact path="/pong" element={<PlayButton />}/>
|
||||
<Route exact path="/pong" element={<Game />}/>
|
||||
<Route exact path="/pong/play" element={<Field />}/>
|
||||
{/* <Route path="/profile" element={<PlayButton />}/> */}
|
||||
|
||||
|
||||
@ -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() {
|
||||
<div className="notClicked" id="canvas_container">
|
||||
<button onClick={handleButtonClick} className="playButton">Play</button>
|
||||
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
|
||||
|
||||
<div className='checkbox'>
|
||||
<p><input type="checkbox" value="superpower"/> Super Power </p>
|
||||
<p><input type="checkbox" value="obstacle"/> Obstacle </p>
|
||||
<p><input type="checkbox" value="speed"/> Faster and Faster </p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
containers/react/src/components/Game/Ranking.jsx
Normal file
27
containers/react/src/components/Game/Ranking.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import React from "react"
|
||||
import {Rank} from '../../DataBase/DataRank.js'
|
||||
import defaultpic from '../../assets/profile.jpg'
|
||||
|
||||
function Ranking(){
|
||||
return (
|
||||
<div>
|
||||
<h1 className='title'>Ranking</h1>
|
||||
<div className='scroll'>
|
||||
{Rank.map((item, index) => {
|
||||
return (
|
||||
<div className='rank_elements'>
|
||||
<li key={index}>
|
||||
<div>
|
||||
<h4>{item.rank}: {item.name} <img className="profilePic" src={defaultpic}/></h4>
|
||||
</div>
|
||||
{/* <h4 className='content'>{item.openent}</h4> */}
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Ranking
|
||||
52
containers/react/src/components/Profile/EditName.jsx
Normal file
52
containers/react/src/components/Profile/EditName.jsx
Normal file
@ -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 (
|
||||
// <Backdrop onClick={handleClose}>
|
||||
<motion.div
|
||||
className="modal"
|
||||
variants={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit">
|
||||
<h2>Type your new name</h2>
|
||||
<input className="text" type="text" value={username} onChange={handler} handleClose/>
|
||||
<div onClick={() => {UserProfile.UserName = username;}}>
|
||||
<Link className="button">change</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
// </Backdrop>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalEdit
|
||||
77
containers/react/src/components/Profile/Win_Loss.jsx
Normal file
77
containers/react/src/components/Profile/Win_Loss.jsx
Normal file
@ -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 (
|
||||
|
||||
<div className='tab'>
|
||||
<h1 className='title'>Match history Win/Loss</h1>
|
||||
<div className='scroll'>
|
||||
{DBWinLoss.map((item, index) => {
|
||||
return (
|
||||
<div className='elements'>
|
||||
<li key={index}>
|
||||
<h4 className='content'>{item.title}</h4>
|
||||
<div className='content2nd'>
|
||||
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score} {item.openent}</h4>
|
||||
</div>
|
||||
{/* <h4 className='content'>{item.openent}</h4> */}
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Card.propTypes = {
|
||||
// label: PropTypes.string,
|
||||
// title: PropTypes.string.isRequired,
|
||||
// picture: PropTypes.string,
|
||||
// }
|
||||
|
||||
export default WinLoss
|
||||
@ -55,9 +55,11 @@ const Modal = ({ handleClose }) => {
|
||||
</li>
|
||||
<div
|
||||
className="nav-menu">
|
||||
<ul className='nav-menu-items'>
|
||||
{SidebarData.map((item, index) => {
|
||||
return (
|
||||
<motion.div whileHover={{scale: 1.1}}>
|
||||
<motion.div whileHover={{scale: 1.1}}
|
||||
className>
|
||||
<li key={index} className={item.cName}>
|
||||
<Link to={item.path}>
|
||||
{item.icon}
|
||||
@ -67,6 +69,8 @@ const Modal = ({ handleClose }) => {
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</Backdrop>
|
||||
|
||||
@ -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 (
|
||||
<CardWrapper>
|
||||
<CardLabel1>Match history Win/Loss</CardLabel1>
|
||||
{/* <CardImage src={picture} alt="freelance" height={80} width={80} /> */}
|
||||
{DBWinLoss.map((item, index) => {
|
||||
return (
|
||||
<li key={index}>
|
||||
<CardLabel2>{item.title}</CardLabel2>
|
||||
<CardLabel2>{item.score}</CardLabel2>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</CardWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
// Card.propTypes = {
|
||||
// label: PropTypes.string,
|
||||
// title: PropTypes.string.isRequired,
|
||||
// picture: PropTypes.string,
|
||||
// }
|
||||
|
||||
export default WinLoss
|
||||
18
containers/react/src/pages/Game.jsx
Normal file
18
containers/react/src/pages/Game.jsx
Normal file
@ -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 (
|
||||
<div className="game">
|
||||
<div className="game">
|
||||
<Ranking/>
|
||||
</div>
|
||||
<div className="game">
|
||||
<PlayButton/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Game
|
||||
@ -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 (
|
||||
<div className="profile">
|
||||
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
|
||||
<h1>{UserProfile.UserName}</h1>
|
||||
<motion.div onClick={() => (modalOpen ? close() : open())}>
|
||||
<Link to="#" className="edit_name">
|
||||
<AiFillEdit/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
onExitComplete={() => null}>
|
||||
{modalOpen && <ModalEdit modalOpen={modalOpen} handleClose={close}/>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Home () {
|
||||
let name = UserProfile.UserName
|
||||
const [move, setmove ] = useState(false);
|
||||
return (
|
||||
<motion.div className="App"
|
||||
<motion.div className="page"
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
exit={{opacity: 0}}>
|
||||
<div className="profile">
|
||||
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
|
||||
<h1>Dipper Ratman</h1>
|
||||
|
||||
<div>
|
||||
<div className="history">
|
||||
<Link to='#' className=" history">Match history</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="home">
|
||||
<motion.div animate={{x: move ? -200: 170}}
|
||||
transition={{type: "tween", duration: 0.5}}>
|
||||
<Profile/>
|
||||
</motion.div>
|
||||
<motion.div animate={{opacity: !move ? 0 : 1}}>
|
||||
<WinLoss/>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="div_history"
|
||||
// className="history"
|
||||
onClick={ () => setmove(!move)}>
|
||||
<Link to="#" className="history"><AiOutlineHistory/> Match History</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
28
containers/react/src/styles/Game.css
Normal file
28
containers/react/src/styles/Game.css
Normal file
@ -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%;
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
75
containers/react/src/styles/Win_Loss.css
Normal file
75
containers/react/src/styles/Win_Loss.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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; */
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user