From fdb40d260fb0f06726f05fd592cea8bd51ec87af Mon Sep 17 00:00:00 2001
From: dhruvil-codes <22ecdhr063@ldce.ac.in>
Date: Sun, 8 Oct 2023 14:31:08 +0530
Subject: [PATCH] Enhanced the code
---
pages/_app.js | 4 +-
pages/index.js | 140 ++++++++++++++++++++-------------------------
styles/globals.css | 117 ++++---------------------------------
3 files changed, 75 insertions(+), 186 deletions(-)
diff --git a/pages/_app.js b/pages/_app.js
index 2300201..b97e52f 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,5 @@
-import '@/styles/globals.css'
+import "@/styles/globals.css";
export default function App({ Component, pageProps }) {
- return
+ return ;
}
diff --git a/pages/index.js b/pages/index.js
index c982cd5..57372fb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
+
+
+
{
+ setUserName(e.target.value);
+ }}
+ />
+
+
+ {playerDetails && playerStats ? (
+ <>
+
+
Name : {playerDetails.name}
+
Username : {playerDetails.username}
+
Location : {playerDetails.location}
+
League: {playerDetails.league}
+
+ Best score in Rapid : {playerStats.chess_rapid.best.rating}
+
+
+ Best score in Blitz : {playerStats.chess_blitz.best.rating}
+
+
+ Best score in Bullet : {playerStats.chess_bullet.best.rating}
+
+
+ Best score in Daily: {playerStats.chess_daily.best.rating}
+
+ >
+ ) : null}
+
+ );
}
-export default Chess
\ No newline at end of file
+export default Chess;
diff --git a/styles/globals.css b/styles/globals.css
index d4f491e..672c642 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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 */
}
}