vergnet/site-proximo
1
2
Fork 1
Code Issues Pull requests Releases Wiki Activity

First_Page

Browse source
This commit is contained in:
Baptiste Marty 2020-09-18 13:04:21 +02:00
parent 6ceeb0abf6
commit 9c4ceacf0d
11 changed files with 921 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

799
Site-Proximo-v2/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
Site-Proximo-v2/package.json
View file

@ -1,12 +1,15 @@
{
"name": "mon-app",
"name": "Site_Proximo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.2",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},

6
Site-Proximo-v2/public/index.html
View file

@ -15,6 +15,8 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Wellfleet&display=swap" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
@ -24,9 +26,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Proximo</title>
</head>
<body>
<body style="background-color:black">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--

30
Site-Proximo-v2/src/css/Components/button_sass.scss Normal file
View file

@ -0,0 +1,30 @@
.button {
display:flex;
justify-content: center;
align-items: center;
background-image: linear-gradient( #5EE283, #057B26);
border-radius: 4vw;
box-shadow: -7px 7px 7px rgba(255, 255, 255, 0.7);
height:7vw;
width:100%;
}
.buttonTxt {
color : black;
margin : 2vw;
text-align: center;
font-family: 'Wellfleet', cursive;
font-size:3vw;
}
.button:hover {
border: 3px solid #FFFFFF;
box-sizing: border-box;
border-radius: 4vw;
}
.button:active {
background-image: linear-gradient( #057B26, #5EE283);
}

9
Site-Proximo-v2/src/css/Components/header_sass.scss Normal file
View file

@ -0,0 +1,9 @@
.header {
color : black;
text-align: center;
font-family: 'Wellfleet', cursive;
font-size:5vw;
background-color: orangered;
width: 100%;
}

30
Site-Proximo-v2/src/css/Views/home_sass.scss Normal file
View file

@ -0,0 +1,30 @@
.home {
height:50vw;
background-color:black;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
height:40vw;
}
.contentTxt {
display: flex;
flex:2;
align-items: center;
font-family: 'Wellfleet', cursive;
font-size:4vw;
color:white;
text-align: center;
width:40%;
}
.buttonBlock {
display: flex;
flex:1;
justify-content: center;
align-items: center;
}

50
Site-Proximo-v2/src/index.css
View file

@ -1,50 +0,0 @@
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}

63
Site-Proximo-v2/src/index.js
View file

@ -1,67 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
import Home from './js/Views/home';
ReactDOM.render(
<Game />,
<Home></Home>,
document.getElementById('root')
);

14
Site-Proximo-v2/src/js/Components/button.js Normal file
View file

@ -0,0 +1,14 @@
import React from 'react';
import '../../css/Components/button_sass.scss'
export default class Button extends React.Component {
render() {
const title = 'Connexion';
return (
<div className="button">
<p className="buttonTxt">{title}</p>
</div>
);
}
}

13
Site-Proximo-v2/src/js/Components/header.js Normal file
View file

@ -0,0 +1,13 @@
import React from 'react';
import '../../css/Components/header_sass.scss'
export default class Header extends React.Component {
render() {
const title = 'Proximo';
return (
<div className="header">
{title}
</div>
);
}
}

20
Site-Proximo-v2/src/js/Views/home.js Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import '../..//css/Views/home_sass.scss';
import Header from '../Components/header';
import Button from '../Components/button';
export default class Home extends React.Component {
render() {
return (
<div className="home">
<Header/>
<div className="content">
<div className="contentTxt">Bienvenue sur le site de la supérette de l'INSA !</div>
<div className="buttonBlock">
<Button/>
</div>
</div>
</div>
);
}
}