, option?: IDropdownOption) => {
+ if (option?.text != undefined) {
+ ReorderPlayersDialogController.changeTeamName(option.text);
+ setAutoFocusIndex(undefined);
+ }
+ }, []);
+
+ const reorderPlayersDialog: ReorderPlayersDialogState | undefined =
+ appState.uiState.dialogState.reorderPlayersDialog;
+ if (reorderPlayersDialog === undefined) {
+ return <>;
+ }
+
+ // This makes sure that the focus stays on the button belonging to the player
+ if (autoFocusIndex != undefined) {
+ const className: string = autoFocusIsUp ? moveUpClassName : moveDownClassName;
+ const element = document.getElementsByClassName(className)[autoFocusIndex] as HTMLButtonElement;
+ if (element) {
+ element.focus();
+ }
+
+ setAutoFocusIndex(undefined);
+ }
+
+ const teamOptions: IDropdownOption[] = appState.game.teamNames.map((teamName, index) => {
+ return {
+ key: index,
+ text: teamName,
+ selected: reorderPlayersDialog.teamName === teamName,
+ };
+ });
+
+ const players: Player[] = reorderPlayersDialog.players.filter((p) => p.teamName === reorderPlayersDialog.teamName);
+
+ function renderPlayerRow(player: Player | undefined, index: number | undefined) {
+ if (player == undefined || index == undefined || reorderPlayersDialog == undefined) {
+ return <>;
+ }
+
+ return (
+
+
+
+
+
+
+ {
+ ReorderPlayersDialogController.moveForward(player);
+ if (index > 1) {
+ setAutoFocusIsUp(true);
+ setAutoFocusIndex(index - 1);
+ }
+ }}
+ />
+
+
+ = players.length - 1}
+ onClick={() => {
+ ReorderPlayersDialogController.moveBackward(player);
+ if (index < players.length - 1) {
+ setAutoFocusIsUp(false);
+ setAutoFocusIndex(index + 1);
+ }
+ }}
+ />
+
+
+
+ );
+ }
+
+ function insertBeforeItem(item: Player) {
+ if (draggedItem == undefined) {
+ return;
+ }
+
+ const locationIndex = players.indexOf(item);
+ const itemIndex = players.indexOf(draggedItem);
+ if (locationIndex !== itemIndex) {
+ ReorderPlayersDialogController.movePlayerToIndex(draggedItem, locationIndex);
+ }
+ }
+
+ const dragDropEvents: IDragDropEvents = {
+ canDrag: () => true,
+ canDrop: () => true,
+ onDragStart: (item?: Player) => {
+ setDraggedItem(item);
+ },
+ onDragEnd: () => {
+ setDraggedItem(undefined);
+ },
+ onDrop: (item?: Player) => {
+ if (draggedItem && item) {
+ insertBeforeItem(item);
+ setDraggedItem(undefined);
+ }
+ },
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/src/components/dialogs/ReorderPlayersDialogController.ts b/src/components/dialogs/ReorderPlayersDialogController.ts
new file mode 100644
index 0000000..e819668
--- /dev/null
+++ b/src/components/dialogs/ReorderPlayersDialogController.ts
@@ -0,0 +1,46 @@
+import { Player } from "../../state/TeamState";
+import { AppState } from "../../state/AppState";
+import { GameState } from "../../state/GameState";
+import { ReorderPlayersDialogState } from "../../state/ReorderPlayersDialogState";
+
+export function changeTeamName(newName: string): void {
+ const appState: AppState = AppState.instance;
+ const reorderPlayersDialog: ReorderPlayersDialogState | undefined =
+ appState.uiState.dialogState.reorderPlayersDialog;
+ if (reorderPlayersDialog == undefined) {
+ return;
+ }
+
+ reorderPlayersDialog.setTeamName(newName);
+}
+
+export function hideDialog(): void {
+ const appState: AppState = AppState.instance;
+ appState.uiState.dialogState.hideReorderPlayersDialog();
+}
+
+export function moveBackward(player: Player): void {
+ AppState.instance.uiState.dialogState.reorderPlayersDialog?.movePlayerBackward(player);
+}
+
+export function moveForward(player: Player): void {
+ AppState.instance.uiState.dialogState.reorderPlayersDialog?.movePlayerForward(player);
+}
+
+export function movePlayerToIndex(player: Player, index: number): void {
+ AppState.instance.uiState.dialogState.reorderPlayersDialog?.movePlayerToIndex(player, index);
+}
+
+export function submit(): void {
+ const appState: AppState = AppState.instance;
+ const game: GameState = appState.game;
+ const reorderPlayersDialogState: ReorderPlayersDialogState | undefined =
+ appState.uiState.dialogState.reorderPlayersDialog;
+ if (reorderPlayersDialogState == undefined) {
+ return;
+ }
+
+ game.setPlayers(reorderPlayersDialogState.players);
+
+ hideDialog();
+}
diff --git a/src/state/DialogState.ts b/src/state/DialogState.ts
index 6548eea..8ca0fa0 100644
--- a/src/state/DialogState.ts
+++ b/src/state/DialogState.ts
@@ -6,6 +6,7 @@ import { IGameFormat } from "./IGameFormat";
import { IMessageDialogState, MessageDialogType } from "./IMessageDialogState";
import { RenamePlayerDialogState } from "./RenamePlayerDialogState";
import { Player } from "./TeamState";
+import { ReorderPlayersDialogState } from "./ReorderPlayersDialogState";
export class DialogState {
@ignore
@@ -32,6 +33,9 @@ export class DialogState {
@ignore
public renamePlayerDialog: RenamePlayerDialogState | undefined;
+ @ignore
+ public reorderPlayersDialog: ReorderPlayersDialogState | undefined;
+
constructor() {
makeAutoObservable(this);
@@ -43,6 +47,7 @@ export class DialogState {
this.messageDialog = undefined;
this.newGameDialogVisible = false;
this.renamePlayerDialog = undefined;
+ this.reorderPlayersDialog = undefined;
}
public hideAddQuestionsDialog(): void {
@@ -77,6 +82,10 @@ export class DialogState {
this.renamePlayerDialog = undefined;
}
+ public hideReorderPlayersDialog(): void {
+ this.reorderPlayersDialog = undefined;
+ }
+
public showAddQuestionsDialog(): void {
this.addQuestions = new AddQuestionDialogState();
}
@@ -101,6 +110,10 @@ export class DialogState {
this.renamePlayerDialog = new RenamePlayerDialogState(player);
}
+ public showReorderPlayersDialog(players: Player[]): void {
+ this.reorderPlayersDialog = new ReorderPlayersDialogState(players);
+ }
+
public showOKMessageDialog(title: string, message: string, onOK?: () => void): void {
this.messageDialog = {
title,
diff --git a/src/state/ReorderPlayersDialogState.ts b/src/state/ReorderPlayersDialogState.ts
new file mode 100644
index 0000000..a706fde
--- /dev/null
+++ b/src/state/ReorderPlayersDialogState.ts
@@ -0,0 +1,85 @@
+import { makeAutoObservable } from "mobx";
+import { Player } from "./TeamState";
+
+export class ReorderPlayersDialogState {
+ public teamName: string;
+
+ public players: Player[];
+
+ constructor(players: Player[]) {
+ makeAutoObservable(this);
+
+ this.players = players;
+ this.teamName = players.length > 0 ? players[0].teamName : "";
+ }
+
+ public setTeamName(newTeam: string): void {
+ this.teamName = newTeam;
+ }
+
+ public movePlayerBackward(player: Player): void {
+ let nextTeammateIndex = -1;
+ for (let i = this.players.length - 1; i >= 0; i--) {
+ const currentPlayer: Player = this.players[i];
+ if (player === currentPlayer) {
+ if (nextTeammateIndex === -1) {
+ // Current player is in front, we can't move them
+ return;
+ }
+
+ this.players[i] = this.players[nextTeammateIndex];
+ this.players[nextTeammateIndex] = player;
+ return;
+ }
+
+ if (this.players[i].teamName === player.teamName) {
+ nextTeammateIndex = i;
+ }
+ }
+ }
+
+ public movePlayerForward(player: Player): void {
+ let previousTeammateIndex = -1;
+ for (let i = 0; i < this.players.length; i++) {
+ const currentPlayer: Player = this.players[i];
+ if (player === currentPlayer) {
+ if (previousTeammateIndex === -1) {
+ // Current player is in front, we can't move them
+ return;
+ }
+
+ this.players[i] = this.players[previousTeammateIndex];
+ this.players[previousTeammateIndex] = player;
+ return;
+ }
+
+ if (this.players[i].teamName === player.teamName) {
+ previousTeammateIndex = i;
+ }
+ }
+ }
+
+ public movePlayerToIndex(player: Player, index: number): void {
+ if (index < 0) {
+ return;
+ }
+
+ const teamName: string = player.teamName;
+ let sameTeamCount = -1;
+ for (let i = 0; i < this.players.length; i++) {
+ const currentPlayer: Player = this.players[i];
+ if (currentPlayer.teamName === teamName) {
+ sameTeamCount++;
+ }
+
+ if (sameTeamCount === index) {
+ let newPlayers = this.players.filter((p) => p !== player);
+ newPlayers = newPlayers.slice(0, i).concat(player).concat(newPlayers.slice(i));
+ this.players = newPlayers;
+ return;
+ }
+ }
+
+ // Index is beyond the number of players in the team. Treat it as a no-op
+ }
+}
diff --git a/tests/ReorderPlayersDialogControllerTests.ts b/tests/ReorderPlayersDialogControllerTests.ts
new file mode 100644
index 0000000..284f85b
--- /dev/null
+++ b/tests/ReorderPlayersDialogControllerTests.ts
@@ -0,0 +1,244 @@
+import { assert, expect } from "chai";
+
+import * as ReorderPlayersDialogController from "src/components/dialogs/ReorderPlayersDialogController";
+import { AppState } from "src/state/AppState";
+import { GameState } from "src/state/GameState";
+import { PacketState, Tossup } from "src/state/PacketState";
+import { Player } from "src/state/TeamState";
+import { ReorderPlayersDialogState } from "src/state/ReorderPlayersDialogState";
+
+const defaultPacket: PacketState = new PacketState();
+defaultPacket.setTossups([
+ new Tossup("first q", "first a"),
+ new Tossup("second q", "second a"),
+ new Tossup("third q", "third a"),
+]);
+
+const defaultTeamNames: string[] = ["First Team", "Team2"];
+
+const firstTeamPlayers: Player[] = [
+ new Player("Alex", defaultTeamNames[0], true),
+ new Player("Anna", defaultTeamNames[0], true),
+ new Player("Ashok", defaultTeamNames[0], false),
+];
+
+const secondTeamPlayers: Player[] = [
+ new Player("Bob", defaultTeamNames[1], true),
+ new Player("Anna", defaultTeamNames[1], true),
+];
+
+const defaultExistingPlayers: Player[] = [
+ firstTeamPlayers[0],
+ firstTeamPlayers[1],
+ secondTeamPlayers[0],
+ secondTeamPlayers[1],
+ firstTeamPlayers[2],
+];
+
+function initializeApp(players?: Player[]): { appState: AppState; players: Player[] } {
+ const gameState: GameState = new GameState();
+ gameState.loadPacket(defaultPacket);
+
+ players = players ?? defaultExistingPlayers;
+ gameState.addPlayers(players);
+
+ AppState.resetInstance();
+ const appState: AppState = AppState.instance;
+ appState.game = gameState;
+ appState.uiState.dialogState.showReorderPlayersDialog(players);
+ return { appState, players };
+}
+
+function getReorderPlayersDialogState(appState: AppState): ReorderPlayersDialogState {
+ if (appState.uiState.dialogState.reorderPlayersDialog == undefined) {
+ assert.fail("PendingNewPlayer should not be undefined");
+ }
+
+ return appState.uiState.dialogState.reorderPlayersDialog;
+}
+
+describe("ReorderPlayersDialogControllerTests", () => {
+ it("hideDialog", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.hideDialog();
+
+ expect(appState.uiState.dialogState.reorderPlayersDialog).to.be.undefined;
+ });
+ describe("changeTeamName", () => {
+ it("change to both teams", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.changeTeamName(defaultTeamNames[1]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.teamName).to.equal(defaultTeamNames[1]);
+ ReorderPlayersDialogController.changeTeamName(defaultTeamNames[0]);
+ expect(dialog.teamName).to.equal(defaultTeamNames[0]);
+ });
+ });
+ it("submit", () => {
+ const { appState, players } = initializeApp();
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+ dialog.movePlayerBackward(players[0]);
+
+ ReorderPlayersDialogController.submit();
+
+ expect(appState.uiState.dialogState.reorderPlayersDialog).to.be.undefined;
+ expect(appState.game.players).to.be.deep.equal([
+ firstTeamPlayers[1],
+ firstTeamPlayers[0],
+ secondTeamPlayers[0],
+ secondTeamPlayers[1],
+ firstTeamPlayers[2],
+ ]);
+ });
+ describe("moveBackward", () => {
+ it("Move backwards from the end is no-op", () => {
+ const { appState, players } = initializeApp();
+ ReorderPlayersDialogController.moveBackward(players[players.length - 1]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players[players.length - 1]).to.equal(players[players.length - 1]);
+ expect(dialog.players).to.be.deep.equal(players);
+ });
+ it("Move backwards from front moves player back", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.moveBackward(firstTeamPlayers[0]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players[0]).to.equal(firstTeamPlayers[1]);
+ expect(dialog.players[1]).to.equal(firstTeamPlayers[0]);
+ expect(dialog.players.slice(2)).to.be.deep.equal(defaultExistingPlayers.slice(2));
+ });
+ it("Move backwards for second team", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.moveBackward(secondTeamPlayers[0]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal([
+ firstTeamPlayers[0],
+ firstTeamPlayers[1],
+ secondTeamPlayers[1],
+ secondTeamPlayers[0],
+ firstTeamPlayers[2],
+ ]);
+ });
+ it("Move backwards with gap swaps correctly", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.moveBackward(firstTeamPlayers[1]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal([
+ firstTeamPlayers[0],
+ firstTeamPlayers[2],
+ secondTeamPlayers[0],
+ secondTeamPlayers[1],
+ firstTeamPlayers[1],
+ ]);
+ });
+ });
+ describe("moveForward", () => {
+ it("Move forwards from 0 is no-op", () => {
+ const { appState, players } = initializeApp();
+ ReorderPlayersDialogController.moveForward(players[0]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players[0]).to.equal(players[0]);
+ expect(dialog.players).to.be.deep.equal(players);
+ });
+ it("Move forwards from 1 swaps player to front", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.moveForward(firstTeamPlayers[1]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players[0]).to.equal(firstTeamPlayers[1]);
+ expect(dialog.players[1]).to.equal(firstTeamPlayers[0]);
+ expect(dialog.players.slice(2)).to.be.deep.equal(defaultExistingPlayers.slice(2));
+ });
+ it("Move forwards for second team", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.moveForward(secondTeamPlayers[1]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal([
+ firstTeamPlayers[0],
+ firstTeamPlayers[1],
+ secondTeamPlayers[1],
+ secondTeamPlayers[0],
+ firstTeamPlayers[2],
+ ]);
+ });
+ it("Move forwards with gap swaps correctly", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.moveForward(firstTeamPlayers[2]);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal([
+ firstTeamPlayers[0],
+ firstTeamPlayers[2],
+ secondTeamPlayers[0],
+ secondTeamPlayers[1],
+ firstTeamPlayers[1],
+ ]);
+ });
+ });
+
+ // move ToIndex tests
+ describe("movePlayerToIndex", () => {
+ it("movePlayerToIndex to same index is no-op", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.movePlayerToIndex(firstTeamPlayers[1], 1);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal(defaultExistingPlayers);
+ });
+ it("movePlayerToIndex to negative index is no-op", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.movePlayerToIndex(firstTeamPlayers[1], -1);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal(defaultExistingPlayers);
+ });
+ it("movePlayerToIndex to overly large index is no-op", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.movePlayerToIndex(firstTeamPlayers[1], firstTeamPlayers.length);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal(defaultExistingPlayers);
+ });
+ it("movePlayerToIndex next player swap", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.movePlayerToIndex(firstTeamPlayers[0], 1);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players[0]).to.equal(firstTeamPlayers[1]);
+ expect(dialog.players[1]).to.equal(firstTeamPlayers[0]);
+ expect(dialog.players.slice(2)).to.be.deep.equal(defaultExistingPlayers.slice(2));
+ });
+ it("movePlayerToIndex first to last player swap", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.movePlayerToIndex(firstTeamPlayers[0], 2);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal([
+ firstTeamPlayers[1],
+ secondTeamPlayers[0],
+ secondTeamPlayers[1],
+ firstTeamPlayers[2],
+ firstTeamPlayers[0],
+ ]);
+ });
+ it("movePlayerToIndex last to first player swap", () => {
+ const { appState } = initializeApp();
+ ReorderPlayersDialogController.movePlayerToIndex(firstTeamPlayers[2], 0);
+ const dialog: ReorderPlayersDialogState = getReorderPlayersDialogState(appState);
+
+ expect(dialog.players).to.be.deep.equal([
+ firstTeamPlayers[2],
+ firstTeamPlayers[0],
+ firstTeamPlayers[1],
+ secondTeamPlayers[0],
+ secondTeamPlayers[1],
+ ]);
+ });
+ });
+});