Make the app

package.json

@@ -1,7 +1,8 @@
 {
   "name": "berry-leaderboards",
+  "displayName": "Berry Leaderboards",
   "private": true,
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -259,7 +259,7 @@ checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
 [[package]]
 name = "berry-leaderboards"
-version = "0.1.0"
+version = "1.0.0"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
 name = "berry-leaderboards"
-version = "0.1.0"
+version = "1.0.0"
-description = "A Tauri App"
+description = "A desktop and mobile leaderboards viewer for Berry Dash"
-authors = ["you"]
+authors = ["Lncvrt"]
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
-  "productName": "berry-leaderboards",
+  "productName": "Berry Leaderboards",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "identifier": "xyz.lncvrt.Berry-Leaderboards",
   "build": {
     "beforeDevCommand": "yarn dev",
@@ -16,6 +16,8 @@
         "title": "Berry Leaderboards",
         "width": 800,
         "height": 600,
+        "minWidth": 600,
+        "minHeight": 400,
         "transparent": true
       }
     ],

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 { useEffect, useRef, useState } from "react"
-import "./App.css";
+import "./App.css"
-import '@fontsource/lexend';
+import '@fontsource/lexend'
-import { platform } from "@tauri-apps/plugin-os";
+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">
+    <main>
-      <p>Berry Leaderboards</p>
+      <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