From 433621b384037c14869edc75851c4ecb7c2826c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 27 May 2024 22:42:09 -0500
Subject: [PATCH] feat: stuff

---
 .vscode/settings.json       |  1 +
 src/app/components/Hero.tsx |  2 ++
 src/app/page.tsx            | 22 ++++++++++++++++------
 src/constants/tools.ts      |  8 ++++++++
 src/core/blitzkit/imgur.ts  | 13 +++++++++++++
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/core/blitzkit/imgur.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5f9e35100..7c8a532cb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -72,6 +72,7 @@
     "haha",
     "highp",
     "iife",
+    "imgur",
     "immer",
     "Inclusivity",
     "JOINTINDEX",
diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index 291fe2b3e..328781568 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -36,6 +36,8 @@ import { theme } from '../../stitches.config';
 
 const DISCRIMINATOR_WIDTH = 32;
 
+// https://i.imgur.com/rUPie9G.jpeg
+
 export function Hero() {
   const wideFormat = useWideFormat(512);
   const [showSearch, setShowSearch] = useState(false);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4ab9c5b6c..78cfa8c97 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,24 @@
-import { times } from 'lodash';
-import { Hero } from './components/Hero';
+import { Heading } from '@radix-ui/themes';
+import { TOOLS } from '../constants/tools';
+import { imgur } from '../core/blitzkit/imgur';
 
 export default function Page() {
+  const tool = TOOLS[0];
+
   return (
     <>
-      <Hero />
+      {/* <Hero /> */}
 
-      {times(64, () => (
-        <p>test {Math.random()}</p>
-      ))}
+      <div
+        style={{
+          background: `url(${imgur(tool.image)})`,
+          height: '50vh',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
+        <Heading>Tankopedia</Heading>
+      </div>
 
       <div style={{ flex: 1 }} />
     </>
diff --git a/src/constants/tools.ts b/src/constants/tools.ts
index 3a655bca0..6c6044e7a 100644
--- a/src/constants/tools.ts
+++ b/src/constants/tools.ts
@@ -1,5 +1,6 @@
 interface Tool {
   id: string;
+  image: string;
   title: string;
   description: string;
   disabled?: boolean;
@@ -15,6 +16,7 @@ export const TOOLS: Tool[] = [
   //   pageDescription:
   //     'Periodical player statistics and tanks played in World of Tanks Blitz',
   //   disabled: true,
+  //   image: '8gJGkKP'
   // },
   {
     id: 'tankopedia',
@@ -22,6 +24,7 @@ export const TOOLS: Tool[] = [
     description: 'Blitz tank encyclopedia',
     pageDescription:
       'Statistics, armor, and more for all tanks in World of Tanks Blitz',
+    image: 'D8j6GZx',
   },
   {
     id: 'rating',
@@ -29,6 +32,7 @@ export const TOOLS: Tool[] = [
     description: 'Full rating gamemode leaderboard',
     pageDescription:
       'Live and archived full rating leaderboard for World of Tanks Blitz',
+    image: 'WEyMZH3',
   },
   {
     id: 'compare',
@@ -36,6 +40,7 @@ export const TOOLS: Tool[] = [
     description: 'Compare tank statistics and loadouts',
     pageDescription:
       'Compare tanks statistics and loadouts in World of Tanks Blitz',
+    image: 'O6VNl6e',
   },
   {
     // TODO: rename to tracker
@@ -44,17 +49,20 @@ export const TOOLS: Tool[] = [
     description: 'Live session performance tracker',
     pageDescription:
       'Track your stats in real time as you play World of Tanks Blitz',
+    image: 'HdG9sTf',
   },
   {
     id: 'discord',
     title: 'Discord bot',
     description: 'Stats and tools right in Discord',
     href: 'https://discord.com/application-directory/1097673957865443370',
+    image: '0bWE5hC',
   },
   {
     id: 'more',
     title: 'More coming soon',
     description: 'This site is being actively developed',
     href: 'https://discord.gg/nDt7AjGJQH',
+    image: '1nPm6VI',
   },
 ];
diff --git a/src/core/blitzkit/imgur.ts b/src/core/blitzkit/imgur.ts
new file mode 100644
index 000000000..f96146838
--- /dev/null
+++ b/src/core/blitzkit/imgur.ts
@@ -0,0 +1,13 @@
+interface ImgurOptions {
+  format: 'jpeg' | 'png';
+}
+
+const defaultImgurOptions: ImgurOptions = {
+  format: 'png',
+};
+
+export function imgur(id: string, imgurOptions?: Partial<ImgurOptions>) {
+  const options = { ...defaultImgurOptions, ...imgurOptions };
+
+  return `https://i.imgur.com/${id}.${options.format}`;
+}