Merge branch 'manual-mode' into main. Closes #1

voliva · Dec 8, 2022 · 1f61bb1 · 1f61bb1
2 parents c54ba7e + 1ea8212
commit 1f61bb1
Show file tree

Hide file tree

Showing 10 changed files with 424 additions and 106 deletions.
diff --git a/src/App/CreateGoal.tsx b/src/App/CreateGoal.tsx
@@ -2,11 +2,11 @@ import { state, useStateObservable } from "@react-rxjs/core";
 import { createSignal } from "@react-rxjs/utils";
 import { useMemo } from "react";
 import { combineLatest, map, of, startWith, switchMap } from "rxjs";
-import { SeasonData } from "../service/localData";
+import { SeasonDetails } from "../service/localData";
 import { getRewardForGoal } from "../service/rewards";
 import "./CreateGoal.css";
 import { createGoal } from "./goals";
-import { currentSeason$ } from "./season";
+import { selectedSeason$ } from "./playerDetailsState";
 
 const [nameChange$, setName] = createSignal<string>();
 const name$ = state(nameChange$, "");
@@ -16,7 +16,7 @@ const divisions$ = state(divisionsChange$, 1); // TODO minimum depends on curren
 
 const [repeatsChange$, setRepeats] = createSignal<number>();
 const repeats$ = state(
-  combineLatest([currentSeason$, divisionsChange$]).pipe(
+  combineLatest([selectedSeason$, divisionsChange$]).pipe(
     switchMap(([season, divisions]) =>
       divisions === season?.divisions.length
         ? repeatsChange$.pipe(
@@ -39,7 +39,7 @@ const repeats$ = state(
 );
 
 export function CreateGoal({ onClose }: { onClose: () => void }) {
-  const season = useStateObservable(currentSeason$);
+  const season = useStateObservable(selectedSeason$);
   const name = useStateObservable(name$);
   const divisions = useStateObservable(divisions$);
   const repeats = useStateObservable(repeats$);
@@ -145,7 +145,11 @@ export function CreateGoal({ onClose }: { onClose: () => void }) {
   );
 }
 
-function calculateCost(season: SeasonData, divisions: number, repeats: number) {
+function calculateCost(
+  season: SeasonDetails,
+  divisions: number,
+  repeats: number
+) {
   let result = 0;
   for (let i = 0; i < divisions; i++) {
     result += season.divisions[i].pips;

diff --git a/src/App/Header.tsx b/src/App/Header.tsx
@@ -1,15 +1,16 @@
 import { useStateObservable } from "@react-rxjs/core";
 import { appWindow } from "@tauri-apps/api/window";
-import { currentSeason$ } from "./season";
+import { currentSeason$, seasonIsActive } from "./season";
 import "./Header.css";
 
 function Header() {
   const season = useStateObservable(currentSeason$);
+  const isActive = seasonIsActive(season);
 
   return (
     <div className="header" data-tauri-drag-region>
       <div className="header-title painted-line" data-tauri-drag-region>
-        {season ? season.name : "PvP Pips Calculator"}
+        {season && isActive ? season.name : "PvP Pips Calculator"}
       </div>
       <div className="header-actions">
         <div onClick={() => appWindow.minimize()}>

diff --git a/src/App/PlayerDetails.css b/src/App/PlayerDetails.css
@@ -0,0 +1,3 @@
+.season-pick {
+  margin: 0 0.3rem;
+}
diff --git a/src/App/PlayerDetails.tsx b/src/App/PlayerDetails.tsx
@@ -5,17 +5,22 @@ import { useEffect, useState } from "react";
 import { Pip } from "../components/Pip";
 import {
   apiKey$,
+  endDate$,
   playerDetails$,
   refresh,
+  selectedType$,
+  selectType,
   setApiKey,
+  setEndDate,
+  setPips,
 } from "./playerDetailsState";
-import { currentSeason$ } from "./season";
+import { currentSeasonIsActive$ } from "./season";
+import "./PlayerDetails.css";
 
 TimeAgo.addDefaultLocale(en);
 const timeAgo = new TimeAgo("en");
 
-function PlayerDetails() {
-  const season = useStateObservable(currentSeason$);
+function APIPlayerDetails() {
   const apiKey = useStateObservable(apiKey$);
   const playerDetails = useStateObservable(playerDetails$);
 
@@ -27,7 +32,7 @@ function PlayerDetails() {
           value={apiKey}
           onChange={(evt) => setApiKey(evt.target.value)}
         />
-        <button onClick={refresh} disabled={!season || !apiKey}>
+        <button onClick={refresh} disabled={!apiKey}>
           Refresh Pips
         </button>
       </div>
@@ -41,6 +46,80 @@ function PlayerDetails() {
     </div>
   );
 }
+function ManualPlayerDetails() {
+  const details = useStateObservable(playerDetails$);
+  const selectedType = useStateObservable(selectedType$);
+  const endDate = useStateObservable(endDate$);
+  console.log("endDate", endDate);
+
+  return (
+    <div className="painted-box">
+      <div>⚠️ The API didn't return an active season yet ⚠️</div>
+      <div>
+        <Pip active={true} />
+        <input
+          type="number"
+          placeholder="Pips"
+          value={details?.pips ?? 0}
+          onChange={(evt) => setPips(Number(evt.target.value))}
+        />
+      </div>
+      <div>
+        <label className="season-pick">
+          <input
+            type="radio"
+            name="season_type"
+            value="2v2"
+            checked={selectedType === "2v2"}
+            onChange={(e) => selectType(e.target.value as any)}
+          />
+          2v2
+        </label>
+        <label className="season-pick">
+          <input
+            type="radio"
+            name="season_type"
+            value="3v3"
+            checked={selectedType === "3v3"}
+            onChange={(e) => selectType(e.target.value as any)}
+          />
+          3v3
+        </label>
+        <label className="season-pick">
+          <input
+            type="radio"
+            name="season_type"
+            value="5v5"
+            checked={selectedType === "5v5"}
+            onChange={(e) => selectType(e.target.value as any)}
+          />
+          5v5
+        </label>
+      </div>
+      <div>
+        Season end:
+        <label>
+          <input
+            value={endDate ?? ""}
+            onChange={(evt) => setEndDate(evt.target.value)}
+            type="date"
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+function PlayerDetails() {
+  const isActive = useStateObservable(currentSeasonIsActive$);
+
+  if (!isActive == null) return null;
+
+  if (isActive) {
+    return <APIPlayerDetails />;
+  }
+  return <ManualPlayerDetails />;
+}
 
 function RefreshingTimeAgo({ date }: { date?: Date }) {
   const [formattedTime, setFormattedTime] = useState(

diff --git a/src/App/Result.tsx b/src/App/Result.tsx
@@ -2,39 +2,26 @@ import { state, useStateObservable } from "@react-rxjs/core";
 import { Fragment, useState } from "react";
 import { combineLatestWith, filter, map } from "rxjs";
 import { Pip } from "../components/Pip";
-import { initialConfig$ } from "../service/localData";
 import { CreateGoal } from "./CreateGoal";
 import { deleteGoal, goals$ } from "./goals";
-import { playerDetails$ } from "./playerDetailsState";
+import { playerDetails$, selectedSeason$ } from "./playerDetailsState";
 import "./Result.css";
-import { currentSeason$ } from "./season";
-
-const holidays$ = state(
-  initialConfig$.pipe(map((config) => config.holidays)),
-  []
-);
 
 // TODO config
-const POINTS_WIN = 11;
-const POINTS_LOSE = 4;
+const POINTS_WIN = 11 + 2;
+const POINTS_LOSE = 4 + 2;
 const POINT_AVG = (POINTS_LOSE + POINTS_WIN) / 2;
 
 const result$ = state(
   playerDetails$.pipe(
     filter((v) => !!v),
     map((v) => v!),
-    combineLatestWith(holidays$, currentSeason$.pipe(filter((v) => !!v))),
-    map(([{ pips, timestamp }, holidays, season]) => {
-      const seasonStart = new Date(season!.start);
+    combineLatestWith(selectedSeason$.pipe(filter((v) => !!v))),
+    map(([{ pips, timestamp }, season]) => {
       const seasonEnd = new Date(season!.end);
-      const seasonDays = Math.round(
-        (seasonEnd.getTime() - seasonStart.getTime()) / (24 * 60 * 60_000)
-      );
-      const currentDay = Math.floor(
-        (timestamp.getTime() - seasonStart.getTime()) / (24 * 60 * 60_000)
+      const remainingDays = Math.round(
+        (seasonEnd.getTime() - timestamp.getTime()) / (24 * 60 * 60_000)
       );
-      const relevantHolidays = holidays.filter((h) => h >= currentDay).length;
-      const remainingDays = seasonDays - currentDay - relevantHolidays;
 
       return { pips, remainingDays, timestamp };
     }),