feat: Session Playtime (#1139)

* style: consistent capitalization in dckerfile

* feat: Session Playtime

.vscode/settings.json

@@ -2,5 +2,9 @@
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"[typescriptreact]": {
 		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
 	}
+}
 }

Dockerfile.bootstrap

@@ -6,7 +6,7 @@
 
 # I really do not care.
 # Want it better? Do it yourself.
-FROM node:20 as base
+FROM node:20 AS base
 
 RUN npm install --silent -g [email protected]
 

Dockerfile.bot

@@ -1,4 +1,4 @@
-FROM node:20-alpine as base
+FROM node:20-alpine AS base
 RUN npm install --silent -g [email protected]
 
 FROM base AS build

Dockerfile.client

@@ -1,4 +1,4 @@
-FROM node:20-alpine as base
+FROM node:20-alpine AS base
 
 RUN npm install --silent -g [email protected]
 

Dockerfile.seeds

@@ -1,5 +1,5 @@
 # no alpine here as we want bash + general nice-to-haves
-FROM node:20 as base
+FROM node:20 AS base
 
 RUN npm install --silent -g [email protected]
 

Dockerfile.server

@@ -3,7 +3,7 @@
 # does need to boot. You should consider using docker-compose for this.
 
 # base image
-FROM node:20-alpine as base
+FROM node:20-alpine AS base
 ARG COMMIT_HASH
 ENV COMMIT_HASH=${COMMIT_HASH}
 

client/src/components/user/UGPTHeader.tsx

@@ -1,4 +1,4 @@
-import { MillisToSince } from "util/time";
+import { FormatDurationHours, MillisToSince } from "util/time";
 import { APIFetchV1 } from "util/api";
 import { HumaniseError } from "util/humanise-error";
 import { SendErrorToast, SendSuccessToast } from "util/toaster";
@@ -16,6 +16,8 @@ import { GetGPTUtilsName } from "components/gpt-utils/GPTUtils";
 import ApiError from "components/util/ApiError";
 import Loading from "components/util/Loading";
 import useApiQuery from "components/util/query/useApiQuery";
+import QuickTooltip from "components/layout/misc/QuickTooltip";
+import { TachiConfig } from "lib/config";
 import ProfileBadges from "./ProfileBadges";
 import ProfilePicture from "./ProfilePicture";
 import RankingData from "./UGPTRankingData";
@@ -82,6 +84,23 @@ export function UGPTHeaderBody({
 								: MillisToSince(stats.firstScore.timeAchieved)}
 						</td>
 					</tr>
+					<tr>
+						<td>
+							<QuickTooltip
+								tooltipContent={`All of your session lengths added together. This makes for a rough estimate of playtime, depending on how much you use ${TachiConfig.NAME}.`}
+							>
+								<div
+									style={{
+										textDecoration: "underline",
+										textDecorationStyle: "dotted",
+									}}
+								>
+									Session Playtime
+								</div>
+							</QuickTooltip>
+						</td>
+						<td>{FormatDurationHours(stats.playtime)}</td>
+					</tr>
 				</MiniTable>
 			</div>
 			<div className="col-12 col-md-6 col-lg-3">

client/src/types/api-returns.ts

@@ -41,6 +41,7 @@ export interface UGPTStatsReturn<GPT extends GPTString = GPTString> {
 			outOf: integer;
 		}
 	>;
+	playtime: number;
 }
 
 export interface UGPTLeaderboardAdjacent {

client/src/util/time.ts

@@ -20,6 +20,13 @@ export function FormatDuration(ms: number) {
 	});
 }
 
+export function FormatDurationHours(ms: number) {
+	return humaniseDuration(ms, {
+		units: ["h"],
+		maxDecimalPoints: 0,
+	});
+}
+
 export function FormatTimeSmall(ms: number) {
 	return DateTime.fromMillis(ms).toLocaleString(DateTime.DATE_SHORT);
 }

server/src/server/router/api/v1/users/_userID/games/_game/_playtype/router.ts

@@ -53,7 +53,7 @@ router.get("/", async (req, res) => {
 
 	const stats = GetTachiData(req, "requestedUserGameStats");
 
-	const [totalScores, firstScore, mostRecentScore, rankingData] = await Promise.all([
+	const [totalScores, firstScore, mostRecentScore, rankingData, playtime] = await Promise.all([
 		db.scores.count({
 			userID: user.id,
 			game,
@@ -86,6 +86,26 @@ router.get("/", async (req, res) => {
 			}
 		),
 		GetAllRankings(stats),
+		db.sessions.aggregate<[{ playtime: number }]>([
+			{
+				$match: {
+					userID: user.id,
+					game,
+					playtype,
+				},
+			},
+			{
+				$project: {
+					duration: { $subtract: ["$timeEnded", "$timeStarted"] },
+				},
+			},
+			{
+				$group: {
+					_id: null,
+					playtime: { $sum: "$duration" },
+				},
+			},
+		]),
 	]);
 
 	return res.status(200).json({
@@ -97,6 +117,7 @@ router.get("/", async (req, res) => {
 			mostRecentScore,
 			totalScores,
 			rankingData,
+			playtime: playtime[0].playtime,
 		},
 	});
 });