Skip to content

Commit

Permalink
Fix profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@Assios
Assios committed Aug 26, 2023
1 parent 817d75e commit 3a6c085
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 54 deletions.
130 changes: 76 additions & 54 deletions app/routes/profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import { useContext, useState, useEffect } from "react";
import { toast } from "react-hot-toast";
import { useLocalStorage } from "~/hooks/useLocalStorage";
import { isValidPlayerStats } from "~/utils/utils";
import { idToColor, isValidPlayerStats } from "~/utils/utils";
import { AuthContext } from "../components/AuthProvider/AuthProvider";
import {
updateUsername,
isUsernameTaken,
importStatsFromLocalStorage,
} from "../firebase/utils";

import { EnvelopeIcon } from "@heroicons/react/20/solid";

export default function Profile() {
const { user, updateUser } = useContext(AuthContext);

const [newUsername, setNewUsername] = useState("");
const [changing, setChanging] = useState(false);
const [message, setMessage] = useState("");
Expand Down Expand Up @@ -115,67 +118,86 @@ export default function Profile() {
}
};

const profile = user
? {
name: user.username,
email: user.email,
avatar: `https://ui-avatars.com/api/?name=${
user.username
}&size=20&background=${idToColor(user.uid)}`, // replace with user avatar link if any
backgroundImage: "https://via.placeholder.com/1920x1080", // replace with a user background link if any
}
: null;

if (user) {
return (
<div className="flex justify-center items-center">
<div className="mt-4 w-full max-w-md p-8 m-4 shadow-md rounded">
<h1 className="text-2xl font-bold mb-5 text-center">
Welcome, {user.username}!
</h1>

<div className="mb-6 space-y-4">
<div className="flex items-center space-x-2">
<span className="label-text">Username:</span>
<span>{user.username}</span>
<div>
<div>
<img
className="h-32 w-full object-cover lg:h-48"
src={profile.backgroundImage}
alt=""
/>
</div>
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
<div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
<div className="flex">
<img
className="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32"
src={profile.avatar}
alt=""
/>
</div>
<div className="flex items-center space-x-2">
<span className="label-text">Email:</span>
<span>{user.email}</span>
<div className="mt-6 min-w-0 flex-1 sm:pb-1">
<h1 className="truncate text-2xl font-bold text-gray-900">
{profile.name}
</h1>
<div className="flex flex-row items-center space-x-2 mt-4">
<EnvelopeIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
<span className="text-sm text-gray-600">{profile.email}</span>
</div>
</div>
</div>

<hr className="mb-6" />

<div className="space-y-4">
{!importedDate && localStats && (
<div>
<h2 className="text-xl font-bold mb-4">
Import your game stats
</h2>
<p>
If you've been playing Chessguessr, your stats are saved in
your browser. By importing them, you can keep them safe on
your account and access them on any device. Please note, stats
can be imported only once.
</p>

<div className="mt-4">
<h3 className="font-semibold mb-2">Your Local Stats:</h3>
<ul className="list-disc ml-4">
<li>Games Played: {localStats.gamesPlayed}</li>
<li>Current Streak: {localStats.currentStreak}</li>
<li>Guess distribution:</li>
<ul className="list-disc ml-6">
<li>1: {localStats.guesses["1"]}</li>
<li>2: {localStats.guesses["2"]}</li>
<li>3: {localStats.guesses["3"]}</li>
<li>4: {localStats.guesses["4"]}</li>
<li>5: {localStats.guesses["5"]}</li>
</ul>
{!importedDate && localStats && (
<div className="mt-8">
<h2 className="text-xl font-bold mb-4">Import your game stats</h2>
<p>
If you've been playing Chessguessr, your stats are saved in your
browser. By importing them, you can keep them safe on your
account and access them on any device. Please note, stats can be
imported only once.
</p>

<div className="mt-4">
<h3 className="font-semibold mb-2">Your Local Stats:</h3>
<ul className="list-disc ml-4">
<li>Games Played: {localStats.gamesPlayed}</li>
<li>Current Streak: {localStats.currentStreak}</li>
<li>Guess distribution:</li>
<ul className="list-disc ml-6">
<li>1: {localStats.guesses["1"]}</li>
<li>2: {localStats.guesses["2"]}</li>
<li>3: {localStats.guesses["3"]}</li>
<li>4: {localStats.guesses["4"]}</li>
<li>5: {localStats.guesses["5"]}</li>
</ul>
</div>

<div className="form-control w-full max-w-xs mt-4">
<button
className="btn btn-primary"
onClick={importLocalStorageStats}
>
Import Stats to Account
</button>
</div>
</ul>
</div>
)}
</div>

<div className="form-control w-full max-w-xs mt-4">
<button
className="inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
onClick={importLocalStorageStats}
>
<span>Import Stats to Account</span>
</button>
</div>
</div>
)}

{message && (
<div className="mt-4 text-center font-semibold text-red-500 mb-4">
Expand Down
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"dependencies": {
"@firebase/auth": "^1.1.0",
"@firebase/storage": "^0.11.2",
"@heroicons/react": "^2.0.18",
"@react-chess/chessground": "^1.2.4",
"@remix-run/node": "^1.5.1",
"@remix-run/react": "^1.5.1",
Expand Down

1 comment on commit 3a6c085

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for chessguessr ready!

✅ Preview
https://chessguessr-faje15xm3-assios.vercel.app

Built with commit 3a6c085.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.