Make ChessEmbed react component

forked from my own chess embed repo

src/assets/chesscom-embed/default.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve"><style>.st2{fill:#bcbbb7}</style><path fill="#e7e5e3" d="M0 0h400v400H0z"/><path d="M275.8 269.6c-52.8-40.2-46.9-75.2-47.6-89.5h32.2c3.8-6.6 5.7-14 5.7-21.5l-36.5-24c22.6-16.3 27.8-47.9 11.5-70.5-5.6-7.7-13.2-13.8-22.1-17.3-5.9-2.4-47.2 133.4-47.2 133.4-.1 3.1-.2 7.2-.2 12.1 0 13.5 33.1 11.4 31.4 23.4-2.6 17.8-3.2 31.3-18.5 74.1-10.4 28.9-79.4 0-84.3 14.2-3.6 10.6-5.3 21.7-5.2 32.8 0 1.3 2.7 20.4 105.1 20.4s105.1-19.1 105.1-20.4c-.1-29.2-10.9-53.1-29.4-67.2z" fill="#898785"/><path class="st2" d="M198.1 287.6c5.7-25.9 10.7-53.5 13.8-70 3.8-20.6-27.5-24.3-40.3-26.2-.6 17.6-5.5 46.2-47.4 78.2-11.3 8.6-19.7 20.9-24.6 35.8 11.3 5.5 26.4 8.8 49.7 8.8 14.9 0 42.6 1.8 48.8-26.6zM220.1 180.1c5-12.9 4.3-21.5 4.3-21.5l-20.7-24c22-9.4 35.2-27 35.2-47.5 0-15.8-7.4-30.6-19.9-40.2-25.8-10.5-55.3 1.9-65.9 27.7-8.8 21.6-1.7 46.4 17.2 60l-36.5 24c0 7.6 1.9 15 5.7 21.5h80.6z"/><path d="M197.1 53.3c29.1 4.5-13.4 38.4-26.9 36.8-12.7-1.6-.4-41 26.9-36.8z" fill="#dad7d5"/></svg>

src/assets/css/App.css

@@ -527,6 +527,105 @@ a {
   justify-content: center;
 }
 
+.chess{
+  width: 300px;
+  height: calc(125px + 2em);
+  border: none;
+}
+
+#chessProfile {
+  border-radius: 5px;
+  width: 300px;
+  height: calc(125px + 2em);
+  color: #AAAAAA;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  cursor: pointer;
+}
+
+.chessInfo {
+  background-color: rgba(0,0,0,.3);;
+  margin: 1em;
+}
+
+.identity {
+  margin-right: 0px;
+}
+
+.identity h5 {
+  margin: 0px;
+  margin-top: -25px;
+  background: black;
+  z-index: 50;
+  position: relative;
+  width: 90%;
+  margin-left: 10px;
+
+}
+
+.pfpContainer {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.pfpContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pfp {
+  border-radius: 50%;
+  width: 100px;
+  text-align: center;
+}
+
+.vContainer {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.vItem {
+  display: inline-block;
+}
+
+.vItem p {
+  margin: 0px;
+  display: inline;
+}
+
+.chessIcon {
+  display: inline-block;
+  font-family: Chess New;
+  font-size: x-large;
+  width: 25px;
+  text-align: center;
+}
+
+.rapid {
+  color: #6c9d41;
+}
+
+.blitz {
+  color: #f7c045;
+}
+
+.bullet {
+  color: #a58a45;
+}
+
+.puzzles {
+  color: #db7e3b;
+}
+
+@font-face {
+  font-family: Chess New;
+  src: url('https://www.chess.com/bundles/web/fonts/chessglyph-new.0cc8115c.woff2');
+}
+
 @media screen and (max-width: 1200px) {
 
   #menu {

src/componets/ChessBed.js

@@ -0,0 +1,92 @@
+import React from "react";
+import bg from "../assets/chesscom-embed/diamonds.png";
+import def from '../assets/chesscom-embed/default.svg'
+
+export default class ChessBed extends React.Component {
+  constructor(props) {
+    super(props);
+    this.seeAccount = this.seeAccount.bind(this, props.username);
+    this.addChessEmbed = this.addChessEmbed.bind(this, props.username);
+    this.state = {
+      name: 'Loading..',
+      pic: def,
+      ratings: {
+        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})`,
+    };
+  }
+
+  seeAccount(username) {
+    window.top.location.href = "https://chess.com/member/" + 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"
+        });
+    }
+  }
+
+  componentDidMount(){
+    this.addChessEmbed();
+  }
+
+  render() {
+    return (
+      <>
+        <div id="chessProfile" onClick={this.seeAccount} style={this.diamonds}>
+          <div className="identity chessInfo">
+            <div className="pfpContainer">
+              <div>
+                <img className="pfp" src={this.state.pic} alt={this.username} />
+              </div>
+            </div>
+            <h5 className="chessName">{this.state.name}</h5>
+          </div>
+          <div className="vContainer chessInfo">
+            <div className="vItem">
+              <div className="chessIcon rapid">Ἓ</div>
+              <p>{this.state.ratings.rapid}</p>
+            </div>
+            <div className="vItem">
+              <div className="chessIcon blitz">Ἔ</div>
+              <p>{this.state.ratings.blitz}</p>
+            </div>
+            <div className="vItem">
+              <div className="chessIcon bullet">Ἕ</div>
+              <p>{this.state.ratings.bullet}</p>
+            </div>
+            <div className="vItem">
+              <div className="chessIcon puzzles">ἕ</div>
+              <p>{this.state.ratings.tactics}</p>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}