Skip to content

Commit

Permalink
Import
Browse files Browse the repository at this point in the history
  • Loading branch information
@Assios
Assios committed Aug 28, 2023
1 parent fdfdfa0 commit 2ee78a2
Showing 1 changed file with 86 additions and 68 deletions.
154 changes: 86 additions & 68 deletions app/routes/profile/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import { useContext, useState, useEffect } from "react";
import { toast } from "react-hot-toast";
import { useLocalStorage } from "~/hooks/useLocalStorage";
import {
getGravatarUrlWithDefault,
idToColor,
isValidPlayerStats,
} from "~/utils/utils";
import { getGravatarUrlWithDefault, isValidPlayerStats } from "~/utils/utils";
import { AuthContext } from "../../components/AuthProvider/AuthProvider";
import {
updateUsername,
Expand All @@ -17,12 +13,28 @@ import trianglify from "trianglify";
import { EnvelopeIcon } from "@heroicons/react/20/solid";

function generateBackground(emailHash: string) {
const seedNumber = Array.from(emailHash).reduce(
(acc, char) => acc + char.charCodeAt(0),
0
);

const colors = ["#4b6bfc", "#fbbd25", "#11b97f"];
const shuffledColors = colors
.slice(seedNumber % colors.length)
.concat(colors.slice(0, seedNumber % colors.length));

const cellSize = 20 + (seedNumber % 181);
const variance = 0.1 + 0.8 * ((seedNumber % 100) / 100);

const pattern = trianglify({
width: 1920,
height: 1080,
height: 600,
seed: emailHash,
cellSize: 80,
variance: 0.25,
cellSize: cellSize,
variance: variance,
palette: {
default: shuffledColors,
},
});

const canvas = pattern.toCanvas();
Expand Down Expand Up @@ -151,75 +163,81 @@ export default function Profile() {
<div>
<img
className="h-32 w-full object-cover lg:h-48"
src={profile.backgroundImage}
src={profile ? 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">
<div
className="tooltip"
data-tip="Profile picture fetched from Gravatar using your email. Update it on gravatar.com."
>
<img
className="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32"
src={profile.avatar}
alt=""
/>
</div>
</div>
<div className="mt-6 min-w-0 flex-1 sm:pb-1">
<h1 className="truncate text-2xl font-bold">{profile.name}</h1>
<div className="flex flex-row items-center space-x-2 mt-4">
<EnvelopeIcon className="h-5 w-5" aria-hidden="true" />
<span className="text-sm">{profile.email}</span>
</div>
</div>
{profile && (
<>
<div className="flex">
<div
className="tooltip"
data-tip="Profile picture fetched from Gravatar using your email. Update it on gravatar.com."
>
<img
className="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32"
src={profile.avatar}
alt=""
/>
</div>
</div>
<div className="mt-6 min-w-0 flex-1 sm:pb-1">
<h1 className="truncate text-2xl font-bold">
{profile.name}
</h1>
<div className="flex flex-row items-center space-x-2 mt-4">
<EnvelopeIcon className="h-5 w-5" aria-hidden="true" />
<span className="text-sm">{profile.email}</span>
</div>
</div>
</>
)}
</div>

{!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>
<div className="space-y-4 mt-8">
{!importedDate && localStats && (
<div className="p-6 rounded-lg shadow-sm bg-white">
<h2 className="text-xl font-bold mb-4">
Import your game stats
</h2>
<p className="text-gray-600">
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 text-gray-600">
<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>
</ul>
</ul>
</div>
<div className="mt-4">
<button
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
onClick={importLocalStorageStats}
>
Import Stats to Account
</button>
</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>
)}
{message && (
<div className="p-6 rounded-lg shadow-sm bg-white text-center font-semibold text-red-500 mb-4">
{message}
</div>
</div>
)}

{message && (
<div className="mt-4 text-center font-semibold text-red-500 mb-4">
{message}
</div>
)}
)}
</div>
</div>
</div>
);
Expand Down

1 comment on commit 2ee78a2

@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-j5zybdgl2-assios.vercel.app

Built with commit 2ee78a2.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.