Add response times

package.json

@@ -13,7 +13,7 @@
   },
   "private": true,
   "dependencies": {
-    "@abstractplay/gameslib": "^1.0.0-ci-12495139118.0",
+    "@abstractplay/gameslib": "^1.0.0-ci-12518441372.0",
     "@abstractplay/renderer": "^1.0.0-ci-12341219895.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
     "@tanstack/react-table": "^8.11.2",

src/components/Player.js

@@ -20,10 +20,12 @@ import Opponents from "./Player/Opponents";
 import Timeouts from "./Player/Timeouts";
 import Activity from "./Player/Activity";
 import History from "./Player/History";
+import Response from "./Player/Response";
 
 export const ProfileContext = createContext([null, () => {}]);
 export const SummaryContext = createContext([null, () => {}]);
 export const AllRecsContext = createContext([null, () => []]);
+export const ResponsesContext = createContext([null, () => []]);
 
 const code2ele = new Map([
   ["stars", { component: Stars, name: "Starred Games" }],
@@ -32,6 +34,7 @@ const code2ele = new Map([
   ["opps", { component: Opponents, name: "Opponents" }],
   ["activity", { component: Activity, name: "Activity" }],
   ["timeouts", { component: Timeouts, name: "Timeouts" }],
+  ["response", { component: Response, name: "Response" }],
   ["history", { component: History, name: "Game History" }],
 ]);
 
@@ -42,13 +45,15 @@ function Player() {
   const [user, userSetter] = useState(null);
   const [summary, summarySetter] = useState(null);
   const [allRecs, allRecsSetter] = useState([]);
+  const [responses, responsesSetter] = useState([]);
   const [order, orderSetter] = useStorageState("player-profile-order", [
     "stars",
     "ratings",
     "counts",
     "opps",
     "activity",
     "timeouts",
+    "response",
     "history",
   ]);
 
@@ -90,11 +95,26 @@ function Player() {
     fetchData();
   }, [user]);
 
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        var url = new URL(
+          `https://records.abstractplay.com/ttm/${user.id}.json`
+        );
+        const res = await fetch(url);
+        const result = await res.json();
+        responsesSetter(result);
+      } catch (error) {
+        responsesSetter([]);
+      }
+    }
+    fetchData();
+  }, [user]);
+
   useEffect(() => {
     if (allUsers !== null) {
       const rec = allUsers.find((u) => u.id === userid);
       if (rec !== undefined && rec !== null) {
-        console.log(rec);
         userSetter(rec);
       } else {
         userSetter(null);
@@ -234,6 +254,7 @@ function Player() {
           <ProfileContext.Provider value={[user, userSetter]}>
             <SummaryContext.Provider value={[summary, summarySetter]}>
               <AllRecsContext.Provider value={[allRecs, allRecsSetter]}>
+              <ResponsesContext.Provider value={[responses, responsesSetter]}>
                 <div className="columns is-multiline">
                   {order.map((code) => {
                     const obj = code2ele.get(code);
@@ -295,6 +316,7 @@ function Player() {
                     }
                   })}
                 </div>
+                </ResponsesContext.Provider>
               </AllRecsContext.Provider>
             </SummaryContext.Provider>
           </ProfileContext.Provider>

src/components/Player/Response.js

@@ -0,0 +1,71 @@
+import React, { useContext, useEffect, useState } from "react";
+import { ResponsesContext } from "../Player";
+import Plot from "react-plotly.js";
+
+function Response({ order }) {
+  const [responses] = useContext(ResponsesContext);
+  const [, movedSetter] = useState(0);
+  const [parsed, parsedSetter] = useState([]);
+  const [avg, avgSetter] = useState(0);
+  const [median, medianSetter] = useState(0);
+
+  useEffect(() => {
+    console.log("Update forced");
+    movedSetter((m) => m + 1);
+  }, [order]);
+
+  useEffect(() => {
+    if (responses !== null && responses.length > 0) {
+        const hours = responses.map(n => n / (1000 * 60 * 60)).sort((a,b) => a - b);
+        parsedSetter(hours);
+        const sum = hours.reduce((a,b) => a + b, 0);
+        if (hours.length > 0) {
+            avgSetter(sum / hours.length);
+            medianSetter(hours[Math.floor(hours.length / 2)]);
+        } else {
+            avgSetter(0);
+            medianSetter(0);
+        }
+    } else {
+        parsedSetter([]);
+        avgSetter(0);
+        medianSetter(0);
+    }
+  }, [responses]);
+
+  return (
+    <>
+      <div>
+        <div className="content">
+          <p>
+            Average response time: {avg.toFixed(2)} hours
+          </p>
+          <p>
+            Median response time: {median.toFixed(2)} hours
+          </p>
+        </div>
+        <Plot
+          data={[
+            {
+              y: parsed.filter(n => n < 500),
+              type: "box",
+              boxpoints: "suspectedoutliers",
+              orientation: "v",
+              name: "Time to move (hours)",
+              jitter: 0.3,
+            },
+          ]}
+          config={{
+            responsive: true,
+          }}
+          layout={{
+            title: "Time to move (hours)",
+            height: 500,
+          }}
+        />
+      </div>
+    </>
+  );
+}
+
+export default Response;

src/components/Player/Timeouts.js

@@ -44,7 +44,7 @@ function Timeouts({ order }) {
 
   return (
     <>
-      <div class="content">
+      <div className="content">
         <p>Total number of timeouts: {timeouts.length.toLocaleString()}</p>
         {gamesSince === null ? null :
           <p>Games completed since last timeout: {gamesSince.toLocaleString()}</p>