diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 16446dd..84b3349 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -159,6 +159,7 @@ a {
}
.foreground {
+ position: relative;
padding-top: 7rem;
padding-left: 8rem;
width: calc(100%-8rem);
@@ -174,7 +175,38 @@ a {
max-width: min(90%, 40rem);
}
+.homeground {
+ position: relative;
+ padding-top: 7rem;
+ width: calc(100%-8rem);
+ min-height: calc(100vh - 8rem);
+ padding-bottom: 1rem;
+ overflow: hidden;
+ transition: .4s;
+}
+
+.noBackground {
+ background: none;
+}
+
+.relative {
+ position: relative;
+}
+
+.noPad {
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+}
+
.centerContent {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+}
+
+.centerContent>div {
margin-top: 30vh;
margin-left: auto;
margin-right: auto;
@@ -186,6 +218,18 @@ a {
display: inline-block;
background-color: rgb(44, 44, 44, .75);
border: solid black 4px;
+ text-align: center;
+}
+
+.flex {
+ display: flex;
+ justify-content: space-around;
+}
+
+.onRight {
+ position: absolute;
+ right: 0;
+ top: 0;
}
#Vertical {
@@ -527,10 +571,12 @@ a {
justify-content: center;
}
-.chess{
+.chess {
width: 300px;
height: calc(125px + 2em);
border: none;
+ /* transform: scale(.8);
+ float: right; */
}
#chessProfile {
@@ -544,10 +590,22 @@ a {
}
.chessInfo {
- background-color: rgba(0,0,0,.3);;
+ background-color: rgba(0, 0, 0, .3);
+ ;
margin: 1em;
}
+.bottomtext {
+ font-size: x-small;
+ margin: 3px;
+ color: white;
+ text-align: right;
+}
+
+.black {
+ background-color: black;
+}
+
.identity {
margin-right: 0px;
}
@@ -569,7 +627,7 @@ a {
height: 100%;
}
-.pfpContainer > div {
+.pfpContainer>div {
display: flex;
flex-direction: column;
justify-content: center;
@@ -673,11 +731,23 @@ a {
padding-bottom: 36px;
}
+ .homeground {
+ width: 90%;
+ padding-bottom: 36px;
+ display: flex;
+ margin: auto;
+ }
+
.centeredForeground {
margin-left: -1.5rem;
/* remove .foreground excess margin */
}
+ .onRight {
+ position: unset;
+ margin-top: 3rem;
+ }
+
.col {
width: 90%;
margin-bottom: 3rem;
diff --git a/src/componets/ChessBed.js b/src/componets/ChessBed.js
index 2bb1d98..cdbd5d7 100644
--- a/src/componets/ChessBed.js
+++ b/src/componets/ChessBed.js
@@ -1,6 +1,6 @@
import React from "react";
import bg from "../assets/chesscom-embed/diamonds.png";
-import def from '../assets/chesscom-embed/default.svg'
+import def from "../assets/chesscom-embed/default.svg";
export default class ChessBed extends React.Component {
constructor(props) {
@@ -8,15 +8,15 @@ export default class ChessBed extends React.Component {
this.seeAccount = this.seeAccount.bind(this, props.username);
this.addChessEmbed = this.addChessEmbed.bind(this, props.username);
this.state = {
- name: 'Loading..',
+ name: "Loading..",
pic: def,
ratings: {
- rapid: 'Loading',
- blitz: 'Loading',
- bullet: 'Loading',
- tactics: 'Loading'
- }
- }
+ rapid: "Loading",
+ blitz: "Loading",
+ bullet: "Loading",
+ tactics: "Loading",
+ },
+ };
this.diamonds = {
background: "black",
backgroundImage: `linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url(${bg})`,
@@ -26,64 +26,78 @@ export default class ChessBed extends React.Component {
seeAccount(username) {
window.top.location.href = "https://chess.com/member/" + username;
}
-
- async addChessEmbed(username){
+
+ async addChessEmbed(username) {
let user = await fetch(`https://api.chess.com/pub/player/${username}`);
- let stats = await fetch(`https://api.chess.com/pub/player/${username}/stats`);
- if(user.status === 200){
- user = await user.json();
- stats = await stats.json();
- this.setState({
- name: user['username'],
- pic: user.avatar,
- ratings: {
- rapid: stats.chess_rapid.last.rating,
- blitz: stats.chess_blitz.last.rating,
- bullet: stats.chess_bullet.last.rating,
- tactics: stats.tactics.highest.rating
- }
- });
- }
- else {
- this.setState({
- name: "User Not Found"
- });
+ let stats = await fetch(
+ `https://api.chess.com/pub/player/${username}/stats`
+ );
+ if (user.status === 200) {
+ user = await user.json();
+ stats = await stats.json();
+ this.setState({
+ name: user["username"],
+ pic: user.avatar,
+ ratings: {
+ rapid: stats.chess_rapid.last.rating,
+ blitz: stats.chess_blitz.last.rating,
+ bullet: stats.chess_bullet.last.rating,
+ tactics: stats.tactics.highest.rating,
+ },
+ });
+ } else {
+ this.setState({
+ name: "User Not Found",
+ });
}
}
- componentDidMount(){
+ componentDidMount() {
this.addChessEmbed();
}
render() {
return (
<>
-
-
-
-
-
+
+
+
+
+
+
+
+
+
{this.state.name}
+
+
+
+
Ἓ
+
{this.state.ratings.rapid}
+
+
+
Ἔ
+
{this.state.ratings.blitz}
+
+
+
Ἕ
+
{this.state.ratings.bullet}
+
+
+
ἕ
+
{this.state.ratings.tactics}
-
{this.state.name}
-
-
-
Ἓ
-
{this.state.ratings.rapid}
-
-
-
Ἔ
-
{this.state.ratings.blitz}
-
-
-
Ἕ
-
{this.state.ratings.bullet}
-
-
-
ἕ
-
{this.state.ratings.tactics}
-
+
+ Chess.com Stat Embed by Andrew Simonson
diff --git a/src/index.js b/src/index.js
index 50fe40e..92e9aab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
-import reportWebVitals from './scripts/reportWebVitals';
const container = document.getElementById('root');
const root = createRoot(container);
@@ -10,9 +9,3 @@ root.render(
//
);
-
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 3fdf45c..479f98c 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,15 +1,26 @@
-import React from 'react';
+import React from "react";
+import ChessBed from "../componets/ChessBed.js";
export default function Home() {
- return (
-
-
-
-
Andrew Simonson
- Computer Science student at Rochester Institute of Technology
-
-
+ return (
+
+
+
+
+
+
Andrew Simonson
+
+ Computer Science student at Rochester Institute of Technology
+
+
+
- )
-}
\ No newline at end of file
+
+
+ );
+}
diff --git a/src/scripts/reportWebVitals.js b/src/scripts/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/src/scripts/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;