nathan/by-other-means
1
0
Fork 0
Code Actions Packages Activity

Works

Browse Source
This commit is contained in:
Nathan Stanley
2026-07-29 04:02:16 -04:00
parent 4a6732798a
commit 9be3f50344
18 changed files with 378 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Phase.tsx
+49
View File
@@ -0,0 +1,49 @@
import type { FC } from "react";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import {
clearSelectedPhase,
setSelectedPhase,
} from "../store/slices/phaseSlice";
import type { PhaseType } from "../utils/types";
interface PropType {
phase: PhaseType;
current: boolean;
}
const Phase: FC<PropType> = ({ phase, current }) => {
const dispatch = useAppDispatch();
const selected = useAppSelector((state) => state.phase.selected);
const thisSelected = selected === phase.name;
const phaseClick = () => {
if (thisSelected) {
dispatch(clearSelectedPhase());
} else {
dispatch(setSelectedPhase(phase.name));
}
};
return (
<button
type="button"
className={`overflow-hidden relative w-96 p-2 ${phase.color} border border-2 shadow-md rounded-md ${phase.borderColor}`}
onClick={phaseClick}
>
<div className="text-xl px-8">{phase.name}</div>
<div className="text-sm px-8">
{phase.minuteStart}-{phase.minuteEnd}
</div>
{thisSelected && <div className="text-md px-8">{phase.description}</div>}
{current && (
<>
<div className="rotate-45 bg-white h-16 w-16 absolute -top-10 -left-12"></div>
<div className="-rotate-45 bg-white h-16 w-16 absolute -bottom-10 -left-12"></div>
<div className="bg-white w-16 absolute bottom-0 top-0 -left-14"></div>
</>
)}
</button>
);
};
export default Phase;
src/main.tsx
+8 -8
View File
@@ -11,14 +11,14 @@ const router = getRouter();
const rootElement = document.getElementById("app");
if (!rootElement)
throw new Error("Could not find #app element to mount the app");
throw new Error("Could not find #app element to mount the app");
createRoot(rootElement).render(
<StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RouterProvider router={router} />
</PersistGate>
</Provider>
</StrictMode>,
<StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RouterProvider router={router} />
</PersistGate>
</Provider>
</StrictMode>,
);
src/pages/Welcome.tsx
+67 -55
View File
@@ -1,70 +1,82 @@
import { DateTime } from "luxon";
import {
type EventHandler,
type FC,
type MouseEventHandler,
useEffect,
useState,
} from "react";
import { type FC, type MouseEventHandler, useEffect, useState } from "react";
import Phase from "../components/Phase";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import { clearStartTime, setStartTime } from "../store/slices/timeSlice";
import { ROUND_LENGTH_SECONDS } from "../utils/constants";
import { formatElapsed } from "../utils/functions";
import { PHASES, ROUND_LENGTH_SECONDS } from "../utils/constants";
import {
formatElapsed,
getCurrentPhaseIndex,
getElapsedSeconds,
} from "../utils/functions";
const Welcome: FC = () => {
const dispatch = useAppDispatch();
const startTime = useAppSelector((state) => state.time.startTime);
const [now, setNow] = useState(() => DateTime.now());
const dispatch = useAppDispatch();
const startTime = useAppSelector((state) => state.time.startTime);
const [now, setNow] = useState(() => DateTime.now());
useEffect(() => {
if (!startTime) return;
const interval = setInterval(() => setNow(DateTime.now()), 1000);
return () => clearInterval(interval);
}, [startTime]);
useEffect(() => {
if (!startTime) return;
const interval = setInterval(() => setNow(DateTime.now()), 1000);
return () => clearInterval(interval);
}, [startTime]);
const elapsedSeconds = startTime
? now.diff(DateTime.fromISO(startTime), "seconds").seconds
: 0;
const isRunning = startTime !== null;
const isOvertime = elapsedSeconds > 60;
const elapsedSeconds = getElapsedSeconds(startTime, now);
const isRunning = startTime !== null;
const isOvertime = elapsedSeconds > ROUND_LENGTH_SECONDS;
const nextRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
dispatch(clearStartTime());
};
const currentPhaseIndex = getCurrentPhaseIndex(
PHASES,
elapsedSeconds,
isRunning,
);
const startRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
dispatch(setStartTime(DateTime.now().toISO() ?? ""));
};
const nextRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
dispatch(clearStartTime());
};
return (
<div className="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
<h1 className="text-4xl font-bold">By Other Means Control Timer</h1>
const startRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
dispatch(setStartTime(DateTime.now().toISO() ?? ""));
};
<div
className={`font-mono text-8xl tabular-nums ${isOvertime ? "text-red-500 animate-bounce" : "text-slate-100"}`}
>
{formatElapsed(elapsedSeconds)}
</div>
return (
<div className="flex min-h-screen flex-col items-center gap-8 p-8">
<h1 className="text-4xl font-bold">By Other Means Control Timer</h1>
{isRunning ? (
<button
type="button"
onClick={nextRoundClick}
className="rounded-lg bg-slate-700 px-6 py-3 text-lg font-semibold hover:bg-slate-600"
>
Prepare Next Round
</button>
) : (
<button
type="button"
onClick={startRoundClick}
className="rounded-lg bg-emerald-600 px-6 py-3 text-lg font-semibold hover:bg-emerald-500"
>
Start Round
</button>
)}
</div>
);
<div
className={`font-mono text-8xl tabular-nums ${isOvertime ? "text-red-500 animate-bounce" : "text-slate-100"}`}
>
{formatElapsed(elapsedSeconds)}
</div>
{isRunning ? (
<button
type="button"
onClick={nextRoundClick}
className="rounded-lg bg-slate-700 px-6 py-3 text-lg font-semibold hover:bg-slate-600"
>
Prepare Next Round
</button>
) : (
<button
type="button"
onClick={startRoundClick}
className="rounded-lg bg-emerald-600 px-6 py-3 text-lg font-semibold hover:bg-emerald-500"
>
Start Round
</button>
)}
{PHASES.map((phase, index) => {
return (
<Phase
key={phase.name}
phase={phase}
current={index === currentPhaseIndex}
/>
);
})}
</div>
);
};
export default Welcome;
src/router.tsx
+10 -10
View File
@@ -2,18 +2,18 @@ import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
export function getRouter() {
const router = createTanStackRouter({
routeTree,
scrollRestoration: true,
defaultPreload: "intent",
defaultPreloadStaleTime: 0,
});
const router = createTanStackRouter({
routeTree,
scrollRestoration: true,
defaultPreload: "intent",
defaultPreloadStaleTime: 0,
});
return router;
return router;
}
declare module "@tanstack/react-router" {
interface Register {
router: ReturnType<typeof getRouter>;
}
interface Register {
router: ReturnType<typeof getRouter>;
}
}
src/routes/__root.tsx
+19 -19
View File
@@ -3,26 +3,26 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
export const Route = createRootRoute({
component: RootComponent,
component: RootComponent,
});
function RootComponent() {
return (
<>
<Outlet />
{import.meta.env.VITE_TANSTACK_DEVTOOLS === "true" && (
<TanStackDevtools
config={{
position: "bottom-right",
}}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
)}
</>
);
return (
<>
<Outlet />
{import.meta.env.VITE_TANSTACK_DEVTOOLS === "true" && (
<TanStackDevtools
config={{
position: "bottom-right",
}}
plugins={[
{
name: "Tanstack Router",
render: <TanStackRouterDevtoolsPanel />,
},
]}
/>
)}
</>
);
}
src/routes/index.tsx
+2 -2
View File
@@ -2,9 +2,9 @@ import { createFileRoute } from "@tanstack/react-router";
import Welcome from "../pages/Welcome";
export const Route = createFileRoute("/")({
component: RouteComponent,
component: RouteComponent,
});
function RouteComponent() {
return <Welcome />;
return <Welcome />;
}
src/store/slices/phaseSlice.ts
+25
View File
@@ -0,0 +1,25 @@
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
interface StateType {
selected: string | null;
}
const initialState: StateType = {
selected: null,
};
const phaseSlice = createSlice({
name: "phase",
initialState,
reducers: {
setSelectedPhase: (state, action: PayloadAction<string>) => {
state.selected = action.payload;
},
clearSelectedPhase: (state) => {
state.selected = null;
},
},
});
export const { setSelectedPhase, clearSelectedPhase } = phaseSlice.actions;
export default phaseSlice.reducer;
src/store/slices/timeSlice.ts
+12 -12
View File
@@ -1,24 +1,24 @@
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
interface StateType {
startTime: string | null;
startTime: string | null;
}
const initialState: StateType = {
startTime: null,
startTime: null,
};
const timeSlice = createSlice({
name: "time",
initialState,
reducers: {
setStartTime: (state, action: PayloadAction<string>) => {
state.startTime = action.payload;
},
clearStartTime: (state) => {
state.startTime = null;
},
},
name: "time",
initialState,
reducers: {
setStartTime: (state, action: PayloadAction<string>) => {
state.startTime = action.payload;
},
clearStartTime: (state) => {
state.startTime = null;
},
},
});
export const { setStartTime, clearStartTime } = timeSlice.actions;
src/store/store.ts
+14 -55
View File
@@ -1,75 +1,34 @@
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/es/storage";
import phaseReducer from "./slices/phaseSlice";
import timeReducer from "./slices/timeSlice";
const noopStorage = {
getItem() {
return Promise.resolve(null);
},
setItem() {
return Promise.resolve();
},
removeItem() {
return Promise.resolve();
},
};
// redux-persist's bundled storage engine can throw or come back malformed in
// some browsers (private mode, locked-down storage), so this is a minimal
// storage engine that never touches `redux-persist/lib/storage`.
function createLocalStorageEngine() {
if (typeof window === "undefined") return noopStorage;
try {
const testKey = "__by_other_means_storage_test__";
window.localStorage.setItem(testKey, testKey);
window.localStorage.removeItem(testKey);
} catch {
return noopStorage;
}
return {
getItem(key: string) {
return Promise.resolve(window.localStorage.getItem(key));
},
setItem(key: string, value: string) {
window.localStorage.setItem(key, value);
return Promise.resolve();
},
removeItem(key: string) {
window.localStorage.removeItem(key);
return Promise.resolve();
},
};
}
// Configure which slices to persist
const persistConfig = {
key: "root",
storage: createLocalStorageEngine(),
whitelist: ["time"],
key: "root",
storage: storage,
whitelist: ["time", "phase"],
};
// Combine all reducers
const rootReducer = combineReducers({
time: timeReducer,
time: timeReducer,
phase: phaseReducer,
});
// Create persisted reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"],
},
}),
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"],
},
}),
});
export const persistor = persistStore(store);
// Infer the `RootState`, `AppDispatch`, and `AppStore` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
export type AppStore = typeof store;
src/utils/constants.ts
+40
View File
@@ -1,2 +1,42 @@
import type { PhaseType } from "./types";
const ROUND_LENGTH_MINUTES = 40;
export const ROUND_LENGTH_SECONDS = ROUND_LENGTH_MINUTES * 60;
export const PHASES: PhaseType[] = [
{
minuteStart: 0,
minuteEnd: 15,
name: "Negotiation Phase",
description:
"Attend formal negotiations or Imperial Senate. Draft, formalise and ratify treaties. Apart from the first turn, orders from the previous turn will also be resolved during this phase.",
color: "bg-red-800",
borderColor: "border-red-600",
},
{
minuteStart: 15,
minuteEnd: 20,
name: "Plenary Phase",
description:
"Chairs announce any ratified treaties. Facilitators announce any major map events. Teams collect income.",
color: "bg-yellow-600",
borderColor: "border-yellow-400",
},
{
minuteStart: 20,
minuteEnd: 30,
name: "Discussion Phase",
description: "Freely circulate, discuss any topics as desired.",
color: "bg-green-800",
borderColor: "border-green-600",
},
{
minuteStart: 30,
minuteEnd: 40,
name: "Orders Phase",
description:
"Issue orders, plan for the following turn. Remain at team tables during the Orders phase.",
color: "bg-sky-800",
borderColor: "border-sky-600",
},
];
src/utils/functions.ts
+28 -4
View File
@@ -1,6 +1,30 @@
import { DateTime } from "luxon";
import type { PhaseType } from "./types";
export function formatElapsed(seconds: number): string {
const clamped = Math.max(0, Math.floor(seconds));
const minutes = Math.floor(clamped / 60);
const secs = clamped % 60;
return `${minutes}:${secs.toString().padStart(2, "0")}`;
const clamped = Math.max(0, Math.floor(seconds));
const minutes = Math.floor(clamped / 60);
const secs = clamped % 60;
return `${minutes}:${secs.toString().padStart(2, "0")}`;
}
export function getElapsedSeconds(
startTime: string | null,
now: DateTime,
): number {
if (!startTime) return 0;
return now.diff(DateTime.fromISO(startTime), "seconds").seconds;
}
export function getCurrentPhaseIndex(
phases: PhaseType[],
elapsedSeconds: number,
isRunning: boolean,
): number {
if (!isRunning) return -1;
const elapsedMinutes = elapsedSeconds / 60;
for (let i = 0; i < phases.length; i++) {
if (elapsedMinutes < phases[i].minuteEnd) return i;
}
return phases.length - 1;
}
src/utils/types.ts
+8
View File
@@ -0,0 +1,8 @@
export interface PhaseType {
minuteStart: number;
minuteEnd: number;
name: string;
description: string;
color: string;
borderColor: string;
}
src/vite-env.d.ts
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_TANSTACK_DEVTOOLS: string;
readonly VITE_TANSTACK_DEVTOOLS: string;
}