From 6e07d6c564d19768a77af57ea49453d32da2b301 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 1 Jun 2023 18:56:03 +0200
Subject: [PATCH] Brighter background color, rearranging of elementes + empire
 count

---
 app/globals.css               |  4 ++--
 app/page.tsx                  | 17 +++++++++++++++--
 components/tables/empires.tsx | 21 +++++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 components/tables/empires.tsx

diff --git a/app/globals.css b/app/globals.css
index ff14b38..da2e072 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -11,8 +11,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground: #ffffff;
-    --background-start: #000000;
-    --background-end: #000000;
+    --background-start: #1a1a1a;
+    --background-end: #1a1a1a;
   }
 }
 
diff --git a/app/page.tsx b/app/page.tsx
index 119c037..92209fd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,22 @@
+'use client';
+import { useState } from 'react';
 import {RadarChart} from '../components/charts/radar'
+import {EmpireStats} from '../components/tables/empires'
+import { Checkbox } from '@nextui-org/react';
 
 export default function Home() {
+  const [weighted, setWeighted] = useState(true);
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between">
-      <RadarChart />
+    <main className="flex min-h-screen flex-row items-center">
+      <div className='flex flex-row min-h-screen'>
+        <RadarChart weighted={weighted}/>
+        <div className='flex flex-col justify-around'>
+          <EmpireStats />
+          <Checkbox labelColor="primary" defaultSelected={weighted} onChange={() => setWeighted(!weighted)}>Weighted Ethics</Checkbox>
+        </div>
+      </div>
+      
+
     </main>
   )
 }
diff --git a/components/tables/empires.tsx b/components/tables/empires.tsx
new file mode 100644
index 0000000..d35cd18
--- /dev/null
+++ b/components/tables/empires.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import useSWR from "swr";
+
+const fetcher = async (url:any) => await fetch(url).then((res) => res.json());
+
+export const EmpireStats = () => {
+  const {data} = useSWR('/api/empires',fetcher);
+  
+  let ret;
+
+  if (data) {
+    ret = (
+      <div className="text-blue-600">{data.empireCount} Empires</div>
+    )
+  }
+  else {
+    ret = (<div></div>)
+  }
+  return ret
+}
\ No newline at end of file