yarn -> pnpm

.github/workflows/nodejs.yml

@@ -8,15 +8,16 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
+    - uses: pnpm/action-setup@v3
     - uses: actions/setup-node@v3
       with:
         node-version: '20.x'
-        registry-url: <registry url>
+        cache: 'pnpm'
     - name: Install dependencies
-      run: yarn install
+      run: pnpm install
     - name: ESLint
-      run: yarn lint-js
+      run: pnpm lint-js
     - name: TypeScript
-      run: yarn lint-ts
+      run: pnpm lint-ts
     - name: Unit tests
-      run: yarn test
+      run: pnpm test

.gitignore

@@ -6,7 +6,6 @@ node_modules
 test_case.html
 npm-debug.log
 build
-yarn-error.log
 local.log
 stats-*.html
 .idea/

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 
-yarn lint-staged
+pnpm lint-staged

README.md

@@ -52,31 +52,31 @@ from YOUR_NAME_HERE (GITHUB_USERNAME_HERE)".
 
 Make sure you're using a recent version of [Node.js](https://nodejs.org/), older
 versions probably won't work. Then, all of the tooling used in development can
-be set up by simply installing [Yarn 1](https://classic.yarnpkg.com/) and
+be set up by simply installing [pnpm](https://pnpm.io/) and
 running:
 
-    yarn install
+    pnpm install
 
 from within this folder.
 
 ### Step 2 - Building
 
 To build the app along with all its assets, run
 
-    yarn run build
+    pnpm run build
 
 However during development, you probably would rather do
 
-    yarn run start-watch
+    pnpm run start-watch
 
 which will start the server and watch JS and CSS files for changes and
-recompile. This simply runs both `yarn run start` and `yarn run watch` together,
+recompile. This simply runs both `pnpm run start` and `pnpm run watch` together,
 which alternatively can be run separately if you wish.
 
 By default this will build the basketball version of the game. For other sports,
 set the SPORT environment variable to "football", "baseball", or "hockey", like:
 
-    SPORT=football yarn run start-watch
+    SPORT=football yapnpmrn run start-watch
 
 Open `package.json` to see all available development scripts.
 
@@ -90,10 +90,10 @@ use as long as you can get it to run on your computer.
 
 Run
 
-    yarn run start
+    pnpm run start
 
-and point your browser to <http://localhost:3000/>. If you use the command `yarn
-run start-watch` from above, then running the command `yarn run start` is not
+and point your browser to <http://localhost:3000/>. If you use the command `pnpm
+run start-watch` from above, then running the command `pnpm run start` is not
 necessary.
 
 #### 2. Apache
@@ -106,17 +106,17 @@ should work if you point it at the `build` folder with mod_rewrite enabled.
 TypeScript and ESLint are used to enforce some coding standards. To run them on
 the entire codebase, run
 
-    yarn run lint
+    pnpm run lint
 
 Integration and unit tests spread out through the codebase in *.test.ts files.
 Coverage is not great. They can be run from the command line with
 
-    yarn test
+    pnpm test
 
 There is also a single end-to-end test which creates a league and simulates a
 season. To execute the end-to-end test, run
 
-    yarn run test-e2e
+    pnpm run test-e2e
 
 For the end-to-end test, by default it is basketball. If you want it to do
 football, stick `SPORT=football ` in front.
@@ -162,7 +162,7 @@ reloading if you want to see changes in the worker.
 
 ### Service Worker
 
-This only applies if you use Apache, not if you use `yarn run start`!
+This only applies if you use Apache, not if you use `pnpm run start`!
 
 A service worker is used for offline caching. This can make development tricky,
 because if you load the game in your browser, make a change, wait for

TODO

@@ -1,3 +1,11 @@
+drag and drop
+- some modern library
+- customize page
+  - allow drag and drop to reorder confs/divs
+  - allow drag and drop to move teams to other divs
+- manage confs page
+- remove patch
+
 indicator of if trade will be accepted
 - https://old.reddit.com/r/BasketballGM/comments/1b3h2f6/monthly_suggestions_thread/kswqcuk/
 
@@ -1261,9 +1269,6 @@ UI for selecting a custom set of teams in a new league
     - i guess that's fine... real players would be generated from the team configuration, and if there are none, there are none. all other settings from that real season would still apply
 - clicking "Customize" takes you to a new page
   - list of teams by confs/divs
-    - allow drag and drop to reorder confs/divs
-      - https://github.com/atlassian/react-beautiful-dnd
-    - allow drag and drop to move teams to other divs
   - add/edit team
     - region name, pop, stadium capacity, logo URL, srID (dropdown, not free text, and help popover explaining that real team overrides will apply), colors, include real players?
   - while viewing confs/divs/teams, buttons on the side

jest.config.mjs

@@ -11,7 +11,9 @@ export default {
 	setupFilesAfterEnv: ["./src/test/jest.ts", "./src/worker/index.ts"],
 
 	// https://stackoverflow.com/a/43197503/786644
-	transformIgnorePatterns: ["<rootDir>/node_modules/(?!d3-|fake-indexeddb)"],
+	transformIgnorePatterns: [
+		"<rootDir>/node_modules/.pnpm/(?!d3-|fake-indexeddb)",
+	],
 
 	// Non-default value is needed to catch .cjs test file
 	testRegex: "\\.test\\.c?[jt]sx?$",

karma-browserstack.conf.js

@@ -18,9 +18,9 @@ const customLaunchers = [
 	{
 		base: "BrowserStack",
 		browser: "safari",
-		browser_version: "13.1", // Works back to 12.1 currently
+		browser_version: "14.1", // Works back to 12.1 currently
 		os: "OS X",
-		os_version: "Catalina",
+		os_version: "Big Sur",
 	},
 ].reduce((acc, browser, i) => {
 	acc[i] = browser;

package.json

@@ -13,19 +13,18 @@
 	"scripts": {
 		"start": "node tools/server.js",
 		"build": "node tools/build.js",
-		"deploy": "yarn run lint && yarn test && node tools/deploy.js",
-		"deploy-all": "yarn run lint && yarn test && node tools/deploy-all.js",
-		"start-watch": "concurrently --kill-others \"yarn run start\" \"yarn run watch\"",
+		"deploy": "pnpm run lint && pnpm test && node tools/deploy.js",
+		"deploy-all": "pnpm run lint && pnpm test && node tools/deploy-all.js",
+		"start-watch": "concurrently --kill-others \"pnpm run start\" \"pnpm run watch\"",
 		"watch": "node --loader=import-jsx --no-warnings tools/watch.js",
-		"lint": "concurrently --raw \"yarn run lint-js\" \"yarn run lint-ts\"",
+		"lint": "concurrently --raw \"pnpm run lint-js\" \"pnpm run lint-ts\"",
 		"lint-js": "eslint \"*.{mjs,js,ts,tsx}\" \"public/*.js\" \"src/**/*.{mjs,js,ts,tsx}\" \"tools/**/*.{mjs,js,ts,tsx}\"",
-		"lint-ts": "node tools/pre-test.js && yarn run tsc",
+		"lint-ts": "node tools/pre-test.js && pnpm run tsc",
 		"prettier": "prettier --write \"*.{mjs,js,json,scss,ts,tsx}\" \"public/**/*.{mjs,js,json,scss,ts,tsx}\" \"src/**/*.{mjs,js,json,scss,ts,tsx}\" \"tools/**/*.{mjs,js,json,scss,ts,tsx}\"",
 		"test": "node tools/pre-test.js && cross-env SPORT=basketball jest --testPathIgnorePatterns football && cross-env SPORT=football jest --testRegex \"football.*\\.test\\.c?[jt]sx?\"",
 		"test-e2e": "node tools/pre-test.js && karma start karma.conf.js",
 		"test-e2e-watch": "node tools/pre-test.js && karma start karma.conf.js --auto-watch --no-single-run",
 		"test-e2e-browserstack": "node tools/pre-test.js && karma start karma-browserstack.conf.js",
-		"postinstall": "patch-package",
 		"prepare": "husky"
 	},
 	"lint-staged": {
@@ -52,7 +51,7 @@
 		"classnames": "^2.5.1",
 		"confetti-js": "^0.0.18",
 		"d3-dsv": "^3.0.1",
-		"dompurify": "^3.1.0",
+		"dompurify": "^3.1.1",
 		"dropbox": "^10.34.0",
 		"facesjs": "^4.0.0",
 		"fast-deep-equal": "^3.1.3",
@@ -150,8 +149,6 @@
 		"lint-staged": "^15.2.2",
 		"log-symbols": "^6.0.0",
 		"mocha": "^10.4.0",
-		"patch-package": "^8.0.0",
-		"postinstall-postinstall": "^2.1.0",
 		"prettier": "^3.2.5",
 		"purgecss": "^6.0.0",
 		"replace": "^1.2.2",
@@ -162,5 +159,10 @@
 		"typescript": "^5.4.5",
 		"workbox-build": "^7.0.0"
 	},
-	"private": true
+	"private": true,
+	"pnpm": {
+		"patchedDependencies": {
+			"react-sortable-hoc@2.0.0": "patches/react-sortable-hoc@2.0.0.patch"
+		}
+	}
 }

patches/react-sortable-hoc@2.0.0.patch

@@ -0,0 +1,15 @@
+diff --git a/types/index.d.ts b/types/index.d.ts
+index 770a77179b88bacf5ad9283ae92975d24581d108..5934346cab2850a003869615ab0cf4a4be767131 100644
+--- a/types/index.d.ts
++++ b/types/index.d.ts
+@@ -105,7 +105,6 @@ export type WrappedComponentFactory<P> = (props: P) => JSX.Element;
+
+ export type WrappedComponent<P> =
+   | React.ComponentClass<P>
+-  | React.SFC<P>
+   | WrappedComponentFactory<P>;
+
+ export function SortableContainer<P>(
+diff --git a/yarn.lock b/yarn.lock
+deleted file mode 100644
+index c6f4409d49066905c78cf9baaa361d851bc98512..0000000000000000000000000000000000000000