Make the app

src/App.css

@@ -1,9 +1,57 @@
 body {
   color: white;
-  background-color: #121212;
+  background-color: #242424;
   font-family: 'Lexend';
+  user-select: none;
+}
+
+button {
+  all: unset;
+  cursor: pointer;
+  background-color: #484848;
+  border-radius: 8px;
+  padding: 4px 8px;
 }
 
 .macos-body {
   background-color: transparent !important;
-}
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.top span {
+  flex: 1;
+  text-align: center;
+}
+
+.list {
+  background-color: #484848;
+  border-radius: 16px;
+  padding: 16px 0px;
+}
+
+.list .item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  position: relative;
+}
+
+.list .item + .item::before {
+  content: "";
+  position: absolute;
+  top: -16px;
+  left: 16px;
+  right: 16px;
+  height: 1px;
+  background-color: rgb(128, 128, 128);
+}
+
+.list .item + .item {
+  margin-top: 32px;
+}

src/App.tsx

@@ -1,18 +1,56 @@
-import { useEffect } from "react";
-import "./App.css";
-import '@fontsource/lexend';
-import { platform } from "@tauri-apps/plugin-os";
+import { useEffect, useRef, useState } from "react"
+import "./App.css"
+import '@fontsource/lexend'
+import { platform } from "@tauri-apps/plugin-os"
 
 function App() {
+  const [status, setStatus] = useState("")
+  const [players, setPlayers] = useState<string[][]>([])
+  const initialized = useRef(false)
+
   useEffect(() => {
-    if (platform() == 'macos') document.body.classList.add('macos-body');
-  });
+    if (initialized.current) return;
+    if (platform() == 'macos') document.body.classList.add('macos-body')
+    refresh();
+    initialized.current = true;
+  }, [])
+
+  const refresh = async () => {
+    setStatus("Loading")
+    setPlayers([]);
+    try {
+      const res = await fetch("https://berrydash.lncvrt.xyz/database/getTopPlayersAPI.php")
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const txt = await res.text()
+      const entries = txt.split(";").map(x => {
+        const [b64, score] = x.split(":")
+        return [atob(b64), score]
+      })
+      setPlayers(entries)
+      setStatus("")
+    } catch (err: any) {
+      setStatus(`Error: ${err.message}`)
+    }
+  }
 
   return (
-    <main className="container">
-      <p>Berry Leaderboards</p>
+    <main>
+      <div className="top">
+        <span style={{ color: status.startsWith("Error") ? "red" : "inherit" }}>{status}</span>
+        <button onClick={refresh}>Refresh</button>
+      </div>
+      {players.length > 0 && (
+        <div className="list">
+          {players.map(([user, score], i) => (
+            <div className="item" key={i}>
+              <span>{user}</span>
+              <span>{Number(score).toLocaleString()}</span>
+            </div>
+          ))}
+        </div>
+      )}
     </main>
-  );
+  )
 }
 
-export default App;
+export default App