Function GameConfigDialog

src/renderer/components/GameConfigDialog.tsx:29–202

(props: GameConfigDialogProps)

}

export function GameConfigDialog(props: GameConfigDialogProps) {
  const [editorOpen, setEditorOpen] = React.useState(false);
  const [configCopy, setConfigCopy] = React.useState<GameConfigEdit>();
  const [copyIdx, setCopyIdx] = React.useState(0);
  const [validMiddleware, setValidMiddleware] = React.useState<GameMiddlewareInfo[]>([]);

  React.useEffect(() => {
    window.Shared.back.request(BackIn.GET_VALID_MIDDLEWARE, props.info.game)
    .then(setValidMiddleware);
  }, []);

  const openEditor = async (config: GameConfig, idx: number) => {
    // Populate config schemas
    const pairs = config.middleware.map(m => {
      const pair: MiddlewareVersionPair = {
        id: m.middlewareId,
        version: m.version
      };
      return pair;
    });
    const schemas = await window.Shared.back.request(BackIn.GET_MIDDLEWARE_CONFIG_SCHEMAS, pairs);
    const copy: GameConfigEdit = {
      ...deepCopy(config),
      schemas,
    };
    setConfigCopy(copy);
    setCopyIdx(idx);
    setEditorOpen(true);
  };

  const saveConfigCopy = async () => {
    if (configCopy) {
      await props.saveConfig(configCopy, copyIdx);
    }
    setEditorOpen(false);
  };

  const newConfig = React.useCallback(() => {
    const config: GameConfigEdit = {
      id: null,
      gameId: props.info.game.id,
      name: 'New Game Configuration',
      owner: 'local',
      middleware: [],
      schemas: []
    } as any as GameConfigEdit; // Hack to let ORM set ID

    setConfigCopy(config);
    setCopyIdx(props.info.configs.length);
    setEditorOpen(true);
  }, [props.info.configs.length, props.info.game.id]);

  // Generate rows
  const rows = React.useMemo(() => {
    return props.info.configs.map((c, idx) => {
      return (
        <div className='game-config-dialog__config' key={idx}>
          <div className='game-config-dialog__config-row'>