From a83b9a6e5b54c580c397a651b8bad4c12ccad057 Mon Sep 17 00:00:00 2001 From: Andrew Simonson Date: Mon, 10 Oct 2022 14:41:13 -0400 Subject: [PATCH] Make ChessEmbed react component forked from my own chess embed repo --- src/assets/chesscom-embed/default.svg | 1 + src/assets/chesscom-embed/diamonds.png | Bin 0 -> 1760 bytes src/assets/css/App.css | 99 +++++++++++++++++++++++++ src/componets/ChessBed.js | 92 +++++++++++++++++++++++ 4 files changed, 192 insertions(+) create mode 100644 src/assets/chesscom-embed/default.svg create mode 100644 src/assets/chesscom-embed/diamonds.png create mode 100644 src/componets/ChessBed.js diff --git a/src/assets/chesscom-embed/default.svg b/src/assets/chesscom-embed/default.svg new file mode 100644 index 0000000..926b604 --- /dev/null +++ b/src/assets/chesscom-embed/default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/chesscom-embed/diamonds.png b/src/assets/chesscom-embed/diamonds.png new file mode 100644 index 0000000000000000000000000000000000000000..95ebe038844506b58dbea0db398d5688177c0394 GIT binary patch literal 1760 zcmV<61|Ru}P)Ucp_ZT7 zIuJum$C+TgC4mGi*NfQ#Ei2!(y!=hQYGo)JG*^SV)?D%u?cHs2CQ4CQEl+!)Y|G6-!Ol zEGHae<^>~jlI0SU^vyXK8yb(PCR62n#b9@IA{d+@M)yz4Mugz1CtXWf|p{H^{jQk<7x4DK<(|InB8u7{0-lA6YR!EvpPF=Hgjb~H*mKqIog89{;{!+~P_ru{=lP^me}na1N^2?bIi%jlSBzf|Ul;Y;q#4YO;Mi3r)Rrz8+wx zA;*#uLBl_HECaI&Hi&uDWb?-A8gf4310Sg2`;VVLUSA^+J%*ZKx(3udaDEXA;O7rS z#Lsw)m`*eNSxxgh32_hKf4%;Sw(k+Q4r61CZH+y44K0{891L=bMn4V1AtrN>b95V> zgO^?t<1XA`UZ*?G&@^mk8kZs` zqhOXAmo!-thk7WOwZ_G1TutG4!3Y{xr*X9<2VN|S#+7ND&M{^kh8lsh#xP8maj~ay zVH(#p;Y7ix8W*N2HpY(L+Ry8#Vi;PfpR0A!(SgF|!4>{!)M=a#l>??|$T4Ep zW3(JY;b3}m`~%+Y_1E7#c_>ir9g&86)`NqHv#00005 literal 0 HcmV?d00001 diff --git a/src/assets/css/App.css b/src/assets/css/App.css index 9ab2d9a..16446dd 100644 --- a/src/assets/css/App.css +++ b/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 { diff --git a/src/componets/ChessBed.js b/src/componets/ChessBed.js new file mode 100644 index 0000000..2bb1d98 --- /dev/null +++ b/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 ( + <> +
+
+
+
+ {this.username} +
+
+
{this.state.name}
+
+
+
+
Ἓ
+

{this.state.ratings.rapid}

+
+
+
Ἔ
+

{this.state.ratings.blitz}

+
+
+
Ἕ
+

{this.state.ratings.bullet}

+
+
+
ἕ
+

{this.state.ratings.tactics}

+
+
+
+ + ); + } +}