Merge pull request #35 from Shinsina/further-corrections

March UX Improvements
Shinsina · Mar 1, 2024 · 9fdd9f4 · 9fdd9f4
2 parents b39bdcb + ef4ebe5
commit 9fdd9f4
Show file tree

Hide file tree

Showing 27 changed files with 4,600 additions and 2,936 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,10 +1,11 @@
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 import prefetch from "@astrojs/prefetch";
+import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://shinsina.github.io",
   base: "/Stat-N-Track",
-  integrations: [tailwind(), prefetch()]
+  integrations: [tailwind(), prefetch(), sitemap()]
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,12 +12,12 @@
   "dependencies": {
     "@alpinejs/collapse": "^3.13.3",
     "@astrojs/prefetch": "^0.4.1",
-    "@astrojs/tailwind": "^5.0.2",
+    "@astrojs/sitemap": "^3.1.1",
+    "@astrojs/tailwind": "^5.1.0",
     "@types/alpinejs": "^3.13.5",
     "alpinejs": "^3.13.3",
-    "astro": "^3.6.4",
+    "astro": "^4.4.8",
     "mongodb": "^6.3.0",
-    "sharp": "^0.33.0",
     "tailwindcss": "^3.3.5"
   }
 }
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://shinsina.github.io/Stat-N-Track/sitemap-index.xml
diff --git a/src/lib/components/subsession/session-results.astro b/src/lib/components/subsession/session-results.astro
@@ -1,4 +1,5 @@
 ---
+import { bgColorByUserId } from "$lib/utils/background-color-by-user";
 import fieldIdToLabelMap from "$lib/utils/field-id-to-label-map";
 import handleResults from "$lib/utils/handle-session-results";
 import lapTimeFields from "$lib/utils/lap-time-fields";
@@ -9,40 +10,23 @@ interface Props {
   keysToDisplay: Set<string>;
 }
 const { session, keysToDisplay } = Astro.props;
-const {
-  simsession_name,
-  simsession_type_name,
-  simsession_type,
-  simsession_number,
-  results,
-} = session || {};
+const { simsession_name, simsession_type_name, results } = session || {};
 const { keysArray, handledResults } = handleResults({
   keysToDisplay: keysToDisplay || new Set([]),
   results: results || [],
 });
-const showHeader =
-  simsession_name &&
-  simsession_type_name &&
-  simsession_type &&
-  simsession_number;
 ---
 
-{showHeader ? <div class="grid grid-cols-1">
+<div class="grid grid-cols-1">
   <table class="text-center col-span-1">
     <tr class="bg-gray-500">
-      <th class="border-2">Name</th>
-      <th class="border-2">Type</th>
-      <th class="border-2">Type ID</th>
-      <th class="border-2">Session ID</th>
+      <th class="border-2">Session Type</th>
     </tr>
     <tr>
-      <td class="border-2">{simsession_name}</td>
       <td class="border-2">{simsession_type_name}</td>
-      <td class="border-2">{simsession_type}</td>
-      <td class="border-2">{simsession_number}</td>
     </tr>
   </table>
-</div> : <></>}
+</div>
 <div class="grid grid-cols-1 pt-6 overflow-x-scroll">
   <table x-ref="Table" x-data={simsession_name} class="text-center col-span-1">
     <tr x-ref="Headings"
@@ -60,7 +44,7 @@ const showHeader =
     >
     {
       handledResults.map((result, rowNumber) => (
-        <tr x-ref={`Table ${rowNumber}`}>
+        <tr x-ref={`Table ${rowNumber}`} class={bgColorByUserId(result[0])}>
           {result.map((value: string | number, index: number) => (
             <td
               x-ref={`Table ${keysArray[index]} ${rowNumber}`}

diff --git a/src/lib/layouts/default.astro b/src/lib/layouts/default.astro
@@ -1,6 +1,6 @@
 ---
 const { title, description } = Astro.props;
-const seoTitle = title || "Stat 'n' Track";
+const seoTitle = `Stat 'n' Track: ${title}` || "Stat 'n' Track";
 const seoDescription =
   description || "An iRacing planner and statistics analyzer";
 ---
@@ -18,19 +18,29 @@ const seoDescription =
   <body class="bg-gray-900 text-white font-sans">
     <div class="text-center border-white border-2">
       <p
-        class="block lg:text-7xl md:text-4xl sm-text-3xl break-words text-center"
+        class="block lg:text-5xl md:text-2xl sm:text-xl break-words text-center"
       >
         Stat 'N' Track
       </p>
-      <p
-        class="block lg:text-4xl md:text-xl sm:text-lg break-words text-center pt-2"
-      >
-        An iRacing planner and statistics analyzer
-      </p>
       <div
         class="block lg:text-3xl md:text-lg sm:text-md break-words text-center py-2"
       >
         <a class="underline" href="/Stat-N-Track/" rel="prefetch">Home</a>
+        <a
+          class="underline pl-2"
+          href="/Stat-N-Track/user/300752"
+          rel="prefetch">Jacob Collins</a
+        >
+        <a
+          class="underline pl-2"
+          href="/Stat-N-Track/user/815162"
+          rel="prefetch">Jack Glenzinski</a
+        >
+        <a
+          class="underline pl-2"
+          href="/Stat-N-Track/shared-subsessions"
+          rel="prefetch">Shared Subsessions</a
+        >
       </div>
     </div>
     <slot />

diff --git a/src/lib/layouts/standings.astro b/src/lib/layouts/standings.astro
@@ -80,7 +80,7 @@ const generateLinkForKey = ({
 };
 ---
 
-<DefaultLayout {seoTitle} {seoDescription}>
+<DefaultLayout title={seoTitle} description={seoDescription}>
   <div class="grid grid-cols-1 pt-6 overflow-x-scroll">
     <table x-ref="Table" x-data="table" class="text-center col-span-1">
       <tr x-ref="Headings"

diff --git a/src/lib/layouts/subsessions.astro b/src/lib/layouts/subsessions.astro
@@ -71,7 +71,7 @@ const keysToDisplay = new Set(Object.keys(results[0]));
 const { keysArray, handledResults } = handleResults({ keysToDisplay, results });
 ---
 
-<DefaultLayout {seoTitle} {seoDescription}>
+<DefaultLayout title={seoTitle} description={seoDescription}>
   <div class="grid grid-cols-1 pt-6 overflow-x-scroll">
     <table x-ref="Table" x-data="table" class="text-center col-span-1">
       <tr x-ref="Headings"

diff --git a/src/lib/utils/background-color-by-user.ts b/src/lib/utils/background-color-by-user.ts
@@ -0,0 +1,19 @@
+export const bgColorByUserId = (userId: number): string => {
+  if (userId === 300752) {
+    return "bg-orange-600";
+  }
+  if (userId === 815162) {
+    return "bg-purple-600";
+  }
+  return "";
+};
+
+export const bgColorByUserDisplayName = (displayName: string): string => {
+  if (displayName === "Jacob Collins") {
+    return "bg-orange-600";
+  }
+  if (displayName === "Jack Glenzinski") {
+    return "bg-purple-600";
+  }
+  return "";
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,24 +2,4 @@
 import DefaultLayout from "$lib/layouts/default.astro";
 ---
 
-<DefaultLayout>
-  <div class="text-center text-3xl">
-    <div>
-      <a class="underline" rel="prefetch" href="/Stat-N-Track/user/300752"
-        >Jacob Collins</a
-      >
-    </div>
-    <div>
-      <a class="underline" rel="prefetch" href="/Stat-N-Track/user/815162"
-        >Jack Glenzinski</a
-      >
-    </div>
-    <div>
-      <a
-        class="underline"
-        rel="prefetch"
-        href="/Stat-N-Track/shared-subsessions">Shared Subsessions</a
-      >
-    </div>
-  </div>
-</DefaultLayout>
+<DefaultLayout />
diff --git a/src/pages/shared-subsessions.astro b/src/pages/shared-subsessions.astro
@@ -7,14 +7,15 @@ import userIds from "$lib/utils/user-ids";
 import parseLapTime from "$lib/utils/parse-lap-time";
 import fieldIdToLabelMap from "$lib/utils/field-id-to-label-map";
 import keysToDisplay from "$lib/utils/race-session-keys-to-display";
+import { bgColorByUserDisplayName } from "$lib/utils/background-color-by-user";
 const dbConnection = await connectToDatabase();
 const { db } = dbConnection;
 const collection = db.collection<Subsession>("subsessions");
 const $and = userIds.map((userId) => ({
   "session_results.2.results": { $elemMatch: { cust_id: userId } },
 }));
 const subsessions = await collection.find({ $and }).sort({ _id: -1 }).toArray();
-const headToHeadWins: Record<string,Array<number>> = {};
+const headToHeadWins: Record<string, Array<number>> = {};
 const results: Array<{
   subsessionInfo: Record<string, unknown>;
   session: Session;
@@ -33,8 +34,9 @@ const results: Array<{
     race_week_num,
     season_name,
   } = subsession;
+  const { results: allUserResults, ...rest } = subsession.session_results[2];
   // Current Users in race session
-  const results = subsession.session_results[2].results
+  const results = allUserResults
     .filter((v: SessionResult) => userIds.includes(v.cust_id))
     .map((w: SessionResult) => {
       return Object.keys(w).reduce((object, key) => {
@@ -53,22 +55,18 @@ const results: Array<{
       }
       return 0;
     });
+  const session = {
+    ...rest,
+    results,
+  };
   const [winner] = results;
   const { display_name } = winner;
-  if(headToHeadWins[display_name]) {
-    headToHeadWins[display_name].push(subsession_id)
+  if (headToHeadWins[display_name]) {
+    headToHeadWins[display_name].push(subsession_id);
   } else {
     headToHeadWins[display_name] = [subsession_id];
   }
   const { group_name: License } = allowed_licenses.slice(0, 2).pop() || {};
-  const session = {
-    simsession_number: 0,
-    simsession_type: 0,
-    simsession_type_name: "",
-    simsession_subtype: 0,
-    simsession_name: "",
-    results,
-  };
   return {
     subsessionInfo: {
       subsession_id,
@@ -107,27 +105,40 @@ export const handleKey = ({
   }
   return String(subsessionInfo[key]);
 };
-const correctlyKeyedH2HWins = Object.keys((headToHeadWins)).reduce((object, key) => {
-  const wins = headToHeadWins[key].length;
-  object[key] = { key, wins };
-  return object;
-}, {} as Record<string,{ key: string, wins: number }>);
-const h2hOutput = Object.keys(correctlyKeyedH2HWins).map((key) => correctlyKeyedH2HWins[key]).sort((a, b) => {
-  if (a.wins > b.wins) {
-    return -1;
-  } else if (b.wins > a.wins) {
-    return 1;
-  }
-   return 0;
-});
+const correctlyKeyedH2HWins = Object.keys(headToHeadWins).reduce(
+  (object, key) => {
+    const wins = headToHeadWins[key].length;
+    object[key] = { key, wins };
+    return object;
+  },
+  {} as Record<string, { key: string; wins: number }>
+);
+const h2hOutput = Object.keys(correctlyKeyedH2HWins)
+  .map((key) => correctlyKeyedH2HWins[key])
+  .sort((a, b) => {
+    if (a.wins > b.wins) {
+      return -1;
+    } else if (b.wins > a.wins) {
+      return 1;
+    }
+    return 0;
+  });
+const title = "Shared Subsessions";
+const description = "Shared subsessions for all Stat 'n' Track users";
 ---
 
-<DefaultLayout>
-  <div class="text-center lg:text-2xl md:text-md sm:text-sm py-4">
-    <div class="font-bold">Head to Head Wins</div>
-    {h2hOutput.map((value) => (
-      <div>{value.key}: {value.wins}</div>
-    ))}
+<DefaultLayout {title} {description}>
+  <div class="flex flex-col">
+    <div class="self-center text-center lg:text-2xl md:text-md sm:text-sm py-4">
+      <div class="font-bold border-b-2 border-white">Head to Head Wins</div>
+      {
+        h2hOutput.map((value) => (
+          <div class={bgColorByUserDisplayName(value.key)}>
+            {value.key}: {value.wins}
+          </div>
+        ))
+      }
+    </div>
   </div>
   <div
     id="top"
@@ -185,7 +196,12 @@ const h2hOutput = Object.keys(correctlyKeyedH2HWins).map((key) => correctlyKeyed
           </tr>
           {
             results.map((result, rowNumber) => (
-              <tr x-ref={`Table ${rowNumber}`}>
+              <tr
+                x-ref={`Table ${rowNumber}`}
+                class={bgColorByUserDisplayName(
+                  result.session.results[0].display_name
+                )}
+              >
                 {Object.keys(result.subsessionInfo).map((key) => (
                   <td
                     x-ref={`Table ${key} ${rowNumber}`}