owen8877/vetro

Fun metro game built with React.js.

Dev Notes

React.js tools

• https://github.com/uber/react-digraph (deprecated)
• https://handsonreact.com/docs/labs/react-tutorial-typescript (deprecated)
• https://blog.logrocket.com/getting-started-bun-react/ ⇒ bun create vite .
• https://github.com/airbnb/visx
• https://github.com/graphql/graphql-http
• server GraphQL: https://www.graphile.org/postgraphile/usage-library/
• https://create-react-app.dev/docs/proxying-api-requests-in-development/
• https://react.dev/reference/react/Component
• https://stackoverflow.com/questions/77486735/docker-with-vite-env-variables-are-undefined-inside-the-docker-container
• async-library/react-async#330 (comment)
• microsoft/vscode-remote-release#2451
• child component rerender? https://github.com/welldone-software/why-did-you-render
  • bottomline: use useCallback to memorize function to avoid rerender due to lambda creation

WS

• https://www.nginx.com/blog/websocket-nginx/
• https://socket.io/docs/v4/tutorial/step-3
• https://socket.io/how-to/use-with-react

State machine

Animation

https://www.framer.com/motion/ https://www.reddit.com/r/Frontend/comments/ypgba4/which_js_animation_library_do_you_use_looking_for/ xyflow/xyflow#2995

Redux

https://redux.js.org/usage/implementing-undo-history reduxjs/redux#606

Pre- & post-commit workflow

1. Run bun i and pnpm i in an alternating fashion to make sure all packages are frozen.
2. Run git tag -am "vx.y.z" vx.y.z for every important build.

Auto-generated by Vite

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Game design

• https://en.wikipedia.org/wiki/Turn-based_strategy

Roadmap

[x] incorporate rule to dfs [x] move proposal: drag n drop UI [x] rule proposal: UI and serialization [x] general UI [ ] rule validation: random search and prompt user input [x] map design: set map picture on the background and add edge customization [x] debug tools: replay and rewind (input exogeneous) [x] test shanghai map [x] path customization widget [x] contextual zoom [x] transfer group [ ] player color, name and avatar [x] limit to objections [x] show proposed move/rule [x] fix waiting logic (can click out of one's own turn) [ ] animation timing