Skip to content

Commit

Permalink
Enhanced the code
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdhruvil
mdhruvil committed Oct 8, 2023
1 parent 2906eed commit fdb40d2
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 186 deletions.
4 changes: 2 additions & 2 deletions pages/_app.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '@/styles/globals.css'
import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}
140 changes: 61 additions & 79 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,65 @@
async function get_stats(){

try{
const inputfieldname = document.getElementById("username")
const username = inputfieldname.value

const player_details_url = `https://api.chess.com/pub/player/${username}`
const player_details_response = await fetch(player_details_url)

const player_details = await player_details_response.json();


document.querySelector("#avatar_image").src = player_details.avatar
document.querySelector("#avatar_name").innerHTML = player_details.name


const player_stats_url = `https://api.chess.com/pub/player/${username}/stats`
const player_stats_response = await fetch(player_stats_url)

const player_stats = await player_stats_response.json();

const rapid_best_stats = player_stats.chess_rapid.best
const blitz_best_stats = player_stats.chess_blitz.best
const bullet_best_stats = player_stats.chess_bullet.best
const daily_best_stats = player_stats.chess_daily.best


let dictionary = {
photo : player_details.avatar,
name : player_details.name,
username: player_details.username,
location: player_details.location,
league : player_details.league,
rapid_best : rapid_best_stats["rating"],
blitz_best : blitz_best_stats["rating"],
bullet_best: bullet_best_stats["rating"],
daily_best:daily_best_stats["rating"]
}

document.querySelector("#avatar_image").src = dictionary.photo
document.querySelector("#avatar_name").innerHTML = "Name :" + dictionary.name
document.querySelector("#avatar_username").innerHTML = "Username :" +dictionary.username
document.querySelector("#avatar_league").innerHTML = "League :" + dictionary.league
document.querySelector("#avatar_rapid").innerHTML = "Best score in Rapid :" + dictionary.rapid_best
document.querySelector("#avatar_bullet").innerHTML = "Best score in Bullet :" +dictionary.bullet_best
document.querySelector("#avatar_blitz").innerHTML = "Best score in Blitz :" + dictionary.blitz_best
document.querySelector("#avatar_daily").innerHTML = "Best score in Daily :" + dictionary.daily_best
document.querySelector("#avatar_location").innerHTML = "Location :" + dictionary.location


console.log(dictionary)

}catch{
console.log("runtime error")
}

}

function Chess(){
import { useState } from "react";

function Chess() {
const [userName, setUserName] = useState("");
const [playerDetails, setPlayerDetails] = useState();
const [playerStats, setPlayerStats] = useState();

const get_stats = async () => {
try {
const player_details_url = `https://api.chess.com/pub/player/${userName}`;
const player_details_response = await fetch(player_details_url);
const player_details = await player_details_response.json();

const player_stats_url = `https://api.chess.com/pub/player/${userName}/stats`;
const player_stats_response = await fetch(player_stats_url);
const player_stats = await player_stats_response.json();

setPlayerDetails(player_details);
setPlayerStats(player_stats);
} catch (error) {
console.log(error);
alert(error.message);
}
};

return (
<div>
<label>Name</label>
<input type="text" name="name" id="username" onChange={get_stats}/> <br></br>

<img src="" id="avatar_image"></img> <br></br>
<p1 id="avatar_name"></p1> <br></br>
<p1 id="avatar_username"></p1> <br></br>
<p1 id="avatar_location"></p1> <br></br>
<p1 id="avatar_league"></p1> <br></br>
<p1 id="avatar_rapid"></p1> <br></br>
<p1 id="avatar_blitz"></p1> <br></br>
<p1 id="avatar_bullet"></p1> <br></br>
<p1 id="avatar_daily"></p1> <br></br>




</div>
)
<div className="center">
<label>Name</label>
<input
type="text"
name="name"
id="username"
value={userName}
onChange={(e) => {
setUserName(e.target.value);
}}
/>
<button onClick={get_stats}>Get Stats</button>
<br></br>
{playerDetails && playerStats ? (
<>
<img src={playerDetails.avatar}></img>
<p id="avatar_name">Name : {playerDetails.name}</p>
<p id="avatar_username">Username : {playerDetails.username}</p>
<p id="avatar_location">Location : {playerDetails.location}</p>
<p id="avatar_league">League: {playerDetails.league}</p>
<p id="avatar_rapid">
Best score in Rapid : {playerStats.chess_rapid.best.rating}
</p>
<p id="avatar_blitz">
Best score in Blitz : {playerStats.chess_blitz.best.rating}
</p>
<p id="avatar_bullet">
Best score in Bullet : {playerStats.chess_bullet.best.rating}
</p>
<p id="avatar_daily">
Best score in Daily: {playerStats.chess_daily.best.rating}
</p>
</>
) : null}
</div>
);
}

export default Chess
export default Chess;
117 changes: 12 additions & 105 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,14 @@
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;

--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);

--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);

--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;

--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);

--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);

--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html,
body {
max-width: 100vw;
overflow-x: hidden;
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}

a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
.center {
/* border: 1px solid; */
margin: auto;
width: 50%;
padding: 2px;
}

@media screen and (max-width: 800px) {
.center {
width: 100%;
border: None;
padding: 1px; /* The width is 100%, when the viewport is 800px or smaller */
}
}

0 comments on commit fdb40d2

Please sign in to comment.