Merge pull request #60 from AkinariHex/nextjs

Graph tooltip and provisional addition

app/globals.css

@@ -99,6 +99,17 @@
   --mods-FM-bg-row: 101, 38%, 63%, 0.15;
   --mods-TB-bg: 191, 26%, 57%;
   --mods-TB-bg-row: 191, 26%, 57%, 0.15;
+
+  --accent-color: 216, 100%, 65%;
+
+  /* CHARTS */
+  --tooltip-color: 0, 0%, 100%;
+  --tooltip-gain: var(--green-400);
+  --tooltip-loss: var(--red-400);
+
+  /* BADGES */
+  --badge-provisional-background: var(--yellow-400);
+  --badge-provisional-foreground: var(--yellow-900);
 }
 
 * {

components/Badges/Provisional/ProvisionalBadge.tsx

@@ -0,0 +1,11 @@
+import provisionalImage from '@/public/icons/provisional.png';
+import Image from 'next/image';
+import styles from './provisionalBadge.module.css';
+
+export default function ProvisionalBadge() {
+  return (
+    <div className={styles.badge}>
+      <Image src={provisionalImage} alt="Provisional" fill />
+    </div>
+  );
+}

components/Badges/Provisional/provisionalBadge.module.css

@@ -0,0 +1,45 @@
+.badge {
+  width: 1.8em;
+  height: 1.8em;
+  aspect-ratio: 1;
+  font-size: 0.26em;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--badge-provisional-foreground));
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+}
+
+.badge img {
+  object-fit: cover;
+}
+
+.badge:after {
+  content: 'Rating is provisional, must play more matches for an accurate ranking';
+  width: max-content;
+  max-width: 500px;
+  display: flex;
+  flex-flow: row;
+  background-color: hsla(var(--badge-provisional-background), 0.3);
+  line-height: 1.2rem;
+  backdrop-filter: blur(10px);
+  position: absolute;
+  left: 2.2rem;
+  bottom: -0.3rem;
+  font-size: 0.8rem;
+  padding: 0.6rem 0.8rem;
+  border-radius: 4px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
+  z-index: 2;
+  font-weight: 600;
+}
+
+.badge:hover::after {
+  visibility: visible;
+  opacity: 1;
+}

components/Charts/AreaChart/AreaChart.module.css

@@ -6,12 +6,56 @@
 }
 
 .tooltip {
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.7);
   border-radius: 0.2rem;
   color: #fff;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   transform: translate(0%, 0);
   transition: all 0.1s ease;
+  backdrop-filter: blur(2px);
+  min-width: 10em;
+}
+
+.tooltip ul {
+  gap: 1rem;
+}
+
+.tooltip li {
+  display: flex;
+  flex-flow: row;
+  gap: 0 0.8rem;
+  font-size: 0.9rem;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 500;
+  pointer-events: auto;
+  color: hsla(var(--tooltip-color), 0.8);
+  padding: 0.2rem;
+}
+
+.tooltip li a:hover {
+  color: hsla(var(--tooltip-color));
+}
+
+.tooltip_ratingChange {
+  font-weight: 600;
+  color: #eee;
+}
+
+.tooltip_ratingChange.gain {
+  color: hsl(var(--tooltip-gain));
+}
+
+.tooltip_ratingChange.gain::before {
+  content: '▲';
+}
+
+.tooltip_ratingChange.loss {
+  color: hsl(var(--tooltip-loss));
+}
+
+.tooltip_ratingChange.loss::before {
+  content: '▼';
 }