added fork info to readme

feat: add game `Knights and Knaves` by JadAbouHawili

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+client/dist
+games/
+server/.lake
+**/.DS_Store
+logs/
+relay/prev_cpu_metric
+test.ecosystem.config.cjs

.env

@@ -1 +0,0 @@
-LEAN4GAME_SINGLE_GAME=false

.github/workflows/build.yml

@@ -1,11 +1,23 @@
 name: Build
 run-name: Build the project
-on: [push]
+on:
+  workflow_dispatch:
+  push:
 jobs:
   build:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: install elan
+        run: |
+          set -o pipefail
+          curl -sSfL https://github.com/leanprover/elan/releases/download/v3.0.0/elan-x86_64-unknown-linux-gnu.tar.gz | tar xz
+          ./elan-init -y
+          echo "$HOME/.elan/bin" >> $GITHUB_PATH
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
+      - name: print lean and lake versions
+        run: |
+          lean --version
+          lake --version
       - run: npm install
       - run: npm run build

.gitignore

@@ -1,4 +1,8 @@
 node_modules
 client/dist
-server/build
-**/lake-packages/
+games/
+server/.lake
+**/.DS_Store
+logs/
+relay/prev_cpu_metric
+test.ecosystem.config.cjs

.vscode/ltex.dictionary.en-US.txt

@@ -0,0 +1,7 @@
+GameSkeleton
+HiddenTactic
+subgoals
+KaTex
+gameserver
+lakefile
+Zulip

DOCUMENTATION.md

@@ -1,323 +0,0 @@
-# Creating a game.
-
-Ideally one takes the [NNG template](https://github.com/hhu-adam/NNG4) to create a new game.
-
-## Game Structure
-
-A game consist of worlds which have multiple levels each. In the following we describe how to create a level file and how to combine these into a game.
-
-### Level
-
-#### Preample
-
-A level file is a lean file that imports at least `GameServer.Commands` and starts with the four lean commands
-
-```lean
-Game "NNG"
-World "Addition"
-Level 1
-Title "The rfl tactic"
-```
-
-Note that the levels inside a world must have consequtive numbering starting with `1`. The `Game`
-and `World` strings can be anything.
-
-#### Statement
-
-The core of a level is the `Statement`, which is the exercise that should be proven:
-
-```lean
-/-- For all natural numbers $n$, we have $0 + n = n$. -/
-@[simp]
-Statement MyNat.zero_add
-    (n : ℕ) : 0 + n = n := by
-  Hint "You can start a proof by `induction n`."
-  induction n with n hn
-  · Hint "This is the base case."
-    rw [add_zero]
-    rfl
-  · Hint "This is the induction hypothesis"
-    rw [add_succ]
-    Branch
-      simp
-      Hint "A branch is an alternative tactic sequence. Does not need to finish the proof."
-    rw [hn]
-    rfl
-```
-
-##### Proof
-
-The proof must always be a tactic proof, i.e. `:= by` is a mandatory part of the syntax.
-
-There are a few extra tactics that help you structuring the proof:
-
-- `Hint`: You can use `Hint "text"` to display text if the goal state in-game matches
-  the one where `Hint` is placed. For more options about hints, see below.
-- `Branch`: In the proof you can add a `Branch` that runs an alternativ tactic sequence, which
-  helps setting `Hints` in different   places. The `Branch` does not affect the main
-  proof and does not need to finish any goals.
-- `Template`/`Hole`: not implemented yet, but used to provide a sample proof template.
-
-##### Statement Name (optional)
-
-If you specify a name (`MyNat.zero_add`), this lemma will be available in future levels.
-(Note that a future level must also import this level,
-so that Lean knows about the added statement).
-
-The name must be *fully qualified*. (TODO: is that still true? Did we implement namespaces?)
-
-##### Doc Comment (optional)
-
-There are three places where the documentation comment appears:
-
-1. as doc comment when hovering over the theorem
-2. as exercise description at the top of the level: ``Theorem `zero_add`: yada yada.``
-3. in the inventory. This can be overwritten by using
-  `LemmaDoc MyNat.zero_add "different yada yada"` as one might want to add a more detailed
-  description there including examples etc.
-
-Both latter points support Markdown (including katex).
-##### Attributes (optional)
-
-the `@[ attributes ]` prefix should work just like you know it from the `theorem` keyword.
-
-#### Introduction/Conclusion
-
-Optionally, you can add a `Introduction "some text"` and `Conclusion "some text"` to your level.
-The introduction will be shown at the beginning, the conclusion is displayed once the level
-is solved.
-
-#### Lemmas/Tactics/Definitions
-
-Only enabled lemmas/tactics/definitions (called "items" here) are available in a level.
-
-To add a new item in a level, you can add
-
-```lean
-NewTactic rfl simp
-NewLemma MyNat.add_zero
-NewDefinition Nat
-```
-
-Once added, items will be available in all future levels/worlds,
-unless you disable them for a particular level with
-
-```lean
-DisabledTactic tauto
-DisabledLemma MyNat.add_zero
-```
-
-or specify explicitely which items should be available with
-
-```lean
-OnlyTactic rw rfl apply
-OnlyLemma MyNat.add_zero
-```
-
-Lastly, all items need documentation entries (which are imported in the level),
-see more about that below. There is also explains the `LemmaTab` keyword.
-
-### World
-
-Multiple levels are combined into a world and the worlds are then added to the game. It is recommended that all levels of a world are inside one folder (e.g. `NNG/Levels/Addition/`) and
-then there is one world file (`NNG/Levels/Addition.lean`) which contains the following
-
-```lean
-import NNG.Levels.Addition.Level_1
-import NNG.Levels.Addition.Level_2
-
-Game "NNG"
-World "Addition"
-Title "Addition World"
-
-Introduction "some text"
-```
-
-The `Title` is the world's display title. The `Introduction` is displayed before loading level 1.
-Note that all levels of a world should be imported by the world file and they **must not** be
-imported in another world's levels. (bug?)
-
-However, you can import an entire world in a different world's level: `import NNG.Levels.Addition`
-
-### Game
-
-The Game itself (i.e. the main file of you lake project, `NNG.lean`) should import all worlds and have the following layout, concluding with `MakeGame`:
-
-```lean
-import NNG.Levels.Addition
-import NNG.Levels.Multiplication
-import NNG.Levels.Power
-
-Game "NNG"
-Title "Natural Number Game"
-Introduction "some text"
-
-Path Addition → Multiplication → Power
-
-MakeGame
-```
-
-There can be several `Path` statements to define the relation between the worlds. The worlds
-must form a directed acyclic graph, i.e. have no loops. The order of worlds influences which tactics and lemmas will be unlocked in a given level.
-
-### Documentation
-
-Each tactic, lemma, or definition (all called items here) that is introduced in the game
-needs a documentation entry. These are statements of the following form:
-
-```lean
-LemmaDoc MyNat.add_squared as "add_squared" in "Pow"
-"(missing)"
-
-TacticDoc constructor
-"(missing)"
-
-DefinitionDoc One as "1"
-"(missing)"
-```
-
-Notes:
-
-* The lemma name must be **fully qualified**. The string display name can be arbitrary.
-* Tactics must have their proper name. use `TacticDoc «have» ""` if it does not work
-  without french quotes.
-* Definition names can be arbitrary. E.g. I used `DefinitionDoc Symbol.Fun as "fun x ↦ x" "(missing)"` once.
-
-Moreover, the lemmas are in sorted in tabs (the `in "Pow`) part. In each level file, you
-can define which tab is open when the level is loaded by adding `LemmaTab "Pow"`.
-
-There will be features added to get automatic information from mathlib!
-
-## Escaping
-(TODO: Move)
-
-
-Inside the doc comment you don't need to escape the backslashes:
-
-```
-/-- $\operatorname{succ}(n)$. notation for naturals is `\N`. -/
-Statement ...
-```
-
-However, inside interpolated strings (e.g. in `Hint`, `Introduction` and `Conclusion`)
-you do need to escape backslashes
-with `\\` and `{` with `\{`:
-
-```
-Hint "This code has some $\\operatorname\{succ}(n)$ math. The value of `h` is {h}.
-Notation for naturals is `\\N`."
-```
-
-
-# Running Games Locally
-
-The installation instructions are not yet tested on Mac/Windows. Comments very welcome!
-
-## VSCode Dev Containers
-
-1.  **Install Docker and Dev Containers** *(once)*:<br/>
-    See [official instructions](https://code.visualstudio.com/docs/devcontainers/containers#_getting-started).
-    Explicitely this means:
-    * Install docker engine if you have not yet: [Instructions](https://docs.docker.com/engine/install/).
-      I followed the "Server" instructions for linux.
-    * Note that on Linux you need to add your user to the `docker` group
-      ([see instructions](https://docs.docker.com/engine/install/linux-postinstall/)) and probably reboot.
-    * Open the games folder in VSCode: `cd NNG4 && code .` or "Open Folder" within VSCode
-    * a message appears prompting you to install the "Dev Containers" extension (by Microsoft).
-
-2.  **Open Project in Dev Container** *(everytime)*:<br/>
-    Once you have the Dev Containers Extension installed, (re)open the project folder of your game in VSCode.
-    A message appears asking you to "Reopen in Container".
-
-    * The first start will take a while, ca. 2-10 minutes. After the first
-      start this should be very quickly.
-    * Once built, it should open a tab "Simple Browser" inside VSCode displaying
-      the game. (Alternatively, open http://localhost:3000 in your browser).
-
-3.  **Editing Files** *(everytime)*:<br/>
-    After editing some files in VSCode, open VSCode's terminal (View > Terminal) and run `lake build`.
-    Now you can reload your browser to see the changes.
-
-### Errors
-
-* If you don't get the pop-up, you might have disabled them and you can reenable it by
-  running the `remote-containers.showReopenInContainerNotificationReset` command in vscode.
-* If the starting the container fails, in particular with a message `Error: network xyz not found`,
-  you might have deleted stuff from docker via your shell. Try deleting the container and image
-  explicitely in VSCode (left side, "Docker" icon). Then reopen vscode and let it rebuild the
-  container. (this will again take some time)
-
-
-## Without Dev Containers
-Install `nvm`:
-```
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
-```
-then reopen bash and test with `command -v nvm` if it is available (Should print "nvm").
-
-Now install node:
-```
-nvm install node
-```
-
-Clone the game (e.g. `NNG4` here):
-```
-git clone git@github.com:hhu-adam/NNG4.git
-```
-
-Download dependencies and build the game:
-```
-cd NNG4
-lake update
-lake exe cache get   # if your game depends on mathlib
-lake build
-```
-
-Clone the game repository into a directory next to the game:
-```
-cd ..
-git clone git@github.com:leanprover-community/lean4game.git
-```
-The folders `NNG4` and `lean4game` must be in the same directory!
-
-In `lean4game`, install dependencies:
-```
-cd lean4game
-npm install
-```
-
-If you are developing a game other than `Robo` or `NNG4`, adapt the
-code at the beginning of `lean4game/server/index.mjs`:
-```
-const games = {
-    "g/hhu-adam/robo": {
-        dir: "../../../../Robo",
-        queueLength: 5
-    },
-    "g/hhu-adam/nng4": {
-        dir: "../../../../NNG4",
-        queueLength: 5
-    }
-}
-```
-
-Run the game:
-```
-npm start
-```
-
-This takes a little time. Eventually, the server is available on http://localhost:3000/
-and the game is available on http://localhost:3000/#/g/hhu-adam/NNG4.
-
-### Modifying the GameServer
-
-When modifying the game engine itself (in particular the content in `lean4game/server`) you can test it live with this
-setup by setting `export NODE_ENV=development` inside your local game before building it:
-
-```
-cd NNG4
-export NODE_ENV=development
-lake update
-lake build
-```
-This causes lake to search locally for the `GameServer` lake package instead of using the version from github.

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:23-bookworm
+
+RUN apt update && apt upgrade -y
+RUN apt install -y bubblewrap
+
+WORKDIR /app
+
+# Install elan
+RUN curl -sSfL https://github.com/leanprover/elan/releases/download/v3.0.0/elan-x86_64-unknown-linux-gnu.tar.gz | tar xz && \
+    ./elan-init -y
+
+ENV PATH="/root/.elan/bin:${PATH}"
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy project files
+COPY . .
+
+# Build the project
+RUN npm run build
+
+EXPOSE 8080
+
+# Set the entrypoint
+CMD ["npm", "run", "production"]

NOTES.md

@@ -15,9 +15,6 @@ npm install -g http-server
 
 ```
 git clone https://github.com/hhu-adam/NNG4.git
-cd NNG4
-docker rmi nng4:latest
-docker build --pull --rm -f "Dockerfile" -t nng4:latest "."
 ```
 
 
@@ -146,12 +143,6 @@ Activate config:
 ```
 
 
-## Install `unzip` for Importing Docker Images
-
-```
-sudo apt-get install unzip
-```
-
 ## Install bubblewrap (bwrap)
 ```
 sudo apt-get install bubblewrap

README.md

@@ -1,33 +1,93 @@
+# lean4game fork
+
+Questo è un fork di **lean4game** con supporto per essere self-hostato con Docker.
+
+## Deployment con Docker Compose
+
+Dopo aver clonato questa repo, per prima cosa serve creare [un token di API per GitHub](https://github.com/settings/developers) per permettere a lean4game di importare da solo i vari "game". Possiamo mettere questo token ed il nostro nome utente in un file `.env` come segue
+
+```
+export LEAN4GAME_GITHUB_USER='...'
+export LEAN4GAME_GITHUB_TOKEN='...'
+```
+
+poi per lanciare tutto con docker compose basta eseguire
+
+```bash
+$ source .env
+$ docker compose up -d
+```
+
+Questo comando lancierà lean4game su `http://locahost:8080`.
+
+### Aggiungere Giochi
+
+Per scaricare nuovi giochi basta fare una chiamata al seguente url
+
+- `https://{host}/import/trigger/{org}/{repo}` 
+
+Ad esempio per scaricare <https://github.com/leanprover-community/nng4> basta andare all'indirizzo `https://{host}/import/trigger/leanprover-community/nng4` per aggiungere _Natural Number Game_.
+
+---
+
 # Lean 4 Game
 
-This is a prototype for a Lean 4 game platform. The project is based on ideas from the [Lean Game Maker](https://github.com/mpedramfar/Lean-game-maker) and the [Natural Number Game
-(NNG)](https://www.ma.imperial.ac.uk/~buzzard/xena/natural_number_game/)
-of Kevin Buzzard and Mohammad Pedramfar.
-The project is based on Patrick Massot's prototype: [NNG4](https://github.com/PatrickMassot/NNG4).
+This is the source code for a Lean game platform hosted at [adam.math.hhu.de](https://adam.math.hhu.de).
+
+## Creating a Game
+
+Please follow the tutorial [Creating a Game](doc/create_game.md). In particular, the following steps might be of interest:
+
+* Step 5: [How to Run Games Locally](doc/running_locally.md)
+* Step 7: [How to Update an existing Game](doc/update_game.md)
+* Step 9: [How to Publishing a Game](doc/publish_game.md)
+* [Troubleshooting](doc/troubleshoot.md)
+
+## Documentation
+
+The documentation is very much work in progress but the linked documentation here
+should be up-to-date:
+
+### Game creation API
 
-### Progress & Contributing
-Currently the interface is still undergoing bigger changes, contributions are of course welcome, but it might be better to wait with them for a bit until proper support for external games is implemented and the existing games are separated from this repository. (ca. Sept. 2023)
+- [Creating a Game](doc/create_game.md): **the main document to consult**.
+- [More about Hints](doc/hints.md): describes the `Hint` and `Branch` tactic.
 
+### Frontend API
 
-### Documentation
+* [How to Run Games Locally](doc/running_locally.md): play a game on your computer
+* [How to Update an existing Game](doc/update_game.md): update to a new lean version
+* [How to Publishing a Game](doc/publish_game.md): load your game to adam.math.hhu.de for others to play
 
-For game developers, there is a work-in-progress Documentation: [Create a Game](DOCUMENTATION.md).
-Best to talk with us directly.
+### Backend
 
-For the game engine itself, documentation is missing currently.
+not fully written yet.
 
-## NPM Scripts
+* [Server](doc/DOCUMENTATION.md): describes the server part (i.e. the content of `server/` und `relay/`).
 
-* `npm start`: Start the project in development mode. The browser will automatically reload when client files get changed. The Lean server will get recompiled and restarted when lean files get changed. The Lean server will be started without a container. The client and server can be started separately using the scripts `npm run start_client` and `npm run start_server`. The project can be accessed via `http://localhost:3000`.
-Internally, websocket requests to `ws://localhost:3000/websockets` will be forwarded to a Lean server running on port `8080`.
+## Contributing
 
-* `npm run build`: Build the project in production mode. All assets of the client will be compiled into `client/dist`.
-On the server side, the command will set up a docker image containing the Lean server. The two parts can be built separately using `npm run build_client` and `npm run build_server`.
+Contributions to `lean4game` are always welcome!
 
-* `npm run production`: Start the project in production mode. This requires that the build script has been run. It will start a server on the port specified in the `PORT` environment variable or by default on `8080`. You can run on a specifiv port by running `PORT=80 npm run production`. The server will serve the files in `client/dist` via http and give access to the docker-contained Lean server via the web socket protocol.
+### Translation
 
+The interface can be translated to various languages. For adding a translation, one needs to do the following:
+
+1. In `client/src/config.json`, add your new language. The "iso" key is the ISO language code, i.e. it should be accepted by "i18next" and "GNU gettext"; the "flag" key is once accepted by [react-country-flag](https://www.npmjs.com/package/react-country-flag).
+2. Run `npm run translate`. This should create a new file `client/public/locales/{language}/translation.json`. (alternatively you can copy-paste `client/public/locales/en/translation.json`)
+3. Add all translations.
+4. Commit the changes you made to `config.json` together with the new `translation.json`.
+
+For translating games, see [Translating a game](doc/translate.md).
 
 ## Security
 
-Providing the use access to a Lean instance running on the server is a severe security risk. That is why we start the Lean server in a Docker container
-secured by [gVisor](https://gvisor.dev/).
+Providing the use access to a Lean instance running on the server is a severe security risk. That is why we start the Lean server with bubblewrap.
+
+## Credits
+
+The project has primarily been developed by Alexander Bentkamp and Jon Eugster.
+
+It is based on ideas from the [Lean Game Maker](https://github.com/mpedramfar/Lean-game-maker) and the [Natural Number Game
+(NNG)](https://www.ma.imperial.ac.uk/~buzzard/xena/natural_number_game/)
+by Kevin Buzzard and Mohammad Pedramfar, and on Patrick Massot's prototype: [NNG4](https://github.com/PatrickMassot/NNG4).

client/i18next-scanner.config.cjs

@@ -0,0 +1,152 @@
+const lean4gameConfig = require("./src/config.json")
+
+const typescriptTransform = require('i18next-scanner-typescript');
+
+const fs = require('fs');
+const chalk = require('chalk');
+const eol = require('eol');
+const path = require('path');
+const VirtualFile = require('vinyl');
+
+function flush(done) {
+  const { parser } = this;
+  const { options } = parser;
+
+  // Flush to resource store
+  const resStore = parser.get({ sort: options.sort });
+  const { jsonIndent } = options.resource;
+  const lineEnding = String(options.resource.lineEnding).toLowerCase();
+
+  Object.keys(resStore).forEach((lng) => {
+    const namespaces = resStore[lng];
+
+    Object.keys(namespaces).forEach((ns) => {
+      const resPath = parser.formatResourceSavePath(lng, ns);
+      let resContent;
+      try {
+        resContent = JSON.parse(
+          fs.readFileSync(
+            fs.realpathSync(path.join('public', 'locales', resPath))
+          ).toString('utf-8')
+        );
+      } catch (e) {
+        console.log("no previous translation found!")
+        resContent = {};
+      }
+      const obj = { ...namespaces[ns], ...resContent };
+      let text = JSON.stringify(obj, null, jsonIndent) + '\n';
+
+      if (lineEnding === 'auto') {
+        text = eol.auto(text);
+      } else if (lineEnding === '\r\n' || lineEnding === 'crlf') {
+        text = eol.crlf(text);
+      } else if (lineEnding === '\n' || lineEnding === 'lf') {
+        text = eol.lf(text);
+      } else if (lineEnding === '\r' || lineEnding === 'cr') {
+        text = eol.cr(text);
+      } else { // Defaults to LF
+        text = eol.lf(text);
+      }
+
+      let contents = null;
+
+      try {
+        // "Buffer.from(string[, encoding])" is added in Node.js v5.10.0
+        contents = Buffer.from(text);
+      } catch (e) {
+        // Fallback to "new Buffer(string[, encoding])" which is deprecated since Node.js v6.0.0
+        contents = new Buffer(text);
+      }
+
+      this.push(new VirtualFile({
+        path: resPath,
+        contents: contents
+      }));
+    });
+  });
+
+  done();
+}
+
+
+module.exports = {
+  input: [
+    'client/src/**/*.{tsx,ts}',
+    // Use ! to filter out files or directories
+    '!client/i18n/**',
+    '!**/node_modules/**',
+  ],
+  options: {
+    debug: true,
+    removeUnusedKeys: true,
+    func: {
+      list: ['i18next.t', 'i18n.t', 't'],
+      extensions: ['.js', '.jsx'] // not .ts or .tsx since we use i18next-scanner-typescript!
+    },
+    trans: {
+      component: 'Trans',
+      i18nKey: 'i18nKey',
+      defaultsKey: 'defaults',
+      extensions: ['.js', '.jsx'], // not .ts or .tsx since we use i18next-scanner-typescript!
+      fallbackKey: (ns, value) => {return value},
+
+      // https://react.i18next.com/latest/trans-component#usage-with-simple-html-elements-like-less-than-br-greater-than-and-others-v10.4.0
+      supportBasicHtmlNodes: true, // Enables keeping the name of simple nodes (e.g. <br/>) in translations instead of indexed keys.
+      keepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'], // Which nodes are allowed to be kept in translations during defaultValue generation of <Trans>.
+
+      // // https://github.com/acornjs/acorn/tree/master/acorn#interface
+      // acorn: {
+      //     ecmaVersion: 2020,
+      //     sourceType: 'module', // defaults to 'module'
+      // }
+    },
+    lngs: lean4gameConfig.languages.map(e => e.iso),
+    ns: [],
+    defaultLng: 'en',
+    defaultNs: 'translation',
+    defaultValue: (lng, ns, key) => {
+      if (lng === 'en') {
+        return key; // Use key as value for base language
+      }
+      return ''; // Return empty string for other languages
+    },
+    resource: {
+      loadPath: './client/public/locales/{{lng}}/{{ns}}.json',
+      savePath: './client/public/locales/{{lng}}/{{ns}}.json',
+      jsonIndent: 2,
+      lineEnding: '\n'
+    },
+    nsSeparator: false, // namespace separator
+    keySeparator: false, // key separator
+    plurals: false,
+    interpolation: {
+      prefix: '{{',
+      suffix: '}}'
+    },
+    metadata: {},
+    allowDynamicKeys: false,
+  },
+
+  transform: typescriptTransform(
+    // options
+    {
+      // default value for extensions
+      extensions: [".ts", ".tsx"],
+      // optional ts configuration
+      tsOptions: {
+        target: "es2017",
+      },
+    },
+
+    function(outputText, file, enc, done) {
+      'use strict';
+      const parser = this.parser;
+
+      parser.parseTransFromString(outputText);
+      parser.parseFuncFromString(outputText);
+
+      done();
+    }
+  ),
+
+};

client/public/locales/de/translation.json

@@ -0,0 +1,99 @@
+{
+  "Tactics": "Taktiken",
+  "Lean Game Server": "Lean-Lern-Spiel-Server",
+  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>Die Spielregeln bestimmen ob es erlaubt ist, Levels zu überspringen und ob das Spiel überprüft welche Taktiken und Theoreme freigeschaltet sind und nur diese im Beweis akzeptiert.</p><1>Bemerkung: \"Freigeschaltete\" Taktiken (und Theoreme) werden durch zwei Faktoren bestimmt: The Menge der Taktiken die minimal notwending sind um den Level zu lösen und dazu die Menge aller Taktiken, die in einem anderen Level freigeschaltet wurden. Das bedeutet wenn <1>simp</1> in einem Level freigeschaltet wird, kann diese Taktik danach in jeglichen Levels verwendet werden.",
+  "Game Rules": "Spielregeln",
+  "levels": "Level",
+  "tactics": "Taktiken",
+  "regular": "regulär",
+  "relaxed": "relaxed",
+  "none": "keine",
+  "Rules": "Regeln",
+  "Intro": "Prolog",
+  "Game Introduction": "Prolog",
+  "World selection": "Übersicht",
+  "Start": "Start",
+  "Inventory": "Inventar",
+  "next level": "nächstes Level",
+  "Next": "Weiter",
+  "back to world selection": "Zurück zur Übersicht",
+  "Leave World": "Welt verlassen",
+  "previous level": "voheriges Level",
+  "Previous": "Zurück",
+  "Editor mode is enforced!": "Editor kann nicht verlassen werden!",
+  "Editor mode": "Editor",
+  "Typewriter mode": "Schreibmaschine",
+  "information, Impressum, privacy policy": "Informationen, Impressum, Privacy Policy",
+  "Preferences": "Einstellungen",
+  "Game Info & Credits": "Spielinfo & Credits",
+  "Game Info": "Spielinfo",
+  "Clear Progress": "Spielstand löschen",
+  "Erase": "Löschen",
+  "Download Progress": "Spielstand herunterladen",
+  "Download": "Herunterladen",
+  "Load Progress from JSON": "Spielstand aus JSON laden",
+  "Upload": "Laden",
+  "Home": "Home",
+  "back to games selection": "Zurück zur Spielauswahl",
+  "close inventory": "Inventar schließen",
+  "show inventory": "Inventar öffnen",
+  "World": "Welt",
+  "Show more help!": "Mehr Hilfe",
+  "Goal": "Beweisziel",
+  "Current Goal": "Aktuelles Beweisziel",
+  "Objects": "Objekte",
+  "Assumptions": "Annahmen",
+  "Further Goals": "Weitere Ziele",
+  "No Goals": "Keine Beweisziele",
+  "Loading goal…": "Beweisziel wird geladen…",
+  "Click somewhere in the Lean file to enable the infoview.": "Ein Klick in den Lean-Code aktiviert den Infoview.",
+  "Waiting for Lean server to start…": "Warte auf den Lean-Server …",
+  "Level completed! 🎉": "Level gelöst! 🎉",
+  "Level completed with warnings 🎭": "Level mit Warnungen abgeschlossen 🎭",
+  "Active Goal": "Aktuelles Ziel",
+  "Crashed! Go to editor mode and fix your proof! Last server response:": "Abgestürzt! Wechsle in den Editor-Modus, um deinen Beweis zu repariaeren.  Letzte Meldung vom Server:",
+  "Line": "Zeile",
+  "Character": "Charakter",
+  "Loading messages…": "Lade Meldungen …",
+  "Execute": "Ausführen",
+  "Definitions": "Definitionen",
+  "Theorems": "Theoreme",
+  "Not unlocked yet": "Noch nicht verfügbar",
+  "Not available in this level": "In diesem Level nicht verfügbar",
+  "A repository of learning games for the proof assistant <1>Lean</1> <i>(Lean 4)</i> and its mathematical library <5>mathlib</5>": "Eine Sammlung von Lernspielen für den Beweisassistenten <1>Lean</1> <i>(Lean 4)</i> und dessen mathematische Bibliothek <5>mathlib</5>",
+  "No Games loaded. Use <1>http://localhost:3000/#/g/local/FOLDER</1> to open a game directly from a local folder.": "Kein Spiel geladen.  Öffne <1>http://localhost:3000/#/g/local/FOLDER</1> um ein Spiel direkt aus einem lokalen Ordner zu laden.",
+  "Prerequisites": "Voraussetzungen",
+  "Worlds": "Welten",
+  "Levels": "Level",
+  "Language": "Sprache",
+  "Development notes": "Entwicklungsstand",
+  "Adding new games": "Neue Spiele hinzufügen",
+  "Funding": "Finanzierung",
+  "<p>Do you want to delete your saved progress irreversibly?</p><p>(This deletes your proofs and your collected inventory. Saves from other games are not deleted.)</p>": "<p>Soll der Spielstand unwiderruflich gelöscht werden?</p><p>(Dies löscht sämtliche Beweise und das gesammelte Inventar. Spielstände anderer Spiele werden nicht gelöscht.)</p>",
+  "Delete Progress?": "Spielstand löschen?",
+  "Delete": "Löschen",
+  "Download & Delete": "Herunterladen & löschen",
+  "Cancel": "Abbrechen",
+  "Layout": "Seitenlayout",
+  "Always visible": "Immer sichtbar",
+  "Save my settings (in the browser store)": "Einstellungen im Browser speichern.",
+    "<p>Select a JSON file with the saved game progress to load your progress.</p><1><0>Warning:</0> This will delete your current game progress! Consider <2>downloading your current progress</2> first!</1>": "<p>Wähle eine JSON-Datei mit einem Spielstand, um diesen zu laden.</p><1><0>Achtung:</0> Deraktuelle Spielstand wird dabei überschrieben! Wenn du noch einmal zum aktuellen Spielstand zurückkehren möchtest, solltest du zunächst den <2>aktuellen Spielstand herunterladen</2>!</1>",
+  "Upload Saved Progress": "Spielstand hochladen",
+  "Load selected file": "Ausgewählte Datei hochladen",
+  "Mobile": "Mobil",
+  "Auto": "Auto",
+  "Desktop": "Desktop",
+    "<0>If you are considering writing your own game, you should use the <1>GameSkeleton Github Repo</1> as a template and read <3>How to Create a Game</3>.</0><1>You can directly load your games into the server and play it using the correct URL. The <1>instructions above</1> also explain the details for how to load your game to the server. We'd like to encourage you to contact us if you have any questions.</1><p>Featured games on this page are added manually. Please get in contact and we'll happily add yours.</p>": "<0>Für alle, die selbst Spiel entwickeln möchten, gibt es ein <1>GameSkeleton Github Repo</1> als Vorlage und die Anleitung <3>How to Create a Game</3>.</0><1>Die <1>Anleitung</1> erklärt auch, wie ein solches Spiel mittels einer passenden URL auf den Sever geladen und gespiel werden kann. Fragen dazu beantworten wir gern.</1><p>Als Kacheln sichtbar ist auf dieser Seite nur eine kuratierte Auswahl an existierenden Spielen. Wir erweitern diese Auswahl auf Anfrage sehr gerne.</p>",
+  "Level": "Level",
+  "Introduction": "Prolog",
+  "Retry proof from here": "Ab hier neu ansetzen",
+  "Retry": "Noch einmal",
+  "Failed command": "Gescheiterter Befehl",
+    "<p>As this server runs lean on our university machines, it has a limited capacity. Our current estimate is about 70 simultaneous games.</p>": "Diese Server läuft auf universitäter Infrastruktur mit begrenzten Kapazitäten.  Wir schätzen, dass die Belastungsgrenze bei rund 70 gleichzeitig laufenden Spielen besteht.",
+    "<0>Most aspects of the games and the infrastructure are still in development. Feel free to file a <1>GitHub Issue</1> about any problems you experience!</0>": "Der Spieleserver und die alle Spiele befinden sich in fortlaufender Entwicklung.  Wir bitten darum, Fehler und Ungereimtheiten als <1>GitHub Issue</1> zu melden.",
+    "This server has been developed as part of the project <1>ADAM: Anticipating the Digital Age of Mathematics</1> at Heinrich Heine University Düsseldorf.": "Die Lean-Spiele-Software und dieser Spiele-Server werden als Teils der Projekts <1>ADAM: Anticipating the Digital Age of Mathematics</1> an der Heinrich-Heine-Universität Düsseldorf entwickelt.",
+  "Server capacity": "Server-Auslastung",
+  "RAM": "RAM",
+  " used": "",
+  "CPU": "CPU"
+}

client/public/locales/en/translation.json

@@ -0,0 +1,99 @@
+{
+  "Tactics": "Tactics",
+  "Lean Game Server": "Lean Game Server",
+  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>",
+  "Game Rules": "Game Rules",
+  "levels": "levels",
+  "tactics": "tactics",
+  "regular": "regular",
+  "relaxed": "relaxed",
+  "none": "none",
+  "Rules": "Rules",
+  "Intro": "Intro",
+  "Game Introduction": "Game Introduction",
+  "World selection": "World selection",
+  "Start": "Start",
+  "Inventory": "Inventory",
+  "next level": "next level",
+  "Next": "Next",
+  "back to world selection": "back to world selection",
+  "Leave World": "Leave World",
+  "previous level": "previous level",
+  "Previous": "Previous",
+  "Editor mode is enforced!": "Editor mode is enforced!",
+  "Editor mode": "Editor mode",
+  "Typewriter mode": "Typewriter mode",
+  "information, Impressum, privacy policy": "information, Impressum, privacy policy",
+  "Preferences": "Preferences",
+  "Game Info & Credits": "Game Info & Credits",
+  "Game Info": "Game Info",
+  "Clear Progress": "Clear Progress",
+  "Erase": "Erase",
+  "Download Progress": "Download Progress",
+  "Download": "Download",
+  "Load Progress from JSON": "Load Progress from JSON",
+  "Upload": "Upload",
+  "Home": "Home",
+  "back to games selection": "back to games selection",
+  "close inventory": "close inventory",
+  "show inventory": "show inventory",
+  "World": "World",
+  "Show more help!": "Show more help!",
+  "Goal": "Goal",
+  "Current Goal": "Current Goal",
+  "Objects": "Objects",
+  "Assumptions": "Assumptions",
+  "Further Goals": "Further Goals",
+  "No Goals": "No Goals",
+  "Loading goal…": "Loading goal…",
+  "Click somewhere in the Lean file to enable the infoview.": "Click somewhere in the Lean file to enable the infoview.",
+  "Waiting for Lean server to start…": "Waiting for Lean server to start…",
+  "Level completed! 🎉": "Level completed! 🎉",
+  "Level completed with warnings 🎭": "Level completed with warnings 🎭",
+  "Active Goal": "Active Goal",
+  "Crashed! Go to editor mode and fix your proof! Last server response:": "Crashed! Go to editor mode and fix your proof! Last server response:",
+  "Line": "Line",
+  "Character": "Character",
+  "Loading messages…": "Loading messages…",
+  "Execute": "Execute",
+  "Definitions": "Definitions",
+  "Theorems": "Theorems",
+  "Not unlocked yet": "Not unlocked yet",
+  "Not available in this level": "Not available in this level",
+  "A repository of learning games for the proof assistant <1>Lean</1> <i>(Lean 4)</i> and its mathematical library <5>mathlib</5>": "A repository of learning games for the proof assistant <1>Lean</1> <i>(Lean 4)</i> and its mathematical library <5>mathlib</5>",
+  "No Games loaded. Use <1>http://localhost:3000/#/g/local/FOLDER</1> to open a game directly from a local folder.": "No Games loaded. Use <1>http://localhost:3000/#/g/local/FOLDER</1> to open a game directly from a local folder.",
+  "Prerequisites": "Prerequisites",
+  "Worlds": "Worlds",
+  "Levels": "Levels",
+  "Language": "Language",
+  "Server capacity": "Server capacity",
+  "RAM": "RAM",
+  "CPU": "CPU",
+  "Development notes": "Development notes",
+  "Adding new games": "Adding new games",
+  "Funding": "Funding",
+  "<p>Do you want to delete your saved progress irreversibly?</p><p>(This deletes your proofs and your collected inventory. Saves from other games are not deleted.)</p>": "<p>Do you want to delete your saved progress irreversibly?</p><p>(This deletes your proofs and your collected inventory. Saves from other games are not deleted.)</p>",
+  "Delete Progress?": "Delete Progress?",
+  "Delete": "Delete",
+  "Download & Delete": "Download & Delete",
+  "Cancel": "Cancel",
+  "Layout": "Layout",
+  "Always visible": "Always visible",
+  "Save my settings (in the browser store)": "Save my settings (in the browser store)",
+  "<p>Select a JSON file with the saved game progress to load your progress.</p><1><0>Warning:</0> This will delete your current game progress! Consider <2>downloading your current progress</2> first!</1>": "<p>Select a JSON file with the saved game progress to load your progress.</p><1><0>Warning:</0> This will delete your current game progress! Consider <2>downloading your current progress</2> first!</1>",
+  "Upload Saved Progress": "Upload Saved Progress",
+  "Load selected file": "Load selected file",
+  "Mobile": "Mobile",
+  "Auto": "Auto",
+  "Desktop": "Desktop",
+  "<0>If you are considering writing your own game, you should use the <1>GameSkeleton Github Repo</1> as a template and read <3>How to Create a Game</3>.</0><1>You can directly load your games into the server and play it using the correct URL. The <1>instructions above</1> also explain the details for how to load your game to the server. We'd like to encourage you to contact us if you have any questions.</1><p>Featured games on this page are added manually. Please get in contact and we'll happily add yours.</p>": "<0>If you are considering writing your own game, you should use the <1>GameSkeleton Github Repo</1> as a template and read <3>How to Create a Game</3>.</0><1>You can directly load your games into the server and play it using the correct URL. The <1>instructions above</1> also explain the details for how to load your game to the server. We'd like to encourage you to contact us if you have any questions.</1><p>Featured games on this page are added manually. Please get in contact and we'll happily add yours.</p>",
+  "Level": "Level",
+  "Introduction": "Introduction",
+  "Retry proof from here": "Retry proof from here",
+  "Retry": "Retry",
+  "Failed command": "Failed command",
+  "<p>As this server runs lean on our university machines, it has a limited capacity. Our current estimate is about 70 simultaneous games.</p>": "<p>As this server runs lean on our university machines, it has a limited capacity. Our current estimate is about 70 simultaneous games.</p>",
+  "<0>Most aspects of the games and the infrastructure are still in development. Feel free to file a <1>GitHub Issue</1> about any problems you experience!</0>": "<0>Most aspects of the games and the infrastructure are still in development. Feel free to file a <1>GitHub Issue</1> about any problems you experience!</0>",
+  "This server has been developed as part of the project <1>ADAM: Anticipating the Digital Age of Mathematics</1> at Heinrich Heine University Düsseldorf.": "This server has been developed as part of the project <1>ADAM: Anticipating the Digital Age of Mathematics</1> at Heinrich Heine University Düsseldorf.",
+  " used": " used"
+}

client/public/locales/es/translation.json

@@ -0,0 +1,99 @@
+{
+  "Intro": "Introducción",
+  "Game Introduction": "Introducción del juego",
+  "World selection": "Seleccionar mundo",
+  "Start": "Empezar",
+  "Inventory": "Inventario",
+  "next level": "siguiente nivel",
+  "Next": "Siguiente",
+  "back to world selection": "volver a la selección de mundos",
+  "Leave World": "Abandonar mundo",
+  "previous level": "nivel anterior",
+  "Previous": "Anterior",
+  "Editor mode is enforced!": "¡El modo editor es obligatorio!",
+  "Editor mode": "Modo editor",
+  "Typewriter mode": "Modo línea a línea",
+  "information, Impressum, privacy policy": "información, Impressum, política de privacidad",
+  "Preferences": "Preferencias",
+  "Game Info & Credits": "Información del juego y reconocimientos",
+  "Game Info": "Información del juego",
+  "Clear Progress": "Limpiar el progreso",
+  "Erase": "Borrar",
+  "Download Progress": "Descargar progreso",
+  "Download": "Descargar",
+  "Load Progress from JSON": "Cargar progreso desde JSON",
+  "Upload": "Subir",
+  "Home": "Inicio",
+  "back to games selection": "volver a la selección de juegos",
+  "close inventory": "cerrar inventario",
+  "show inventory": "mostrar inventario",
+  "World": "Mundo",
+  "Show more help!": "¡Mostrar más ayuda!",
+  "Goal": "Objetivo",
+  "Objects": "Objetos",
+  "Assumptions": "Hipótesis",
+  "Current Goal": "Objetivo actual",
+  "Further Goals": "Objetivos pendientes",
+  "No Goals": "Sin objetivos",
+  "Loading goal…": "Cargando objetivo…",
+  "Click somewhere in the Lean file to enable the infoview.": "Pulsa en algún lugar del archivo Lean para habilitar la vista de información.",
+  "Waiting for Lean server to start…": "Esperando a que el servidor Lean se inicie…",
+  "Level completed! 🎉": "Nivel completado 🎉",
+  "Level completed with warnings 🎭": "Nivel completado con advertencias 🎭",
+  "Failed command": "Comando fallido",
+  "Retry proof from here": "Reintentar la prueba desde aquí",
+  "Retry": "Reintentar",
+  "Active Goal": "Objetivo activo",
+  "Crashed! Go to editor mode and fix your proof! Last server response:": "¡Error! Vaya al modo editor y corrija su prueba. Última respuesta del servidor:",
+  "Line": "Línea",
+  "Character": "Carácter",
+  "Loading messages…": "Cargando mensajes…",
+  "Execute": "Ejecutar",
+  "Tactics": "Tácticas",
+  "Definitions": "Definiciones",
+  "Theorems": "Teoremas",
+  "Not unlocked yet": "No desbloqueado aún",
+  "Not available in this level": "No disponible en este nivel",
+  "A repository of learning games for the proof assistant <1>Lean</1> <i>(Lean 4)</i> and its mathematical library <5>mathlib</5>": "Un repositorio de juegos para aprender el asistente de demostración <1>Lean</1>, <i>(Lean 4)</i> y su biblioteca matemática <5>mathlib</5> ",
+  "No Games loaded. Use <1>http://localhost:3000/#/g/local/FOLDER</1> to open a game directly from a local folder.": "No se ha cargado ningún juego. Use <1>http://localhost:3000/#/g/local/FOLDER</1> para abrir un juego directamente desde una carpeta local",
+  "<0>If you are considering writing your own game, you should use the <1>GameSkeleton Github Repo</1> as a template and read <3>How to Create a Game</3>.</0><1>You can directly load your games into the server and play it using the correct URL. The <1>instructions above</1> also explain the details for how to load your game to the server. We'd like to encourage you to contact us if you have any questions.</1><p>Featured games on this page are added manually. Please get in contact and we'll happily add yours.</p>": "<0>Si está considerando escribir su propio juego, use el <1>GameSkeleton Github Repo</1> como plantilla y lea <3>How to Create a Game</3>.</0><1>Puede cargar directamente los juegos en el servidor y jugarlo usando la URL adecuada. Las <1>instrucciones anteriores</1> también explican los detalles sobre cómo cargar su juego en el servidor. Le animamos a ponerse en contacto con nosotros si tiene preguntas.</1><p>Los juegos incluidos en esta página son añadidos manualmente. Por favor, contactenos y añadiremos el suyo encantados.</p>",
+  "Prerequisites": "Requisitos previos",
+  "Worlds": "Mundos",
+  "Levels": "Niveles",
+  "Language": "Idioma",
+  "Lean Game Server": "Servidor de Juegos de Lean",
+  "Development notes": "Notas de desarrollo",
+  "Adding new games": "Añadir nuevos juegos",
+  "Funding": "Financiación",
+  "Level": "Nivel",
+  "Introduction": "Introducción",
+  "<p>Do you want to delete your saved progress irreversibly?</p><p>(This deletes your proofs and your collected inventory. Saves from other games are not deleted.)</p>": "<p>¿Desea eliminar su progreso guardado definitivamente?</p><p>(Esto elimina sus pruebas y su inventario recopilado. Los progresos guardados de otros juegos no se eliminan.)</p>",
+  "Delete Progress?": "¿Borrar Progreso?",
+  "Delete": "Borrar",
+  "Download & Delete": "Descargar y Borrar",
+  "Cancel": "Cancelar",
+  "Mobile": "Móvil",
+  "Auto": "Automático",
+  "Desktop": "Escritorio",
+  "Layout": "Diseño",
+  "Always visible": "Siempre visible",
+  "Save my settings (in the browser store)": "Guardar mis ajustes (en el almacenamiento del navegador)",
+  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>Las reglas del juego determinan si se permite saltarse niveles y si el juego realiza comprobaciones para permitir únicamente tácticas y teoremas desbloqueados en las pruebas.</p><1>Nota: las tácticas (o teoremas) \"Desbloqueadas\" está determinadas por dos cosas: el conjunto mínimo de tácticas necesarias para resolver un nivel, más cualquier táctica que hayas desbloqueado en otro nivel. Esto significa que si desbloqueas <1>simp</1> en un nivel, puedes usarlo a partir de entonces en cualquier nivel.</1><p>Las opciones son:</p>",
+  "Game Rules": "Reglas del juego",
+  "levels": "niveles",
+  "tactics": "tácticas",
+  "regular": "normal",
+  "relaxed": "relajado",
+  "none": "ninguno",
+  "<p>Select a JSON file with the saved game progress to load your progress.</p><1><0>Warning:</0> This will delete your current game progress! Consider <2>downloading your current progress</2> first!</1>": "<p>Seleccione un archivo JSON con el progreso del juego guardado para cargar su progreso.</p><1><0>Advertencia:</0> Esto borrará su progreso actual en el juego. Considere <2>descargar su progreso actual</2> antes</1>",
+  "Upload Saved Progress": "Subir progreso guardado",
+  "Load selected file": "Cargar archivo seleccionado",
+  "Rules": "Reglas",
+  "<p>As this server runs lean on our university machines, it has a limited capacity. Our current estimate is about 70 simultaneous games.</p>": "<p>Como este servidor corre en máquinas de nuestra universidad, tiene una capacidad limitada. Nuestra estimación actual es de unos 70 juegos simultaneos.</p>.",
+  "<0>Most aspects of the games and the infrastructure are still in development. Feel free to file a <1>GitHub Issue</1> about any problems you experience!</0>": "<1>Muchos aspectos de los juegos y la infrastructura están aún en desarrollo. No dude en abrir una <1>GitHub Issue</1> sobre cualquier problema que experimente.</1>",
+  "This server has been developed as part of the project <1>ADAM: Anticipating the Digital Age of Mathematics</1> at Heinrich Heine University Düsseldorf.": "Este  servidor se ha desarrollado como parte del proyecto <1>ADAM: Anticipating the Digital Age of Mathematics</1> en la Heinrich-Heine-Universität de Düsseldorf.",
+  "Server capacity": "",
+  "RAM": "",
+  " used": "",
+  "CPU": ""
+}

client/public/locales/ko/.gitignore

@@ -0,0 +1,8 @@
+/ko-level1.tmx
+/ko-level2.tmx
+/ko-omegat.tmx
+/**/*.bak
+/omegat/last_entry.properties
+/omegat/files_order.txt
+/omegat/project_stats.txt
+/tm/*.tmx

client/public/locales/ko/README.ko.md

@@ -0,0 +1,15 @@
+# 린 4 게임
+
+[English (영어)](./README.md) | 한국어
+
+## 기여하기
+
+`lean4game`의 한국어 번역에 기여하는 활동은 언제든지 환영합니다!
+
+### 한국어 번역
+
+저([차불휘][bc])는 [오메가T(OmegaT)][omt]를 이용해 영어 문서를 한국어로 번역합니다. 오메가T 프로젝트는 이 디렉터리, 다시 말해 `client/public/locales/ko`에 있습니다. 오메가T로 JSON 파일을 구문 분석 하려면 [오메가T를 위한 오카피(Okapi) 필터 플러그인][okapi]을 설치해야 됩니다.
+
+[bc]: https://github.com/chabulhwi
+[omt]: https://omegat.org/
+[okapi]: https://okapiframework.org/wiki/index.php/Okapi_Filters_Plugin_for_OmegaT

client/public/locales/ko/README.md

@@ -0,0 +1,18 @@
+# Lean 4 Game
+
+English | [한국어[Korean]](./README.ko.md)
+
+## Contributing
+
+Contributions to the Korean translation of `lean4game` are always welcome!
+
+### Korean Translation
+
+I ([Bulhwi Cha][bc]) use [OmegaT][omt] to translate English documentation into
+Korean. The OmegaT project is in this directory, that is,
+`client/public/locales/ko`. You need to install the [Okapi filters plugin for
+OmegaT][okapi] to make OmegaT parse JSON files.
+
+[bc]: https://github.com/chabulhwi
+[omt]: https://omegat.org/
+[okapi]: https://okapiframework.org/wiki/index.php/Okapi_Filters_Plugin_for_OmegaT

client/public/locales/ko/glossary/glossary.txt

@@ -0,0 +1,167 @@
+# Glossary in tab-separated format -*- coding: utf-8 -*-
+St. Anselm	안셀무스
+ontological	존재론적
+argument	논증
+argument	인수
+Lean	린
+Lean community	린 커뮤니티
+God	신
+Alvin Plantinga	앨빈 플랜팅아
+exist	존재하다
+existence	존재
+the understanding	지성
+reality	현실
+assumption	가정
+reductio	귀류법
+great	큰
+premise	전제
+being	존재자
+conceive	생각하다
+definition	정의
+true	참
+true	참인
+false	거짓
+false	거짓인
+formulate	정식화하다
+formulation	정식화
+formalize	형식화하다
+formalization	형식화
+property	속성
+redundant	불필요한
+sentence	문장
+state	진술하다
+statement	진술
+proposition	명제
+negation	부정
+axiom	공리
+theorem	정리
+theory	이론
+conclude	결론하다
+prove	증명하다
+SEP	스탠퍼드 철학 백과사전
+Eric Wieser	에릭 비저
+Alistair Tucker	앨리스터 터커
+philosophy	철학
+Owl of Sogang	서강올빼미
+type theory	유형론
+universe level	유형 세계 변수
+type	유형
+type	입력하다
+type check	유형을 확인하다
+type check	유형이 확인되다
+type check	유형 확인이 잘되다
+type class	유형 클래스
+instance	사례
+category mistake	범주 실수
+class	클래스
+example	보기
+example	예
+inductive type	귀납형
+define	정의하다
+constructor	구성자
+Apache License, Version 2.0	아파치 라이선스, 버전 2.0
+under the terms of	의 조건에 따라
+OmegaT	오메가T
+symbolic link	심벌릭 링크
+directory	디렉터리
+root directory	최상위 디렉터리
+documentation	문서
+English	영어
+Korean	한국어
+chapter	장
+quiz	퀴즈
+question	문제
+command	명령어
+error	오류
+code	코드
+evaluate	계산하다
+keyword	핵심어
+declare	선언하다
+constant	상수
+reference	참고 문헌
+universe-polymorphic	세계 다형적
+parametrically polymorphic	매개 변수 다형적
+function	함수
+identifier	식별자
+definitionally equal	정의상 같은
+natural number	자연수
+input	입력값
+return	반환하다
+non-zero	영이 아닌
+zero	영
+alpha-equivalent	알파 동등한
+less-than-or-equal-to sign	작거나 같음 부호
+dependent function	의존 함수
+dependent function type	의존 함수형
+dependent product	의존곱
+dependent product type	의존곱형
+underscore	밑줄
+implicit	암시적
+explicit	명시적
+sigma type	시그마
+propositional logic	명제 논리
+term	항
+contemporary	동시대
+term	용어
+truth-value	진릿값
+bearer	담지자
+propositional attitudes	명제적 태도
+believe	믿다
+doubt	의심하다
+South Korea	한국
+school mathematics	학교 수학
+sentence	문장
+high school mathematics	고등학교 수학
+teacher	교사
+Stanford Encyclopedia of Philosophy	스탠퍼드 철학 백과사전
+ordered triple	순서세짝
+conjecture	추측
+Goldbach's conjecture	골드바흐의 추측
+interactive theorem prover	상호 작용 정리 증명기
+truth	참
+falsity	거짓
+rule of inference	추론 규칙
+introduction rule	도입 규칙
+elimination rule	제거 규칙
+ex falso quodlibet	엑스 팔소 세퀴투르 쿠오들리베트
+principle of explosion	폭발 원리
+propositional connective	명제 연결사
+symbol	기호
+refutation by contradiction	모순에 따른 부인
+contradiction	모순
+conjunction	연언
+disjunction	선언(選言)
+implication	함의
+material implication	내용적 함의
+conditional	조건문
+modus ponens	긍정 논법[모더스 포넨스]
+necessary condition	필요조건
+conversion	역
+inversion	이(裏)
+contraposition	대우(對偶)
+equivalence	동등
+biconditional	쌍조건문
+abbreviation	준말
+if and only if	…일 때 그리고 그럴 때만
+editor	편집기
+shortcut	단축키
+Theorem Proving in Lean 4	린 4로 하는 정리 증명
+exercise	연습 문제
+repository	저장소
+Jeremy Avigad	제러미 아비가드
+Leonardo de Moura	레오나르두 지 모라
+Soonho Kong	공순호
+Sebastian Ullrich	제바스티안 울리히
+file	파일
+Markdown	마크다운
+quiz	퀴즈
+translation	번역
+contribute	기여하다
+progress	진도
+capacity	이용량
+GitHub	깃허브
+repo	저장소
+game rule	게임 규칙
+unlocked	잠금 해제가 된
+unlock	잠금 해제를 하다
+Markdown	마크다운

client/public/locales/ko/omegat.project

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<omegat>
+    <project version="1.0">
+        <source_dir>__DEFAULT__</source_dir>
+        <source_dir_excludes>
+            <mask>**/.svn/**</mask>
+            <mask>**/CVS/**</mask>
+            <mask>**/.cvs/**</mask>
+            <mask>**/.git/**</mask>
+            <mask>**/.hg/**</mask>
+            <mask>**/.repositories/**</mask>
+            <mask>**/desktop.ini</mask>
+            <mask>**/Thumbs.db</mask>
+            <mask>**/.DS_Store</mask>
+            <mask>**/~$*</mask>
+        </source_dir_excludes>
+        <target_dir>__DEFAULT__</target_dir>
+        <tm_dir>__DEFAULT__</tm_dir>
+        <glossary_dir>__DEFAULT__</glossary_dir>
+        <glossary_file>__DEFAULT__</glossary_file>
+        <dictionary_dir>__DEFAULT__</dictionary_dir>
+        <export_tm_dir>__DEFAULT__</export_tm_dir>
+        <export_tm_levels>omegat level1 level2</export_tm_levels>
+        <source_lang>en</source_lang>
+        <target_lang>ko</target_lang>
+        <source_tok>org.omegat.tokenizer.LuceneEnglishTokenizer</source_tok>
+        <target_tok>org.omegat.tokenizer.HunspellTokenizer</target_tok>
+        <sentence_seg>true</sentence_seg>
+        <support_default_translations>true</support_default_translations>
+        <remove_tags>false</remove_tags>
+        <external_command></external_command>
+    </project>
+</omegat>

client/public/locales/ko/source/README.md

@@ -0,0 +1 @@
+../README.md

client/public/locales/ko/source/translation.json

@@ -0,0 +1 @@
+../../en/translation.json

client/public/locales/ko/target/README.md

@@ -0,0 +1,15 @@
+# 린 4 게임
+
+[English (영어)](./README.md) | 한국어
+
+## 기여하기
+
+`lean4game`의 한국어 번역에 기여하는 활동은 언제든지 환영합니다!
+
+### 한국어 번역
+
+저([차불휘][bc])는 [오메가T(OmegaT)][omt]를 이용해 영어 문서를 한국어로 번역합니다. 오메가T 프로젝트는 이 디렉터리, 다시 말해 `client/public/locales/ko`에 있습니다. 오메가T로 JSON 파일을 구문 분석 하려면 [오메가T를 위한 오카피(Okapi) 필터 플러그인][okapi]을 설치해야 됩니다.
+
+[bc]: https://github.com/chabulhwi
+[omt]: https://omegat.org/
+[okapi]: https://okapiframework.org/wiki/index.php/Okapi_Filters_Plugin_for_OmegaT

client/public/locales/ko/target/translation.json

@@ -0,0 +1,99 @@
+{
+  "Tactics": "전략",
+  "Lean Game Server": "린 게임 서버",
+  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>게임 규칙에 따라, 단계들을 건너뛰어도 되는지 그리고 증명을 작성할 때 잠금 해제가 된 전략과 정리만 이용할 수 있는지가 정해집니다.</p><1>\n\n참고: '잠금 해제'가 된 전략이나 정리는 다음 두 부류로 정해집니다. (1) 해당 단계를 푸는 데 필요한 최소한의 전략이나 정리의 모임, (2) 다른 단계에서 잠금 해제를 한 전략이나 정리. 따라서 여러분이 <1>simp</1> 전략을 잠금 해제 하면, 그 뒤로 어느 단계에서든 이 전략을 이용할 수 있습니다.</1><p>선택할 수 있는 게임 규칙은 다음과 같습니다.</p>",
+  "Game Rules": "게임 규칙",
+  "levels": "단계",
+  "tactics": "전략",
+  "regular": "일반",
+  "relaxed": "완화됨",
+  "none": "없음",
+  "Rules": "규칙",
+  "Intro": "소개",
+  "Game Introduction": "게임 소개",
+  "World selection": "세계 선택",
+  "Start": "시작하기",
+  "Inventory": "인벤토리",
+  "next level": "다음 단계",
+  "Next": "다음",
+  "back to world selection": "세계 선택하러 돌아가기",
+  "Leave World": "세계에서 나가기",
+  "previous level": "이전 단계",
+  "Previous": "이전",
+  "Editor mode is enforced!": "편집기 모드가 강제됐습니다!",
+  "Editor mode": "편집기 모드",
+  "Typewriter mode": "타자기 모드",
+  "information, Impressum, privacy policy": "정보, 관리자 정보, 사생활 정책",
+  "Preferences": "기본 설정",
+  "Game Info & Credits": "게임 정보 및 제작자 명단",
+  "Game Info": "게임 정보",
+  "Clear Progress": "진도 없애기",
+  "Erase": "지우기",
+  "Download Progress": "진도 내려받기",
+  "Download": "내려받기",
+  "Load Progress from JSON": "JSON에서 진도 불러오기",
+  "Upload": "업로드",
+  "Home": "홈",
+  "back to games selection": "게임 선택하러 돌아가기",
+  "close inventory": "인벤토리 닫기",
+  "show inventory": "인벤토리 보기",
+  "World": "세계",
+  "Show more help!": "도움말 더 보기!",
+  "Goal": "목표",
+  "Current Goal": "현재 목표",
+  "Objects": "객체",
+  "Assumptions": "가정",
+  "Further Goals": "이후 목표",
+  "No Goals": "목표 없음",
+  "Loading goal…": "목표 불러오는 중…",
+  "Click somewhere in the Lean file to enable the infoview.": "린 파일의 아무 곳이나 눌러 정보창을 여십시오.",
+  "Waiting for Lean server to start…": "린 서버가 시작하기를 기다리는 중…",
+  "Level completed! 🎉": "단계 완료! 🎉",
+  "Level completed with warnings 🎭": "경고 있는 채로 단계 완료 🎭",
+  "Active Goal": "활성화된 목표",
+  "Crashed! Go to editor mode and fix your proof! Last server response:": "시스템 다운됨! 편집기 모드에서 증명을 고치십시오! 마지막 서버 응답:",
+  "Line": "줄",
+  "Character": "문자",
+  "Loading messages…": "메시지 불러오는 중…",
+  "Execute": "실행하기",
+  "Definitions": "정의",
+  "Theorems": "정리",
+  "Not unlocked yet": "아직 잠금 해제가 안 됨",
+  "Not available in this level": "이 단계에서 쓸 수 없음",
+  "A repository of learning games for the proof assistant <1>Lean</1> <i>(Lean 4)</i> and its mathematical library <5>mathlib</5>": "<1>린(Lean 4)</1> 증명 보조기와 그 수학 라이브러리 <5>매스리브(mathlib)</5>를 학습하기 위한 게임들의 저장소",
+  "No Games loaded. Use <1>http://localhost:3000/#/g/local/FOLDER</1> to open a game directly from a local folder.": "불러온 게임 없음. <1>http://localhost:3000/#/g/local/FOLDER</1>를 이용해 지역[로컬] 폴더에서 게임을 직접 여십시오.",
+  "Prerequisites": "선행 요건",
+  "Worlds": "세계",
+  "Levels": "단계",
+  "Language": "언어",
+  "Server capacity": "서버 이용량",
+  "RAM": "램",
+  "CPU": "CPU",
+  "Development notes": "개발 노트",
+  "Adding new games": "새 게임 추가하기",
+  "Funding": "재정 지원",
+  "<p>Do you want to delete your saved progress irreversibly?</p><p>(This deletes your proofs and your collected inventory. Saves from other games are not deleted.)</p>": "<p>저장된 진도를 불가역적으로 삭제하시겠습니까?</p><p>(이를 선택하시면 증명과 인벤토리 안의 수집 항목들이 삭제됩니다. 다른 게임에 저장된 정보는 삭제되지 않습니다.)</p>",
+  "Delete Progress?": "진도를 삭제하시겠습니까?",
+  "Delete": "삭제하기",
+  "Download & Delete": "내려받고 삭제하기",
+  "Cancel": "취소하기",
+  "Layout": "레이아웃",
+  "Always visible": "항상 보임",
+  "Save my settings (in the browser store)": "(브라우저에) 설정 저장하기",
+  "<p>Select a JSON file with the saved game progress to load your progress.</p><1><0>Warning:</0> This will delete your current game progress! Consider <2>downloading your current progress</2> first!</1>": "<p>저장된 게임 진도가 있는 JSON 파일을 선택해 진도를 불러오십시오.</p><1><0>경고:</0> 이를 실행하면 현재의 게임 진도가 삭제됩니다! <2>현재의 게임 진도</2>를 먼저 내려받을지 판단하십시오!</1>",
+  "Upload Saved Progress": "저장된 진도 업로드",
+  "Load selected file": "선택한 파일 열기",
+  "Mobile": "모바일",
+  "Auto": "자동",
+  "Desktop": "데스크톱",
+  "<0>If you are considering writing your own game, you should use the <1>GameSkeleton Github Repo</1> as a template and read <3>How to Create a Game</3>.</0><1>You can directly load your games into the server and play it using the correct URL. The <1>instructions above</1> also explain the details for how to load your game to the server. We'd like to encourage you to contact us if you have any questions.</1><p>Featured games on this page are added manually. Please get in contact and we'll happily add yours.</p>": "<0>여러분이 직접 게임을 작성할 생각이 있다면, <1>GameSkeleton 깃허브 저장소</1>를 양식[템플릿]으로 이용하고 <3>'게임 만들기(Creating a Game)'</3> 문서를 읽으십시오.</0><1>여러분이 작성한 게임을 직접 서버에서 불러오고, 정확한 URL을 이용해 그 게임을 하실 수 있습니다. 여러분의 게임을 서버에서 불러오는 방법에 관한 세부 사항도 위의 <1>설명서</1>에 나와 있습니다. 궁금한 점이 있으면 저희에게 연락해 주십시오.</1><p>이 페이지에 실린 게임들은 수동으로 추가됐습니다. 저희에게 연락하시면 여러분의 게임을 기꺼이 추가하겠습니다.",
+  "Level": "단계",
+  "Introduction": "소개",
+  "Retry proof from here": "여기부터 증명 다시 시도하기",
+  "Retry": "다시 시도하기",
+  "Failed command": "실패한 명령",
+  "<p>As this server runs lean on our university machines, it has a limited capacity. Our current estimate is about 70 simultaneous games.</p>": "",
+  "<0>Most aspects of the games and the infrastructure are still in development. Feel free to file a <1>GitHub Issue</1> about any problems you experience!</0>": "",
+  "This server has been developed as part of the project <1>ADAM: Anticipating the Digital Age of Mathematics</1> at Heinrich Heine University Düsseldorf.": "",
+  " used": ""
+}

client/public/locales/ko/translation.json

@@ -0,0 +1 @@
+target/translation.json

client/public/locales/zh/translation.json

@@ -0,0 +1,99 @@
+{
+  "Tactics": "策略",
+  "Lean Game Server": "LEAN 游戏服务器",
+  "<p>Game rules determine if it is allowed to skip levels and if the games runs checks to only allow unlocked tactics and theorems in proofs.</p><1>Note: \"Unlocked\" tactics (or theorems) are determined by two things: The set of minimal tactics needed to solve a level, plus any tactics you unlocked in another level. That means if you unlock <1>simp</1> in a level, you can use it henceforth in any level.</1><p>The options are:</p>": "<p>游戏规则决定是否允许跳过关卡，以及游戏是否只允许在证明中使用已解锁的策略和定理。</p><1>注意：“解锁”的策略（或定理）由两个因素决定：解决关卡所需的最小策略集合，加上你在其他关卡中解锁的任何策略。这意味着，如果你在某个关卡中解锁了<1>simp</1>，你可以在任何关卡中使用它。</1><p>选项有：</p>",
+  "Game Rules": "游戏规则",
+  "levels": "关卡",
+  "tactics": "策略",
+  "regular": "标准",
+  "relaxed": "休闲",
+  "none": "自由",
+  "Rules": "规则",
+  "Intro": "介绍",
+  "Game Introduction": "游戏介绍",
+  "World selection": "世界选择",
+  "Start": "开始",
+  "Inventory": "定理清单",
+  "next level": "下一关",
+  "Next": "下一关",
+  "back to world selection": "返回世界选择",
+  "Leave World": "离开世界",
+  "previous level": "上一关",
+  "Previous": "上一关",
+  "Editor mode is enforced!": "编辑器模式已启用！",
+  "Editor mode": "编辑器模式",
+  "Typewriter mode": "打字机模式",
+  "information, Impressum, privacy policy": "信息、版权说明、隐私政策",
+  "Preferences": "偏好设置",
+  "Game Info & Credits": "游戏信息和荣誉",
+  "Game Info": "游戏信息",
+  "Clear Progress": "清除进度",
+  "Erase": "删除",
+  "Download Progress": "下载进度",
+  "Download": "下载",
+  "Load Progress from JSON": "从 JSON 加载进度",
+  "Upload": "上传",
+  "Home": "首页",
+  "back to games selection": "返回游戏选择",
+  "close inventory": "关闭定理清单面板",
+  "show inventory": "打开定理清单面板",
+  "World": "世界",
+  "Show more help!": "显示更多帮助！",
+  "Goal": "目标",
+  "Current Goal": "当前目标",
+  "Objects": "对象",
+  "Assumptions": "假设",
+  "Further Goals": "进一步目标",
+  "No Goals": "无目标",
+  "Loading goal…": "加载目标中。。。",
+  "Click somewhere in the Lean file to enable the infoview.": "单击 Lean 文件中的某处以启用信息视图。",
+  "Waiting for Lean server to start…": "等待 Lean 服务器启动中…",
+  "Level completed! 🎉": "关卡完成！🎉",
+  "Level completed with warnings 🎭": "关卡完成（带有警告） 🎭",
+  "Retry proof from here": "从这里重新尝试证明",
+  "Active Goal": "当前目标",
+  "Crashed! Go to editor mode and fix your proof! Last server response:": "程序崩溃！请转到编辑器模式，修复您的证明！最后一次服务器响应：",
+  "Line": "行",
+  "Character": "字符",
+  "Loading messages…": "正在加载信息。。。",
+  "Execute": "执行",
+  "Definitions": "定义",
+  "Theorems": "定理",
+  "Not unlocked yet": "尚未解锁",
+  "Not available in this level": "本关卡不提供",
+  "A repository of learning games for the proof assistant <1>Lean</1> <i>(Lean 4)</i> and its mathematical library <5>mathlib</5>": "这是一个为证明助手 <1>Lean</1> <i>(Lean 4)</i> 及其数学库 <5>mathlib</5> 设计的学习游戏库",
+  "No Games loaded. Use <1>http://localhost:3000/#/g/local/FOLDER</1> to open a game directly from a local folder.": "未加载游戏。访问 <1>http://localhost:3000/#/g/local/FOLDER</1> 从本地文件夹打开游戏。",
+  "<0>If you are considering writing your own game, you should use the <1>GameSkeleton Github Repo</1> as a template and read <3>How to Create a Game</3>.</0><1>You can directly load your games into the server and play it using the correct URL. The <1>instructions above</1> also explain the details for how to load your game to the server. We'd like to encourage you to contact us if you have any questions.</1><p>Featured games on this page are added manually. Please get in contact and we'll happily add yours.</p>": "<0>如果你打算编写自己的游戏，可以使用 <1>GameSkeleton Github Repo</1> 作为模板，并参阅 <3>如何创建游戏</3>。</0><1>你可以直接将游戏上传至服务器，并通过正确的 URL 进行游戏。上面的 <1>说明</1> 已详细介绍了如何将游戏加载到服务器的步骤。如果你有任何疑问，请随时联系我们。</1><p>本页上的精选游戏都是手动添加的。如果你想添加你的游戏，请与我们联系，我们非常欢迎。</p>",
+  "Prerequisites": "前置条件",
+  "Worlds": "世界",
+  "Levels": "关卡",
+  "Language": "语言",
+  "Development notes": "开发笔记",
+  "Adding new games": "添加新游戏",
+  "Funding": "资助",
+  "<p>Do you want to delete your saved progress irreversibly?</p><p>(This deletes your proofs and your collected inventory. Saves from other games are not deleted.)</p>": "<p>您确定要永久删除您的游戏进度吗？</p><p>（此操作将删除您的所有证明和收集的定理与策略，但不会影响其他游戏的保存数据。）</p>",
+  "Delete Progress?": "删除进度？",
+  "Delete": "删除",
+  "Download & Delete": "下载和删除",
+  "Cancel": "取消",
+  "Layout": "布局",
+  "Always visible": "始终可见",
+  "Save my settings (in the browser store)": "保存我的设置（在浏览器中存储）",
+  "<p>Select a JSON file with the saved game progress to load your progress.</p><1><0>Warning:</0> This will delete your current game progress! Consider <2>downloading your current progress</2> first!</1>": "<p>选择一个包含已保存游戏进度的 JSON 文件来加载您的进度。</p><1><0>警告：</0>这将删除您当前的游戏进度！请考虑先<2>下载您当前的进度</2>！</1>",
+  "Upload Saved Progress": "上传保存的进度",
+  "Load selected file": "加载所选文件",
+  "Mobile": "移动端",
+  "Auto": "自动",
+  "Desktop": "桌面端",
+  "Level": "关卡",
+  "Introduction": "介绍",
+  "Retry": "重试",
+  "Failed command": "命令失败",
+  "<p>As this server runs lean on our university machines, it has a limited capacity. Our current estimate is about 70 simultaneous games.</p>": "",
+  "<0>Most aspects of the games and the infrastructure are still in development. Feel free to file a <1>GitHub Issue</1> about any problems you experience!</0>": "",
+  "This server has been developed as part of the project <1>ADAM: Anticipating the Digital Age of Mathematics</1> at Heinrich Heine University Düsseldorf.": "",
+  "Server capacity": "",
+  "RAM": "",
+  " used": "",
+  "CPU": ""
+}

client/src/app.tsx

@@ -6,35 +6,33 @@ import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
-import './reset.css';
-import './app.css';
-import { MobileContext } from './components/infoview/context';
-import { useWindowDimensions } from './window_width';
-import { selectOpenedIntro } from './state/progress';
-import { useSelector } from 'react-redux';
+import './css/reset.css';
+import './css/app.css';
+import { PreferencesContext} from './components/infoview/context';
+import UsePreferences from "./state/hooks/use_preferences"
+import i18n from './i18n';
 
 export const GameIdContext = React.createContext<string>(undefined);
 
 function App() {
+
   const params = useParams()
   const gameId = "g/" + params.owner + "/" + params.repo
 
-  // TODO: Make mobileLayout be changeable in settings
-  // TODO: Handle resize Events
-  const {width, height} = useWindowDimensions()
-  const [mobile, setMobile] = React.useState(width < 800)
+  const {mobile, layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage} = UsePreferences()
 
-  // On mobile, there are multiple pages on the welcome page to switch between
-  const openedIntro = useSelector(selectOpenedIntro(gameId))
-  // On mobile, there are multiple pages to switch between
-  const [pageNumber, setPageNumber] = React.useState(openedIntro ? 1 : 0)
+  React.useEffect(() => {
+    i18n.changeLanguage(language)
+  }, [language])
 
   return (
     <div className="app">
       <GameIdContext.Provider value={gameId}>
-        <MobileContext.Provider value={{mobile, setMobile, pageNumber, setPageNumber}}>
-          <Outlet />
-        </MobileContext.Provider>
+          <PreferencesContext.Provider value={{mobile, layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage}}>
+            <React.Suspense>
+              <Outlet />
+            </React.Suspense>
+          </PreferencesContext.Provider>
       </GameIdContext.Provider>
     </div>
   )

client/src/components/app_bar.tsx

@@ -1,45 +1,47 @@
+/**
+ *  @file contains the navigation bars of the app.
+ */
 import * as React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faDownload, faUpload, faEraser, faBook, faBookOpen, faGlobe, faHome,
+  faArrowRight, faArrowLeft, faXmark, faBars, faCode,
+  faCircleInfo, faTerminal, faGear } from '@fortawesome/free-solid-svg-icons'
 import { GameIdContext } from "../app"
-import { InputModeContext, MobileContext, WorldLevelIdContext } from "./infoview/context"
+import { InputModeContext, PreferencesContext, WorldLevelIdContext } from "./infoview/context"
 import { GameInfo, useGetGameInfoQuery } from '../state/api'
 import { changedOpenedIntro, selectCompleted, selectDifficulty, selectProgress } from '../state/progress'
-import { useSelector } from 'react-redux'
 import { useAppDispatch, useAppSelector } from '../hooks'
 import { Button } from './button'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDownload, faUpload, faEraser, faBook, faGlobe, faHome, faArrowRight, faArrowLeft, faXmark, faBars, faCode, faCircleInfo, faTerminal } from '@fortawesome/free-solid-svg-icons'
-import { PrivacyPolicyPopup } from './privacy_policy'
-import { WorldSelectionMenu, downloadFile } from './world_tree'
+import { downloadProgress } from './popup/erase'
+import { useTranslation } from 'react-i18next'
 
-/** navigation to switch between pages on mobile */
-function MobileNav({pageNumber, setPageNumber}:
+/** navigation buttons for mobile welcome page to switch between intro/tree/inventory. */
+function MobileNavButtons({pageNumber, setPageNumber}:
   { pageNumber: number,
     setPageNumber: any}) {
   const gameId = React.useContext(GameIdContext)
+  const { t } = useTranslation()
   const dispatch = useAppDispatch()
 
-  let prevText = {0 : null, 1: "Intro", 2: null}[pageNumber]
-  let prevIcon = {0 : null, 1: null, 2: faXmark}[pageNumber]
-  let prevTitle = {
-    0: null,
-    1: "Game Introduction",
-    2: "World selection"}[pageNumber]
-  let nextText = {0 : "Start", 1: null, 2: null}[pageNumber]
-  let nextIcon = {0 : null, 1: faBook, 2: null}[pageNumber]
-  let nextTitle = {
-    0: "World selection",
-    1: "Inventory",
-    2: null}[pageNumber]
+  // if `prevText` or `prevIcon` is set, show a button to go back
+  let prevText  = {0: null, 1: t("Intro"), 2: null}[pageNumber]
+  let prevIcon  = {0: null, 1: null, 2: faBookOpen}[pageNumber]
+  let prevTitle = {0: null, 1: t("Game Introduction"), 2: t("World selection")}[pageNumber]
+  // if `nextText` or `nextIcon` is set, show a button to go forward
+  let nextText  = {0: t("Start"), 1: null, 2: null}[pageNumber]
+  let nextIcon  = {0: null, 1: faBook, 2: null}[pageNumber]
+  let nextTitle = {0: t("World selection"), 1: t("Inventory"), 2: null}[pageNumber]
 
   return <>
-    {(prevText || prevTitle || prevIcon) &&
-      <Button className="btn btn-inverted toggle-width" to={pageNumber == 0 ? "/" : ""} inverted="true" title={prevTitle}
+    {(prevText || prevIcon) &&
+      <Button className="btn btn-inverted toggle-width" to={pageNumber == 0 ? "/" : ""}
+          inverted="true" title={prevTitle}
           onClick={() => {pageNumber == 0 ? null : setPageNumber(pageNumber - 1)}}>
         {prevIcon && <FontAwesomeIcon icon={prevIcon} />}
         {prevText && `${prevText}`}
       </Button>
     }
-    {(nextText || nextTitle || nextIcon) &&
+    {(nextText || nextIcon) &&
       <Button className="btn btn-inverted toggle-width" to="" inverted="true"
           title={nextTitle} onClick={() => {
             console.log(`page number: ${pageNumber}`)
@@ -52,349 +54,256 @@ function MobileNav({pageNumber, setPageNumber}:
   </>
 }
 
-export function WelcomeAppBar({gameInfo, toggleImpressum, openEraseMenu, openUploadMenu, toggleInfo} : {
-  gameInfo: GameInfo,
-  toggleImpressum: any,
-  openEraseMenu: any,
-  openUploadMenu: any,
-  toggleInfo: any
-}) {
-  const gameId = React.useContext(GameIdContext)
-  const {mobile, pageNumber, setPageNumber} = React.useContext(MobileContext)
-  const [navOpen, setNavOpen] = React.useState(false)
+/** button to toggle dropdown menu. */
+export function MenuButton({navOpen, setNavOpen}) {
+  return <Button to="" className="btn toggle-width" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}}>
+    {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
+  </Button>
+}
 
+/** button to go one level futher.
+ * for the last level, this button turns into a button going back to the welcome page.
+ */
+function NextButton({worldSize, difficulty, completed, setNavOpen}) {
+  const { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+  const {worldId, levelId} = React.useContext(WorldLevelIdContext)
+  return (levelId < worldSize ?
+    <Button inverted="true"
+        to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title={t("next level")}
+        disabled={difficulty >= 2 && !(completed || levelId == 0)}
+        onClick={() => setNavOpen(false)}>
+      <FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? t("Next") : t("Start")}
+    </Button>
+    :
+    <Button to={`/${gameId}`} inverted="true" title={t("back to world selection")} id="home-btn">
+      <FontAwesomeIcon icon={faHome} />&nbsp;{t("Leave World")}
+    </Button>
+  )
+}
 
+/** button to go one level back.
+ * only renders if the current level id is > 0.
+ */
+function PreviousButton({setNavOpen}) {
+  const { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+  const {worldId, levelId} = React.useContext(WorldLevelIdContext)
+  return (levelId > 0 && <>
+    <Button disabled={levelId <= 0} inverted="true"
+        to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
+        title={t("previous level")}
+        onClick={() => setNavOpen(false)}>
+      <FontAwesomeIcon icon={faArrowLeft} />&nbsp;{t("Previous")}
+    </Button>
+  </>)
+}
 
-  /** Download the current progress (i.e. what's saved in the browser store) */
-  const gameProgress = useSelector(selectProgress(gameId))
-  const downloadProgress = (e) => {
-    e.preventDefault()
-    downloadFile({
-      data: JSON.stringify(gameProgress, null, 2),
-      fileName: `lean4game-${gameId}-${new Date().toLocaleDateString()}.json`,
-      fileType: 'text/json',
-    })
+/** button to toggle between editor and typewriter */
+function InputModeButton({setNavOpen, isDropdown}) {
+  const { t } = useTranslation()
+  const {levelId} = React.useContext(WorldLevelIdContext)
+  const {typewriterMode, setTypewriterMode, lockEditorMode} = React.useContext(InputModeContext)
+
+  /** toggle input mode if allowed */
+  function toggleInputMode(ev: React.MouseEvent) {
+    if (!lockEditorMode){
+      setTypewriterMode(!typewriterMode)
+      setNavOpen(false)
+    }
   }
 
-
-  return   <div className="app-bar" >
-    <>
-      <div>
-        <Button inverted="false" title="back to games selection" to="/">
-          <FontAwesomeIcon icon={faArrowLeft} />&nbsp;<FontAwesomeIcon icon={faGlobe} />
-        </Button>
-        <span className="app-bar-title"></span>
-      </div>
-      <div>
-        <span className="app-bar-title">
-          {mobile ? '' : gameInfo?.title}
-        </span>
-      </div>
-      <div className="nav-btns">
-        {mobile && <>
-          {/* BUTTONS for MOBILE */}
-          <MobileNav pageNumber={pageNumber} setPageNumber={setPageNumber} />
-
-        </>}
-
-        <Button to="" className="btn toggle-width" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}} >
-          {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
-        </Button>
-
-      </div>
-      <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
-        {/* {levelId < gameInfo.data?.worldSize[worldId] &&
-          <Button inverted="true"
-              to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
-              disabled={difficulty >= 2 && !(completed || levelId == 0)}
-              onClick={() => setNavOpen(false)}>
-            <FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
-          </Button>
-        }
-        {levelId > 0 && <>
-              <Button disabled={levelId <= 0} inverted="true"
-                  to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
-                  title="previous level"
-                  onClick={() => setNavOpen(false)}>
-                <FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
-              </Button>
-            </>}
-        <Button to={`/${gameId}`} inverted="true" title="back to world selection">
-          <FontAwesomeIcon icon={faHome} />&nbsp;Home
-        </Button>
-        <Button disabled={levelId <= 0} inverted="true" to=""
-            onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
-            title="toggle Editor mode">
-          <FontAwesomeIcon icon={faCode} />&nbsp;Toggle Editor
-        </Button> */}
-
-        <Button title="Game Info & Credits" inverted="true" to="" onClick={(ev) => {toggleInfo(); setNavOpen(false)}}>
-          <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Game Info
-        </Button>
-        <Button title="Clear Progress" inverted="true" to="" onClick={(ev) => {openEraseMenu(); setNavOpen(false)}}>
-          <FontAwesomeIcon icon={faEraser} />&nbsp;Erase
-        </Button>
-        <Button title="Download Progress" inverted="true" to="" onClick={(ev) => {downloadProgress(ev); setNavOpen(false)}}>
-          <FontAwesomeIcon icon={faDownload} />&nbsp;Download
-        </Button>
-        <Button title="Load Progress from JSON" inverted="true" to="" onClick={(ev) => {openUploadMenu(); setNavOpen(false)}}>
-          <FontAwesomeIcon icon={faUpload} />&nbsp;Upload
-        </Button>
-        <Button title="Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(); setNavOpen(false)}}>
-          <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Impressum
-        </Button>
-      </div>
-    </>
-  </div>
-
-
-
+  return <Button
+      className={`btn btn-inverted ${isDropdown? '' : 'toggle-width'}`} disabled={levelId <= 0 || lockEditorMode}
+      inverted="true" to=""
+      onClick={(ev) => toggleInputMode(ev)}
+      title={lockEditorMode ? t("Editor mode is enforced!") : typewriterMode ? t("Editor mode") : t("Typewriter mode")}>
+    <FontAwesomeIcon icon={(typewriterMode && !lockEditorMode) ? faCode : faTerminal} />
+    {isDropdown && ((typewriterMode && !lockEditorMode) ? <>&nbsp;{t("Editor mode")}</> : <>&nbsp;{t("Typewriter mode")}</>)}
+  </Button>
 }
 
-// /** The menu that is shown next to the world selection graph */
-// function WorldSelectionMenu() {
-//   const [file, setFile] = React.useState<File>();
-
-//   const gameId = React.useContext(GameIdContext)
-//   const store = useStore()
-//   const difficulty = useSelector(selectDifficulty(gameId))
-
-
-//   /* state variables to toggle the pop-up menus */
-//   const [eraseMenu, setEraseMenu] = React.useState(false);
-//   const openEraseMenu = () => setEraseMenu(true);
-//   const closeEraseMenu = () => setEraseMenu(false);
-//   const [uploadMenu, setUploadMenu] = React.useState(false);
-//   const openUploadMenu = () => setUploadMenu(true);
-//   const closeUploadMenu = () => setUploadMenu(false);
-
-//   const gameProgress = useSelector(selectProgress(gameId))
-//   const dispatch = useAppDispatch()
-
-//   /** Download the current progress (i.e. what's saved in the browser store) */
-//   const downloadProgress = (e) => {
-//     e.preventDefault()
-//     downloadFile({
-//       data: JSON.stringify(gameProgress, null, 2),
-//       fileName: `lean4game-${gameId}-${new Date().toLocaleDateString()}.json`,
-//       fileType: 'text/json',
-//     })
-//   }
-
-//   const handleFileChange = (e) => {
-//     if (e.target.files) {
-//       setFile(e.target.files[0])
-//     }
-//   }
-
-//   /** Upload progress from a  */
-//   const uploadProgress = (e) => {
-//     if (!file) {return}
-//     const fileReader = new FileReader()
-//     fileReader.readAsText(file, "UTF-8")
-//     fileReader.onload = (e) => {
-//       const data = JSON.parse(e.target.result.toString()) as GameProgressState
-//       console.debug("Json Data", data)
-//       dispatch(loadProgress({game: gameId, data: data}))
-//     }
-//     closeUploadMenu()
-//   }
-
-//   const eraseProgress = () => {
-//     dispatch(deleteProgress({game: gameId}))
-//     closeEraseMenu()
-//   }
-
-//   const downloadAndErase = (e) => {
-//     downloadProgress(e)
-//     eraseProgress()
-//   }
+/** button to toggle iimpressum popup
+ *
+ * Note: Do not translate the word "Impressum"! German GDPR needs this.
+*/
+export function ImpressumButton({setNavOpen, toggleImpressum, isDropdown}) {
+  const { t } = useTranslation()
+  return <Button className="btn btn-inverted"
+    title={t("information, Impressum, privacy policy")} inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
+    <FontAwesomeIcon icon={faCircleInfo} />
+    {isDropdown && <>&nbsp;Impressum</>}
+  </Button>
+}
 
-//   function label(x : number) {
-//     return x == 0 ? 'none' : x == 1 ? 'lax' : 'regular'
-//   }
+export function PreferencesButton({setNavOpen, togglePreferencesPopup}) {
+  const { t } = useTranslation()
+  return <Button title={t("Preferences")} inverted="true" to="" onClick={() => {togglePreferencesPopup(); setNavOpen(false)}}>
+    <FontAwesomeIcon icon={faGear} />&nbsp;{t("Preferences")}
+  </Button>
+}
 
-//   return <nav className="world-selection-menu">
-//     <Button onClick={downloadProgress} title="Download game progress" to=""><FontAwesomeIcon icon={faDownload} /></Button>
-//     <Button title="Load game progress from JSON" onClick={openUploadMenu} to=""><FontAwesomeIcon icon={faUpload} /></Button>
-//     <Button title="Clear game progress" to="" onClick={openEraseMenu}><FontAwesomeIcon icon={faEraser} /></Button>
-//     <div className="slider-wrap">
-//       <span className="difficulty-label">Game Rules:</span>
-//       <Slider
-//         title="Game Rules:&#10;- regular: 🔐 levels, 🔐 tactics&#10;- lax: 🔓 levels, 🔐 tactics&#10;- none: 🔓 levels, 🔓 tactics"
-//         min={0} max={2}
-//         aria-label="Game Rules"
-//         defaultValue={difficulty}
-//         marks={[
-//           {value: 0, label: label(0)},
-//           {value: 1, label: label(1)},
-//           {value: 2, label: label(2)}
-//         ]}
-//         valueLabelFormat={label}
-//         getAriaValueText={label}
-//         valueLabelDisplay="auto"
-//         onChange={(ev, val: number) => {
-//           dispatch(changedDifficulty({game: gameId, difficulty: val}))
-//         }}
-//         ></Slider>
+function GameInfoButton({setNavOpen, toggleInfo}) {
+  const { t } = useTranslation()
+  return <Button className="btn btn-inverted"
+    title={t("Game Info & Credits")} inverted="true" to="" onClick={() => {toggleInfo(); setNavOpen(false)}}>
+    <FontAwesomeIcon icon={faCircleInfo} />&nbsp;{t("Game Info")}
+  </Button>
+}
 
-//     </div>
-//     {eraseMenu?
-//       <div className="modal-wrapper">
-//         <div className="modal-backdrop" onClick={closeEraseMenu} />
-//         <div className="modal">
-//           <div className="codicon codicon-close modal-close" onClick={closeEraseMenu}></div>
-//           <h2>Delete Progress?</h2>
+function EraseButton ({setNavOpen, toggleEraseMenu}) {
+  const { t } = useTranslation()
+  return <Button title={t("Clear Progress")} inverted="true" to="" onClick={() => {toggleEraseMenu(); setNavOpen(false)}}>
+    <FontAwesomeIcon icon={faEraser} />&nbsp;{t("Erase")}
+  </Button>
+}
 
-//           <p>Do you want to delete your saved progress irreversibly?</p>
-//           <p>
-//             (This deletes your proofs and your collected inventory.
-//             Saves from other games are not deleted.)
-//           </p>
+function DownloadButton ({setNavOpen, gameId, gameProgress}) {
+  const { t } = useTranslation()
+  return <Button title={t("Download Progress")} inverted="true" to="" onClick={(ev) => {downloadProgress(gameId, gameProgress, ev); setNavOpen(false)}}>
+    <FontAwesomeIcon icon={faDownload} />&nbsp;{t("Download")}
+  </Button>
+}
 
-//           <Button onClick={eraseProgress} to="">Delete</Button>
-//           <Button onClick={downloadAndErase} to="">Download & Delete</Button>
-//           <Button onClick={closeEraseMenu} to="">Cancel</Button>
-//         </div>
-//       </div> : null}
-//     {uploadMenu ?
-//       <div className="modal-wrapper">
-//         <div className="modal-backdrop" onClick={closeUploadMenu} />
-//         <div className="modal">
-//           <div className="codicon codicon-close modal-close" onClick={closeUploadMenu}></div>
-//           <h2>Upload Saved Progress</h2>
+function UploadButton ({setNavOpen, toggleUploadMenu}) {
+  const { t } = useTranslation()
+  return <Button title={t("Load Progress from JSON")} inverted="true" to="" onClick={() => {toggleUploadMenu(); setNavOpen(false)}}>
+    <FontAwesomeIcon icon={faUpload} />&nbsp;{t("Upload")}
+  </Button>
+}
 
-//           <p>Select a JSON file with the saved game progress to load your progress.</p>
+/**  button to go back to welcome page */
+function HomeButton({isDropdown}) {
+  const { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+  return <Button to={`/${gameId}`} inverted="true" title={t("back to world selection")} id="home-btn">
+    <FontAwesomeIcon icon={faHome} />
+    {isDropdown && <>&nbsp;{t("Home")}</>}
+  </Button>
+}
 
-//           <p><b>Warning:</b> This will delete your current game progress!
-//             Consider <a className="download-link" onClick={downloadProgress} >downloading your current progress</a> first!</p>
+function LandingPageButton() {
+  const { t } = useTranslation()
+  return <Button inverted="false" title={t("back to games selection")} to="/">
+    <FontAwesomeIcon icon={faArrowLeft} />&nbsp;<FontAwesomeIcon icon={faGlobe} />
+    </Button>
+}
 
-//           <input type="file" onChange={handleFileChange}/>
+/** button in mobile level to toggle inventory.
+ * only displays a button if `setPageNumber` is set.
+ */
+function InventoryButton({pageNumber, setPageNumber}) {
+  const { t } = useTranslation()
+  return (setPageNumber &&
+    <Button to="" className="btn btn-inverted toggle-width"
+      title={pageNumber ? t("close inventory") : t("show inventory")}
+      inverted="true" onClick={() => {setPageNumber(pageNumber ? 0 : 1)}}>
+      <FontAwesomeIcon icon={pageNumber ? faBookOpen : faBook} />
+    </Button>
+  )
+}
 
-//           <Button to="" onClick={uploadProgress}>Load selected file</Button>
-//         </div>
-//       </div> : null}
-//   </nav>
-// }
+/** the navigation bar on the welcome page */
+export function WelcomeAppBar({pageNumber, setPageNumber, gameInfo, toggleImpressum, toggleEraseMenu, toggleUploadMenu, toggleInfo, togglePreferencesPopup} : {
+  pageNumber: number,
+  setPageNumber: any,
+  gameInfo: GameInfo,
+  toggleImpressum: any,
+  toggleEraseMenu: any,
+  toggleUploadMenu: any,
+  toggleInfo: any,
+  togglePreferencesPopup: () => void;
+}) {
+  const { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+  const gameProgress = useAppSelector(selectProgress(gameId))
+  const {mobile} = React.useContext(PreferencesContext)
+  const [navOpen, setNavOpen] = React.useState(false)
 
+  return <div className="app-bar">
+    <div className='app-bar-left'>
+      <LandingPageButton />
+      <span className="app-bar-title"></span>
+    </div>
+    <div>
+      {!mobile && <span className="app-bar-title">{t(gameInfo?.title, {ns: gameId})}</span>}
+    </div>
+    <div className="nav-btns">
+      {mobile && <MobileNavButtons pageNumber={pageNumber} setPageNumber={setPageNumber} />}
+      <MenuButton navOpen={navOpen} setNavOpen={setNavOpen} />
+    </div>
+    <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
+      <GameInfoButton setNavOpen={setNavOpen} toggleInfo={toggleInfo}/>
+      <EraseButton setNavOpen={setNavOpen} toggleEraseMenu={toggleEraseMenu}/>
+      <DownloadButton setNavOpen={setNavOpen} gameId={gameId} gameProgress={gameProgress}/>
+      <UploadButton setNavOpen={setNavOpen} toggleUploadMenu={toggleUploadMenu}/>
+      <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
+      <PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
+    </div>
+  </div>
+}
 
-/** The top-navigation bar */
-export function LevelAppBar({
-    isLoading, levelTitle, impressum, toggleImpressum,
-    pageNumber = undefined, setPageNumber = undefined}) {
+/** the navigation bar in a level */
+export function LevelAppBar({isLoading, levelTitle, toggleImpressum, toggleInfo, togglePreferencesPopup, pageNumber=undefined, setPageNumber=undefined} : {
+  isLoading: boolean,
+  levelTitle: string,
+  toggleImpressum: any,
+  toggleInfo: any,
+  togglePreferencesPopup: any,
+  pageNumber?: number,
+  setPageNumber?: any,
+}) {
+  const { t } = useTranslation()
   const gameId = React.useContext(GameIdContext)
   const {worldId, levelId} = React.useContext(WorldLevelIdContext)
+  const {mobile} = React.useContext(PreferencesContext)
+  const [navOpen, setNavOpen] = React.useState(false)
   const gameInfo = useGetGameInfoQuery({game: gameId})
-
-  const {mobile} = React.useContext(MobileContext)
-
-  const difficulty = useSelector(selectDifficulty(gameId))
   const completed = useAppSelector(selectCompleted(gameId, worldId, levelId))
+  const difficulty = useAppSelector(selectDifficulty(gameId))
 
-  const { commandLineMode, setCommandLineMode } = React.useContext(InputModeContext)
-
-  const [navOpen, setNavOpen] = React.useState(false)
+  let worldTitle = gameInfo.data?.worlds.nodes[worldId].title
 
   return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
     {mobile ?
       <>
         {/* MOBILE VERSION */}
         <div>
-          <span className="app-bar-title">
-            {levelTitle}
-          </span>
+          <span className="app-bar-title">{levelTitle}</span>
         </div>
         <div className="nav-btns">
-          {mobile && pageNumber == 0 ?
-            <Button to="" className="btn btn-inverted toggle-width"
-                title="show inventory" inverted="true" onClick={() => {setPageNumber(1)}}>
-              <FontAwesomeIcon icon={faBook}/>
-            </Button>
-          : pageNumber == 1 &&
-            <Button className="btn btn-inverted toggle-width" to=""
-                title="show inventory" inverted="true" onClick={() => {setPageNumber(0)}}>
-              <FontAwesomeIcon icon={faXmark}/>
-            </Button>
-          }
-          <Button to="" className="btn toggle-width" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}} >
-            {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
-          </Button>
+          <InventoryButton pageNumber={pageNumber} setPageNumber={setPageNumber}/>
+          <MenuButton navOpen={navOpen} setNavOpen={setNavOpen}/>
         </div>
         <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
-          {levelId < gameInfo.data?.worldSize[worldId] &&
-            <Button inverted="true"
-                to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
-                disabled={difficulty >= 2 && !(completed || levelId == 0)}
-                onClick={() => setNavOpen(false)}>
-              <FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
-            </Button>
-          }
-          {levelId > 0 && <>
-                <Button disabled={levelId <= 0} inverted="true"
-                    to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
-                    title="previous level"
-                    onClick={() => setNavOpen(false)}>
-                  <FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
-                </Button>
-              </>}
-          <Button to={`/${gameId}`} inverted="true" title="back to world selection">
-            <FontAwesomeIcon icon={faHome} />&nbsp;Home
-          </Button>
-          <Button disabled={levelId <= 0} inverted="true" to=""
-              onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
-              title="toggle Editor mode">
-            <FontAwesomeIcon icon={faCode} />&nbsp;Toggle Editor
-          </Button>
-          <Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
-            <FontAwesomeIcon icon={faCircleInfo} />&nbsp;Info &amp; Impressum
-          </Button>
+          <NextButton worldSize={gameInfo.data?.worldSize[worldId]} difficulty={difficulty} completed={completed} setNavOpen={setNavOpen} />
+          <PreviousButton setNavOpen={setNavOpen} />
+          <HomeButton isDropdown={true} />
+          <InputModeButton setNavOpen={setNavOpen} isDropdown={true}/>
+          <GameInfoButton setNavOpen={setNavOpen} toggleInfo={toggleInfo}/>
+          <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
+          <PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
         </div>
-      </>
-    :
+      </> :
       <>
         {/* DESKTOP VERSION */}
-        <div>
-          <Button to={`/${gameId}`} inverted="true" title="back to world selection" id="home-btn">
-            <FontAwesomeIcon icon={faHome} />
-          </Button>
-          <span className="app-bar-title">
-            {gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
-          </span>
+        <div className='app-bar-left'>
+          <HomeButton isDropdown={false} />
+          <span className="app-bar-title">{worldTitle && `${t("World")}: ${t(worldTitle, {ns: gameId})}`}</span>
         </div>
         <div>
-          <span className="app-bar-title">
-            {levelTitle}
-          </span>
+          <span className="app-bar-title">{levelTitle}</span>
         </div>
         <div className="nav-btns">
-          {levelId > 0 && <>
-            <Button disabled={levelId <= 0} inverted="true"
-                to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
-                title="previous level"
-                onClick={() => setNavOpen(false)}>
-              <FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
-            </Button>
-          </>}
-          {levelId < gameInfo.data?.worldSize[worldId] ?
-            <Button inverted="true"
-                to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
-                disabled={difficulty >= 2 && !(completed || levelId == 0)}
-                onClick={() => setNavOpen(false)}>
-              <FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
-            </Button>
-            :
-            <Button to={`/${gameId}`} inverted="true" title="back to world selection" id="home-btn">
-              <FontAwesomeIcon icon={faHome} />&nbsp;Leave World
-            </Button>
-          }
-          <Button className="btn btn-inverted toggle-width" disabled={levelId <= 0} inverted="true" to=""
-              onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
-              title="toggle Editor mode">
-            <FontAwesomeIcon icon={commandLineMode ? faCode : faTerminal} />
-          </Button>
-          <Button className="btn btn-inverted toggle-width" title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
-            <FontAwesomeIcon icon={impressum ? faXmark : faCircleInfo} />
-          </Button>
+          <PreviousButton setNavOpen={setNavOpen} />
+          <NextButton worldSize={gameInfo.data?.worldSize[worldId]} difficulty={difficulty} completed={completed} setNavOpen={setNavOpen} />
+          <InputModeButton setNavOpen={setNavOpen} isDropdown={false}/>
+          <MenuButton navOpen={navOpen} setNavOpen={setNavOpen}/>
+        </div>
+        <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
+          <GameInfoButton setNavOpen={setNavOpen} toggleInfo={toggleInfo}/>
+          <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
+          <PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
         </div>
       </>
     }

client/src/components/hints.tsx

@@ -1,21 +1,46 @@
-import { GameHint } from "./infoview/rpc_api";
+import { GameHint, InteractiveGoalsWithHints, ProofState } from "./infoview/rpc_api";
 import * as React from 'react';
 import Markdown from './markdown';
+import { DeletedChatContext, ProofContext } from "./infoview/context";
+import { lastStepHasErrors } from "./infoview/goals";
+import { Button } from "./button";
+import { useTranslation } from "react-i18next";
+import { GameIdContext } from "../app";
+
+/** Plug-in the variable names in a hint. We do this client-side to prepare
+ * for i18n in the future. i.e. one should be able translate the `rawText`
+ * and have the variables substituted just before displaying.
+ */
+function getHintText(hint: GameHint): string {
+  const gameId = React.useContext(GameIdContext)
+  let { t } = useTranslation()
+  if (hint.rawText) {
+    // Replace the variable names used in the hint with the ones used by the player
+    // variable names are marked like `«{g}»` inside the text.
+    return t(hint.rawText, {ns: gameId}).replaceAll(/«\{(.*?)\}»/g, ((_, v) =>
+      // `hint.varNames` contains tuples `[oldName, newName]`
+      (hint.varNames.find(x => x[0] == v))[1]))
+  } else {
+    // hints created in the frontend do not have a `rawText`
+    // TODO: `hint.text` could be removed in theory.
+    return t(hint.text, {ns: gameId})
+  }
+}
 
 export function Hint({hint, step, selected, toggleSelection, lastLevel} : {hint: GameHint, step: number, selected: number, toggleSelection: any, lastLevel?: boolean}) {
   return <div className={`message information step-${step}` + (step == selected ? ' selected' : '') + (lastLevel ? ' recent' : '')} onClick={toggleSelection}>
-    <Markdown>{hint.text}</Markdown>
+    <Markdown>{getHintText(hint)}</Markdown>
   </div>
 }
 
 export function HiddenHint({hint, step, selected, toggleSelection, lastLevel} : {hint: GameHint, step: number, selected: number, toggleSelection: any, lastLevel?: boolean}) {
   return <div className={`message warning step-${step}` + (step == selected ? ' selected' : '') + (lastLevel ? ' recent' : '')} onClick={toggleSelection}>
-    <Markdown>{hint.text}</Markdown>
+    <Markdown>{getHintText(hint)}</Markdown>
   </div>
 }
 
 export function Hints({hints, showHidden, step, selected, toggleSelection, lastLevel} : {hints: GameHint[], showHidden: boolean, step: number, selected: number, toggleSelection: any, lastLevel?: boolean}) {
-
+  if (!hints) {return <></>}
   const openHints = hints.filter(hint => !hint.hidden)
   const hiddenHints = hints.filter(hint => hint.hidden)
 
@@ -28,7 +53,7 @@ export function Hints({hints, showHidden, step, selected, toggleSelection, lastL
 
 export function DeletedHint({hint} : {hint: GameHint}) {
   return <div className="message information deleted-hint">
-    <Markdown>{hint.text}</Markdown>
+    <Markdown>{getHintText(hint)}</Markdown>
   </div>
 }
 
@@ -43,3 +68,58 @@ export function DeletedHints({hints} : {hints: GameHint[]}) {
     {hiddenHints.map((hint, i) => <DeletedHint key={`deleted-hidden-hint-${i}`} hint={hint}/>)}
   </>
 }
+
+/** Filter hints to not show consequtive identical hints twice.
+ * Hidden hints are not filtered.
+ */
+export function filterHints(hints: GameHint[], prevHints: GameHint[]): GameHint[] {
+  if (!hints) {
+    return []}
+  else if (!prevHints) {
+    return hints }
+  else {
+    return hints.filter((hint) => hint.hidden ||
+    (prevHints.find(x => (x.text == hint.text && x.hidden == hint.hidden)) === undefined)
+    )
+  }
+}
+
+
+function hasHiddenHints(step: InteractiveGoalsWithHints): boolean {
+  return step?.goals[0]?.hints.some((hint) => hint.hidden)
+}
+
+
+export function MoreHelpButton({selected=null} : {selected?: number}) {
+
+  const { t } = useTranslation()
+
+  const {proof, setProof} = React.useContext(ProofContext)
+  const {deletedChat, setDeletedChat, showHelp, setShowHelp} = React.useContext(DeletedChatContext)
+
+  let k = proof?.steps.length ?
+    ((selected === null) ? (proof?.steps.length - (lastStepHasErrors(proof) ? 2 : 1)) : selected)
+    : 0
+
+  const activateHiddenHints = (ev) => {
+    // If the last step (`k`) has errors, we want the hidden hints from the
+    // second-to-last step to be affected
+    if (!(proof?.steps.length)) {return}
+
+    // state must not be mutated, therefore we need to clone the set
+    let tmp = new Set(showHelp)
+    if (tmp.has(k)) {
+      tmp.delete(k)
+    } else {
+      tmp.add(k)
+    }
+    setShowHelp(tmp)
+    console.debug(`help: ${Array.from(tmp.values())}`)
+  }
+
+  if (hasHiddenHints(proof?.steps[k]) && !showHelp.has(k)) {
+    return <Button to="" onClick={activateHiddenHints}>
+      {t("Show more help!")}
+    </Button>
+  }
+}

client/src/components/infoview/context.ts

@@ -3,45 +3,59 @@
  */
 import * as React from 'react';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
-import { InteractiveDiagnostic, InteractiveTermGoal } from '@leanprover/infoview-api';
-import { GameHint, InteractiveGoal, InteractiveGoals } from './rpc_api';
+import { InteractiveDiagnostic } from '@leanprover/infoview-api';
+import { Diagnostic } from 'vscode-languageserver-types'
+import { GameHint, InteractiveGoal, InteractiveTermGoal,InteractiveGoalsWithHints, ProofState } from './rpc_api';
+import { PreferencesState } from '../../state/preferences';
 
 export const MonacoEditorContext = React.createContext<monaco.editor.IStandaloneCodeEditor>(
   null as any)
 
 export type InfoStatus = 'updating' | 'error' | 'ready';
 
-/** One step of the proof */
-export type ProofStep = {
-  /** The command in this step */
-  command : string
-  /** List of goals *after* this command */
-  goals: InteractiveGoal[]     // TODO: Add correct type
-  /** Story relevant messages */
-  hints: GameHint[]        // TODO: Add correct type
-  /** Errors and warnings */
-  errors: InteractiveDiagnostic[]       // TODO: Add correct type
-}
+// /** One step of the proof */
+// export type ProofStep = {
+//   /** The command in this step */
+//   command : string
+//   /** List of goals *after* this command */
+//   goals: InteractiveGoal[]     // TODO: Add correct type
+//   /** Story relevant messages */
+//   hints: GameHint[]        // TODO: Add correct type
+//   /** Errors and warnings */
+//   errors: InteractiveDiagnostic[]       // TODO: Add correct type
+// }
 
 /** The context storing the proof step-by-step for the command line mode */
 export const ProofContext = React.createContext<{
   /** The proof consists of multiple steps that are processed one after the other.
    * In particular multi-line terms like `match`-statements will not be supported.
    *
-   * Note that the first step will always have `null` as command
+   * Note that the first step will always have "" as command
    */
-  proof: ProofStep[],
-  setProof: React.Dispatch<React.SetStateAction<Array<ProofStep>>>
+  proof: ProofState,
+  setProof: React.Dispatch<React.SetStateAction<ProofState>>
+  /** TODO: Workaround to capture a crash of the gameserver. */
+  interimDiags: Diagnostic[],
+  setInterimDiags: React.Dispatch<React.SetStateAction<Array<Diagnostic>>>
+  /** TODO: Workaround to capture a crash of the gameserver. */
+  crashed: Boolean,
+  setCrashed: React.Dispatch<React.SetStateAction<Boolean>>
 }>({
-  proof: [],
-  setProof: () => {} // TODO: implement me
+  proof: {steps: [], diagnostics: [], completed: false, completedWithWarnings: false},
+  setProof: () => {},
+  interimDiags: [],
+  setInterimDiags: () => {},
+  crashed: false,
+  setCrashed: () => {}
 })
 
+
+// TODO: Do we still need that?
 export interface ProofStateProps {
   // pos: DocumentPosition;
   status: InfoStatus;
   messages: InteractiveDiagnostic[];
-  goals?: InteractiveGoals;
+  goals?: InteractiveGoalsWithHints;
   termGoal?: InteractiveTermGoal;
   error?: string;
   // userWidgets: UserWidgetInstance[];
@@ -49,29 +63,34 @@ export interface ProofStateProps {
   // triggerUpdate: () => Promise<void>;
 }
 
-export const ProofStateContext = React.createContext<{
-  proofState : ProofStateProps,
-  setProofState: React.Dispatch<React.SetStateAction<ProofStateProps>>
-}>({
-  proofState : {
-    status: 'updating',
-    messages: [],
-    goals: undefined,
-    termGoal: undefined,
-    error: undefined},
-  setProofState: () => {},
-})
+// export const ProofStateContext = React.createContext<{
+//   proofState : ProofStateProps,
+//   setProofState: React.Dispatch<React.SetStateAction<ProofStateProps>>
+// }>({
+//   proofState : {
+//     status: 'updating',
+//     messages: [],
+//     goals: undefined,
+//     termGoal: undefined,
+//     error: undefined},
+//   setProofState: () => {},
+// })
 
-export const MobileContext = React.createContext<{
-  mobile : boolean,
-  setMobile: React.Dispatch<React.SetStateAction<Boolean>>,
-  pageNumber: number,
-  setPageNumber: React.Dispatch<React.SetStateAction<Number>>
-}>({
-  mobile : false,
-  setMobile: () => {},
-  pageNumber: 0,
-  setPageNumber: () => {}
+export interface IPreferencesContext extends PreferencesState{
+  mobile: boolean, // The variables that actually control the page 'layout' can only be changed through layout.
+  setLayout: React.Dispatch<React.SetStateAction<PreferencesState["layout"]>>;
+  setIsSavePreferences: React.Dispatch<React.SetStateAction<PreferencesState["isSavePreferences"]>>;
+  setLanguage: React.Dispatch<React.SetStateAction<PreferencesState["language"]>>;
+}
+
+export const PreferencesContext = React.createContext<IPreferencesContext>({
+  mobile: false,
+  layout: "auto",
+  isSavePreferences: false,
+  language: "en",
+  setLayout: () => {},
+  setIsSavePreferences: () => {},
+  setLanguage: () => {},
 })
 
 export const WorldLevelIdContext = React.createContext<{
@@ -105,13 +124,17 @@ export const DeletedChatContext = React.createContext<{
 })
 
 export const InputModeContext = React.createContext<{
-  commandLineMode: boolean,
-  setCommandLineMode: React.Dispatch<React.SetStateAction<boolean>>,
-  commandLineInput: string,
-  setCommandLineInput: React.Dispatch<React.SetStateAction<string>>
+  typewriterMode: boolean,
+  setTypewriterMode: React.Dispatch<React.SetStateAction<boolean>>,
+  typewriterInput: string,
+  setTypewriterInput: React.Dispatch<React.SetStateAction<string>>,
+  lockEditorMode: boolean,
+  setLockEditorMode: React.Dispatch<React.SetStateAction<boolean>>,
 }>({
-  commandLineMode: true,
-  setCommandLineMode: () => {},
-  commandLineInput: "",
-  setCommandLineInput: () => {},
+  typewriterMode: true,
+  setTypewriterMode: () => {},
+  typewriterInput: "",
+  setTypewriterInput: () => {},
+  lockEditorMode: false,
+  setLockEditorMode: () => {},
 });

client/src/components/infoview/goals.tsx

@@ -10,7 +10,11 @@ import { Locations, LocationsContext, SelectableLocation } from '../../../../nod
 import { InteractiveCode } from '../../../../node_modules/lean4-infoview/src/infoview/interactiveCode'
 import { WithTooltipOnHover } from '../../../../node_modules/lean4-infoview/src/infoview/tooltips';
 import { InputModeContext } from './context';
-import { InteractiveGoal, InteractiveGoals, InteractiveHypothesisBundle } from './rpc_api';
+import { InteractiveGoal, InteractiveGoals, InteractiveGoalsWithHints, InteractiveHypothesisBundle, ProofState } from './rpc_api';
+import { RpcSessionAtPos } from '@leanprover/infoview/*';
+import { DocumentPosition } from '../../../../node_modules/lean4-infoview/src/infoview/util';
+import { DiagnosticSeverity } from 'vscode-languageserver-protocol';
+import { useTranslation } from 'react-i18next';
 
 /** Returns true if `h` is inaccessible according to Lean's default name rendering. */
 function isInaccessibleName(h: string): boolean {
@@ -39,7 +43,11 @@ function goalToString(g: InteractiveGoal): string {
 }
 
 export function goalsToString(goals: InteractiveGoals): string {
-    return goals.goals.map(goalToString).join('\n\n')
+    return goals.goals.map(g => goalToString(g)).join('\n\n')
+}
+
+export function goalsWithHintsToString(goals: InteractiveGoalsWithHints): string {
+    return goals.goals.map(g => goalToString(g.goal)).join('\n\n')
 }
 
 interface GoalFilterState {
@@ -124,19 +132,15 @@ interface GoalProps {
     goal: InteractiveGoal
     filter: GoalFilterState
     showHints?: boolean
-    commandLine: boolean
-}
-
-interface ProofDisplayProps {
-  proof: string
+    typewriter: boolean
 }
 
-
 /**
  * Displays the hypotheses, target type and optional case label of a goal according to the
  * provided `filter`. */
 export const Goal = React.memo((props: GoalProps) => {
-    const { goal, filter, showHints, commandLine } = props
+    const { goal, filter, showHints, typewriter } = props
+    let { t } = useTranslation()
 
     // TODO: Apparently `goal` can be `undefined`
     if (!goal) {return <></>}
@@ -150,7 +154,7 @@ export const Goal = React.memo((props: GoalProps) => {
             undefined,
         [locs, goal.mvarId])
     const goalLi = <div key={'goal'}>
-        <div className="goal-title">Goal: </div>
+        <div className="goal-title">{t("Goal")}:</div>
         <LocationsContext.Provider value={goalLocs}>
             <InteractiveCode fmt={goal.type} />
         </LocationsContext.Provider>
@@ -163,24 +167,23 @@ export const Goal = React.memo((props: GoalProps) => {
     // const hints = <Hints hints={goal.hints} key={goal.mvarId} />
     const objectHyps = hyps.filter(hyp => !hyp.isAssumption)
     const assumptionHyps = hyps.filter(hyp => hyp.isAssumption)
-    const {commandLineMode} = React.useContext(InputModeContext)
 
     return <div>
         {/* {goal.userName && <div><strong className="goal-case">case </strong>{goal.userName}</div>} */}
         {filter.reverse && goalLi}
-        {! commandLine && objectHyps.length > 0 &&
-            <div className="hyp-group"><div className="hyp-group-title">Objects:</div>
+        {! typewriter && objectHyps.length > 0 &&
+            <div className="hyp-group"><div className="hyp-group-title">{t("Objects")}:</div>
             {objectHyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}</div> }
-        {!commandLine && assumptionHyps.length > 0 &&
-            <div className="hyp-group"><div className="hyp-group-title">Assumptions:</div>
+        {!typewriter && assumptionHyps.length > 0 &&
+            <div className="hyp-group"><div className="hyp-group-title">{t("Assumptions")}:</div>
             {assumptionHyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}</div> }
-        {/* {commandLine && commandLineMode && <CommandLine />} */}
         {!filter.reverse && goalLi}
         {/* {showHints && hints} */}
     </div>
 })
 
 export const MainAssumptions = React.memo((props: GoalProps2) => {
+  let { t } = useTranslation()
   const { goals, filter } = props
 
   const goal = goals[0]
@@ -195,7 +198,7 @@ export const MainAssumptions = React.memo((props: GoalProps2) => {
       [locs, goal.mvarId])
 
   const goalLi = <div key={'goal'}>
-    <div className="goal-title">Goal: </div>
+    <div className="goal-title">{t("Goal") + ":"}</div>
     <LocationsContext.Provider value={goalLocs}>
       <InteractiveCode fmt={goal.type} />
     </LocationsContext.Provider>
@@ -205,66 +208,48 @@ export const MainAssumptions = React.memo((props: GoalProps2) => {
   const assumptionHyps = hyps.filter(hyp => hyp.isAssumption)
 
   return <div id="main-assumptions">
-    <div className="goals-section-title">Current Goal</div>
+    <div className="goals-section-title">{t("Current Goal")}</div>
     {filter.reverse && goalLi}
     { objectHyps.length > 0 &&
-      <div className="hyp-group"><div className="hyp-group-title">Objects:</div>
+      <div className="hyp-group"><div className="hyp-group-title">{t("Objects") + ":"}</div>
       {objectHyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}</div> }
     { assumptionHyps.length > 0 &&
       <div className="hyp-group">
-        <div className="hyp-group-title">Assumptions:</div>
+        <div className="hyp-group-title">{t("Assumptions") + ":"}</div>
         {assumptionHyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}
       </div> }
   </div>
 })
 
 export const OtherGoals = React.memo((props: GoalProps2) => {
+  let { t } = useTranslation()
   const { goals, filter } = props
   return <>
     {goals && goals.length > 1 &&
       <div id="other-goals" className="other-goals">
-        <div className="goals-section-title">Further Goals</div>
+        <div className="goals-section-title">{t("Further Goals")}</div>
         {goals.slice(1).map((goal, i) =>
           <details key={i}>
             <summary>
               <InteractiveCode fmt={goal.type} />
             </summary>
-            <Goal commandLine={false} filter={filter} goal={goal} />
+            <Goal typewriter={false} filter={filter} goal={goal} />
           </details>)}
       </div>}
   </>
 })
 
-// TODO: deprecated
-export const ProofDisplay = React.memo((props : ProofDisplayProps) => {
-  const { proof } = props
-  const steps = proof.match(/.+/g)
-  return <>
-    { steps &&
-      <div id="current-proof">
-        <div className="goals-section-title">Proof history</div>
-        <div className="proof-display-wrapper">
-          <div className="proof-display">
-            {steps.map((s) =>
-              <div>{s}</div>
-            )}
-          </div>
-        </div>
-      </div>}
-  </>
-})
-
 interface GoalsProps {
-    goals: InteractiveGoals
+    goals: InteractiveGoalsWithHints
     filter: GoalFilterState
 }
 
 export function Goals({ goals, filter }: GoalsProps) {
     if (goals.goals.length === 0) {
-        return <>No goals</>
+        return <></>
     } else {
         return <>
-          {goals.goals.map((g, i) => <Goal commandLine={false} key={i} goal={g} filter={filter} />)}
+          {goals.goals.map((g, i) => <Goal typewriter={false} key={i} goal={g.goal} filter={filter} />)}
         </>
     }
 }
@@ -276,7 +261,7 @@ interface FilteredGoalsProps {
      * When this is `undefined`, the component will not appear at all but will remember its state
      * by virtue of still being mounted in the React tree. When it does appear again, the filter
      * settings and collapsed state will be as before. */
-    goals?: InteractiveGoals
+    goals?: InteractiveGoalsWithHints
 }
 
 /**
@@ -291,7 +276,7 @@ export const FilteredGoals = React.memo(({ headerChildren, goals }: FilteredGoal
             data-id="copy-goal-to-comment"
             onClick={e => {
                 e.preventDefault();
-                if (goals) void ec.copyToComment(goalsToString(goals))
+                if (goals) void ec.copyToComment(goalsWithHintsToString(goals))
             }}
             title="copy state to comment" />
 
@@ -336,3 +321,45 @@ export const FilteredGoals = React.memo(({ headerChildren, goals }: FilteredGoal
         </details>
     </div>
 })
+
+export function loadGoals(
+  rpcSess: RpcSessionAtPos,
+  uri: string,
+  setProof: React.Dispatch<React.SetStateAction<ProofState>>,
+  setCrashed: React.Dispatch<React.SetStateAction<Boolean>>) {
+console.info('sending rpc request to load the proof state')
+
+rpcSess.call('Game.getProofState', DocumentPosition.toTdpp({line: 0, character: 0, uri: uri})).then(
+  (proof : ProofState) => {
+    if (typeof proof !== 'undefined') {
+      console.info(`received a proof state!`)
+      console.log(proof)
+      setProof(proof)
+      setCrashed(false)
+    } else {
+      console.warn('received undefined proof state!')
+      setCrashed(true)
+      // setProof(undefined)
+    }
+  }
+).catch((error) => {
+  setCrashed(true)
+  console.warn(error)
+})
+}
+
+
+export function lastStepHasErrors (proof : ProofState): boolean {
+  if (!proof?.steps.length) {return false}
+
+  let diags = [...proof.steps[proof.steps.length - 1].diags, ...proof.diagnostics]
+
+  return diags.some(
+    (d) => (d.severity == DiagnosticSeverity.Error ) // || d.severity == DiagnosticSeverity.Warning
+  )
+}
+
+export function isLastStepWithErrors (proof : ProofState, i: number): boolean {
+  if (!proof?.steps.length) {return false}
+  return (i == proof.steps.length - 1) && lastStepHasErrors(proof)
+}

client/src/components/infoview/info.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { CircularProgress } from '@mui/material'
 import type { Location, Diagnostic } from 'vscode-languageserver-protocol'
 import { getInteractiveTermGoal, InteractiveDiagnostic, UserWidgetInstance, Widget_getWidgets, RpcSessionAtPos, isRpcError,
-  RpcErrorCode, getInteractiveDiagnostics, InteractiveTermGoal } from '@leanprover/infoview-api'
+  RpcErrorCode, getInteractiveDiagnostics } from '@leanprover/infoview-api'
 import { basename, DocumentPosition, RangeHelpers, useEvent, usePausableState, discardMethodNotFound,
   mapRpcError, useAsyncWithTrigger, PausableProps } from '../../../../node_modules/lean4-infoview/src/infoview/util'
 import { ConfigContext, EditorContext, LspDiagnosticsContext, ProgressContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts'
@@ -13,9 +13,10 @@ import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-i
 import { GoalsLocation, Locations, LocationsContext } from '../../../../node_modules/lean4-infoview/src/infoview/goalLocation'
 
 import { AllMessages, lspDiagToInteractive } from './messages'
-import { goalsToString, Goal, MainAssumptions, OtherGoals, ProofDisplay } from './goals'
-import { InteractiveGoals } from './rpc_api'
+import { goalsToString, Goal, MainAssumptions, OtherGoals } from './goals'
+import { InteractiveTermGoal, InteractiveGoalsWithHints, InteractiveGoals, ProofState } from './rpc_api'
 import { MonacoEditorContext, ProofStateProps, InfoStatus, ProofContext } from './context'
+import { useTranslation } from 'react-i18next'
 
 // TODO: All about pinning could probably be removed
 type InfoKind = 'cursor' | 'pin'
@@ -83,11 +84,12 @@ interface InfoDisplayContentProps extends PausableProps {
   error?: string
   userWidgets: UserWidgetInstance[]
   triggerUpdate: () => Promise<void>
-  proof? : string
+  proofString? : string
 }
 
 const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
-    const {pos, messages, goals, termGoal, error, userWidgets, triggerUpdate, isPaused, setPaused, proof} = props
+    let { t } = useTranslation()
+    const {pos, messages, goals, termGoal, error, userWidgets, triggerUpdate, isPaused, setPaused, proofString} = props
 
     const hasWidget = userWidgets.length > 0
     const hasError = !!error
@@ -114,7 +116,8 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
 
     const goalFilter = { reverse: false, showType: true, showInstance: true, showHiddenAssumption: true, showLetValue: true }
     /* Adding {' '} to manage string literals properly: https://reactjs.org/docs/jsx-in-depth.html#string-literals-1 */
-    return <>
+
+   return <>
         {hasError &&
             <div className='error' key='errors'>
                 Error updating:{' '}{error}.
@@ -129,15 +132,15 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
           </div>
           <div>
             { goals && (goals.goals.length > 0
-              ? <Goal commandLine={true} filter={goalFilter} key='mainGoal' goal={goals.goals[0]} showHints={true} />
-              : <div className="goals-section-title">No Goals</div>
+              ? <Goal typewriter={true} filter={goalFilter} key='mainGoal' goal={goals.goals[0]} showHints={true} />
+              : <div className="goals-section-title">{t("No Goals")}</div>
             )}
           </div>
         </LocationsContext.Provider>
         {userWidgets.map(widget =>
           <details key={`widget::${widget.id}::${widget.range?.toString()}`} open>
             <summary className='mv2 pointer'>{widget.name}</summary>
-            <PanelWidgetDisplay pos={pos} goals={goals ? goals.goals.map (goal => goal) : []}
+            <PanelWidgetDisplay pos={pos} goals={goals ? goals.goals : []}
               termGoal={termGoal} selectedLocations={selectedLocs} widget={widget}/>
           </details>
         )}
@@ -149,14 +152,14 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
                     {' '}or <a className='link pointer dim' onClick={e => { e.preventDefault(); setPaused(false) }}>resume updating</a>
                     {' '}to see information.
                 </span> :
-                <><CircularProgress /><div>Loading goal...</div></>)}
+                <><CircularProgress /><div>{t("Loading goal…")}</div></>)}
         <AllMessages />
         {/* <LocationsContext.Provider value={locs}>
             {goals && goals.goals.length > 1 && <div className="goals-section other-goals">
                     <div className="goals-section-title">Weitere Goals</div>
 
                     {goals.goals.slice(1).map((goal, i) =>
-                        <details key={i}><summary><InteractiveCode fmt={goal.type} /></summary> <Goal commandLine={false} filter={goalFilter} goal={goal} /></details>)}
+                        <details key={i}><summary><InteractiveCode fmt={goal.type} /></summary> <Goal typewriter={false} filter={goalFilter} goal={goal} /></details>)}
                 </div>}
         </LocationsContext.Provider> */}
     </>
@@ -166,6 +169,7 @@ interface InfoDisplayProps {
   pos: DocumentPosition,
   status: InfoStatus,
   messages: InteractiveDiagnostic[],
+  proof?: ProofState,
   goals?: InteractiveGoals,
   termGoal?: InteractiveTermGoal,
   error?: string,
@@ -175,7 +179,7 @@ interface InfoDisplayProps {
 }
 
 /** Displays goal state and messages. Can be paused. */
-function InfoDisplay(props0: ProofStateProps & InfoDisplayProps & InfoPinnable) {
+function InfoDisplay(props0: InfoDisplayProps & InfoPinnable) {
     // Used to update the paused state *just once* if it is paused,
     // but a display update is triggered
     const [shouldRefresh, setShouldRefresh] = React.useState<boolean>(false)
@@ -214,7 +218,7 @@ function InfoDisplay(props0: ProofStateProps & InfoDisplayProps & InfoPinnable)
     {/* <details open> */}
         {/* <InfoStatusBar {...props} triggerUpdate={triggerDisplayUpdate} isPaused={isPaused} setPaused={setPaused} /> */}
         <div className="vscode-light">
-            <InfoDisplayContent {...props} proof={editor.getValue()} triggerUpdate={triggerDisplayUpdate} isPaused={isPaused} setPaused={setPaused} />
+            <InfoDisplayContent {...props} proofString={editor.getValue()} triggerUpdate={triggerDisplayUpdate} isPaused={isPaused} setPaused={setPaused} />
         </div>
     {/* </details> */}
     </RpcContext.Provider>
@@ -252,7 +256,7 @@ function useIsProcessingAt(p: DocumentPosition): boolean {
 
 function InfoAux(props: InfoProps) {
 
-    const proofContext = React.useContext(ProofContext)
+    const { setProof } = React.useContext(ProofContext)
 
     const config = React.useContext(ConfigContext)
 
@@ -290,6 +294,10 @@ function InfoAux(props: InfoProps) {
     // with e.g. a new `pos`.
     type InfoRequestResult = Omit<InfoDisplayProps, 'triggerUpdate'>
     const [state, triggerUpdateCore] = useAsyncWithTrigger(() => new Promise<InfoRequestResult>((resolve, reject) => {
+
+        const proofReq = rpcSess.call('Game.getProofState', DocumentPosition.toTdpp(pos)).catch((error) => {
+            console.warn(error)
+          })
         const goalsReq = rpcSess.call('Game.getInteractiveGoals', DocumentPosition.toTdpp(pos))
         const termGoalReq = getInteractiveTermGoal(rpcSess, DocumentPosition.toTdpp(pos))
         const widgetsReq = Widget_getWidgets(rpcSess, pos).catch(discardMethodNotFound)
@@ -308,6 +316,7 @@ function InfoAux(props: InfoProps) {
                 pos,
                 status: 'updating',
                 messages: lspDiagsHere.map(lspDiagToInteractive),
+                proof: undefined,
                 goals: undefined,
                 termGoal: undefined,
                 error: undefined,
@@ -318,11 +327,12 @@ function InfoAux(props: InfoProps) {
 
         // NB: it is important to await await reqs at once, otherwise
         // if both throw then one exception becomes unhandled.
-        Promise.all([goalsReq, termGoalReq, widgetsReq, messagesReq]).then(
-            ([goals, termGoal, userWidgets, messages]) => resolve({
+        Promise.all([proofReq, goalsReq, termGoalReq, widgetsReq, messagesReq]).then(
+            ([proof, goals, termGoal, userWidgets, messages]) => resolve({
                 pos,
                 status: 'ready',
                 messages,
+                proof : proof as any,
                 goals: goals as any,
                 termGoal,
                 error: undefined,
@@ -353,6 +363,7 @@ function InfoAux(props: InfoProps) {
                     pos,
                     status: 'error',
                     messages: lspDiagsHere.map(lspDiagToInteractive),
+                    proof: undefined,
                     goals: undefined,
                     termGoal: undefined,
                     error: `Error fetching goals: ${errorString}`,
@@ -389,6 +400,7 @@ function InfoAux(props: InfoProps) {
         pos,
         status: 'updating',
         messages: [],
+        proof: undefined,
         goals: undefined,
         termGoal: undefined,
         error: undefined,
@@ -412,6 +424,11 @@ function InfoAux(props: InfoProps) {
           //   hintContext.setHints(state.value.goals.goals[0].hints)
           // }
           setDisplayProps({ ...state.value, triggerUpdate })
+
+          // Update the game's proof state
+          console.info('updating proof from editor mode.')
+          setProof(state.value.proof)
+
         } else if (state.state === 'rejected' && state.error !== 'retry') {
             // The code inside `useAsyncWithTrigger` may only ever reject with a `retry` exception.
             console.warn('Unreachable code reached with error: ', state.error)

client/src/components/infoview/infos.tsx

@@ -6,9 +6,11 @@ import { DidChangeTextDocumentParams, DidCloseTextDocumentParams, TextDocumentCo
 import { EditorContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
 import { DocumentPosition, Keyed, PositionHelpers, useClientNotificationEffect, useClientNotificationState, useEvent, useEventResult } from '../../../../node_modules/lean4-infoview/src/infoview/util';
 import { Info, InfoProps } from './info';
+import { useTranslation } from 'react-i18next';
 
 /** Manages and displays pinned infos, as well as info for the current location. */
 export function Infos() {
+    let { t } = useTranslation()
     const ec = React.useContext(EditorContext);
 
     // Update pins when the document changes. In particular, when edits are made
@@ -126,6 +128,6 @@ export function Infos() {
 
     return <div>
         {infoProps.map (ps => <Info {...ps} />)}
-        {!curPos && <p>Click somewhere in the Lean file to enable the infoview.</p> }
+        {!curPos && <p>{t("Click somewhere in the Lean file to enable the infoview.")}</p> }
     </div>;
 }

client/src/components/infoview/main.tsx

@@ -6,7 +6,7 @@ import type { DidCloseTextDocumentParams, DidChangeTextDocumentParams, Location,
 import 'tachyons/css/tachyons.css';
 import '@vscode/codicons/dist/codicon.css';
 import '../../../../node_modules/lean4-infoview/src/infoview/index.css';
-import './infoview.css'
+import '../../css/infoview.css'
 
 import { LeanFileProgressParams, LeanFileProgressProcessingInfo, defaultInfoviewConfig, EditorApi, InfoviewApi } from '@leanprover/infoview-api';
 import { useClientNotificationEffect, useServerNotificationEffect, useEventResult, useServerNotificationState } from '../../../../node_modules/lean4-infoview/src/infoview/util';
@@ -20,40 +20,42 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 
 import { GameIdContext } from '../../app';
 import { useAppDispatch, useAppSelector } from '../../hooks';
-import { LevelInfo } from '../../state/api';
-import { changedInventory, levelCompleted, selectCompleted, selectInventory } from '../../state/progress';
+import { LevelInfo, useGetGameInfoQuery } from '../../state/api';
+import { changedInventory, levelCompleted, selectCode, selectCompleted, selectInventory } from '../../state/progress';
 import Markdown from '../markdown';
 
 import { Infos } from './infos';
 import { AllMessages, Errors, WithLspDiagnosticsContext } from './messages';
-import { Goal } from './goals';
-import { DeletedChatContext, InputModeContext, MobileContext, MonacoEditorContext, ProofContext, ProofStep, SelectionContext } from './context';
-import { CommandLine, hasErrors, hasInteractiveErrors } from './command_line';
+import { Goal, isLastStepWithErrors, lastStepHasErrors, loadGoals } from './goals';
+import { DeletedChatContext, InputModeContext, PreferencesContext, MonacoEditorContext, ProofContext, SelectionContext, WorldLevelIdContext } from './context';
+import { Typewriter, getInteractiveDiagsAt, hasErrors, hasInteractiveErrors } from './typewriter';
 import { InteractiveDiagnostic } from '@leanprover/infoview/*';
 import { Button } from '../button';
 import { CircularProgress } from '@mui/material';
-import { GameHint } from './rpc_api';
+import { GameHint, InteractiveGoalsWithHints, ProofState } from './rpc_api';
 import { store } from '../../state/store';
-import { Hints } from '../hints';
+import { Hints, MoreHelpButton, filterHints } from '../hints';
+import { DocumentPosition } from '../../../../node_modules/lean4-infoview/src/infoview/util';
+import { DiagnosticSeverity } from 'vscode-languageclient';
+import { useTranslation } from 'react-i18next';
+import path from 'path';
+
 
 /** Wrapper for the two editors. It is important that the `div` with `codeViewRef` is
  * always present, or the monaco editor cannot start.
  */
 export function DualEditor({ level, codeviewRef, levelId, worldId, worldSize }) {
   const ec = React.useContext(EditorContext)
-  const { commandLineMode } = React.useContext(InputModeContext)
+  const { typewriterMode, lockEditorMode } = React.useContext(InputModeContext)
   return <>
-    <div className={commandLineMode ? 'hidden' : ''}>
-      <ExerciseStatement data={level} />
+    <div className={(typewriterMode && !lockEditorMode) ? 'hidden' : ''}>
+      <ExerciseStatement data={level} showLeanStatement={true} />
       <div ref={codeviewRef} className={'codeview'}></div>
     </div>
     {ec ?
       <DualEditorMain worldId={worldId} levelId={levelId} level={level} worldSize={worldSize} /> :
       // TODO: Style this if relevant.
-      <>
-        <p>Editor is starting up...</p>
-        <CircularProgress />
-      </>
+      <></>
     }
   </>
 }
@@ -62,33 +64,37 @@ export function DualEditor({ level, codeviewRef, levelId, worldId, worldSize })
 function DualEditorMain({ worldId, levelId, level, worldSize }: { worldId: string, levelId: number, level: LevelInfo, worldSize: number }) {
   const ec = React.useContext(EditorContext)
   const gameId = React.useContext(GameIdContext)
-  const { commandLineMode } = React.useContext(InputModeContext)
+  const { typewriterMode, lockEditorMode } = React.useContext(InputModeContext)
+
+  const {proof, setProof} = React.useContext(ProofContext)
 
-  // Mark level as completed when server gives notification
   const dispatch = useAppDispatch()
-  useServerNotificationEffect(
-    '$/game/completed',
-    (params: any) => {
-      if (ec.events.changedCursorLocation.current &&
-        ec.events.changedCursorLocation.current.uri === params.uri) {
-        dispatch(levelCompleted({ game: gameId, world: worldId, level: levelId }))
 
-        // On completion, add the names of all new items to the local storage
-        let newTiles = [
-          ...level?.tactics,
-          ...level?.lemmas,
-          ...level?.definitions
-        ].filter((tile) => tile.new).map((tile) => tile.name)
+  React.useEffect(() => {
+    if (proof?.completed) {
+      dispatch(levelCompleted({ game: gameId, world: worldId, level: levelId }))
+
+      // On completion, add the names of all new items to the local storage
+      let newTiles = [
+        ...level?.tactics,
+        ...level?.lemmas,
+        ...level?.definitions
+      ].filter((tile) => tile.new).map((tile) => tile.name)
+
+      // Add the proven statement to the local storage as well.
+      if (level?.statementName != null) {
+        newTiles.push(level?.statementName)
+      }
 
-        let inv: string[] = selectInventory(gameId)(store.getState())
+      let inv: string[] = selectInventory(gameId)(store.getState())
 
-        // add new items and remove duplicates
-        let newInv = [...inv, ...newTiles].filter((item, i, array) => array.indexOf(item) == i)
+      // add new items and remove duplicates
+      let newInv = [...inv, ...newTiles].filter((item, i, array) => array.indexOf(item) == i)
 
-        dispatch(changedInventory({ game: gameId, inventory: newInv }))
-      }
-    }, [level]
-  )
+      dispatch(changedInventory({ game: gameId, inventory: newInv }))
+
+    }
+  }, [proof, level])
 
   /* Set up updates to the global infoview state on editor events. */
   const config = useEventResult(ec.events.changedInfoviewConfig) ?? defaultInfoviewConfig;
@@ -108,10 +114,10 @@ function DualEditorMain({ worldId, levelId, level, worldSize }: { worldId: strin
         <WithRpcSessions>
           <WithLspDiagnosticsContext>
             <ProgressContext.Provider value={allProgress}>
-              {commandLineMode ?
-                <CommandLineInterface world={worldId} level={levelId} data={level} worldSize={worldSize}/>
+              {(typewriterMode && !lockEditorMode) ?
+                <TypewriterInterfaceWrapper world={worldId} level={levelId} data={level} worldSize={worldSize}/>
                 :
-                <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} />
+                <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} data={level} />
               }
             </ProgressContext.Provider>
           </WithLspDiagnosticsContext>
@@ -126,21 +132,61 @@ function DualEditorMain({ worldId, levelId, level, worldSize }: { worldId: strin
  * - Theorem xyz: description
  * - Theorem xyz
  * - Exercises: description
+ *
+ * If `showLeanStatement` is true, it will additionally display the lean code.
  */
-function ExerciseStatement({ data }) {
-  if (!data?.descrText) { return <></> }
-  return <div className="exercise-statement"><Markdown>
-    {(data?.statementName ? `**Theorem** \`${data?.statementName}\`: ` : data?.descrText && "**Exercise**: ") + `${data?.descrText}`}
-  </Markdown></div>
+function ExerciseStatement({ data, showLeanStatement = false }) {
+  let { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+
+  if (!(data?.descrText || data?.descrFormat)) { return <></> }
+  return <>
+    <div className="exercise-statement">
+      {data?.descrText &&
+        <Markdown>
+          {(data?.displayName ? `**Theorem** \`${data?.displayName}\`: ` : '') + t(data?.descrText, {ns: gameId})}
+        </Markdown>
+      }
+      {data?.descrFormat && showLeanStatement &&
+        <p><code className="lean-code">{data?.descrFormat}</code></p>
+      }
+    </div>
+  </>
 }
 
 // TODO: This is only used in `EditorInterface`
-// while `CommandLineInterface` has this copy-pasted in.
-export function Main(props: { world: string, level: number }) {
+// while `TypewriterInterface` has this copy-pasted in.
+export function Main(props: { world: string, level: number, data: LevelInfo}) {
+  let { t } = useTranslation()
   const ec = React.useContext(EditorContext);
   const gameId = React.useContext(GameIdContext)
+  const {worldId, levelId} = React.useContext(WorldLevelIdContext)
+
+  const { proof, setProof } = React.useContext(ProofContext)
+  const {selectedStep, setSelectedStep} = React.useContext(SelectionContext)
+  const { setDeletedChat, showHelp, setShowHelp } = React.useContext(DeletedChatContext)
 
-  const completed = useAppSelector(selectCompleted(gameId, props.world, props.level))
+
+  function toggleSelection(line: number) {
+    return (ev) => {
+      console.debug('toggled selection')
+      if (selectedStep == line) {
+        setSelectedStep(undefined)
+      } else {
+        setSelectedStep(line)
+      }
+    }
+  }
+  console.debug(`template: ${props.data?.template}`)
+
+  // React.useEffect (() => {
+  //   if (props.data.template) {
+  //     let code: string = selectCode(gameId, worldId, levelId)(store.getState())
+  //     if (!code.length) {
+  //       //models.push(monaco.editor.createModel(code, 'lean4', uri))
+  //     }
+  //   }
+  // }, [props.data.template])
 
   /* Set up updates to the global infoview state on editor events. */
   const config = useEventResult(ec.events.changedInfoviewConfig) ?? defaultInfoviewConfig;
@@ -157,6 +203,19 @@ export function Main(props: { world: string, level: number }) {
 
   const curUri = useEventResult(ec.events.changedCursorLocation, loc => loc?.uri);
 
+  const curPos: DocumentPosition | undefined =
+    useEventResult(ec.events.changedCursorLocation, loc => loc ? { uri: loc.uri, ...loc.range.start } : undefined)
+
+  // Effect when the cursor changes in the editor
+  React.useEffect(() => {
+    // TODO: this is a bit of a hack and will yield unexpected behaviour if lines
+    // are indented.
+    let newPos = curPos?.line + (curPos?.character == 0 ? 0 : 1)
+
+    // scroll the chat along
+    setSelectedStep(newPos)
+  }, [curPos])
+
   useClientNotificationEffect(
     'textDocument/didClose',
     (params: DidCloseTextDocumentParams) => {
@@ -176,13 +235,22 @@ export function Main(props: { world: string, level: number }) {
   // that we want to persist.
   let ret
   if (!serverVersion) {
-    ret = <p>Waiting for Lean server to start...</p>
+    ret = <p>{t("Waiting for Lean server to start…")}</p>
   } else if (serverStoppedResult) {
     ret = <div><p>{serverStoppedResult.message}</p><p className="error">{serverStoppedResult.reason}</p></div>
   } else {
     ret = <div className="infoview vscode-light">
-      {completed && <div className="level-completed">Level completed! 🎉</div>}
+      {proof?.completedWithWarnings &&
+        <div className="level-completed">
+          {proof?.completed ? t("Level completed! 🎉") : t("Level completed with warnings 🎭")}
+        </div>
+      }
       <Infos />
+      <Hints hints={proof?.steps[curPos?.line]?.goals[0]?.hints}
+        showHidden={showHelp.has(curPos?.line)} step={curPos?.line}
+        selected={selectedStep} toggleSelection={toggleSelection(curPos?.line)}
+        lastLevel={curPos?.line == proof?.steps.length - 1}/>
+      <MoreHelpButton selected={curPos?.line}/>
     </div>
   }
 
@@ -198,15 +266,26 @@ const goalFilter = {
 }
 
 /** The display of a single entered lean command */
-function Command({ command, deleteProof }: { command: string, deleteProof: any }) {
+function Command({ proof, i, deleteProof }: { proof: ProofState, i: number, deleteProof: any }) {
+  let {t} = useTranslation()
+
   // The first step will always have an empty command
-  if (!command) { return <></> }
-  return <div className="command">
-    <div className="command-text">{command}</div>
-    <Button to="" className="undo-button btn btn-inverted" title="Delete this and future commands" onClick={deleteProof}>
-      <FontAwesomeIcon icon={faDeleteLeft} />&nbsp;Delete
-    </Button>
-  </div>
+  if (!proof?.steps[i]?.command) { return <></> }
+
+  if (isLastStepWithErrors(proof, i)) {
+    // If the last step has errors, we display the command in a different style
+    // indicating that it will be removed on the next try.
+    return <div className="failed-command">
+      <i>{t("Failed command")}</i>: {proof?.steps[i].command}
+    </div>
+  } else {
+    return <div className="command">
+      <div className="command-text">{proof?.steps[i].command}</div>
+      <Button to="" className="undo-button btn btn-inverted" title={t("Retry proof from here")} onClick={deleteProof}>
+        <FontAwesomeIcon icon={faDeleteLeft} />&nbsp;{t("Retry")}
+      </Button>
+    </div>
+  }
 }
 
 // const MessageView = React.memo(({uri, diag}: MessageViewProps) => {
@@ -232,7 +311,7 @@ function Command({ command, deleteProof }: { command: string, deleteProof: any }
 //       message = diag.message
 //   }
 
-//   const { commandLineMode } = React.useContext(InputModeContext)
+//   const { typewriterMode } = React.useContext(InputModeContext)
 
 //   return (
 //   // <details open>
@@ -251,7 +330,7 @@ function Command({ command, deleteProof }: { command: string, deleteProof: any }
 //       //     </span>
 //       // </summary>
 //       <div className={severityClass + ' ml1 message'}>
-//           {!commandLineMode && <p className="mv2">{title}</p>}
+//           {!typewriterMode && <p className="mv2">{title}</p>}
 //           <pre className="font-code pre-wrap">
 //               <InteractiveMessage fmt={message} />
 //           </pre>
@@ -261,55 +340,108 @@ function Command({ command, deleteProof }: { command: string, deleteProof: any }
 // }, fastIsEqual)
 
 /** The tabs of goals that lean ahs after the command of this step has been processed */
-function GoalsTab({ proofStep, last}: { proofStep: ProofStep, last : boolean }) {
+function GoalsTabs({ proofStep, last, onClick, onGoalChange=(n)=>{}}: { proofStep: InteractiveGoalsWithHints, last : boolean, onClick? : any, onGoalChange?: (n?: number) => void }) {
+  let { t } = useTranslation()
   const [selectedGoal, setSelectedGoal] = React.useState<number>(0)
 
-  if (!proofStep.goals.length) { return <></> }
+  if (proofStep.goals.length == 0) {
+    return <></>
+  }
 
-  return <div>
+  return <div className="goal-tabs" onClick={onClick}>
     <div className={`tab-bar ${last ? 'current' : ''}`}>
       {proofStep.goals.map((goal, i) => (
         // TODO: Should not use index as key.
-        <div key={`proof-goal-${i}`} className={`tab ${i == (selectedGoal) ? "active" : ""}`} onClick={(ev) => { setSelectedGoal(i); ev.stopPropagation() }}>
-          {i ? `Goal ${i + 1}` : "Active Goal"}
+        <div key={`proof-goal-${i}`} className={`tab ${i == (selectedGoal) ? "active" : ""}`} onClick={(ev) => { onGoalChange(i); setSelectedGoal(i); ev.stopPropagation() }}>
+          {i ? t("Goal") + ` ${i + 1}` : t("Active Goal")}
         </div>
       ))}
     </div>
     <div className="goal-tab vscode-light">
-      <Goal commandLine={false} filter={goalFilter} goal={proofStep.goals[selectedGoal]} />
+      <Goal typewriter={false} filter={goalFilter} goal={proofStep.goals[selectedGoal]?.goal} />
     </div>
   </div>
 }
 
-/** The interface in command line mode */
-export function CommandLineInterface(props: { world: string, level: number, data: LevelInfo, worldSize: number }) {
+// Splitting up Typewriter into two parts is a HACK
+export function TypewriterInterfaceWrapper(props: { world: string, level: number, data: LevelInfo, worldSize: number }) {
+  const ec = React.useContext(EditorContext)
+  const gameId = React.useContext(GameIdContext)
+
+  useClientNotificationEffect(
+    'textDocument/didClose',
+    (params: DidCloseTextDocumentParams) => {
+      if (ec.events.changedCursorLocation.current &&
+        ec.events.changedCursorLocation.current.uri === params.textDocument.uri) {
+        ec.events.changedCursorLocation.fire(undefined)
+      }
+    }, []
+  )
+
+  const serverVersion =
+    useEventResult(ec.events.serverRestarted, result => new ServerVersion(result.serverInfo?.version ?? ''))
+  const serverStoppedResult = useEventResult(ec.events.serverStopped);
+  // NB: the cursor may temporarily become `undefined` when a file is closed. In this case
+  // it's important not to reconstruct the `WithBlah` wrappers below since they contain state
+  // that we want to persist.
+
+  if (!serverVersion) { return <></> }
+  if (serverStoppedResult) {
+    return <div>
+      <p>{serverStoppedResult.message}</p>
+      <p className="error">{serverStoppedResult.reason}</p>
+    </div>
+  }
 
+  return <TypewriterInterface props={props} />
+}
+
+/** The interface in command line mode */
+export function TypewriterInterface({props}) {
+  let { t } = useTranslation()
   const ec = React.useContext(EditorContext)
+  const gameId = React.useContext(GameIdContext)
   const editor = React.useContext(MonacoEditorContext)
   const model = editor.getModel()
   const uri = model.uri.toString()
-  const gameId = React.useContext(GameIdContext)
-  const { proof } = React.useContext(ProofContext)
-  const { selectedStep, setSelectedStep } = React.useContext(SelectionContext)
-  const { setDeletedChat, showHelp, setShowHelp } = React.useContext(DeletedChatContext)
 
-  const {mobile} = React.useContext(MobileContext)
+  const gameInfo = useGetGameInfoQuery({game: gameId})
+  const {worldId, levelId} = React.useContext(WorldLevelIdContext)
+  let image: string = gameInfo.data?.worlds.nodes[worldId].image
+
+
+  const [disableInput, setDisableInput] = React.useState<boolean>(false)
+  const [loadingProgress, setLoadingProgress] = React.useState<number>(0)
+  const { setDeletedChat, showHelp, setShowHelp } = React.useContext(DeletedChatContext)
+  const {mobile} = React.useContext(PreferencesContext)
+  const { proof, setProof, crashed, setCrashed, interimDiags } = React.useContext(ProofContext)
+  const { setTypewriterInput } = React.useContext(InputModeContext)
+  const { selectedStep, setSelectedStep } = React.useContext(SelectionContext)
 
   const proofPanelRef = React.useRef<HTMLDivElement>(null)
+  // const config = useEventResult(ec.events.changedInfoviewConfig) ?? defaultInfoviewConfig;
+  // const curUri = useEventResult(ec.events.changedCursorLocation, loc => loc?.uri);
+
+  const rpcSess = useRpcSessionAtPos({uri: uri, line: 0, character: 0})
 
   /** Delete all proof lines starting from a given line.
-   * Note that the first line (i.e. deleting everything) is `1`!
-   */
+  * Note that the first line (i.e. deleting everything) is `1`!
+  */
   function deleteProof(line: number) {
     return (ev) => {
       let deletedChat: Array<GameHint> = []
-      proof.slice(line).map((step, i) => {
+      proof?.steps.slice(line).map((step, i) => {
+        let filteredHints = filterHints(step.goals[0]?.hints, proof?.steps[i-1]?.goals[0]?.hints)
+
         // Only add these hidden hints to the deletion stack which were visible
-        deletedChat = [...deletedChat, ...step.hints.filter(hint => (!hint.hidden || showHelp.has(line + i)))]
+        deletedChat = [...deletedChat, ...filteredHints.filter(hint => (!hint.hidden || showHelp.has(line + i)))]
       })
       setDeletedChat(deletedChat)
 
-      editor.executeEdits("command-line", [{
+      // delete showHelp for deleted steps
+      setShowHelp(new Set(Array.from(showHelp).filter(i => i < line - 1)))
+
+      editor.executeEdits("typewriter", [{
         range: monaco.Selection.fromPositions(
           { lineNumber: line, column: 1 },
           editor.getModel().getFullModelRange().getEndPosition()
@@ -318,6 +450,9 @@ export function CommandLineInterface(props: { world: string, level: number, data
         forceMoveMarkers: false
       }])
       setSelectedStep(undefined)
+      setTypewriterInput(proof?.steps[line].command)
+      // Reload proof on deleting
+      loadGoals(rpcSess, uri, setProof, setCrashed)
       ev.stopPropagation()
     }
   }
@@ -335,13 +470,18 @@ export function CommandLineInterface(props: { world: string, level: number, data
     }
   }
 
-  // Scroll to the end of the proof if it is updated.
-  React.useEffect(() => {
-    if (proof?.length > 1) {
+   // Scroll to the end of the proof if it is updated.
+   React.useEffect(() => {
+    if (proof?.steps.length > 1) {
       proofPanelRef.current?.lastElementChild?.scrollIntoView() //scrollTo(0,0)
     } else {
       proofPanelRef.current?.scrollTo(0,0)
     }
+    // also reenable the commandline when the proof changes
+
+    // BUG: If selecting 2nd goal on a intermediate proofstep and then delete proof to there,
+    // the commandline is not displaying disabled even though it should.
+    setDisableInput(false)
   }, [proof])
 
   // Scroll to element if selection changes
@@ -353,118 +493,94 @@ export function CommandLineInterface(props: { world: string, level: number, data
     }
   }, [selectedStep])
 
-  const completed = useAppSelector(selectCompleted(gameId, props.world, props.level))
-
-  const config = useEventResult(ec.events.changedInfoviewConfig) ?? defaultInfoviewConfig;
-
-  const curUri = useEventResult(ec.events.changedCursorLocation, loc => loc?.uri);
-
-  useClientNotificationEffect(
-    'textDocument/didClose',
-    (params: DidCloseTextDocumentParams) => {
-      if (ec.events.changedCursorLocation.current &&
-        ec.events.changedCursorLocation.current.uri === params.textDocument.uri) {
-        ec.events.changedCursorLocation.fire(undefined)
-      }
-    }, []
-  )
-
-  const serverVersion =
-    useEventResult(ec.events.serverRestarted, result => new ServerVersion(result.serverInfo?.version ?? ''))
-  const serverStoppedResult = useEventResult(ec.events.serverStopped);
-  // NB: the cursor may temporarily become `undefined` when a file is closed. In this case
-  // it's important not to reconstruct the `WithBlah` wrappers below since they contain state
-  // that we want to persist.
-
-  if (!serverVersion) { return <p>Waiting for Lean server to start...</p> }
-  if (serverStoppedResult) {
-    return <div>
-      <p>{serverStoppedResult.message}</p>
-      <p className="error">{serverStoppedResult.reason}</p>
-    </div>
-  }
-
-  // TODO: This about hidden hints is all copied from `level.tsx`. Can we move that into `hints.tsx`?
-
-  // If the last step has errors, we want to treat it as if it is part of the second-to-last step
-  let k = proof.length - 1
-  let withErr = hasInteractiveErrors(proof[k]?.errors) ? 1 : 0
+  // TODO: superfluous, can be replaced with `withErr` from above
+  let lastStepErrors = proof?.steps.length ? hasInteractiveErrors(getInteractiveDiagsAt(proof, proof?.steps.length)) : false
 
-  const activateHiddenHints = (ev) => {
-    // If the last step (`k`) has errors, we want the hidden hints from the
-    // second-to-last step to be affected
-    if (!(proof.length)) {return}
 
-    // state must not be mutated, therefore we need to clone the set
-    let tmp = new Set(showHelp)
-    if (tmp.has(k - withErr)) {
-      tmp.delete(k - withErr)
+  useServerNotificationEffect("$/game/loading", (params : any) => {
+    if (params.kind == "loadConstants") {
+      setLoadingProgress(params.counter/100*50)
+    } else if (params.kind == "finalizeExtensions") {
+      setLoadingProgress(50 + params.counter/150*50)
     } else {
-      tmp.add(k - withErr)
+      console.error(`Unknown loading kind: ${params.kind}`)
     }
-    setShowHelp(tmp)
-    console.debug(`help: ${Array.from(tmp.values())}`)
-  }
-
-  function hasHiddenHints(i : number): boolean {
-    let step = proof[i]
-
-    // For example if the proof isn't loaded yet
-    if(!step) {return false}
-
-    return step.hints.some((hint) => hint.hidden)
-  }
-
-  let lastStepErrors = proof.length ? hasInteractiveErrors(proof[proof.length - 1].errors) : false
+  })
 
-  // TODO: does the position matter at all?
-  const rpcSess = useRpcSessionAtPos({uri: uri, line: 0, character: 0})
-
-  return <div className="commandline-interface">
+  return <div className="typewriter-interface">
     <RpcContext.Provider value={rpcSess}>
     <div className="content">
-      <div className="tmp-pusher">
-        {!proof.length &&
-          <CircularProgress />
+      <div className='world-image-container empty'>
+        {image &&
+          <img className="contain" src={path.join("data", gameId, image)} alt="" />
         }
+
+      </div>
+      <div className="tmp-pusher">
+        {/* <div className="world-image-container empty">
+
+        </div> */}
       </div>
       <div className='proof' ref={proofPanelRef}>
         <ExerciseStatement data={props.data} />
-        {proof.length ?
-          <>
-            {proof.map((step, i) => {
-              if (i == proof.length - 1 && lastStepErrors) {
-                // if the last command contains an error, we only display the errors but not the
-                // entered command as it is still present in the command line.
-                // TODO: Should not use index as key.
-                return <div key={`proof-step-${i}`}>
-                  <Errors errors={step.errors} commandLineMode={true} />
+        {crashed ? <div>
+          <p className="crashed_message">{t("Crashed! Go to editor mode and fix your proof! Last server response:")}</p>
+          {interimDiags.map(diag => {
+            const severityClass = diag.severity ? {
+              [DiagnosticSeverity.Error]: 'error',
+              [DiagnosticSeverity.Warning]: 'warning',
+              [DiagnosticSeverity.Information]: 'information',
+              [DiagnosticSeverity.Hint]: 'hint',
+            }[diag.severity] : '';
+
+            return <div>
+              <div className={`${severityClass} ml1 message`}>
+                <p className="mv2">{t("Line")}&nbsp;{diag.range.start.line}, {t("Character")}&nbsp;{diag.range.start.character}</p>
+                <pre className="font-code pre-wrap">
+                  {diag.message}
+                </pre>
                 </div>
-              } else {
-                return <div key={`proof-step-${i}`} className={`step step-${i}` + (selectedStep == i ? ' selected' : '')} onClick={toggleSelectStep(i)}>
-                  <Command command={step.command} deleteProof={deleteProof(i)} />
-                  <Errors errors={step.errors} commandLineMode={true} />
+            </div>
+          })}
+
+        </div> : proof?.steps.length ?
+          <>
+            {proof?.steps.map((step, i) => {
+              let filteredHints = filterHints(step.goals[0]?.hints, proof?.steps[i-1]?.goals[0]?.hints)
+
+              // if (i == proof?.steps.length - 1 && hasInteractiveErrors(step.diags)) {
+              //   // if the last command contains an error, we only display the errors but not the
+              //   // entered command as it is still present in the command line.
+              //   // TODO: Should not use index as key.
+              //   return <div key={`proof-step-${i}`} className={`step step-${i}`}>
+              //     <Errors errors={step.diags} typewriterMode={true} />
+              //   </div>
+              // } else {
+                return <div key={`proof-step-${i}`} className={`step step-${i}` + (selectedStep == i ? ' selected' : '')}>
+                  <Command proof={proof} i={i} deleteProof={deleteProof(i)} />
+                  <Errors errors={step.diags} typewriterMode={true} />
                   {mobile && i == 0 && props.data?.introduction &&
                     <div className={`message information step-0${selectedStep === 0 ? ' selected' : ''}`} onClick={toggleSelectStep(0)}>
                       <Markdown>{props.data?.introduction}</Markdown>
                     </div>
                   }
-                  {mobile && <>
+                  {mobile &&
                     <Hints key={`hints-${i}`}
-                      hints={step.hints} showHidden={showHelp.has(i)} step={i}
+                      hints={filteredHints} showHidden={showHelp.has(i)} step={i}
                       selected={selectedStep} toggleSelection={toggleSelectStep(i)}/>
-                    {i == proof.length - 1 && hasHiddenHints(proof.length - 1) && !showHelp.has(k - withErr) &&
-                      <Button className="btn btn-help" to="" onClick={activateHiddenHints}>
-                        Show more help!
-                      </Button>
-                    }
-                  </>
                   }
-                  <GoalsTab proofStep={step} last={i == proof.length - (lastStepErrors ? 2 : 1)} />
+                  {/* <GoalsTabs proofStep={step} last={i == proof?.steps.length - (lastStepErrors ? 2 : 1)} onClick={toggleSelectStep(i)} onGoalChange={i == proof?.steps.length - 1 - withErr ? (n) => setDisableInput(n > 0) : (n) => {}}/> */}
+                  {!(isLastStepWithErrors(proof, i)) &&
+                    <GoalsTabs proofStep={step} last={i == proof?.steps.length - (lastStepHasErrors(proof) ? 2 : 1)} onClick={toggleSelectStep(i)} onGoalChange={i == proof?.steps.length - (lastStepHasErrors(proof) ? 2 : 1) ? (n) => setDisableInput(n > 0) : (n) => {}}/>
+                  }
+                  {mobile && i == proof?.steps.length - 1 &&
+                    <MoreHelpButton />
+                  }
+
                   {/* Show a message that there are no goals left */}
-                  {!step.goals.length && (
+                  {/* {!step.goals.length && (
                     <div className="message information">
-                      {completed ?
+                      {proof?.completed ?
                         <p>Level completed! 🎉</p> :
                         <p>
                           <b>no goals left</b><br />
@@ -472,15 +588,21 @@ export function CommandLineInterface(props: { world: string, level: number, data
                         </p>
                       }
                     </div>
-                  )}
+                  )} */}
                 </div>
               }
-            })}
-            {mobile && completed &&
-              <div className="button-row">
+            //}
+            )}
+            {proof?.diagnostics.length > 0 &&
+              <div key={`proof-step-remaining`} className="step step-remaining">
+                <Errors errors={proof?.diagnostics} typewriterMode={true} />
+              </div>
+            }
+            {mobile && proof?.completed &&
+              <div className="button-row mobile">
                 {props.level >= props.worldSize ?
                   <Button to={`/${gameId}`}>
-                    <FontAwesomeIcon icon={faHome} />&nbsp;Leave World
+                    <FontAwesomeIcon icon={faHome} />&nbsp;{t("Leave World")}
                   </Button>
                 :
                   <Button to={`/${gameId}/world/${props.world}/level/${props.level + 1}`}>
@@ -489,11 +611,14 @@ export function CommandLineInterface(props: { world: string, level: number, data
                 }
               </div>
             }
-          </> : <></>
+          </> : <CircularProgress variant="determinate" value={100*(1 - 1.024 ** (- loadingProgress))} />
+        // note: since we don't know the total number of files,
+        // we use a function which strictly monotonely increases towards `100` as `x → ∞`
+        // The base is chosen at random s.t. we get roughly 91% for `x = 100`.
         }
       </div>
     </div>
-    <CommandLine hidden={!withErr && proof[proof.length - 1]?.goals.length == 0}/>
+    <Typewriter disabled={disableInput || !proof?.steps.length}/>
     </RpcContext.Provider>
   </div>
 }

client/src/components/infoview/messages.tsx

@@ -11,6 +11,7 @@ import { InteractiveMessage } from '../../../../node_modules/lean4-infoview/src/
 import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions'
 
 import { InputModeContext } from './context'
+import { useTranslation } from 'react-i18next'
 
 interface MessageViewProps {
     uri: DocumentUri;
@@ -18,7 +19,7 @@ interface MessageViewProps {
 }
 
 /** A list of messages (info/warning/error) that are produced after this command */
-function Error({error, commandLineMode} : {error : InteractiveDiagnostic, commandLineMode : boolean}) {
+function Error({error, typewriterMode} : {error : InteractiveDiagnostic, typewriterMode : boolean}) {
   // The first step will always have an empty command
 
   const severityClass = error.severity ? {
@@ -41,7 +42,7 @@ function Error({error, commandLineMode} : {error : InteractiveDiagnostic, comman
   }
 
   return <div className={severityClass + ' ml1 message'}>
-    {!commandLineMode && <p className="mv2">{title}</p>}
+    {!typewriterMode && <p className="mv2">{title}</p>}
     <pre className="font-code pre-wrap">
       <InteractiveMessage fmt={message} />
     </pre>
@@ -50,9 +51,9 @@ function Error({error, commandLineMode} : {error : InteractiveDiagnostic, comman
 
 // TODO: Should not use index as key.
 /** A list of messages (info/warning/error) that are produced after this command */
-export function Errors ({errors, commandLineMode} : {errors : InteractiveDiagnostic[], commandLineMode : boolean}) {
+export function Errors ({errors, typewriterMode} : {errors : InteractiveDiagnostic[], typewriterMode : boolean}) {
   return <div>
-    {errors.map((err, i) => (<Error key={`error-${i}`} error={err} commandLineMode={commandLineMode}/>))}
+    {errors.map((err, i) => (<Error key={`error-${i}`} error={err} typewriterMode={typewriterMode}/>))}
   </div>
 }
 
@@ -79,7 +80,7 @@ const MessageView = React.memo(({uri, diag}: MessageViewProps) => {
         message = diag.message
     }
 
-    const { commandLineMode } = React.useContext(InputModeContext)
+    const { typewriterMode, lockEditorMode } = React.useContext(InputModeContext)
 
     return (
     // <details open>
@@ -98,7 +99,7 @@ const MessageView = React.memo(({uri, diag}: MessageViewProps) => {
         //     </span>
         // </summary>
         <div className={severityClass + ' ml1 message'}>
-            {!commandLineMode && <p className="mv2">{title}</p>}
+            {!(typewriterMode && !lockEditorMode) && <p className="mv2">{title}</p>}
             <pre className="font-code pre-wrap">
                 <InteractiveMessage fmt={message} />
             </pre>
@@ -194,17 +195,26 @@ export function AllMessages() {
                 </a>
             </span>
         </summary> */}
-        <AllMessagesBody uri={curPos.uri} key={curPos.uri} messages={iDiags0} />
+        <AllMessagesBody uri={curPos.uri} key={curPos.uri} messages={iDiags0} curPos={curPos} />
     {/* </Details> */}
     </RpcContext.Provider>
     )
 }
 
 /** We factor out the body of {@link AllMessages} which lazily fetches its contents only when expanded. */
-function AllMessagesBody({uri, messages}: {uri: DocumentUri, messages: () => Promise<InteractiveDiagnostic[]>}) {
+function AllMessagesBody({uri, curPos, messages}: {uri: DocumentUri, curPos: DocumentPosition | undefined , messages: () => Promise<InteractiveDiagnostic[]>}) {
+    let { t } = useTranslation()
     const [msgs, setMsgs] = React.useState<InteractiveDiagnostic[] | undefined>(undefined)
-    React.useEffect(() => { void messages().then(setMsgs) }, [messages])
-    if (msgs === undefined) return <div>Loading messages...</div>
+    React.useEffect(() => { void messages().then(
+        msgs => setMsgs(msgs.filter(
+            (d)=>{
+                //console.log(`message start: ${d.range.start.line}. CurPos: ${curPos.line}`)
+
+                // Only show the messages from the line where the cursor is.
+                return d.range.start.line == curPos.line
+            }))
+    ) }, [messages, curPos])
+    if (msgs === undefined) return <div>{t("Loading messages…")}</div>
     else return <MessagesList uri={uri} messages={msgs}/>
 }
 

client/src/components/infoview/rpc_api.ts

@@ -3,46 +3,82 @@
  *
  * This file is based on `vscode-lean4/vscode-lean4/src/rpcApi.ts`
  */
-import { ContextInfo, FVarId, CodeWithInfos, MVarId } from '@leanprover/infoview-api';
-
-export interface GameHint {
-  text: string;
-  hidden: boolean;
-}
+import type { Range } from 'vscode-languageserver-protocol';
+import type { ContextInfo, FVarId, CodeWithInfos, MVarId } from '@leanprover/infoview-api';
+import { InteractiveDiagnostic, TermInfo } from '@leanprover/infoview/*';
+import type { Diagnostic } from 'vscode-languageserver-protocol';
 
 export interface InteractiveHypothesisBundle {
   /** The pretty names of the variables in the bundle. Anonymous names are rendered
    * as `"[anonymous]"` whereas inaccessible ones have a `✝` appended at the end.
    * Use `InteractiveHypothesisBundle_nonAnonymousNames` to filter anonymouse ones out. */
   names: string[];
-  /** Present since server version 1.1.2. */
   fvarIds?: FVarId[];
   type: CodeWithInfos;
   val?: CodeWithInfos;
   isInstance?: boolean;
   isType?: boolean;
-  isAssumption?: boolean;
   isInserted?: boolean;
   isRemoved?: boolean;
+  isAssumption?: boolean;
 }
 
 export interface InteractiveGoalCore {
   hyps: InteractiveHypothesisBundle[];
   type: CodeWithInfos;
-  /** Present since server version 1.1.2. */
   ctx?: ContextInfo;
 }
 
 export interface InteractiveGoal extends InteractiveGoalCore {
   userName?: string;
   goalPrefix?: string;
-  /** Present since server version 1.1.2. */
   mvarId?: MVarId;
   isInserted?: boolean;
   isRemoved?: boolean;
+}
+
+export interface InteractiveGoals extends InteractiveGoalCore {
+  goals: InteractiveGoals[];
+}
+
+export interface InteractiveTermGoal extends InteractiveGoalCore {
+  range?: Range;
+  term?: TermInfo;
+}
+
+export interface GameHint {
+  text: string;
+  hidden: boolean;
+  rawText: string;
+  varNames: string[][]; // in Lean: `Array (Name × Name)`
+}
+
+export interface InteractiveGoalWithHints {
+  goal: InteractiveGoal;
   hints: GameHint[];
 }
 
-export interface InteractiveGoals {
-  goals: InteractiveGoal[];
+export interface InteractiveGoalsWithHints {
+  goals: InteractiveGoalWithHints[];
+  command: string;
+  diags: InteractiveDiagnostic[];
+}
+
+/**
+ * The proof state as it is received from the server.
+ * Per proof step of the tactic proof, there is one `InteractiveGoalWithHints[]`.
+ */
+export interface ProofState {
+  /** The proof steps. step 0 is the state at the beginning of the proof. step one
+   * contains the goal after the first line has been evaluated.
+   *
+   * In particular `step[i]` is the proof step at the beginning of line `i` in vscode.
+   */
+  steps: InteractiveGoalsWithHints[];
+  /** The remaining diagnostics that are not in the steps. Usually this should only
+   * be the "unsolved goals" message, I believe.
+   */
+  diagnostics : InteractiveDiagnostic[];
+  completed : Boolean;
+  completedWithWarnings : Boolean;
 }

client/src/components/infoview/typewriter.tsx

@@ -5,7 +5,7 @@ import { faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { Registry } from 'monaco-textmate' // peer dependency
 import { wireTmGrammars } from 'monaco-editor-textmate'
-import { DiagnosticSeverity, PublishDiagnosticsParams } from 'vscode-languageserver-protocol';
+import { DiagnosticSeverity, PublishDiagnosticsParams, DocumentUri } from 'vscode-languageserver-protocol';
 import { useServerNotificationEffect } from '../../../../node_modules/lean4-infoview/src/infoview/util';
 import { AbbreviationRewriter } from 'lean4web/client/src/editor/abbreviation/rewriter/AbbreviationRewriter';
 import { AbbreviationProvider } from 'lean4web/client/src/editor/abbreviation/AbbreviationProvider';
@@ -13,13 +13,19 @@ import * as leanSyntax from 'lean4web/client/src/syntaxes/lean.json'
 import * as leanMarkdownSyntax from 'lean4web/client/src/syntaxes/lean-markdown.json'
 import * as codeblockSyntax from 'lean4web/client/src/syntaxes/codeblock.json'
 import languageConfig from 'lean4/language-configuration.json';
-import { InteractiveDiagnostic, getInteractiveDiagnostics } from '@leanprover/infoview-api';
+import { InteractiveDiagnostic, RpcSessionAtPos, getInteractiveDiagnostics } from '@leanprover/infoview-api';
 import { Diagnostic } from 'vscode-languageserver-types';
 import { DocumentPosition } from '../../../../node_modules/lean4-infoview/src/infoview/util';
 import { RpcContext } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
-import { DeletedChatContext, InputModeContext, MonacoEditorContext, ProofContext, ProofStep } from './context'
-import { goalsToString } from './goals'
-import { GameHint, InteractiveGoals } from './rpc_api'
+import { DeletedChatContext, InputModeContext, MonacoEditorContext, ProofContext } from './context'
+import { goalsToString, lastStepHasErrors, loadGoals } from './goals'
+import { GameHint, ProofState } from './rpc_api'
+import { useTranslation } from 'react-i18next'
+
+export interface GameDiagnosticsParams {
+  uri: DocumentUri;
+  diagnostics: Diagnostic[];
+}
 
 /* We register a new language `leancmd` that looks like lean4, but does not use the lsp server. */
 
@@ -64,7 +70,8 @@ config.autoClosingPairs = config.autoClosingPairs.map(
 monaco.languages.setLanguageConfiguration('lean4cmd', config);
 
 /** The input field */
-export function CommandLine({hidden}: {hidden?: boolean}) {
+export function Typewriter({disabled}: {disabled?: boolean}) {
+  let { t } = useTranslation()
 
   /** Reference to the hidden multi-line editor */
   const editor = React.useContext(MonacoEditorContext)
@@ -74,114 +81,18 @@ export function CommandLine({hidden}: {hidden?: boolean}) {
   const [oneLineEditor, setOneLineEditor] = useState<monaco.editor.IStandaloneCodeEditor>(null)
   const [processing, setProcessing] = useState(false)
 
-  const {commandLineInput, setCommandLineInput} = React.useContext(InputModeContext)
+  const {typewriterInput, setTypewriterInput} = React.useContext(InputModeContext)
 
   const inputRef = useRef()
 
   // The context storing all information about the current proof
-  const {proof, setProof} = React.useContext(ProofContext)
+  const {proof, setProof, interimDiags, setInterimDiags, setCrashed} = React.useContext(ProofContext)
 
   // state to store the last batch of deleted messages
   const {setDeletedChat} = React.useContext(DeletedChatContext)
 
   const rpcSess = React.useContext(RpcContext)
 
-  /** Load all goals an messages of the current proof (line-by-line) and save
-   * the retrieved information into context (`ProofContext`)
-   */
-  const loadAllGoals = React.useCallback(() => {
-
-    let goalCalls = []
-    let msgCalls = []
-
-    // For each line of code ask the server for the goals and the messages on this line
-    for (let i = 0; i < model.getLineCount(); i++) {
-      goalCalls.push(
-        rpcSess.call('Game.getInteractiveGoals', DocumentPosition.toTdpp({line: i, character: 0, uri: uri}))
-      )
-      msgCalls.push(
-        getInteractiveDiagnostics(rpcSess, {start: i, end: i+1})
-      )
-    }
-
-    // Wait for all these requests to be processed before saving the results
-    Promise.all(goalCalls).then((steps : InteractiveGoals[]) => {
-      Promise.all(msgCalls).then((diagnostics : [InteractiveDiagnostic[]]) => {
-        let tmpProof : ProofStep[] = []
-
-        let goalCount = 0
-
-        steps.map((goals, i) => {
-          // The first step has an empty command and therefore also no error messages
-          // Usually there is a newline at the end of the editors content, so we need to
-          // display diagnostics from potentally two lines in the last step.
-          let messages = i ? (i == steps.length - 1 ? diagnostics.slice(i-1).flat() : diagnostics[i-1]) : []
-
-          // Filter out the 'unsolved goals' message
-          messages = messages.filter((msg) => {
-            return !("append" in msg.message &&
-              "text" in msg.message.append[0] &&
-              msg.message.append[0].text === "unsolved goals")
-          })
-
-          if (typeof goals == 'undefined') {
-            tmpProof.push({
-              command: i ? model.getLineContent(i) : '',
-              goals: [],
-              hints: [],
-              errors: messages
-            } as ProofStep)
-            console.debug('goals is undefined')
-            return
-          }
-
-          // If the number of goals reduce, show a message
-          if (goals.goals.length && goalCount > goals.goals.length) {
-            messages.unshift({
-              range: {
-                start: {
-                  line: i-1,
-                  character: 0,
-                },
-                end: {
-                  line: i-1,
-                  character: 0,
-                }},
-              severity: DiagnosticSeverity.Information,
-              message: {
-              text: 'intermediate goal solved 🎉'
-              }
-            })
-          }
-          goalCount = goals.goals.length
-
-          // with no goals there will be no hints.
-          let hints : GameHint[] = goals.goals.length ? goals.goals[0].hints : []
-
-          console.debug(`Command (${i}): `, i ? model.getLineContent(i) : '')
-          console.debug(`Goals: (${i}): `, goalsToString(goals)) //
-          console.debug(`Hints: (${i}): `, hints)
-          console.debug(`Errors: (${i}): `, messages)
-
-          tmpProof.push({
-            // the command of the line above. Note that `getLineContent` starts counting
-            // at `1` instead of `zero`. The first ProofStep will have an empty command.
-            command: i ? model.getLineContent(i) : '',
-            // TODO: store correct data
-            goals: goals.goals,
-            // only need the hints of the active goals in chat
-            hints: hints,
-            // errors and messages from the server
-            errors: messages
-          } as ProofStep)
-
-        })
-        // Save the proof to the context
-        setProof(tmpProof)
-      })
-    })
-  }, [editor, rpcSess, uri, model])
-
   // Run the command
   const runCommand = React.useCallback(() => {
     if (processing) {return}
@@ -190,34 +101,56 @@ export function CommandLine({hidden}: {hidden?: boolean}) {
     setDeletedChat([])
 
     const pos = editor.getPosition()
-    if (commandLineInput) {
+    if (typewriterInput) {
       setProcessing(true)
-      editor.executeEdits("command-line", [{
+      editor.executeEdits("typewriter", [{
         range: monaco.Selection.fromPositions(
           pos,
           editor.getModel().getFullModelRange().getEndPosition()
         ),
-        text: commandLineInput.trim() + "\n",
+        text: typewriterInput.trim() + "\n",
         forceMoveMarkers: false
       }])
+      setTypewriterInput('')
+      // Load proof after executing edits
+      loadGoals(rpcSess, uri, setProof, setCrashed)
     }
 
     editor.setPosition(pos)
-  }, [commandLineInput, editor])
+  }, [typewriterInput, editor])
+
+  useEffect(() => {
+    if (oneLineEditor && oneLineEditor.getValue() !== typewriterInput) {
+      oneLineEditor.setValue(typewriterInput)
+    }
+  }, [typewriterInput])
+
+  /* Load proof on start/switching to typewriter */
+  useEffect(() => {
+    loadGoals(rpcSess, uri, setProof, setCrashed)
+  }, [])
 
+  /** If the last step has an error, add the command to the typewriter. */
   useEffect(() => {
-    if (oneLineEditor && oneLineEditor.getValue() !== commandLineInput) {
-      oneLineEditor.setValue(commandLineInput)
+    if (lastStepHasErrors(proof)) {
+      setTypewriterInput(proof?.steps[proof?.steps.length - 1].command)
     }
-  }, [commandLineInput])
+  }, [proof])
 
   // React when answer from the server comes back
   useServerNotificationEffect('textDocument/publishDiagnostics', (params: PublishDiagnosticsParams) => {
     if (params.uri == uri) {
       setProcessing(false)
-      loadAllGoals()
+
+      console.log('Received lean diagnostics')
+      console.log(params.diagnostics)
+      setInterimDiags(params.diagnostics)
+
+      //loadGoals(rpcSess, uri, setProof)
+
+      // TODO: loadAllGoals()
       if (!hasErrors(params.diagnostics)) {
-        setCommandLineInput("")
+        //setTypewriterInput("")
         editor.setPosition(editor.getModel().getFullModelRange().getEndPosition())
       }
     } else {
@@ -229,9 +162,18 @@ export function CommandLine({hidden}: {hidden?: boolean}) {
     // loadAllGoals()
   }, [uri]);
 
+  // // React when answer from the server comes back
+  // useServerNotificationEffect('$/game/publishDiagnostics', (params: GameDiagnosticsParams) => {
+  //   console.log('Received game diagnostics')
+  //   console.log(`diag. uri : ${params.uri}`)
+  //   console.log(params.diagnostics)
+
+  // }, [uri]);
+
+
   useEffect(() => {
     const myEditor = monaco.editor.create(inputRef.current!, {
-      value: commandLineInput,
+      value: typewriterInput,
       language: "lean4cmd",
       quickSuggestions: false,
       lightbulb: {
@@ -274,14 +216,14 @@ export function CommandLine({hidden}: {hidden?: boolean}) {
     // Ensure that our one-line editor can only have a single line
     const l = oneLineEditor.getModel().onDidChangeContent((e) => {
       const value = oneLineEditor.getValue()
-      setCommandLineInput(value)
+      setTypewriterInput(value)
       const newValue = value.replace(/[\n\r]/g, '')
       if (value != newValue) {
         oneLineEditor.setValue(newValue)
       }
     })
     return () => { l.dispose() }
-  }, [oneLineEditor, setCommandLineInput])
+  }, [oneLineEditor, setTypewriterInput])
 
   useEffect(() => {
     if (!oneLineEditor) return
@@ -299,7 +241,8 @@ export function CommandLine({hidden}: {hidden?: boolean}) {
   useEffect(() => {
     console.debug(`time to update: ${uri} \n ${rpcSess}`)
     console.debug(rpcSess)
-    loadAllGoals()
+    // console.debug('LOAD ALL GOALS')
+    // TODO: loadAllGoals()
   }, [rpcSess])
 
   /** Process the entered command */
@@ -308,13 +251,14 @@ export function CommandLine({hidden}: {hidden?: boolean}) {
     runCommand()
   }
 
-  return <div className={`command-line${hidden ? ' hidden' : ''}`}>
+  // do not display if the proof is completed (with potential warnings still present)
+  return <div className={`typewriter${proof?.completedWithWarnings ? ' hidden' : ''}${disabled ? ' disabled' : ''}`}>
       <form onSubmit={handleSubmit}>
-        <div className="command-line-input-wrapper">
-          <div ref={inputRef} className="command-line-input" />
+        <div className="typewriter-input-wrapper">
+          <div ref={inputRef} className="typewriter-input" />
         </div>
         <button type="submit" disabled={processing} className="btn btn-inverted">
-          <FontAwesomeIcon icon={faWandMagicSparkles} /> Execute
+          <FontAwesomeIcon icon={faWandMagicSparkles} />&nbsp;{t("Execute")}
         </button>
       </form>
     </div>
@@ -336,3 +280,14 @@ export function hasInteractiveErrors (diags: InteractiveDiagnostic[]) {
     (d) => (d.severity == DiagnosticSeverity.Error ) // || d.severity == DiagnosticSeverity.Warning
   )
 }
+
+export function getInteractiveDiagsAt (proof: ProofState, k : number) {
+  if (k == 0) {
+    return []
+  } else if (k >= proof?.steps.length-1) {
+    // TODO: Do we need that?
+    return proof?.diagnostics.filter(msg => msg.range.start.line >= proof?.steps.length-1)
+  } else {
+    return proof?.diagnostics.filter(msg => msg.range.start.line == k-1)
+  }
+}

client/src/components/inventory.tsx

@@ -1,49 +1,56 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import './inventory.css'
+import '../css/inventory.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons'
+import { faLock, faBan, faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faClipboard } from '@fortawesome/free-regular-svg-icons'
 import { GameIdContext } from '../app';
 import Markdown from './markdown';
 import { useLoadDocQuery, InventoryTile, LevelInfo, InventoryOverview, useLoadInventoryOverviewQuery } from '../state/api';
 import { selectDifficulty, selectInventory } from '../state/progress';
 import { store } from '../state/store';
 import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { t } from 'i18next';
 
-export function Inventory({levelInfo, openDoc, enableAll=false} :
+export function Inventory({levelInfo, openDoc, lemmaTab, setLemmaTab, enableAll=false} :
   {
     levelInfo: LevelInfo|InventoryOverview,
     openDoc: (props: {name: string, type: string}) => void,
+    lemmaTab: any,
+    setLemmaTab: any,
     enableAll?: boolean,
   }) {
+  const { t } = useTranslation()
 
   return (
     <div className="inventory">
     {/* TODO: Click on Tactic: show info
       TODO: click on paste icon -> paste into command line */}
-      <h2>Tactics</h2>
+      <h2>{t("Tactics")}</h2>
       {levelInfo?.tactics &&
         <InventoryList items={levelInfo?.tactics} docType="Tactic" openDoc={openDoc} enableAll={enableAll}/>
       }
-      <h2>Definitions</h2>
+      <h2>{t("Definitions")}</h2>
       {levelInfo?.definitions &&
         <InventoryList items={levelInfo?.definitions} docType="Definition" openDoc={openDoc} enableAll={enableAll}/>
       }
-      <h2>Lemmas</h2>
+      <h2>{t("Theorems")}</h2>
       {levelInfo?.lemmas &&
-        <InventoryList items={levelInfo?.lemmas} docType="Lemma" openDoc={openDoc} defaultTab={levelInfo?.lemmaTab} level={levelInfo} enableAll={enableAll}/>
+        <InventoryList items={levelInfo?.lemmas} docType="Lemma" openDoc={openDoc} level={levelInfo} enableAll={enableAll} tab={lemmaTab} setTab={setLemmaTab}/>
       }
     </div>
   )
 }
 
-function InventoryList({items, docType, openDoc, defaultTab=null, level=undefined, enableAll=false} :
+function InventoryList({items, docType, openDoc, tab=null, setTab=undefined, level=undefined, enableAll=false} :
   {
     items: InventoryTile[],
     docType: string,
     openDoc(props: {name: string, type: string}): void,
-    defaultTab? : string,
-    level? : LevelInfo|InventoryOverview,
+    tab?: any,
+    setTab?: any,
+    level?: LevelInfo|InventoryOverview,
     enableAll?: boolean,
   }) {
   // TODO: `level` is only used in the `useEffect` below to check if a new level has
@@ -59,8 +66,6 @@ function InventoryList({items, docType, openDoc, defaultTab=null, level=undefine
   }
   const categories = Array.from(categorySet).sort()
 
-  const [tab, setTab] = useState(defaultTab)
-
   // Add inventory items from local store as unlocked.
   // Items are unlocked if they are in the local store, or if the server says they should be
   // given the dependency graph. (OR-connection) (TODO: maybe add different logic for different
@@ -68,13 +73,6 @@ function InventoryList({items, docType, openDoc, defaultTab=null, level=undefine
   let inv: string[] = selectInventory(gameId)(store.getState())
   let modifiedItems : InventoryTile[] = items.map(tile => inv.includes(tile.name) ? {...tile, locked: false} : tile)
 
-  useEffect(() => {
-    // If the level specifies `LemmaTab "Nat"`, we switch to this tab on loading.
-    // `defaultTab` is `null` or `undefined` otherwise, in which case we don't want to switch.
-    if (defaultTab) {
-      setTab(defaultTab)
-    }}, [level])
-
   return <>
     {categories.length > 1 &&
       <div className="tab-bar">
@@ -86,24 +84,29 @@ function InventoryList({items, docType, openDoc, defaultTab=null, level=undefine
       {[...modifiedItems].sort(
           // For lemas, sort entries `available > disabled > locked`
           // otherwise alphabetically
-          (x, y) => +(docType == "Lemma") * (+x.locked - +y.locked || +x.disabled - +y.disabled)
+          (x, y) => +(docType == "Lemma") * (+x.locked - +y.locked || +x.disabled - +y.disabled) || x.displayName.localeCompare(y.displayName)
         ).filter(item => !item.hidden && ((tab ?? categories[0]) == item.category)).map((item, i) => {
             return <InventoryItem key={`${item.category}-${item.name}`}
+              item={item}
               showDoc={() => {openDoc({name: item.name, type: docType})}}
               name={item.name} displayName={item.displayName} locked={difficulty > 0 ? item.locked : false}
-              disabled={item.disabled} newly={item.new} enableAll={enableAll}/>
+              disabled={item.disabled} newly={item.new} enableAll={enableAll} />
         })
       }
     </div>
     </>
 }
 
-function InventoryItem({name, displayName, locked, disabled, newly, showDoc, enableAll=false}) {
+function InventoryItem({item, name, displayName, locked, disabled, newly, showDoc, enableAll=false}) {
   const icon = locked ? <FontAwesomeIcon icon={faLock} /> :
-               disabled ? <FontAwesomeIcon icon={faBan} /> : ""
+               disabled ? <FontAwesomeIcon icon={faBan} /> : item.st
   const className = locked ? "locked" : disabled ? "disabled" : newly ? "new" : ""
-  const title = locked ? "Not unlocked yet" :
-                disabled ? "Not available in this level" : ""
+  // Note: This is somewhat a hack as the statement of lemmas comes currently in the form
+  // `Namespace.statement_name (x y : Nat) : some type`
+  const title = locked ? t("Not unlocked yet") :
+                disabled ? t("Not available in this level") : (item.altTitle ? item.altTitle.substring(item.altTitle.indexOf(' ') + 1) : '')
+
+  const [copied, setCopied] = useState(false)
 
   const handleClick = () => {
     if (enableAll || !locked) {
@@ -111,7 +114,21 @@ function InventoryItem({name, displayName, locked, disabled, newly, showDoc, ena
     }
   }
 
-  return <div className={`item ${className}${enableAll ? ' enabled' : ''}`} onClick={handleClick} title={title}>{icon} {displayName}</div>
+  const copyItemName = (ev) => {
+    navigator.clipboard.writeText(displayName)
+    setCopied(true)
+    setInterval(() => {
+      setCopied(false)
+    }, 3000);
+    ev.stopPropagation()
+  }
+
+return <div className={`item ${className}${enableAll ? ' enabled' : ''}`} onClick={handleClick} title={title}>
+    {icon} {displayName}
+    <div className="copy-button" onClick={copyItemName}>
+      {copied ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faClipboard} />}
+    </div>
+  </div>
 }
 
 export function Documentation({name, type, handleClose}) {
@@ -123,7 +140,7 @@ export function Documentation({name, type, handleClose}) {
     <h1 className="doc">{doc.data?.displayName}</h1>
     <p><code>{doc.data?.statement}</code></p>
     {/* <code>docstring: {doc.data?.docstring}</code> */}
-    <Markdown>{doc.data?.content}</Markdown>
+    <Markdown>{t(doc.data?.content, {ns: gameId})}</Markdown>
   </div>
 }
 
@@ -131,16 +148,25 @@ export function Documentation({name, type, handleClose}) {
 export function InventoryPanel({levelInfo, visible = true}) {
   const gameId = React.useContext(GameIdContext)
 
+  const [lemmaTab, setLemmaTab] = useState(levelInfo?.lemmaTab)
+
   // The inventory is overlayed by the doc entry of a clicked item
   const [inventoryDoc, setInventoryDoc] = useState<{name: string, type: string}>(null)
   // Set `inventoryDoc` to `null` to close the doc
   function closeInventoryDoc() {setInventoryDoc(null)}
 
+    useEffect(() => {
+    // If the level specifies `LemmaTab "Nat"`, we switch to this tab on loading.
+    // `defaultTab` is `null` or `undefined` otherwise, in which case we don't want to switch.
+    if (levelInfo?.lemmaTab) {
+      setLemmaTab(levelInfo?.lemmaTab)
+    }}, [levelInfo])
+
   return <div className={`column inventory-panel ${visible ? '' : 'hidden'}`}>
     {inventoryDoc ?
       <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
       :
-      <Inventory levelInfo={levelInfo} openDoc={setInventoryDoc} enableAll={true}/>
+      <Inventory levelInfo={levelInfo} openDoc={setInventoryDoc} enableAll={true} lemmaTab={lemmaTab} setLemmaTab={setLemmaTab}/>
     }
   </div>
 }

client/src/components/landing_page.tsx

@@ -1,25 +1,25 @@
 import * as React from 'react';
 import { useNavigate, Link } from "react-router-dom";
+import { Trans, useTranslation } from 'react-i18next';
 
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
-import './landing_page.css'
-import coverRobo from '../assets/covers/formaloversum.png'
+import '../css/landing_page.css'
 import bgImage from '../assets/bg.jpg'
 
 import Markdown from './markdown';
-import {PrivacyPolicyPopup} from './privacy_policy'
-
-const flag = {
-  'Dutch': '🇳🇱',
-  'English': '🇬🇧',
-  'French': '🇫🇷',
-  'German': '🇩🇪',
-  'Italian': '🇮🇹',
-}
+import {PrivacyPolicyPopup} from './popup/privacy_policy'
+import { GameTile, useGetGameInfoQuery } from '../state/api'
+import path from 'path';
+
+import { PreferencesPopup } from './popup/preferences';
+import { ImpressumButton, MenuButton, PreferencesButton } from './app_bar';
+import ReactCountryFlag from 'react-country-flag';
+import lean4gameConfig from '../config.json'
+import i18next from 'i18next';
 
 function GithubIcon({url='https://github.com'}) {
 
@@ -32,47 +32,51 @@ function GithubIcon({url='https://github.com'}) {
     </div>
 }
 
-function GameTile({
-  title,
-  gameId,
-  intro, // Catchy intro phrase.
-  image=null,
-  worlds='?',
-  levels='?',
-  prereq='&ndash;', // Optional list of games that this game builds on. Use markdown.
-  description, // Longer description. Supports Markdown.
-  language}) {
-
+function Tile({gameId, data}: {gameId: string, data: GameTile|undefined}) {
+  let { t } = useTranslation()
   let navigate = useNavigate();
   const routeChange = () =>{
     navigate(gameId);
   }
 
+  if (typeof data === 'undefined') {
+    return <></>
+  }
+
   return <div className="game" onClick={routeChange}>
     <div className="wrapper">
-      <div className="title">{title}</div>
-      <div className="short-description">{intro}
+      <div className="title">{t(data.title, { ns: gameId })}</div>
+      <div className="short-description">{t(data.short, { ns: gameId })}
       </div>
-      { image ? <img className="image" src={image} alt="" /> : <div className="image"/> }
-      <div className="long description"><Markdown>{description}</Markdown></div>
+      { data.image ? <img className="image" src={path.join("data", gameId, data.image)} alt="" /> : <div className="image"/> }
+      <div className="long description"><Markdown>{t(data.long, { ns: gameId })}</Markdown></div>
     </div>
     <table className="info">
+      <tbody>
       <tr>
-        <td title="consider playing these games first.">Prerequisites</td>
-        <td><Markdown>{prereq}</Markdown></td>
+        <td title="consider playing these games first.">{t("Prerequisites")}</td>
+        <td><Markdown>{t(data.prerequisites.join(', '), { ns: gameId })}</Markdown></td>
       </tr>
       <tr>
-        <td>Worlds</td>
-        <td>{worlds}</td>
+        <td>{t("Worlds")}</td>
+        <td>{data.worlds}</td>
       </tr>
       <tr>
-        <td>Levels</td>
-        <td>{levels}</td>
+        <td>{t("Levels")}</td>
+        <td>{data.levels}</td>
       </tr>
       <tr>
-        <td>Language</td>
-        <td title={`in ${language}`}>{flag[language]}</td>
+        <td>{t("Language")}</td>
+
+        <td>
+          {data.languages.map((lang) => {
+            let langOpt = lean4gameConfig.languages.find((e) => e.iso == lang)
+            return <ReactCountryFlag key={`flag-${lang}`} title={langOpt?.name} countryCode={langOpt?.flag} className="emojiFlag"/>
+
+          })}
+        </td>
       </tr>
+      </tbody>
     </table>
   </div>
 
@@ -82,107 +86,184 @@ function LandingPage() {
 
   const navigate = useNavigate();
 
-  const [impressum, setImpressum] = React.useState(false);
-  const openImpressum = () => setImpressum(true);
-  const closeImpressum = () => setImpressum(false);
+  const [impressumPopup, setImpressumPopup] = React.useState(false);
+  const [preferencesPopup, setPreferencesPopup] = React.useState(false);
+  const [navOpen, setNavOpen] = React.useState(false);
+  const openImpressum = () => setImpressumPopup(true);
+  const closeImpressum = () => setImpressumPopup(false);
+  const toggleImpressum = () => setImpressumPopup(!impressumPopup);
+  const closePreferencesPopup = () => setPreferencesPopup(false);
+  const togglePreferencesPopup = () => setPreferencesPopup(!preferencesPopup);
+
+  const [usageCPU, setUsageCPU] = React.useState<number>()
+  const [usageMem, setUsageMem] = React.useState<number>()
 
+  const { t, i18n } = useTranslation()
+
+  // Load the namespaces of all games
+  // TODO: should `allGames` contain game-ids starting with `g/`?
+  i18next.loadNamespaces(lean4gameConfig.allGames.map(id => `g/${id}`))
+
+  let allTiles = lean4gameConfig.allGames.map((gameId) => {
+    let q =  useGetGameInfoQuery({game: `g/${gameId}`})
+
+    // if (q.isError) {
+    //   if (q.error?.originalStatus === 404) {
+    //     // Handle 404 error
+    //     console.log('File not found');
+    //   } else {
+    //     // Suppress additional console.error messages
+    //     console.error(q.error);
+    //   }
+    // }
+
+    return q.data?.tile
+  })
+
+  /** Parse `games/stats.csv` if present and display server capacity. */
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      fetch_stats();
+    }, 2000)
+    return () => clearInterval(interval)
+  }, [])
 
   return <div className="landing-page">
     <header style={{backgroundImage: `url(${bgImage})`}}>
-      <nav>
+      <nav className="landing-page-nav">
         <GithubIcon url="https://github.com/leanprover-community/lean4game"/>
+        <MenuButton navOpen={navOpen} setNavOpen={setNavOpen}/>
+        <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
+            <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
+            <PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
+        </div>
       </nav>
       <div id="main-title">
-        <h1>Lean Game Server</h1>
+        <h1>{t("Lean Game Server")}</h1>
         <p>
-          A repository of learning games for the
-          proof assistant <a target="_blank" href="https://leanprover-community.github.io/">Lean</a> <i>(Lean 4)</i> and
-          its mathematical library <a target="_blank" href="https://github.com/leanprover-community/mathlib4">mathlib</a>
+          <Trans>
+            A repository of learning games for the
+            proof assistant <a target="_blank" href="https://leanprover-community.github.io/">Lean</a> <i>(Lean 4)</i> and
+            its mathematical library <a target="_blank" href="https://github.com/leanprover-community/mathlib4">mathlib</a>
+          </Trans>
         </p>
       </div>
     </header>
     <div className="game-list">
-
-      <GameTile
-        title="Natural Number Game"
-        gameId="g/hhu-adam/NNG4"
-        intro="The classical introduction game for Lean."
-        description="In this game you recreate the natural numbers $\mathbb{N}$ from the Peano axioms,
-learning the basics about theorem proving in Lean.
-
-This is a good first introduction to Lean!"
-        worlds="9"
-        levels="72"
-        language="English"
-        />
-
-      <GameTile
-        title="Formaloversum"
-        gameId="g/hhu-adam/Robo"
-        intro="Erkunde das Leansche Universum mit deinem Robo, welcher dir bei der Verständigung mit den Formalosophen zur Seite steht."
-        description="
-Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an.
-
-(Das Spiel befindet sich noch in der Entstehungsphase.)"
-        image={coverRobo}
-        language="German"
-        />
-
+      {allTiles.filter(x => x != null).length == 0 ?
+        <p>
+          <Trans>
+            No Games loaded. Use <a>http://localhost:3000/#/g/local/FOLDER</a> to open a
+            game directly from a local folder.
+          </Trans>
+        </p>
+        : lean4gameConfig.allGames.map((id, i) => (
+          <Tile
+            key={id}
+            gameId={`g/${id}`}
+            data={allTiles[i]}
+          />
+        ))
+      }
     </div>
+    { // show server capacity from `games/stats.csv` if present
+      (usageMem >= 0 || usageCPU >= 0 ) &&
+      <section>
+        <div className="wrapper">
+          <h2>{t("Server capacity")}</h2>
+          <Trans>
+            <p>
+              As this server runs lean on our university machines, it has a limited capacity.
+              Our current estimate is about 70 simultaneous games.
+            </p>
+          </Trans>
+          <p>
+            { usageMem >= 0 && <> {t("RAM")}: <strong>{usageMem.toFixed(2)} %</strong>{t(" used")}.<br/></> }
+            { usageCPU >= 0 && <> {t("CPU")}: <strong>{usageCPU.toFixed(2)} %</strong>{t(" used")}. </> }
+          </p>
+        </div>
+      </section>
+    }
     <section>
       <div className="wrapper">
-        <h2>Development notes</h2>
-        <p>
-          As this server runs lean on our university machines, it has a limited capacity.
-          Our current estimate is about 55 copies of the NNG or 25 copies of games importing
-          mathlib. We hope to address this limitation in the future.
-        </p>
-        <p>
-          Most aspects of the games and the infrastructure are still in development. Feel free to
-          file a <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">GitHub Issue</a> about
-          any problems you experience!
-        </p>
+        <h2>{t("Development notes")}</h2>
+        <Trans>
+          <p>
+            Most aspects of the games and the infrastructure are still in development. Feel free to
+            file a <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">GitHub Issue</a> about
+            any problems you experience!
+          </p>
+        </Trans>
       </div>
     </section>
     <section>
       <div className="wrapper">
-        <h2>Adding new games</h2>
-        <p>
-          If you are considering writing your own game, you should use
-          the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
-          a template.
-        </p>
-        <p>
-          There is an option to load and run your own games direclty on the server,
-          instructions are in the NNG repo. Since this is still in development we'd like to
-          encourage you to contact us for support creating your own game. The documentation is
-          not polished yet.
-        </p>
-        <p>
-          To add games to this main page, you should get in contact as
-          games will need to be added manually.
-        </p>
+        <h2>{t("Adding new games")}</h2>
+        <Trans>
+          <p>
+            If you are considering writing your own game, you should use
+            the <a target="_blank" href="https://github.com/hhu-adam/GameSkeleton">GameSkeleton Github Repo</a> as
+            a template and read <a target="_blank" href="https://github.com/leanprover-community/lean4game/">How to Create a Game</a>.
+          </p>
+          <p>
+            You can directly load your games into the server and play it using
+            the correct URL. The <a target="_blank" href="https://github.com/leanprover-community/lean4game/">instructions above</a> also
+            explain the details for how to load your game to the server.
+
+            We'd like to encourage you to contact us if you have any questions.
+          </p>
+          <p>
+            Featured games on this page are added manually.
+            Please get in contact and we'll happily add yours.
+          </p>
+        </Trans>
       </div>
     </section>
     <section>
       <div className="wrapper">
-        <h2>Funding</h2>
+        <h2>{t("Funding")}</h2>
         <p>
-          This server has been developed as part of the
-          project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at
-          Heinrich-Heine-Universität in Düsseldorf.
+          <Trans>
+            This server has been developed as part of the
+            project <a target="_blank" href="https://hhu-adam.github.io">ADAM: Anticipating the Digital Age of Mathematics</a> at
+            Heinrich Heine University Düsseldorf.
+          </Trans>
         </p>
       </div>
     </section>
     <footer>
+      {/* Do not translate "Impressum", it's needed for German GDPR */}
       <a className="link" onClick={openImpressum}>Impressum</a>
-      {impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
+      {impressumPopup? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
+      {preferencesPopup ? <PreferencesPopup handleClose={closePreferencesPopup} /> : null}
     </footer>
-
-    {/* <PrivacyPolicy/> */}
-
   </div>
 
+
+  function fetch_stats() {
+    fetch(`${window.location.origin}/data/stats`)
+      .then(response => {
+        if (response.ok) {
+          return response.text();
+        } else { throw ""; }
+      })
+      .then(data => {
+        // Parse the CSV content
+        const lines = data.split('\n');
+        const [header, line2] = lines;
+        if (!(header.replace(' ', '').startsWith("CPU,MEM"))) {
+          console.info("Not displaying server stats: received unexpected: ", header);
+        }
+        if (line2) {
+          let values = line2.split(',');
+          setUsageCPU(100 * parseFloat(values[0]));
+          setUsageMem(100 * parseFloat(values[1]));
+        }
+      }).catch(err => {
+        console.info('server stats unavailable');
+        console.debug(err);
+      });
+  }
 }
 
 export default LandingPage

client/src/components/level.tsx

@@ -4,7 +4,7 @@ import { useSelector, useStore } from 'react-redux'
 import Split from 'react-split'
 import { useParams } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars, faBook, faCode, faXmark, faHome, faCircleInfo, faArrowRight, faArrowLeft, faTerminal } from '@fortawesome/free-solid-svg-icons'
+import { faHome, faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { CircularProgress } from '@mui/material'
 import type { Location } from 'vscode-languageserver-protocol'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
@@ -16,24 +16,25 @@ import { InfoviewApi } from '@leanprover/infoview'
 import { EditorContext } from '../../../node_modules/lean4-infoview/src/infoview/contexts'
 import { EditorConnection, EditorEvents } from '../../../node_modules/lean4-infoview/src/infoview/editorConnection'
 import { EventEmitter } from '../../../node_modules/lean4-infoview/src/infoview/event'
+import { Diagnostic } from 'vscode-languageserver-types'
 
 import { GameIdContext } from '../app'
-import { ConnectionContext, connection, useLeanClient } from '../connection'
 import { useAppDispatch, useAppSelector } from '../hooks'
 import { useGetGameInfoQuery, useLoadInventoryOverviewQuery, useLoadLevelQuery } from '../state/api'
 import { changedSelection, codeEdited, selectCode, selectSelections, selectCompleted, helpEdited,
-  selectHelp, selectDifficulty, selectInventory } from '../state/progress'
+  selectHelp, selectDifficulty, selectInventory, selectTypewriterMode, changeTypewriterMode } from '../state/progress'
 import { store } from '../state/store'
 import { Button } from './button'
 import Markdown from './markdown'
 import {InventoryPanel} from './inventory'
-import { hasInteractiveErrors } from './infoview/command_line'
-import { DeletedChatContext, InputModeContext, MobileContext, MonacoEditorContext,
-  ProofContext, ProofStep, SelectionContext, WorldLevelIdContext } from './infoview/context'
+import { hasInteractiveErrors } from './infoview/typewriter'
+import { DeletedChatContext, InputModeContext, PreferencesContext, MonacoEditorContext,
+  ProofContext, SelectionContext, WorldLevelIdContext } from './infoview/context'
 import { DualEditor } from './infoview/main'
-import { GameHint } from './infoview/rpc_api'
-import { DeletedHints, Hint, Hints } from './hints'
-import { Impressum } from './privacy_policy'
+import { GameHint, InteractiveGoalsWithHints, ProofState } from './infoview/rpc_api'
+import { DeletedHints, Hint, Hints, MoreHelpButton, filterHints } from './hints'
+import { PrivacyPolicyPopup } from './popup/privacy_policy'
+import path from 'path';
 
 import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
@@ -41,23 +42,63 @@ import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
 import 'lean4web/client/src/editor/infoview.css'
 import 'lean4web/client/src/editor/vscode.css'
-import './level.css'
+import '../css/level.css'
 import { LevelAppBar } from './app_bar'
+import { LeanClient } from 'lean4web/client/src/editor/leanclient'
+import { DisposingWebSocketMessageReader } from 'lean4web/client/src/reader'
+import { WebSocketMessageWriter, toSocket } from 'vscode-ws-jsonrpc'
+import { IConnectionProvider } from 'monaco-languageclient'
+import { monacoSetup } from 'lean4web/client/src/monacoSetup'
+import { onigasmH } from 'onigasm/lib/onigasmH'
+import { isLastStepWithErrors, lastStepHasErrors } from './infoview/goals'
+import { InfoPopup } from './popup/game_info'
+import { PreferencesPopup } from './popup/preferences'
+import { useTranslation } from 'react-i18next'
+import i18next from 'i18next'
+
+
+monacoSetup()
 
 function Level() {
   const params = useParams()
   const levelId = parseInt(params.levelId)
   const worldId = params.worldId
-  // useLoadWorldFiles(worldId)
+
+  const gameId = React.useContext(GameIdContext)
+
+  // Load the namespace of the game
+  i18next.loadNamespaces(gameId).catch(err => {
+    console.warn(`translations for ${gameId} do not exist.`)
+  })
+
+  const gameInfo = useGetGameInfoQuery({game: gameId})
+
+  // pop-ups
+  const [impressum, setImpressum] = React.useState(false)
+  const [info, setInfo] = React.useState(false)
+  const [preferencesPopup, setPreferencesPopup] = React.useState(false)
+
+  function closeImpressum()   {setImpressum(false)}
+  function closeInfo()        {setInfo(false)}
+  function closePreferencesPopup() {setPreferencesPopup(false)}
+  function toggleImpressum()  {setImpressum(!impressum)}
+  function toggleInfo()       {setInfo(!info)}
+  function togglePreferencesPopup() {setPreferencesPopup(!preferencesPopup)}
 
   return <WorldLevelIdContext.Provider value={{worldId, levelId}}>
-    {levelId == 0 ? <Introduction /> : <PlayableLevel key={`${worldId}/${levelId}`}/>}
+    {levelId == 0 ?
+      <Introduction impressum={impressum} setImpressum={setImpressum} toggleInfo={toggleInfo} togglePreferencesPopup={togglePreferencesPopup} /> :
+      <PlayableLevel key={`${worldId}/${levelId}`} impressum={impressum} setImpressum={setImpressum} toggleInfo={toggleInfo} togglePreferencesPopup={togglePreferencesPopup}/>}
+    {impressum ? <PrivacyPolicyPopup handleClose={closeImpressum} /> : null}
+    {info ? <InfoPopup info={gameInfo.data?.info} handleClose={closeInfo}/> : null}
+    {preferencesPopup ? <PreferencesPopup handleClose={closePreferencesPopup} /> : null}
   </WorldLevelIdContext.Provider>
 }
 
-function ChatPanel({lastLevel}) {
+function ChatPanel({lastLevel, visible = true}) {
+  let { t } = useTranslation()
   const chatRef = useRef<HTMLDivElement>(null)
-  const {mobile} = useContext(MobileContext)
+  const {mobile} = useContext(PreferencesContext)
   const gameId = useContext(GameIdContext)
   const {worldId, levelId} = useContext(WorldLevelIdContext)
   const level = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
@@ -66,9 +107,7 @@ function ChatPanel({lastLevel}) {
   const {selectedStep, setSelectedStep} = useContext(SelectionContext)
   const completed = useAppSelector(selectCompleted(gameId, worldId, levelId))
 
-  // If the last step has errors, we want to treat it as if it is part of the second-to-last step
-  let k = proof.length - 1
-  let withErr = hasInteractiveErrors(proof[k]?.errors) ? 1 : 0
+  let k = proof?.steps.length ? proof?.steps.length - (lastStepHasErrors(proof) ? 2 : 1) : 0
 
   function toggleSelection(line: number) {
     return (ev) => {
@@ -81,29 +120,6 @@ function ChatPanel({lastLevel}) {
     }
   }
 
-  function hasHiddenHints(i : number): boolean {
-    let step = proof[i]
-    // For example if the proof isn't loaded yet
-    if(!step) {return false}
-    return step.hints.some((hint) => hint.hidden)
-  }
-
-  const activateHiddenHints = (ev) => {
-    // If the last step (`k`) has errors, we want the hidden hints from the
-    // second-to-last step to be affected
-    if (!(proof.length)) {return}
-
-    // state must not be mutated, therefore we need to clone the set
-    let tmp = new Set(showHelp)
-    if (tmp.has(k - withErr)) {
-      tmp.delete(k - withErr)
-    } else {
-      tmp.add(k - withErr)
-    }
-    setShowHelp(tmp)
-    console.debug(`help: ${Array.from(tmp.values())}`)
-  }
-
   useEffect(() => {
     // TODO: For some reason this is always called twice
     console.debug('scroll chat')
@@ -127,56 +143,64 @@ function ChatPanel({lastLevel}) {
   //   // chatRef.current!.scrollTo(0,0)
   // }, [gameId, worldId, levelId])
 
-  return <div className="chat-panel">
+  let introText: Array<string> = t(level?.data?.introduction, {ns: gameId}).split(/\n(\s*\n)+/)
+
+  return <div className={`chat-panel ${visible ? '' : 'hidden'}`}>
     <div ref={chatRef} className="chat">
-      {level?.data?.introduction &&
-        <div className={`message information step-0${selectedStep === 0 ? ' selected' : ''}`} onClick={toggleSelection(0)}>
-          <Markdown>{level?.data?.introduction}</Markdown>
-        </div>
-      }
-      {proof.map((step, i) => {
+      {introText?.filter(t => t.trim()).map(((t, i) =>
+        // Show the level's intro text as hints, too
+        <Hint key={`intro-p-${i}`}
+          hint={{text: t, hidden: false, rawText: t, varNames: []}} step={0} selected={selectedStep} toggleSelection={toggleSelection(0)} />
+      ))}
+      {proof?.steps.map((step, i) => {
+        let filteredHints = filterHints(step.goals[0]?.hints, proof?.steps[i-1]?.goals[0]?.hints)
+        if (step.goals.length > 0 && !isLastStepWithErrors(proof, i)) {
+          return <Hints key={`hints-${i}`}
+          hints={filteredHints} showHidden={showHelp.has(i)} step={i}
+          selected={selectedStep} toggleSelection={toggleSelection(i)} lastLevel={i == proof?.steps.length - 1}/>
+        }
+      })}
+
+      {/* {modifiedHints.map((step, i) => {
         // It the last step has errors, it will have the same hints
         // as the second-to-last step. Therefore we should not display them.
-        if (!(i == proof.length - 1 && withErr)) {
+        if (!(i == proof?.steps.length - 1 && withErr)) {
           // TODO: Should not use index as key.
           return <Hints key={`hints-${i}`}
-            hints={step.hints} showHidden={showHelp.has(i)} step={i}
-            selected={selectedStep} toggleSelection={toggleSelection(i)} lastLevel={i == proof.length - 1}/>
+            hints={step} showHidden={showHelp.has(i)} step={i}
+            selected={selectedStep} toggleSelection={toggleSelection(i)} lastLevel={i == proof?.steps.length - 1}/>
         }
-      })}
+      })} */}
       <DeletedHints hints={deletedChat}/>
-      {completed &&
+      {proof?.completed &&
         <>
           <div className={`message information recent step-${k}${selectedStep == k ? ' selected' : ''}`} onClick={toggleSelection(k)}>
-            Level completed! 🎉
+            {t("Level completed! 🎉")}
           </div>
           {level?.data?.conclusion?.trim() &&
             <div className={`message information recent step-${k}${selectedStep == k ? ' selected' : ''}`} onClick={toggleSelection(k)}>
-              <Markdown>{level?.data?.conclusion}</Markdown>
+              <Markdown>{t(level?.data?.conclusion, {ns: gameId})}</Markdown>
             </div>
           }
         </>
       }
     </div>
     <div className="button-row">
-      {completed && (lastLevel ?
+      {proof?.completed && (lastLevel ?
         <Button to={`/${gameId}`}>
-          <FontAwesomeIcon icon={faHome} />&nbsp;Leave World
+          <FontAwesomeIcon icon={faHome} />&nbsp;{t("Leave World")}
         </Button> :
         <Button to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}>
-          Next&nbsp;<FontAwesomeIcon icon={faArrowRight} />
+          {t("Next")}&nbsp;<FontAwesomeIcon icon={faArrowRight} />
         </Button>)
         }
-      {hasHiddenHints(proof.length - 1) && !showHelp.has(k - withErr) &&
-        <Button to="" onClick={activateHiddenHints}>
-          Show more help!
-        </Button>
-      }
+      <MoreHelpButton />
     </div>
   </div>
 }
 
-function ExercisePanel({codeviewRef, impressum, closeImpressum, visible=true}) {
+
+function ExercisePanel({codeviewRef, visible=true}: {codeviewRef: React.MutableRefObject<HTMLDivElement>, visible?: boolean}) {
   const gameId = React.useContext(GameIdContext)
   const {worldId, levelId} = useContext(WorldLevelIdContext)
   const level = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
@@ -185,26 +209,33 @@ function ExercisePanel({codeviewRef, impressum, closeImpressum, visible=true}) {
     <div className="exercise">
       <DualEditor level={level?.data} codeviewRef={codeviewRef} levelId={levelId} worldId={worldId} worldSize={gameInfo.data?.worldSize[worldId]}/>
     </div>
-    {impressum ? <Impressum handleClose={closeImpressum} /> : null}
   </div>
 }
 
-function PlayableLevel() {
+function PlayableLevel({impressum, setImpressum, toggleInfo, togglePreferencesPopup}) {
+  let { t } = useTranslation()
   const codeviewRef = useRef<HTMLDivElement>(null)
   const gameId = React.useContext(GameIdContext)
   const {worldId, levelId} = useContext(WorldLevelIdContext)
-  const {mobile} = React.useContext(MobileContext)
+  const {mobile} = React.useContext(PreferencesContext)
+
+  const dispatch = useAppDispatch()
 
-  const difficulty = useSelector(selectDifficulty(gameId))
   const initialCode = useAppSelector(selectCode(gameId, worldId, levelId))
   const initialSelections = useAppSelector(selectSelections(gameId, worldId, levelId))
-  const inventory: Array<String> = useSelector(selectInventory(gameId))
+
+  const typewriterMode = useSelector(selectTypewriterMode(gameId))
+  const setTypewriterMode = (newTypewriterMode: boolean) => dispatch(changeTypewriterMode({game: gameId, typewriterMode: newTypewriterMode}))
 
   const gameInfo = useGetGameInfoQuery({game: gameId})
   const level = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
 
   // The state variables for the `ProofContext`
-  const [proof, setProof] = useState<Array<ProofStep>>([])
+  const [proof, setProof] = useState<ProofState>({steps: [], diagnostics: [], completed: false, completedWithWarnings: false})
+  const [interimDiags, setInterimDiags] = useState<Array<Diagnostic>>([])
+  const [isCrashed, setIsCrashed] = useState<Boolean>(false)
+
+
   // When deleting the proof, we want to keep to old messages around until
   // a new proof has been entered. e.g. to consult messages coming from dead ends
   const [deletedChat, setDeletedChat] = useState<Array<GameHint>>([])
@@ -212,14 +243,13 @@ function PlayableLevel() {
   const [showHelp, setShowHelp] = useState<Set<number>>(new Set())
   // Only for mobile layout
   const [pageNumber, setPageNumber] = useState(0)
-  const [commandLineMode, setCommandLineMode] = useState(true)
-  const [commandLineInput, setCommandLineInput] = useState("")
+
+  // set to true to prevent switching between typewriter and editor
+  const [lockEditorMode, setLockEditorMode] = useState(false)
+  const [typewriterInput, setTypewriterInput] = useState("")
   const lastLevel = levelId >= gameInfo.data?.worldSize[worldId]
-  const dispatch = useAppDispatch()
 
   // impressum pop-up
-  const [impressum, setImpressum] = React.useState(false)
-  function closeImpressum() {setImpressum(false)}
   function toggleImpressum() {setImpressum(!impressum)}
 
   // When clicking on an inventory item, the inventory is overlayed by the item's doc.
@@ -246,7 +276,7 @@ function PlayableLevel() {
     useLevelEditor(codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection)
 
   /** Unused. Was implementing an undo button, which has been replaced by `deleteProof` inside
-   * `CommandLineInterface`.
+   * `TypewriterInterface`.
    */
   const handleUndo = () => {
     const endPos = editor.getModel().getFullModelRange().getEndPosition()
@@ -275,44 +305,75 @@ function PlayableLevel() {
   // a hint at the beginning of the proof...
   const [selectedStep, setSelectedStep] = useState<number>()
 
-  // if the user inventory changes, notify the server
-  useEffect(() => {
-    let leanClient = connection.getLeanClient(gameId)
-    leanClient.sendNotification('$/game/setInventory', {inventory: inventory, checkEnabled: difficulty > 0})
-  }, [inventory])
+
+  useEffect (() => {
+    // Lock editor mode
+    if (level?.data?.template) {
+      setLockEditorMode(true)
+
+      if (editor) {
+        let code = editor.getModel().getLinesContent()
+
+        // console.log(`insert. code: ${code}`)
+        // console.log(`insert. join: ${code.join('')}`)
+        // console.log(`insert. trim: ${code.join('').trim()}`)
+        // console.log(`insert. length: ${code.join('').trim().length}`)
+        // console.log(`insert. range: ${editor.getModel().getFullModelRange()}`)
+
+
+        // TODO: It does seem that the template is always indented by spaces.
+        // This is a hack, assuming there are exactly two.
+        if (!code.join('').trim().length) {
+          console.debug(`inserting template:\n${level.data.template}`)
+          // TODO: This does not work! HERE
+          // Probably overwritten by a query to the server
+          editor.executeEdits("template-writer", [{
+            range: editor.getModel().getFullModelRange(),
+            text: level.data.template + `\n`,
+            forceMoveMarkers: true
+          }])
+        } else {
+          console.debug(`not inserting template.`)
+        }
+      }
+    } else {
+      setLockEditorMode(false)
+    }
+  }, [level, levelId, worldId, gameId, editor])
+
 
   useEffect(() => {
     // TODO: That's a problem if the saved proof contains an error
     // Reset command line input when loading a new level
-    setCommandLineInput("")
+    setTypewriterInput("")
 
     // Load the selected help steps from the store
     setShowHelp(new Set(selectHelp(gameId, worldId, levelId)(store.getState())))
   }, [gameId, worldId, levelId])
 
   useEffect(() => {
-    if (!commandLineMode) {
+    if (!(typewriterMode && !lockEditorMode) && editor) {
       // Delete last input attempt from command line
-      editor.executeEdits("command-line", [{
+      editor.executeEdits("typewriter", [{
         range: editor.getSelection(),
         text: "",
         forceMoveMarkers: false
       }]);
       editor.focus()
     }
-  }, [commandLineMode])
+  }, [typewriterMode, lockEditorMode])
 
   useEffect(() => {
     // Forget whether hidden hints are displayed for steps that don't exist yet
-    if (proof.length) {
+    if (proof?.steps.length) {
       console.debug(Array.from(showHelp))
-      setShowHelp(new Set(Array.from(showHelp).filter(i => (i < proof.length))))
+      setShowHelp(new Set(Array.from(showHelp).filter(i => (i < proof?.steps.length))))
     }
   }, [proof])
 
   // save showed help in store
   useEffect(() => {
-    if (proof.length) {
+    if (proof?.steps.length) {
       console.debug(`showHelp:\n ${showHelp}`)
       dispatch(helpEdited({game: gameId, world: worldId, level: levelId, help: Array.from(showHelp)}))
     }
@@ -320,46 +381,53 @@ function PlayableLevel() {
 
   // Effect when command line mode gets enabled
   useEffect(() => {
-    if (editor && commandLineMode) {
-      let endPos = editor.getModel().getFullModelRange().getEndPosition()
-      if (editor.getModel().getLineContent(endPos.lineNumber).trim() !== "") {
-        editor.executeEdits("command-line", [{
-          range: monaco.Selection.fromPositions(endPos, endPos),
-          text: "\n",
-          forceMoveMarkers: true
-        }]);
-      }
-      endPos = editor.getModel().getFullModelRange().getEndPosition()
-      let currPos = editor.getPosition()
-      if (currPos.column != 1 || (currPos.lineNumber != endPos.lineNumber && currPos.lineNumber != endPos.lineNumber - 1)) {
-        // This is not a position that would naturally occur from CommandLine, reset:
-        editor.setSelection(monaco.Selection.fromPositions(endPos, endPos))
-      }
+    if (onigasmH && editor && (typewriterMode && !lockEditorMode)) {
+      let code = editor.getModel().getLinesContent().filter(line => line.trim())
+      editor.executeEdits("typewriter", [{
+        range: editor.getModel().getFullModelRange(),
+        text: code.length ? code.join('\n') + '\n' : '',
+        forceMoveMarkers: true
+      }]);
+
+      // let endPos = editor.getModel().getFullModelRange().getEndPosition()
+      // if (editor.getModel().getLineContent(endPos.lineNumber).trim() !== "") {
+      //   editor.executeEdits("typewriter", [{
+      //     range: monaco.Selection.fromPositions(endPos, endPos),
+      //     text: "\n",
+      //     forceMoveMarkers: true
+      //   }]);
+      // }
+      // let endPos = editor.getModel().getFullModelRange().getEndPosition()
+      // let currPos = editor.getPosition()
+      // if (currPos.column != 1 || (currPos.lineNumber != endPos.lineNumber && currPos.lineNumber != endPos.lineNumber - 1)) {
+      //   // This is not a position that would naturally occur from Typewriter, reset:
+      //   editor.setSelection(monaco.Selection.fromPositions(endPos, endPos))
+      // }
     }
-  }, [editor, commandLineMode])
+  }, [editor, typewriterMode, lockEditorMode, onigasmH == null])
 
   return <>
     <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
     <DeletedChatContext.Provider value={{deletedChat, setDeletedChat, showHelp, setShowHelp}}>
       <SelectionContext.Provider value={{selectedStep, setSelectedStep}}>
-        <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
-          <ProofContext.Provider value={{proof, setProof}}>
+        <InputModeContext.Provider value={{typewriterMode, setTypewriterMode, typewriterInput, setTypewriterInput, lockEditorMode, setLockEditorMode}}>
+          <ProofContext.Provider value={{proof, setProof, interimDiags, setInterimDiags, crashed: isCrashed, setCrashed: setIsCrashed}}>
             <EditorContext.Provider value={editorConnection}>
               <MonacoEditorContext.Provider value={editor}>
                 <LevelAppBar
+                  pageNumber={pageNumber} setPageNumber={setPageNumber}
                   isLoading={level.isLoading}
-                  levelTitle={`${mobile ? '' : 'Level '}${levelId} / ${gameInfo.data?.worldSize[worldId]}` +
-                    (level?.data?.title && ` : ${level?.data?.title}`)}
-                  impressum={impressum}
-                    toggleImpressum={toggleImpressum}
-                  pageNumber={pageNumber} setPageNumber={setPageNumber} />
+                  levelTitle={(mobile ? "" : t("Level")) + ` ${levelId} / ${gameInfo.data?.worldSize[worldId]}` +
+                    (level?.data?.title && ` : ${t(level?.data?.title, {ns: gameId})}`)}
+                  toggleImpressum={toggleImpressum}
+                  toggleInfo={toggleInfo}
+                  togglePreferencesPopup={togglePreferencesPopup}
+                  />
                 {mobile?
                   // TODO: This is copied from the `Split` component below...
                   <>
                     <div className={`app-content level-mobile ${level.isLoading ? 'hidden' : ''}`}>
                       <ExercisePanel
-                        impressum={impressum}
-                        closeImpressum={closeImpressum}
                         codeviewRef={codeviewRef}
                         visible={pageNumber == 0} />
                       <InventoryPanel levelInfo={level?.data} visible={pageNumber == 1} />
@@ -369,8 +437,6 @@ function PlayableLevel() {
                   <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
                     <ChatPanel lastLevel={lastLevel}/>
                     <ExercisePanel
-                      impressum={impressum}
-                      closeImpressum={closeImpressum}
                       codeviewRef={codeviewRef} />
                     <InventoryPanel levelInfo={level?.data} />
                   </Split>
@@ -384,25 +450,26 @@ function PlayableLevel() {
   </>
 }
 
-function IntroductionPanel({gameInfo, impressum, closeImpressum}) {
+function IntroductionPanel({gameInfo}) {
+  let { t } = useTranslation()
   const gameId = React.useContext(GameIdContext)
   const {worldId} = useContext(WorldLevelIdContext)
+  const {mobile} = React.useContext(PreferencesContext)
 
-  let text: Array<string> = gameInfo.data?.worlds.nodes[worldId].introduction.split(/\n(\s*\n)+/)
+  let text: Array<string> = t(gameInfo.data?.worlds.nodes[worldId].introduction, {ns: gameId}).split(/\n(\s*\n)+/)
 
   return <div className="chat-panel">
     <div className="chat">
       {text?.filter(t => t.trim()).map(((t, i) =>
         <Hint key={`intro-p-${i}`}
-          hint={{text: t, hidden: false}} step={0} selected={null} toggleSelection={undefined} />
+          hint={{text: t, hidden: false, rawText: t, varNames: []}} step={0} selected={null} toggleSelection={undefined} />
       ))}
-      {impressum ? <Impressum handleClose={closeImpressum} /> : null}
     </div>
-    <div className="button-row">
+    <div className={`button-row${mobile ? ' mobile' : ''}`}>
       {gameInfo.data?.worldSize[worldId] == 0 ?
         <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
         <Button to={`/${gameId}/world/${worldId}/level/1`}>
-          Start&nbsp;<FontAwesomeIcon icon={faArrowRight} />
+          {t("Start")}&nbsp;<FontAwesomeIcon icon={faArrowRight} />
         </Button>
       }
     </div>
@@ -412,34 +479,40 @@ function IntroductionPanel({gameInfo, impressum, closeImpressum}) {
 export default Level
 
 /** The site with the introduction text of a world */
-function Introduction() {
+function Introduction({impressum, setImpressum, toggleInfo, togglePreferencesPopup}) {
+  let { t } = useTranslation()
+
   const gameId = React.useContext(GameIdContext)
-  const {mobile} = useContext(MobileContext)
+  const {mobile} = useContext(PreferencesContext)
 
   const inventory = useLoadInventoryOverviewQuery({game: gameId})
 
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
-  const [impressum, setImpressum] = React.useState(false)
+  const {worldId} = useContext(WorldLevelIdContext)
+
+  let image: string = gameInfo.data?.worlds.nodes[worldId].image
 
-  const closeImpressum = () => {
-    setImpressum(false)
-  }
 
   const toggleImpressum = () => {
     setImpressum(!impressum)
   }
 
   return <>
-    <LevelAppBar isLoading={gameInfo.isLoading} levelTitle="Introduction" impressum={impressum} toggleImpressum={toggleImpressum}/>
+    <LevelAppBar isLoading={gameInfo.isLoading} levelTitle={t("Introduction")} toggleImpressum={toggleImpressum} toggleInfo={toggleInfo} togglePreferencesPopup={togglePreferencesPopup}/>
     {gameInfo.isLoading ?
       <div className="app-content loading"><CircularProgress /></div>
     : mobile ?
-        <IntroductionPanel gameInfo={gameInfo} impressum={impressum} closeImpressum={closeImpressum} />
+        <IntroductionPanel gameInfo={gameInfo} />
       :
         <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level`}>
-          <IntroductionPanel gameInfo={gameInfo} impressum={impressum} closeImpressum={closeImpressum} />
-          <div className="world-image-container empty"></div>
+          <IntroductionPanel gameInfo={gameInfo} />
+          <div className="world-image-container empty center">
+            {image &&
+              <img className="contain" src={path.join("data", gameId, image)} alt="" />
+            }
+
+          </div>
           <InventoryPanel levelInfo={inventory?.data} />
         </Split>
       }
@@ -472,21 +545,32 @@ function Introduction() {
 
 function useLevelEditor(codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection) {
 
-  const connection = React.useContext(ConnectionContext)
   const gameId = React.useContext(GameIdContext)
   const {worldId, levelId} = useContext(WorldLevelIdContext)
 
-
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor|null>(null)
   const [infoProvider, setInfoProvider] = useState<null|InfoProvider>(null)
-  const [infoviewApi, setInfoviewApi] = useState<null|InfoviewApi>(null)
   const [editorConnection, setEditorConnection] = useState<null|EditorConnection>(null)
 
-  // Create Editor
+  const uriStr = `file:///${worldId}/${levelId}`
+  const uri = monaco.Uri.parse(uriStr)
+
+  const inventory: Array<String> = useSelector(selectInventory(gameId))
+  const difficulty: number = useSelector(selectDifficulty(gameId))
+
   useEffect(() => {
+    const model = monaco.editor.createModel(initialCode ?? '', 'lean4', uri)
+    if (onDidChangeContent) {
+      model.onDidChangeContent(() => onDidChangeContent(model.getValue()))
+    }
+
     const editor = monaco.editor.create(codeviewRef.current!, {
+      model,
       glyphMargin: true,
       quickSuggestions: false,
+      lineDecorationsWidth: 5,
+      folding: false,
+      lineNumbers: 'on',
       lightbulb: {
         enabled: true
       },
@@ -498,11 +582,63 @@ function useLevelEditor(codeviewRef, initialCode, initialSelections, onDidChange
         enabled: false
       },
       lineNumbersMinChars: 3,
+      tabSize: 2,
       'semanticHighlighting.enabled': true,
       theme: 'vs-code-theme-converted'
     })
+    if (onDidChangeSelection) {
+      editor.onDidChangeCursorSelection(() => onDidChangeSelection(editor.getSelections()))
+    }
+    if (initialSelections) {
+      console.debug("Initial Selection: ", initialSelections)
+      // BUG: Somehow I get an `invalid arguments` bug here
+      // editor.setSelections(initialSelections)
+    }
+    setEditor(editor)
+    const abbrevRewriter = new AbbreviationRewriter(new AbbreviationProvider(), model, editor)
+
+    const socketUrl = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + '/websocket/' + gameId
+
+    const connectionProvider : IConnectionProvider = {
+      get: async () => {
+        return await new Promise((resolve, reject) => {
+          console.log(`connecting ${socketUrl}`)
+          const websocket = new WebSocket(socketUrl)
+          websocket.addEventListener('error', (ev) => {
+            reject(ev)
+          })
+          websocket.addEventListener('message', (msg) => {
+            // console.log(msg.data)
+          })
+          websocket.addEventListener('open', () => {
+            const socket = toSocket(websocket)
+            const reader = new DisposingWebSocketMessageReader(socket)
+            const writer = new WebSocketMessageWriter(socket)
+            resolve({
+              reader,
+              writer
+            })
+          })
+        })
+      }
+    }
+
+    // Following `vscode-lean4/webview/index.ts`
+    const client = new LeanClient(connectionProvider, showRestartMessage, {inventory, difficulty})
+    const infoProvider = new InfoProvider(client)
+    // const div: HTMLElement = infoviewRef.current!
+    const imports = {
+      '@leanprover/infoview': `${window.location.origin}/index.production.min.js`,
+      'react': `${window.location.origin}/react.production.min.js`,
+      'react/jsx-runtime': `${window.location.origin}/react-jsx-runtime.production.min.js`,
+      'react-dom': `${window.location.origin}/react-dom.production.min.js`,
+      'react-popper': `${window.location.origin}/react-popper.production.min.js`
+    }
+    // loadRenderInfoview(imports, [infoProvider.getApi(), div], setInfoviewApi)
+    setInfoProvider(infoProvider)
 
-    const infoProvider = new InfoProvider(connection.getLeanClient(gameId))
+    // TODO: it looks like we get errors "File Changed" here.
+    client.restart("Lean4Game")
 
     const editorApi = infoProvider.getApi()
 
@@ -547,77 +683,27 @@ function useLevelEditor(codeviewRef, initialCode, initialSelections, onDidChange
 
     setEditor(editor)
     setInfoProvider(infoProvider)
-    setInfoviewApi(infoviewApi)
-
-    return () => { infoProvider.dispose(); editor.dispose() }
-  }, [])
-
-  const {leanClient, leanClientStarted} = useLeanClient(gameId)
-  const uriStr = `file:///${worldId}/${levelId}`
-  const uri = monaco.Uri.parse(uriStr)
 
-  // Create model when level changes
-  useEffect(() => {
-    if (editor && leanClientStarted) {
+    infoProvider.openPreview(editor, infoviewApi)
+    const taskgutter = new LeanTaskGutter(infoProvider.client, editor)
 
-      let model = monaco.editor.getModel(uri)
-      if (!model) {
-        model = monaco.editor.createModel(initialCode, 'lean4', uri)
-      }
-      model.onDidChangeContent(() => onDidChangeContent(model.getValue()))
-      editor.onDidChangeCursorSelection(() => onDidChangeSelection(editor.getSelections()))
-      editor.setModel(model)
-      if (initialSelections) {
-        console.debug("Initial Selection: ", initialSelections)
-        // BUG: Somehow I get an `invalid arguments` bug here
-        // editor.setSelections(initialSelections)
-      }
+    // TODO:
+    // setRestart(() => restart)
 
-      return () => {
-        editorConnection.api.sendClientNotification(uriStr, "textDocument/didClose", {textDocument: {uri: uriStr}})
-        model.dispose(); }
+    return () => {
+      editor.dispose();
+      model.dispose();
+      abbrevRewriter.dispose();
+      taskgutter.dispose();
+      infoProvider.dispose();
+      client.dispose();
     }
-  }, [editor, levelId, connection, leanClientStarted])
-
-
-  useEffect(() => {
-    if (editor && leanClientStarted) {
-
-      let model = monaco.editor.getModel(uri)
-      infoviewApi.serverRestarted(leanClient.initializeResult)
-
-      infoProvider.openPreview(editor, infoviewApi)
-
-      const taskGutter = new LeanTaskGutter(infoProvider.client, editor)
-      const abbrevRewriter = new AbbreviationRewriter(new AbbreviationProvider(), model, editor)
+  }, [gameId, worldId, levelId])
 
-      return () => { abbrevRewriter.dispose(); taskGutter.dispose(); }
-    }
-  }, [editor, connection, leanClientStarted])
+  const showRestartMessage = () => {
+    // setRestartMessage(true)
+    console.log("TODO: SHOW RESTART MESSAGE")
+  }
 
   return {editor, infoProvider, editorConnection}
 }
-
-/** Open all files in this world on the server so that they will load faster when accessed */
-function useLoadWorldFiles(worldId) {
-  const gameId = React.useContext(GameIdContext)
-  const gameInfo = useGetGameInfoQuery({game: gameId})
-  const store = useStore()
-
-  useEffect(() => {
-    if (gameInfo.data) {
-      const models = []
-      for (let levelId = 1; levelId <= gameInfo.data.worldSize[worldId]; levelId++) {
-        const uri = monaco.Uri.parse(`file:///${worldId}/${levelId}`)
-        let model = monaco.editor.getModel(uri)
-        if (model) {
-          models.push(model)
-        } else {
-          const code = selectCode(gameId, worldId, levelId)(store.getState())
-          models.push(monaco.editor.createModel(code, 'lean4', uri))
-        }
-      }
-      return () => { for (let model of models) { model.dispose() } }
-    }
-  }, [gameInfo.data, worldId])
-}

client/src/components/popup/erase.tsx

@@ -0,0 +1,61 @@
+/**
+ * @fileOverview
+*/
+import * as React from 'react'
+import { useSelector } from 'react-redux'
+import { GameIdContext } from '../../app'
+import { useAppDispatch } from '../../hooks'
+import { deleteProgress, selectProgress } from '../../state/progress'
+import { downloadFile } from '../world_tree'
+import { Button } from '../button'
+import { Trans, useTranslation } from 'react-i18next'
+
+/** download the current progress (i.e. what's saved in the browser store) */
+export function downloadProgress(gameId: string, gameProgress: any, ev: React.MouseEvent) {
+  ev.preventDefault()
+  downloadFile({
+    data: JSON.stringify(gameProgress, null, 2),
+    fileName: `lean4game-${gameId}-${new Date().toLocaleDateString()}.json`,
+    fileType: 'text/json',
+  })
+}
+
+/** Pop-up to delete game progress.
+ *
+ * `handleClose` is the function to close it again because it's open/closed state is
+ * controlled by the containing element.
+ */
+export function ErasePopup ({handleClose}) {
+  let { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+  const gameProgress = useSelector(selectProgress(gameId))
+  const dispatch = useAppDispatch()
+
+  const eraseProgress = () => {
+    dispatch(deleteProgress({game: gameId}))
+    handleClose()
+  }
+
+  const downloadAndErase = (ev) => {
+    downloadProgress(gameId, gameProgress, ev)
+    eraseProgress()
+  }
+
+  return <div className="modal-wrapper">
+  <div className="modal-backdrop" onClick={handleClose} />
+  <div className="modal">
+    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+    <h2>{t("Delete Progress?")}</h2>
+    <Trans>
+      <p>Do you want to delete your saved progress irreversibly?</p>
+      <p>
+        (This deletes your proofs and your collected inventory.
+        Saves from other games are not deleted.)
+      </p>
+    </Trans>
+    <Button onClick={eraseProgress} to="">{t("Delete")}</Button>
+    <Button onClick={downloadAndErase} to="">{t("Download & Delete")}</Button>
+    <Button onClick={handleClose} to="">{t("Cancel")}</Button>
+  </div>
+</div>
+}

client/src/components/popup/game_info.tsx

@@ -0,0 +1,28 @@
+/**
+ * @fileOverview
+*/
+import * as React from 'react'
+import { Typography } from '@mui/material'
+import Markdown from '../markdown'
+import { useTranslation } from 'react-i18next'
+import { GameIdContext } from '../../app'
+
+/** Pop-up that is displaying the Game Info.
+ *
+ * `handleClose` is the function to close it again because it's open/closed state is
+ * controlled by the containing element.
+ */
+export function InfoPopup ({info, handleClose}: {info: string, handleClose: () => void}) {
+  let { t } = useTranslation()
+  const gameId = React.useContext(GameIdContext)
+
+  return <div className="modal-wrapper">
+  <div className="modal-backdrop" onClick={handleClose} />
+  <div className="modal">
+    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+    <Typography variant="body1" component="div" className="welcome-text">
+      <Markdown>{t(info, {ns: gameId})}</Markdown>
+    </Typography>
+  </div>
+</div>
+}

client/src/components/popup/preferences.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react'
+import { Input, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material'
+import Markdown from '../markdown'
+import { Switch, Button, ButtonGroup } from '@mui/material';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+import lean4gameConfig from '../../config.json'
+
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+import { IPreferencesContext, PreferencesContext } from "../infoview/context"
+import ReactCountryFlag from 'react-country-flag';
+import { useTranslation } from 'react-i18next';
+
+export function PreferencesPopup({ handleClose }: { handleClose: () => void }) {
+  let { t } = useTranslation()
+  const {layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage} = React.useContext(PreferencesContext)
+
+  const marks = [
+    {
+      value: 0,
+      label: t('Mobile'),
+      key: "mobile"
+    },
+    {
+      value: 1,
+      label: t('Auto'),
+      key: "auto"
+    },
+    {
+      value: 2,
+      label: t('Desktop'),
+      key: "desktop"
+    },
+  ];
+
+  const handlerChangeLayout = (_: Event, value: number) => {
+    setLayout(marks[value].key as IPreferencesContext["layout"])
+  }
+
+  const handlerChangeLanguage = (ev: SelectChangeEvent<string>) => {
+    setLanguage(ev.target.value as IPreferencesContext["language"])
+  }
+
+  return <div className="modal-wrapper">
+    <div className="modal-backdrop" onClick={handleClose} />
+    <div className="modal">
+      <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+      <Typography variant="body1" component="div" className="settings">
+        <div className='preferences-category'>
+          <div className='category-title'>
+            <h3>{t("Language")}</h3>
+          </div>
+          <div className='preferences-item first leave-left-gap'>
+            <FormControlLabel
+              control={
+                <Box sx={{ width: 300 }}>
+                  <Select
+                    value={language}
+                    label={t("Language")}
+                    onChange={handlerChangeLanguage}>
+                      {lean4gameConfig.languages.map(lang => {return <MenuItem key={`menu-item-lang-${lang.iso}`} value={lang.iso}><ReactCountryFlag countryCode={lang.flag}/>&nbsp;{lang.name}</MenuItem>})}
+                  </Select>
+                </Box>
+              }
+              label=""
+            />
+          </div>
+        </div>
+        <div className='preferences-category'>
+          <div className='category-title'>
+            <h3>{t("Layout")}</h3>
+          </div>
+          <div className='preferences-item first leave-left-gap'>
+            <FormControlLabel
+              control={
+                <Box sx={{ width: 300 }}>
+                  <Slider
+                    aria-label={t("Always visible")}
+                    value={marks.find(item => item.key === layout).value}
+                    step={1}
+                    marks={marks}
+                    max={2}
+                    sx={{
+                      '& .MuiSlider-track': { display: 'none', },
+                    }}
+                    onChange={handlerChangeLayout}
+                  />
+                </Box>
+              }
+              label=""
+            />
+          </div>
+        </div>
+
+        <div className='preferences-category tail-category'>
+          <div className='preferences-item'>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={isSavePreferences}
+                  onChange={() => setIsSavePreferences(!isSavePreferences)}
+                  name="checked"
+                  color="primary"
+                />
+              }
+              label={t("Save my settings (in the browser store)")}
+              labelPlacement="end"
+            />
+          </div>
+        </div>
+      </Typography>
+    </div>
+  </div>
+}

client/src/components/popup/privacy_policy.tsx

@@ -9,9 +9,11 @@ import * as React from 'react'
  *
  * `handleClose` is the function to close it again because it's open/closed state is
  * controlled by the containing element.
+ *
+ * Note: Do not translate the Impressum!
  */
 export function PrivacyPolicyPopup ({handleClose}: {handleClose: () => void}) {
-  return <div className="modal-wrapper">
+  return <div className="privacy-policy modal-wrapper">
   <div className="modal-backdrop" onClick={handleClose} />
   <div className="modal">
     <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
@@ -31,7 +33,7 @@ export function PrivacyPolicyPopup ({handleClose}: {handleClose: () => void}) {
     <p>Our server is located in Germany.</p>
     <p>
       <strong>Contact information:</strong><br />
-      Jon Eugster<br />
+      Alexander Bentkamp, Jon Eugster<br />
       Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
       Universitätsstr. 1<br />
       40225 Düsseldorf<br />
@@ -39,68 +41,21 @@ export function PrivacyPolicyPopup ({handleClose}: {handleClose: () => void}) {
       +49 211 81-12173<br />
       <a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster">Contact Details</a>
     </p>
-  </div>
-</div>
-}
-
-export const PrivacyPolicy: React.FC = () => {
-  const [open, setOpen] = React.useState(false)
-  const handleOpen = () => setOpen(true)
-  const handleClose = () => setOpen(false)
-  return (
-    <>
-      <div className="privacy" onClick={handleOpen} title="Privacy Policy &amp; Impressum">
-        <FontAwesomeIcon icon={faShield} />
-        <p className="p1">legal</p>
-        <p className="p2">notes</p>
-      </div>
-      {open ? <PrivacyPolicyPopup handleClose={handleClose} /> : null}
-    </>
-  )
-}
-
-export function Impressum({handleClose}) {
-  return <div className="impressum">
-    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
-    <h2>Funding</h2>
-    <p>
-      This Lean game engine has been developed as part of the
-      project <a href="https://hhu-adam.github.io/" target="_blank">ADAM: Anticipating the Digital
-      Age of Mathematics</a> at
-      Heinrich-Heine-Universität Düsseldorf. It is funded by
-      the <i>Stiftung Innovation in der Hochschullehre</i> as part of project <i>Freiraum 2022</i>.
-    </p>
-
-    <h2>Development</h2>
+    <h2>Development &amp; Funding</h2>
     <p>
-      The source code is <a href="https://github.com/leanprover-community/lean4game" target="_blank">available on Github</a>.
+      The source code of this Lean game engine
+      is <a href="https://github.com/leanprover-community/lean4game" target="_blank">available on Github</a>.
       If you experience any problems, please
       file an <a href="https://github.com/leanprover-community/lean4game/issues" target="_blank">Issue on Github</a> or
       get directly in contact.
     </p>
-    <h2>Privacy Policy &amp; Impressum</h2>
     <p>
-      Our server collects metadata (such as IP address, browser, operating system)
-      and the data that the user enters into the editor. The data is used to
-      compute the Lean output and display it to the user. The information will be stored
-      as long as the user stays on our website and will be deleted immediately afterwards.
-      We keep logs to improve our software, but the contained data is anonymised.
-    </p>
-    <p>
-      We do not use cookies, but your game progress is stored in the browser storage
-      as site data. Your game progress is not saved on the server; if you delete
-      your browser storage, it is completely gone.
-    </p>
-    <p>Our server is located in Germany.</p>
-    <p>
-      <strong>Contact information:</strong><br />
-      Jon Eugster<br />
-      Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
-      Universitätsstr. 1<br />
-      40225 Düsseldorf<br />
-      Germany<br />
-      +49 211 81-12173<br />
-      <a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster">Contact Details</a>
+      The game engine has been developed as part of the
+      project <a href="https://hhu-adam.github.io/" target="_blank">ADAM: Anticipating the Digital
+      Age of Mathematics</a> at
+      Heinrich-Heine-Universität Düsseldorf. It is funded by
+      the <i>Stiftung Innovation in der Hochschullehre</i> as part of project <i>Freiraum 2022</i>.
     </p>
   </div>
+</div>
 }

client/src/components/popup/rules_help.tsx

@@ -0,0 +1,60 @@
+/**
+ * @fileOverview
+*/
+import * as React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+
+/** Pop-up that is displayed when opening the help explaining the game rules.
+ *
+ * `handleClose` is the function to close it again because it's open/closed state is
+ * controlled by the containing element.
+ */
+export function RulesHelpPopup ({handleClose}: {handleClose: () => void}) {
+  const { t } = useTranslation()
+
+  return <div className="privacy-policy modal-wrapper">
+  <div className="modal-backdrop" onClick={handleClose} />
+  <div className="modal">
+    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+    <h2>{t("Game Rules")}</h2>
+    <Trans>
+      <p>
+        Game rules determine if it is allowed to skip levels and if the games runs checks to only
+        allow unlocked tactics and theorems in proofs.
+      </p>
+      <p>
+        Note: "Unlocked" tactics (or theorems) are determined by two things: The set of minimal
+        tactics needed to solve a level, plus any tactics you unlocked in another level. That means
+        if you unlock <code>simp</code> in a level, you can use it henceforth in any level.
+      </p>
+      <p>The options are:</p>
+    </Trans>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col"></th>
+          <th scope="col">{t("levels")}</th>
+          <th scope="col">{t("tactics")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">{t("regular")}</th>
+          <td>🔐</td>
+          <td>🔐</td>
+        </tr>
+        <tr>
+          <th scope="row">{t("relaxed")}</th>
+          <td>🔓</td>
+          <td>🔐</td>
+        </tr>
+        <tr>
+          <th scope="row">{t("none")}</th>
+          <td>🔓</td>
+          <td>🔓</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+}

client/src/components/popup/upload.tsx

@@ -0,0 +1,75 @@
+/**
+ * @fileOverview
+*/
+import * as React from 'react'
+import { useSelector } from 'react-redux'
+import { GameIdContext } from '../../app'
+import { useAppDispatch } from '../../hooks'
+import { GameProgressState, loadProgress, selectProgress } from '../../state/progress'
+import { downloadFile } from '../world_tree'
+import { Button } from '../button'
+import { Trans, useTranslation } from 'react-i18next'
+
+/** Pop-up that is displaying the Game Info.
+ *
+ * `handleClose` is the function to close it again because it's open/closed state is
+ * controlled by the containing element.
+ */
+export function UploadPopup ({handleClose}) {
+  let { t } = useTranslation()
+
+  const [file, setFile] = React.useState<File>();
+  const gameId = React.useContext(GameIdContext)
+  const gameProgress = useSelector(selectProgress(gameId))
+  const dispatch = useAppDispatch()
+
+  const handleFileChange = (e) => {
+    if (e.target.files) {
+      setFile(e.target.files[0])
+    }
+  }
+
+  /** Upload progress from a  */
+  const uploadProgress = (e) => {
+    if (!file) {return}
+    const fileReader = new FileReader()
+    fileReader.readAsText(file, "UTF-8")
+    fileReader.onload = (e) => {
+      const data = JSON.parse(e.target.result.toString()) as GameProgressState
+      console.debug("Json Data", data)
+      dispatch(loadProgress({game: gameId, data: data}))
+    }
+    handleClose()
+  }
+
+  /** Download the current progress (i.e. what's saved in the browser store) */
+  const downloadProgress = (e) => {
+    e.preventDefault()
+    downloadFile({
+      data: JSON.stringify(gameProgress, null, 2),
+      fileName: `lean4game-${gameId}-${new Date().toLocaleDateString()}.json`,
+      fileType: 'text/json',
+    })
+  }
+
+
+  return <div className="modal-wrapper">
+  <div className="modal-backdrop" onClick={handleClose} />
+  <div className="modal">
+    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+    <h2>{t("Upload Saved Progress")}</h2>
+    <Trans>
+      <p>Select a JSON file with the saved game progress to load your progress.</p>
+
+      <p><b>Warning:</b> This will delete your current game progress!
+        Consider <a className="download-link" onClick={downloadProgress} >downloading your current progress</a> first!
+      </p>
+    </Trans>
+    <p>
+      <input type="file" onChange={handleFileChange}/>
+    </p>
+
+    <Button to="" onClick={uploadProgress}>{t("Load selected file")}</Button>
+  </div>
+</div>
+}

client/src/components/welcome.tsx

@@ -1,53 +1,57 @@
 import * as React from 'react'
-import { useState, useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useEffect } from 'react'
 import Split from 'react-split'
-import { Box, Typography, CircularProgress } from '@mui/material'
+import { Box, CircularProgress } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGlobe, faBook, faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 
 import { GameIdContext } from '../app'
-import { useAppDispatch } from '../hooks'
-import { GameProgressState, changedOpenedIntro, deleteProgress, loadProgress, selectOpenedIntro, selectProgress } from '../state/progress'
+import { useAppDispatch, useAppSelector } from '../hooks'
+import { changedOpenedIntro, selectOpenedIntro } from '../state/progress'
 import { useGetGameInfoQuery, useLoadInventoryOverviewQuery } from '../state/api'
 import { Button } from './button'
-import { MobileContext } from './infoview/context'
+import { PreferencesContext } from './infoview/context'
 import { InventoryPanel } from './inventory'
-import Markdown from './markdown'
-import {PrivacyPolicyPopup} from './privacy_policy'
-import { WorldTreePanel, downloadFile } from './world_tree'
-
-import './welcome.css'
+import { ErasePopup } from './popup/erase'
+import { InfoPopup } from './popup/game_info'
+import { PrivacyPolicyPopup } from './popup/privacy_policy'
+import { RulesHelpPopup } from './popup/rules_help'
+import { UploadPopup } from './popup/upload'
+import { PreferencesPopup} from "./popup/preferences"
+import { WorldTreePanel } from './world_tree'
+
+import '../css/welcome.css'
 import { WelcomeAppBar } from './app_bar'
 import { Hint } from './hints'
+import i18next from 'i18next'
+import { useTranslation } from 'react-i18next'
+
 
-/** The panel showing the game's introduction text */
-function IntroductionPanel({introduction}: {introduction: string}) {
-  const {mobile, setPageNumber} = React.useContext(MobileContext)
+/** the panel showing the game's introduction text */
+function IntroductionPanel({introduction, setPageNumber}: {introduction: string, setPageNumber}) {
+  const {mobile} = React.useContext(PreferencesContext)
   const gameId = React.useContext(GameIdContext)
+
+  let { t } = useTranslation()
+
   const dispatch = useAppDispatch()
 
   // TODO: I left the setup for splitting up the introduction in place, but if it's not needed
   // then this can be simplified.
 
   // let text: Array<string> = introduction.split(/\n(\s*\n)+/)
-  let text: Array<string> = introduction ? [introduction] : []
+  let text: Array<string> = introduction ? [t(introduction, {ns : gameId})] : []
 
   return <div className="column chat-panel">
     <div className="chat">
       {text?.map(((t, i) =>
         t.trim() ?
           <Hint key={`intro-p-${i}`}
-            hint={{text: t, hidden: false}}
+            hint={{text: t, hidden: false, rawText: t, varNames: []}}
             step={0} selected={null} toggleSelection={undefined} />
         : <></>
       ))}
     </div>
-    {/* <Typography variant="body1" component="div" className="welcome-text">
-          <h1>{title}</h1>
-          <Markdown>{introduction}</Markdown>
-        </Typography>
-    */}
     {mobile &&
       <div className="button-row">
         <Button className="btn" to=""
@@ -62,142 +66,42 @@ function IntroductionPanel({introduction}: {introduction: string}) {
   </div>
 }
 
-export function InfoPopup ({info, handleClose}: {info: string, handleClose: () => void}) {
-  return <div className="modal-wrapper">
-  <div className="modal-backdrop" onClick={handleClose} />
-  <div className="modal">
-    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
-    <Typography variant="body1" component="div" className="welcome-text">
-      <Markdown>{info}</Markdown>
-    </Typography>
-  </div>
-</div>
-}
-
-
-function ErasePopup ({handleClose}) {
+/** main page of the game showing among others the tree of worlds/levels */
+function Welcome() {
   const gameId = React.useContext(GameIdContext)
-  const gameProgress = useSelector(selectProgress(gameId))
-  const dispatch = useAppDispatch()
-
-  /** Download the current progress (i.e. what's saved in the browser store) */
-  const downloadProgress = (e) => {
-    e.preventDefault()
-    downloadFile({
-      data: JSON.stringify(gameProgress, null, 2),
-      fileName: `lean4game-${gameId}-${new Date().toLocaleDateString()}.json`,
-      fileType: 'text/json',
-    })
-  }
-
-  const eraseProgress = () => {
-    dispatch(deleteProgress({game: gameId}))
-    handleClose()
-  }
-
-  const downloadAndErase = (e) => {
-    downloadProgress(e)
-    eraseProgress()
-  }
-
-  return <div className="modal-wrapper">
-  <div className="modal-backdrop" onClick={handleClose} />
-  <div className="modal">
-    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
-    <h2>Delete Progress?</h2>
-
-    <p>Do you want to delete your saved progress irreversibly?</p>
-    <p>
-      (This deletes your proofs and your collected inventory.
-      Saves from other games are not deleted.)
-    </p>
-
-    <Button onClick={eraseProgress} to="">Delete</Button>
-    <Button onClick={downloadAndErase} to="">Download & Delete</Button>
-    <Button onClick={handleClose} to="">Cancel</Button>
-  </div>
-</div>
-}
 
-function UploadPopup ({handleClose}) {
-  const [file, setFile] = React.useState<File>();
-  const gameId = React.useContext(GameIdContext)
-  const gameProgress = useSelector(selectProgress(gameId))
-  const dispatch = useAppDispatch()
+  // Load the namespace of the game
+  i18next.loadNamespaces(gameId)
 
-  const handleFileChange = (e) => {
-    if (e.target.files) {
-      setFile(e.target.files[0])
-    }
-  }
-
-  /** Upload progress from a  */
-  const uploadProgress = (e) => {
-    if (!file) {return}
-    const fileReader = new FileReader()
-    fileReader.readAsText(file, "UTF-8")
-    fileReader.onload = (e) => {
-      const data = JSON.parse(e.target.result.toString()) as GameProgressState
-      console.debug("Json Data", data)
-      dispatch(loadProgress({game: gameId, data: data}))
-    }
-    handleClose()
-  }
+  const {mobile} = React.useContext(PreferencesContext)
+  const {layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage} = React.useContext(PreferencesContext)
 
-  /** Download the current progress (i.e. what's saved in the browser store) */
-  const downloadProgress = (e) => {
-    e.preventDefault()
-    downloadFile({
-      data: JSON.stringify(gameProgress, null, 2),
-      fileName: `lean4game-${gameId}-${new Date().toLocaleDateString()}.json`,
-      fileType: 'text/json',
-    })
-  }
-
-
-  return <div className="modal-wrapper">
-  <div className="modal-backdrop" onClick={handleClose} />
-  <div className="modal">
-    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
-    <h2>Upload Saved Progress</h2>
-
-    <p>Select a JSON file with the saved game progress to load your progress.</p>
-
-    <p><b>Warning:</b> This will delete your current game progress!
-      Consider <a className="download-link" onClick={downloadProgress} >downloading your current progress</a> first!</p>
-
-    <input type="file" onChange={handleFileChange}/>
-
-    <Button to="" onClick={uploadProgress}>Load selected file</Button>
-  </div>
-</div>
-}
-
-/** main page of the game showing amoung others the tree of worlds/levels */
-function Welcome() {
-  const gameId = React.useContext(GameIdContext)
-  const {mobile, pageNumber, setPageNumber} = React.useContext(MobileContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
   const inventory = useLoadInventoryOverviewQuery({game: gameId})
 
-  // impressum pop-up
-  const [impressum, setImpressum] = React.useState(false)
-  function closeImpressum() {setImpressum(false)}
-  function toggleImpressum() {setImpressum(!impressum)}
+  // For mobile only
+  const openedIntro = useAppSelector(selectOpenedIntro(gameId))
+  const [pageNumber, setPageNumber] = React.useState(openedIntro ? 1 : 0)
 
+  // pop-ups
+  const [eraseMenu, setEraseMenu] = React.useState(false)
+  const [impressum, setImpressum] = React.useState(false)
   const [info, setInfo] = React.useState(false)
-  function closeInfo() {setInfo(false)}
-  function toggleInfo() {setInfo(!impressum)}
-
-
-  /* state variables to toggle the pop-up menus */
-  const [eraseMenu, setEraseMenu] = React.useState(false);
-  const openEraseMenu = () => setEraseMenu(true);
-  const closeEraseMenu = () => setEraseMenu(false);
-  const [uploadMenu, setUploadMenu] = React.useState(false);
-  const openUploadMenu = () => setUploadMenu(true);
-  const closeUploadMenu = () => setUploadMenu(false);
-
+  const [rulesHelp, setRulesHelp] = React.useState(false)
+  const [uploadMenu, setUploadMenu] = React.useState(false)
+  const [preferencesPopup, setPreferencesPopup] = React.useState(false)
+
+  function closeEraseMenu()   {setEraseMenu(false)}
+  function closeImpressum()   {setImpressum(false)}
+  function closeInfo()        {setInfo(false)}
+  function closeRulesHelp()   {setRulesHelp(false)}
+  function closeUploadMenu()  {setUploadMenu(false)}
+  function closePreferencesPopup() {setPreferencesPopup(false)}
+  function toggleEraseMenu()  {setEraseMenu(!eraseMenu)}
+  function toggleImpressum()  {setImpressum(!impressum)}
+  function toggleInfo()       {setInfo(!info)}
+  function toggleUploadMenu() {setUploadMenu(!uploadMenu)}
+  function togglePreferencesPopup() {setPreferencesPopup(!preferencesPopup)}
 
   // set the window title
   useEffect(() => {
@@ -211,31 +115,36 @@ function Welcome() {
       <CircularProgress />
     </Box>
   : <>
-    <WelcomeAppBar gameInfo={gameInfo.data} toggleImpressum={toggleImpressum} openEraseMenu={openEraseMenu}
-      openUploadMenu={openUploadMenu} toggleInfo={toggleInfo} />
+    <WelcomeAppBar pageNumber={pageNumber} setPageNumber={setPageNumber} gameInfo={gameInfo.data} toggleImpressum={toggleImpressum}
+      toggleEraseMenu={toggleEraseMenu} toggleUploadMenu={toggleUploadMenu}
+      toggleInfo={toggleInfo} togglePreferencesPopup={togglePreferencesPopup}/>
     <div className="app-content">
       { mobile ?
           <div className="welcome mobile">
             {(pageNumber == 0 ?
-              <IntroductionPanel introduction={gameInfo.data?.introduction} />
+              <IntroductionPanel introduction={gameInfo.data?.introduction} setPageNumber={setPageNumber} />
             : pageNumber == 1 ?
-              <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize} />
+              <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize}
+                rulesHelp={rulesHelp} setRulesHelp={setRulesHelp} />
             :
               <InventoryPanel levelInfo={inventory?.data} />
             )}
           </div>
         :
           <Split className="welcome" minSize={0} snapOffset={200}  sizes={[25, 50, 25]}>
-            <IntroductionPanel introduction={gameInfo.data?.introduction} />
-            <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize} />
+            <IntroductionPanel introduction={gameInfo.data?.introduction} setPageNumber={setPageNumber} />
+            <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize}
+              rulesHelp={rulesHelp} setRulesHelp={setRulesHelp} />
             <InventoryPanel levelInfo={inventory?.data} />
           </Split>
       }
     </div>
     {impressum ? <PrivacyPolicyPopup handleClose={closeImpressum} /> : null}
+    {rulesHelp ? <RulesHelpPopup handleClose={closeRulesHelp} /> : null}
     {eraseMenu? <ErasePopup handleClose={closeEraseMenu}/> : null}
     {uploadMenu? <UploadPopup handleClose={closeUploadMenu}/> : null}
     {info ? <InfoPopup info={gameInfo.data?.info} handleClose={closeInfo}/> : null}
+    {preferencesPopup ? <PreferencesPopup handleClose={closePreferencesPopup} /> : null}
   </>
 }
 

client/src/components/world_tree.tsx

@@ -8,16 +8,16 @@ import { Slider } from '@mui/material'
 import cytoscape, { LayoutOptions } from 'cytoscape'
 import klay from 'cytoscape-klay'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDownload, faUpload, faEraser, faGlobe, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { faXmark, faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
 
 import { GameIdContext } from '../app'
 import { useAppDispatch } from '../hooks'
-import { deleteProgress, selectProgress, loadProgress, GameProgressState,
-  selectDifficulty, changedDifficulty, selectCompleted } from '../state/progress'
+import { selectDifficulty, changedDifficulty, selectCompleted } from '../state/progress'
 import { store } from '../state/store'
-import { Button } from './button'
 
-import './world_tree.css'
+import '../css/world_tree.css'
+import { PreferencesContext } from './infoview/context'
+import { useTranslation } from 'react-i18next'
 
 // Settings for the world tree
 cytoscape.use( klay )
@@ -28,8 +28,11 @@ const lineWidth = 10      //
 const ds = .75  // scale the resulting svg image
 
 const NMIN = 5   // min. worldsize
-const NLABEL = 9 // max. world size to display label below the world
+const NLABEL = 8 // max. world size to display label below the world
 const NMAX = 16  // max. world size. Level icons start spiraling out if the world has more levels.
+const NSPIRAL = 12 // world size if NMAX has been passed and need to spiral.
+
+const MINFONT = 12
 
 // colours
 const grey = '#999'
@@ -54,8 +57,9 @@ export function LevelIcon({ world, level, position, completed, unlocked, worldSi
 
   const N = Math.max(worldSize, NMIN)
 
-  // divide circle into `N+2` equal pieces
-  const beta = 2 * Math.PI / Math.min(N+2, (NMAX+1))
+  // divide circle into `N+2` equal pieces.
+  // only for non-spiraling case
+  const beta = 2 * Math.PI / Math.min(N+2, ((N < (NMAX+1) ? NMAX : NSPIRAL)+1))
 
   // We want distance between two level icons to be `2.2*r`, therefore:
   // Sinus-Satz: (1.1*r) / sin(β/2) = R / sin(π/2)
@@ -70,19 +74,19 @@ export function LevelIcon({ world, level, position, completed, unlocked, worldSi
    * works fine in tests up to `N=30`.
    */
   function betaSpiral(level) {
-    return 2 * Math.PI / ((NMAX+1) + Math.max(0, (level-2)) / (NMAX+1))
+    return 2 * Math.PI / ((NSPIRAL+1) + 2 * Math.max(0, (level-2)) / (NSPIRAL+1))
   }
 
   const x = N < (NMAX+1) ?
     // normal case
     s * position.x + Math.sin(level * beta) * R :
     // spiraling case
-    s * position.x + Math.sin(level * betaSpiral(level)) * (R + 2*r*(level-1)/(NMAX+1))
+    s * position.x + Math.sin(level * betaSpiral(level)) * (R + 2*r*(level-1)/(NSPIRAL+1))
   const y = N < (NMAX+1) ?
     // normal case
     s * position.y - Math.cos(level * beta) * R :
     // spiraling case
-    s * position.y - Math.cos(level * betaSpiral(level)) * (R + 2*r*(level-1)/(NMAX+1))
+    s * position.y - Math.cos(level * betaSpiral(level)) * (R + 2*r*(level-1)/(NSPIRAL+1))
 
   return (
     <Link to={levelDisabled ? '' : `/${gameId}/world/${world}/level/${level == 1 ? 0 : level}`}
@@ -109,12 +113,15 @@ export function WorldIcon({world, title, position, completedLevels, difficulty,
     difficulty: number,
     worldSize: number
   }) {
+  const { t } = useTranslation()
 
   // See level icons. Match radius computed there minus `1.2*r`
   const N = Math.max(worldSize, NMIN)
-  const betaHalf = Math.PI / Math.min(N+2, (NMAX + 1))
+  const betaHalf = Math.PI / Math.min(N+2, ((N < (NMAX+1) ? NMAX : NSPIRAL) + 1))
   let R = 1.1 * r / Math.sin(betaHalf) - 1.2 * r
 
+  let fontSize = Math.floor(R/4)
+
   // Offset for the labels for small worlds
   let labelOffset = R + 2.5 * r
 
@@ -137,13 +144,15 @@ export function WorldIcon({world, title, position, completedLevels, difficulty,
       className={playable ? '' : 'disabled'}>
     <circle className="world-circle" cx={s*position.x} cy={s*position.y} r={R}
         fill={completed ? green : unlocked ? blue : grey}/>
-    {worldSize > NLABEL ?
+    { false ? // fontSize >= MINFONT ?
+      // NOTE: This code would display the world names inside the bubble, but currently
+      //       it isn't used.
       // Label for large worlds
       <foreignObject className="world-title-wrapper" x={s*position.x} y={s*position.y}
           width={1.42*R} height={1.42*R} transform={"translate("+ -.71*R +","+ -.71*R +")"}>
         <div className={unlocked && !completed ? "playable-world" : ''}>
-          <p className="world-title" style={{fontSize: Math.floor(R/4) + "px"}}>
-            {title ? title : world}
+          <p className="world-title" style={{fontSize: fontSize + "px"}}>
+            {title ? t(title, {ns: gameId}) : world}
           </p>
         </div>
       </foreignObject>
@@ -153,8 +162,8 @@ export function WorldIcon({world, title, position, completedLevels, difficulty,
           width='150px' height='2em' style={{overflow: 'visible'}}
           >
         <div className='world-label' style={{backgroundColor: completed ? darkgreen : unlocked ? darkblue : darkgrey}}>
-          <p className='world-title'>
-            {title ? title : world}
+          <p className='world-title' style={{fontSize: MINFONT + "px"}}>
+            {title ? t(title, {ns: gameId}) : world}
           </p>
         </div>
       </foreignObject>}
@@ -187,24 +196,30 @@ export const downloadFile = ({ data, fileName, fileType } :
 }
 
 /** The menu that is shown next to the world selection graph */
-export function WorldSelectionMenu() {
+export function WorldSelectionMenu({rulesHelp, setRulesHelp}) {
+  const { t, i18n } = useTranslation()
   const gameId = React.useContext(GameIdContext)
   const difficulty = useSelector(selectDifficulty(gameId))
   const dispatch = useAppDispatch()
+  const { mobile } = React.useContext(PreferencesContext)
+
 
   function label(x : number) {
-    return x == 0 ? 'none' : x == 1 ? 'relaxed' : 'regular'
+    return x == 0 ? t("none") : x == 1 ? t("relaxed") : t("regular")
   }
 
-  return <nav className="world-selection-menu">
+
+  return <nav className={`world-selection-menu${mobile ? '' : ' desktop'}`}>
     <div className="slider-wrap">
-      <span className="difficulty-label">Game Rules</span>
+      <span className="difficulty-label">{t("Rules")}
+        <FontAwesomeIcon icon={rulesHelp ? faXmark : faCircleQuestion} className='helpButton' onClick={() => (setRulesHelp(!rulesHelp))}/>
+      </span>
       <Slider
         orientation="vertical"
-        title="Game Rules:&#10;- regular: 🔐 levels, 🔐 tactics&#10;- relaxed: 🔓 levels, 🔐 tactics&#10;- none: 🔓 levels, 🔓 tactics"
+        title={t("Game Rules")}
         min={0} max={2}
-        aria-label="Game Rules"
-        defaultValue={difficulty}
+        aria-label={t("Game Rules")}
+        value={difficulty}
         marks={[
           {value: 0, label: label(0)},
           {value: 1, label: label(1)},
@@ -256,9 +271,12 @@ export function computeWorldLayout(worlds) {
 }
 
 
-export function WorldTreePanel({worlds, worldSize}:
+export function WorldTreePanel({worlds, worldSize, rulesHelp, setRulesHelp}:
   { worlds: any,
-    worldSize: any}) {
+    worldSize: any,
+    rulesHelp: boolean,
+    setRulesHelp: any,
+  }) {
   const gameId = React.useContext(GameIdContext)
   const difficulty = useSelector(selectDifficulty(gameId))
   const {nodes, bounds}: any = worlds ? computeWorldLayout(worlds) : {nodes: []}
@@ -342,7 +360,7 @@ export function WorldTreePanel({worlds, worldSize}:
   let dx = bounds ? s*(bounds.x2 - bounds.x1) + 2*padding : null
 
   return <div className="column">
-      <WorldSelectionMenu />
+      <WorldSelectionMenu rulesHelp={rulesHelp} setRulesHelp={setRulesHelp} />
       <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
           width={bounds ? `${ds * dx}` : ''}
           viewBox={bounds ? `${s*bounds.x1 - padding} ${s*bounds.y1 - padding} ${dx} ${s*(bounds.y2 - bounds.y1) + 2 * padding}` : ''}

client/src/config.json

@@ -0,0 +1,37 @@
+{
+  "allGames": [
+    "leanprover-community/nng4",
+    "hhu-adam/robo",
+    "djvelleman/stg4",
+    "trequetrum/lean4game-logic",
+    "jadabouhawili/knightsandknaves-lean4game"
+  ],
+
+  "languages": [
+    {
+      "iso": "en",
+      "flag": "GB",
+      "name": "English"
+    },
+    {
+      "iso": "de",
+      "flag": "DE",
+      "name": "Deutsch"
+    },
+    {
+      "iso": "zh",
+      "flag": "CN",
+      "name": "中文"
+    },
+    {
+      "iso": "es",
+      "flag": "ES",
+      "name": "Español"
+    },
+    {
+      "iso": "ko",
+      "flag": "KR",
+      "name": "한국어"
+    }
+  ]
+}

client/src/connection.ts

@@ -1,68 +0,0 @@
-/**
- *  @fileOverview todo
- */
-
-import * as React from 'react';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
-import { LeanClient } from 'lean4web/client/src/editor/leanclient';
-
-export class Connection {
-  private game: string = undefined // We only keep a connection to a single game at a time
-  private leanClient: LeanClient = null
-
-  getLeanClient(game): LeanClient {
-    if (this.game !== game) {
-      if (this.leanClient) {
-        this.leanClient.stop() // Stop previous Lean client
-      }
-      this.game = game
-      // Start a new Lean client for the new `gameId`.
-      const socketUrl = ((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + '/websocket/' + game
-      const uri = monaco.Uri.parse('file:///')
-      this.leanClient = new LeanClient(socketUrl, undefined, uri, () => {})
-    }
-
-    return this.leanClient
-  }
-
-  /** If not already started, starts the Lean client. resolves the returned promise as soon as a
-   * Lean client is running.
-   */
-  startLeanClient = (game) => {
-    return new Promise<LeanClient>((resolve) => {
-      const leanClient = this.getLeanClient(game)
-      if (leanClient.isRunning()) {
-        resolve(leanClient)
-      } else {
-        if (!leanClient.isStarted()) {
-          leanClient.start()
-        }
-        leanClient.restarted(() => {
-          // This keep alive message is not recognized by the server,
-          // but it makes sure that the websocket connection does not
-          // time out after 60 seconds.
-          setInterval(() => {leanClient.sendNotification('$/keepAlive', {}) }, 5000)
-          resolve(leanClient)
-        })
-      }
-    })
-  }
-}
-
-export const connection = new Connection()
-
-export const ConnectionContext = React.createContext(null);
-
-export const useLeanClient = (gameId) => {
-  const leanClient = connection.getLeanClient(gameId)
-  const [leanClientStarted, setLeanClientStarted] = React.useState(leanClient.isStarted())
-
-  React.useEffect(() => {
-    const t1 = leanClient.restarted(() => { console.log("START"); setLeanClientStarted(true) })
-    const t2 = leanClient.stopped(() => { console.log("STOP"); setLeanClientStarted(false) })
-
-    return () => {t1.dispose(); t2.dispose()}
-  }, [leanClient, setLeanClientStarted])
-
-  return {leanClientStarted, leanClient}
-}

client/src/css/app.css

@@ -42,12 +42,6 @@ body {
   border-radius: .3em;
 }
 
-
-/* Hide monaco editor notifications */
-.monaco-workbench > .notifications-toasts.visible {
-  display: none !important;
-}
-
 .loading {
   margin: auto;
   height: 100%;
@@ -108,13 +102,21 @@ em {
   flex: 0;
   background: var(--clr-primary);
   display: flex;
+  position: relative;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   padding: 1.1em;
   filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
   z-index: 2;
 }
 
+.app-bar > .app-bar-left{
+  display: flex;
+  align-items: center;
+  gap: .5em;
+}
+
 .app-bar-title, .app-bar-subtitle {
   color: white;
   font-weight: 500;
@@ -139,3 +141,7 @@ em {
 .markdown ul, .markdown ol {
 	margin:0 1.5em 1.5em 1.5em;
 }
+
+.privacy-policy {
+  z-index: 10;
+}

client/src/css/infoview.css

@@ -41,9 +41,16 @@
 .level-completed {
   font-size: 1.8rem;
   font-weight: 500;
+  padding-left: .5em;
+  padding-right: .5em;
+  padding-top: .2em;
+  padding-bottom: .2em;
+  border-radius: .5em;
+  background-color: #eee;
+
 }
 
-.command-line {
+.typewriter {
   background: var(--clr-primary);
   padding: 0.5em;
   font-family: var(--ff-primary);
@@ -51,17 +58,33 @@
   /* margin: 0.2em 0 0; */
 }
 
-.command-line form {
+.typewriter.disabled{
+  background: #bbb;
+}
+
+.typewriter.disabled .btn-inverted,
+.typewriter.disabled .mtk1 {
+  color: #777;
+}
+
+.typewriter.disabled .typewriter-input-wrapper,
+.typewriter.disabled .monaco-editor,
+.typewriter.disabled .monaco-editor-background,
+.typewriter.disabled .btn-inverted {
+  background-color: #eee;
+}
+
+.typewriter form {
   display: flex;
 }
 
-.command-line button, .undo-button {
+.typewriter button, .undo-button {
   display: block;
   white-space: nowrap;
   flex: 0;
 }
 
-.command-line .command-line-input-wrapper{
+.typewriter .typewriter-input-wrapper{
   min-width: 0;
   flex: 1;
   padding: 0.4em .6em 0;
@@ -71,15 +94,22 @@
   flex-direction: column;
 }
 
-.command-line .command-line-input {
+.typewriter-interface .proof .MuiCircularProgress-root {
+  left: 50%;
+  position: relative;
+  margin-left: -20px;
+  margin-bottom: 0.6em;
+}
+
+.typewriter .typewriter-input {
   flex: 1;
 }
 
 /* Turn off some monaco decorations: */
-.command-line-input .monaco-editor .view-overlays .current-line {
+.typewriter-input .monaco-editor .view-overlays .current-line {
   border: 0;
 }
-.command-line-input .monaco-editor .scroll-decoration {
+.typewriter-input .monaco-editor .scroll-decoration {
   box-shadow: none;
 }
 
@@ -138,7 +168,7 @@
 
 
 /* Push the goals to the bottom for now, until we insert the proof history above. */
-.commandline-interface .content {
+.typewriter-interface .content {
   display: flex;
   flex-direction: column;
   scroll-behavior: smooth;
@@ -149,7 +179,7 @@
   scroll-behavior: smooth;
 }
 
-.commandline-interface .content .tmp-pusher {
+.typewriter-interface .content .tmp-pusher {
   flex: 1;
 }
 
@@ -157,7 +187,22 @@
   background-color: #bbb;
   padding: .5em;
   border-radius: .2em;
-  margin-bottom: 2rem;
+  /* TODO: It seems my browsers merge the margings of the proof steps,
+  so that it only shows once 0.5rem instead of twice. Thus have 1.5 here now.
+  */
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: row;
+}
+
+.exercise .failed-command {
+  background-color: #eee;
+  padding: .5em;
+  border-radius: .2em;
+  /* TODO: It seems my browsers merge the margings of the proof steps,
+  so that it only shows once 0.5rem instead of twice. Thus have 1.5 here now.
+  */
+  margin-bottom: 1.5rem;
   display: flex;
   flex-direction: row;
 }
@@ -173,3 +218,10 @@
 .undo-button {
   color: #888;
 }
+
+.crashed_message {
+  color: #D8000C;
+  font-weight: bold;
+  padding-left: .5em;
+  padding-right: .5em;
+}

client/src/css/inventory.css

@@ -26,7 +26,11 @@
 .inventory .item {
   background: #fff;
   border: solid 1px #777;
-  padding: .1em .5em;
+  padding-left: .5rem;
+  padding-right: 1.0rem;
+  padding-top: .1rem;
+  padding-bottom: .1rem;
+  position: relative;
 }
 
 .inventory .item.locked {
@@ -72,3 +76,21 @@
   color: black;
   border-bottom: 0.3em solid #999;
 }
+
+
+.inventory .item .copy-button {
+	min-width: 3px;
+	min-height: 3px;
+	display: inline-block;
+	color: #ccc;
+	font-size: 0.6em;
+	padding-right: .2rem;
+	vertical-align: top;
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: 100%;
+	width: 1rem;
+	align-items: end;
+	text-align: end;
+}

client/src/css/landing_page.css

@@ -19,7 +19,7 @@ a {
 
 @viewport {
   width: device-width ;
-  zoom: 1.0 ;
+  initial-scale: 1.0 ;
 }
 
 .landing-page {
@@ -36,6 +36,13 @@ a {
   padding-bottom: 80px;
 }
 
+.landing-page-nav {
+  position: relative;
+}
+
+#menu-btn {
+  background-color: unset;
+}
 
 @media screen and (max-width: 440px) {
   .game-list {
@@ -48,6 +55,7 @@ a {
   border: 1px solid rgb(140, 140, 140);
   border-radius: 20px;
   box-shadow: 5px 5px 8px rgb(140, 140, 140);
+  width: 100%;
   max-width: 500px;
   display: flex;
   flex-direction: column;
@@ -181,6 +189,8 @@ footer .link {
 
 .github-link {
   height: 24px; /* TODO: why do I need that? s*/
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .landing-page > section {

client/src/css/level.css

@@ -41,6 +41,20 @@
   padding-right: .5em;
 }
 
+.exercise-statement {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.exercise-statement p {
+  margin: 0;
+}
+
+.exercise-statement .lean-code {
+  color: rgba(0, 32, 90, 0.87);
+  font-size: 12px; /* TODO: is the monaco font-size hardcoded? */
+}
+
 .conclusion {
   padding: 1em;
 }
@@ -218,17 +232,31 @@ td code  {
   height: 100%;
 } */
 
-.commandline-interface {
+.button-row.mobile {
+  margin: .5rem;
+  padding-top: .2rem;
+}
+
+.button-row.mobile .btn {
+  padding: .5em;
+  border-radius: .2em;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+}
+
+
+.typewriter-interface {
   display: flex;
   flex-flow: column;
   height: 100%;
 }
 
-.command-line {
+.typewriter {
   flex: 0 1 auto;
 }
 
-.commandline-interface .content {
+.typewriter-interface .content {
   flex: 1 1 auto;
   overflow-y: scroll;
   padding: 0;
@@ -257,7 +285,7 @@ td code  {
   box-shadow: .0em .0em .4em .1em #8cbbe9;
 }
 
-.exercise .step.selected, .chat .selected {
+.exercise .step.selected .goal-tabs, .chat .selected {
   /* border: 3px solid #5191d1; */
   box-shadow: .0em .0em .4em .1em var(--clr-primary);
 }
@@ -303,11 +331,6 @@ td code  {
   margin-right: 0;
 }
 
-#home-btn {
-  margin-right: .5em;
-  margin-left: 0;
-}
-
 .menu.dropdown .svg-inline--fa {
   width: 1.8rem;
 }
@@ -318,11 +341,32 @@ td code  {
   justify-content: center;
 }
 
-.commandline-interface .content, .world-image-container.empty {
+.typewriter-interface .content, .world-image-container.empty {
   background-color: #eee;
 }
 
-.commandline-interface .proof {
+.world-image-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 0px; /* somehow this has a desired affect, but why? */
+  overflow: hidden;
+}
+
+.world-image-container img.contain {
+  object-fit: contain;
+}
+
+.world-image-container.center {
+  justify-content: center;
+}
+
+
+.world-image-container img.cover {
+  height: 100%;
+  object-fit: cover;
+}
+
+.typewriter-interface .proof {
   background-color: #fff;
 }
 
@@ -330,3 +374,22 @@ td code  {
   min-width: 40px;
   text-align: center;
 }
+
+/* Fixes https://github.com/leanprover-community/lean4game/issues/202 */
+.katex-mathml {
+  display: none;
+}
+
+/* DEBUG */
+/* .proof .step {
+  border: 2px solid rgb(0, 123, 255);
+} */
+
+.nav-btns {
+  height: 2rem;
+}
+
+.nav-btns .language-btn {
+  background: #DDF6FF;
+  text-align: center;
+}

client/src/css/welcome.css

@@ -187,3 +187,15 @@ h5, h6 {
   margin-left: 0.3rem;
   margin-right: 0.3rem;
 }
+
+.preferences-category.tail-category{
+  margin-top: 2em;
+}
+
+.preferences-item.first{
+  margin-top: 1em;
+}
+
+.preferences-item.leave-left-gap{
+  margin-left: 3em;
+}

client/src/css/world_tree.css

@@ -49,8 +49,6 @@ svg .disabled {
 }
 
 .world-selection-menu {
-  padding: .5em 1em;
-  position: absolute;
   right: 1em;
   top: 1em;
   /* margin: 1em; */
@@ -61,6 +59,10 @@ svg .disabled {
   filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
 }
 
+.world-selection-menu.desktop {
+  position: absolute;
+}
+
 .world-selection-menu .btn, .welcome .btn {
   min-width: 5em;
   text-align: center;
@@ -75,7 +77,7 @@ svg .disabled {
   /* width: 100%; */
   height: 7em;
   /* min-width: 16em; */
-  padding-bottom: .8em;
+  padding: .5em 1em 1.3em 1em;
   margin-left: auto;
   margin-right: auto;
 }
@@ -109,3 +111,10 @@ svg .disabled {
   padding: .2em;
   border-radius: .5em;
 }
+
+.world-selection-menu .helpButton {
+  position: absolute;
+  right: .5em;
+  top: .5em;
+  color: var(--clr-primary);
+}

client/src/i18n.ts

@@ -0,0 +1,35 @@
+import i18n from "i18next";
+import Backend from "i18next-http-backend"
+import { initReactI18next } from "react-i18next";
+
+i18n
+.use(initReactI18next)
+.use(Backend)
+.init({
+    ns: ['translation'],
+    backend: {
+      // > see https://github.com/i18next/i18next-http-backend
+      loadPath: function(lngs, namespaces: Array<string>) {
+        if (namespaces[0].startsWith("g/")) {
+          return '/i18n/{{ns}}/{{lng}}/Game.json';
+        } else {
+          return '/locales/{{lng}}/{{ns}}.json';
+        }
+      }
+    },
+    // > language to use, more information here:
+    // > https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    lng: "en",
+    // we use natural language keys, so we don't need a fallback language.
+    fallbackLng: false,
+    // > you can use the i18n.changeLanguage function to change the language manually:
+    // > https://www.i18next.com/overview/api#changelanguage
+    // > if you're using a language detector, do not define the lng option
+    returnEmptyString: false,
+    interpolation: {
+      // > react already safes from xss
+      escapeValue: false
+    }
+  });
+
+  export default i18n;

client/src/index.tsx

@@ -1,31 +1,47 @@
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app';
-import { ConnectionContext, connection } from './connection'
-import { store } from './state/store';
-import { Provider } from 'react-redux';
-import {
-  createHashRouter,
-  RouterProvider,
-  Route,
-} from "react-router-dom";
-import ErrorPage from './components/error_page';
-import Welcome from './components/welcome';
-import LandingPage from './components/landing_page';
-import Level from './components/level';
-import { monacoSetup } from 'lean4web/client/src/monacoSetup';
-import { redirect } from 'react-router-dom';
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './app'
+import { store } from './state/store'
+import { Provider } from 'react-redux'
+import type { RouteObject } from "react-router"
+import { createHashRouter, RouterProvider, Route, redirect } from "react-router-dom"
+import ErrorPage from './components/error_page'
+import Welcome from './components/welcome'
+import LandingPage from './components/landing_page'
+import Level from './components/level'
+import './i18n';
 
-monacoSetup()
+
+
+// If `VITE_LEAN4GAME_SINGLE` is set to true, then `/` should be redirected to
+// `/g/local/game`. This is used for the devcontainer setup
+let single_game = (import.meta.env.VITE_LEAN4GAME_SINGLE == "true")
+let root_object: RouteObject = single_game ? {
+  path: "/",
+  loader: () => redirect("/g/local/game")
+} : {
+  path: "/",
+  element: <App />,
+  errorElement: <ErrorPage />,
+  children: [
+    {
+      path: "/",
+      element: <LandingPage />,
+    }
+  ]
+}
 
 const router = createHashRouter([
+  root_object,
   {
-    path: "/",
-    element: <LandingPage />,
+    // For backwards compatibility
+    path: "/game/nng",
+    loader: () => redirect("/g/leanprover-community/nng4")
   },
   {
-    path: "/game/nng",
-    loader: () => redirect("/g/hhu-adam/NNG4")
+    // For backwards compatibility
+    path: "/g/hhu-adam/NNG4",
+    loader: () => redirect("/g/leanprover-community/nng4")
   },
   {
     path: "/g/:owner/:repo",
@@ -49,9 +65,7 @@ const root = createRoot(container!);
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <ConnectionContext.Provider value={connection}>
-        <RouterProvider router={router} />
-      </ConnectionContext.Provider>
+      <RouterProvider router={router} />
     </Provider>
   </React.StrictMode>
 );

client/src/index_local.tsx

@@ -1,55 +0,0 @@
-// This file is a copy of `index.tsx` where the path "/" is redirected to "/g/local/game".
-// It is used for the dev. setup where there is only one game in a folder called `game`.
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './app';
-import { ConnectionContext, connection } from './connection'
-import { store } from './state/store';
-import { Provider } from 'react-redux';
-import {
-  createHashRouter,
-  RouterProvider,
-  Route,
-} from "react-router-dom";
-import ErrorPage from './components/error_page';
-import Welcome from './components/welcome';
-import LandingPage from './components/landing_page';
-import Level from './components/level';
-import { monacoSetup } from 'lean4web/client/src/monacoSetup';
-import { redirect } from 'react-router-dom';
-
-monacoSetup()
-
-const router = createHashRouter([
-  {
-    path: "/",
-    loader: () => redirect("/g/local/game")
-  },
-  {
-    path: "/g/:owner/:repo",
-    element: <App />,
-    errorElement: <ErrorPage />,
-    children: [
-      {
-        path: "/g/:owner/:repo",
-        element: <Welcome />,
-      },
-      {
-        path: "/g/:owner/:repo/world/:worldId/level/:levelId",
-        element: <Level />,
-      },
-    ],
-  },
-]);
-
-const container = document.getElementById('root');
-const root = createRoot(container!);
-root.render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <ConnectionContext.Provider value={connection}>
-        <RouterProvider router={router} />
-      </ConnectionContext.Provider>
-    </Provider>
-  </React.StrictMode>
-);

client/src/state/api.ts

@@ -2,16 +2,29 @@
  * @fileOverview Define API of the server-client communication
 */
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { Connection } from '../connection'
+
+
+export interface GameTile {
+  title: string
+  short: string
+  long: string
+  languages: Array<string>
+  prerequisites: Array<string>
+  worlds: number
+  levels: number
+  image: string
+}
 
 export interface GameInfo {
   title: null|string,
   introduction: null|string,
   info: null|string,
-  worlds: null|{nodes: {[id:string]: {id: string, title: string, introduction: string}}, edges: string[][]},
+  worlds: null|{nodes: {[id:string]: {id: string, title: string, introduction: string, image: string}}, edges: string[][]},
   worldSize: null|{[key: string]: number},
   authors: null|string[],
   conclusion: null|string,
+  tile: null|GameTile,
+  image: null|string
 }
 
 export interface InventoryTile {
@@ -22,6 +35,7 @@ export interface InventoryTile {
   locked: boolean,
   new: boolean,
   hidden: boolean
+  altTitle: string,
 }
 
 export interface LevelInfo {
@@ -36,7 +50,9 @@ export interface LevelInfo {
   descrFormat: null|string,
   lemmaTab: null|string,
   statementName: null|string,
-  template: null|string
+  displayName: null|string,
+  template: null|string,
+  image: null|string
 }
 
 /** Used to display the inventory on the welcome page */
@@ -56,40 +72,22 @@ interface Doc {
   category: string,
 }
 
-
-const customBaseQuery = async (
-  args : {game: string, method: string, params?: any},
-  { signal, dispatch, getState, extra },
-  extraOptions
-) => {
-  try {
-    const connection : Connection = extra.connection
-    let leanClient = await connection.startLeanClient(args.game)
-    console.log(`Sending request ${args.method}`)
-    let res = await leanClient.sendRequest(args.method, args.params)
-    console.log('Received response') //, res)
-    return {'data': res}
-   } catch (e) {
-    return {'error': e}
-   }
-}
-
 // Define a service using a base URL and expected endpoints
 export const apiSlice = createApi({
   reducerPath: 'gameApi',
-  baseQuery: customBaseQuery,
+  baseQuery: fetchBaseQuery({ baseUrl: window.location.origin + "/data" }),
   endpoints: (builder) => ({
     getGameInfo: builder.query<GameInfo, {game: string}>({
-      query: ({game}) => {return {game, method: 'info', params: {}}},
+      query: ({game}) => `${game}/game.json`,
     }),
     loadLevel: builder.query<LevelInfo, {game: string, world: string, level: number}>({
-      query: ({game, world, level}) => {return {game, method: "loadLevel", params: {world, level}}},
+      query: ({game, world, level}) => `${game}/level__${world}__${level}.json`,
     }),
     loadInventoryOverview: builder.query<InventoryOverview, {game: string}>({
-      query: ({game}) => {return {game, method: "loadInventoryOverview", params: {}}},
+      query: ({game}) => `${game}/inventory.json`,
     }),
     loadDoc: builder.query<Doc, {game: string, name: string, type: "lemma"|"tactic"}>({
-      query: ({game, name, type}) => {return {game, method: "loadDoc", params: {name, type}}},
+      query: ({game, type, name}) => `${game}/doc__${type}__${name}.json`,
     }),
   }),
 })

client/src/state/hooks/use_preferences.ts

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks";
+import {
+    PreferencesState,
+    setLayout as setPreferencesLayout,
+    setIsSavePreferences as setPreferencesIsSavePreferences,
+    setLanguage as setLanguagePreferences,
+    getWindowDimensions,
+    AUTO_SWITCH_THRESHOLD
+} from "../preferences";
+
+
+const UsePreferences = () => {
+    const dispatch = useAppDispatch()
+    const [mobile, setMobile] = React.useState<boolean>()
+
+    const layout = useAppSelector((state) => state.preferences.layout);
+    const setLayout = (layout: PreferencesState["layout"]) => dispatch(setPreferencesLayout(layout))
+
+    const isSavePreferences = useAppSelector((state) => state.preferences.isSavePreferences);
+    const setIsSavePreferences = (isSave: boolean) => dispatch(setPreferencesIsSavePreferences(isSave))
+
+    const language = useAppSelector((state) => state.preferences.language);
+    const setLanguage = (lang: string) => dispatch(setLanguagePreferences(lang))
+
+    const automaticallyAdjustLayout = () => {
+        const {width} = getWindowDimensions()
+        setMobile(width < AUTO_SWITCH_THRESHOLD)
+    }
+
+    React.useEffect(()=>{
+        if (layout === "auto"){
+          void automaticallyAdjustLayout()
+          window.addEventListener('resize', automaticallyAdjustLayout)
+
+          return () => window.removeEventListener('resize', automaticallyAdjustLayout)
+        } else {
+          setMobile(layout === "mobile")
+        }
+    }, [layout])
+
+    return {mobile, layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage}
+}
+
+export default UsePreferences;

client/src/state/local_storage.ts

@@ -36,3 +36,33 @@ export async function saveState(state: any) {
     // Ignore
   }
 }
+
+const PREFERENCES_KEY = "preferences"
+
+/** Load from browser storage */
+export function loadPreferences() {
+  try {
+    const serializedState = localStorage.getItem(PREFERENCES_KEY);
+    return JSON.parse(serializedState)
+  } catch (e) {
+    return undefined;
+  }
+}
+
+export function savePreferences(state: any) {
+  try {
+    const serializedState = JSON.stringify(state)
+    localStorage.setItem(PREFERENCES_KEY, serializedState);
+  } catch (e) {
+    // Ignore
+  }
+}
+
+export function removePreferences() {
+  try {
+    localStorage.removeItem(PREFERENCES_KEY);
+  } catch (e) {
+    // Ignore
+  }
+}
+

client/src/state/preferences.ts

@@ -0,0 +1,40 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+import { loadPreferences, removePreferences, savePreferences } from "./local_storage";
+
+export interface PreferencesState {
+  layout: "mobile" | "auto" | "desktop";
+  isSavePreferences: boolean;
+  language: string;
+}
+
+export function getWindowDimensions() {
+  const {innerWidth: width, innerHeight: height } = window
+  return {width, height}
+}
+
+export const AUTO_SWITCH_THRESHOLD = 800
+
+const initialState: PreferencesState = loadPreferences() ??{
+    layout: "auto",
+    isSavePreferences: false,
+    language: import.meta.env.VITE_CLIENT_DEFAULT_LANGUAGE || "en",
+};
+
+export const preferencesSlice = createSlice({
+  name: "preferences",
+  initialState,
+  reducers: {
+    setLayout: (state, action) => {
+      state.layout = action.payload;
+    },
+    setIsSavePreferences: (state, action) => {
+      state.isSavePreferences = action.payload;
+    },
+    setLanguage: (state, action) => {
+      state.language = action.payload;
+    },
+  },
+});
+
+export const { setLayout, setIsSavePreferences, setLanguage } = preferencesSlice.actions;

client/src/state/progress.ts

@@ -26,7 +26,8 @@ export interface GameProgressState {
   inventory: string[],
   difficulty: number,
   openedIntro: boolean,
-  data: WorldProgressState
+  data: WorldProgressState,
+  typewriterMode?: boolean
 }
 
 /**
@@ -52,22 +53,22 @@ const initalLevelProgressState: LevelProgressState = {code: "", completed: false
 
 /** Add an empty skeleton with progress for the current game */
 function addGameProgress (state: ProgressState, action: PayloadAction<{game: string}>) {
-  if (!state.games[action.payload.game]) {
-    state.games[action.payload.game] = {inventory: [], openedIntro: true, data: {}, difficulty: DEFAULT_DIFFICULTY}
+  if (!state.games[action.payload.game.toLowerCase()]) {
+    state.games[action.payload.game.toLowerCase()] = {inventory: [], openedIntro: true, data: {}, difficulty: DEFAULT_DIFFICULTY}
   }
-  if (!state.games[action.payload.game].data) {
-    state.games[action.payload.game].data = {}
+  if (!state.games[action.payload.game.toLowerCase()].data) {
+    state.games[action.payload.game.toLowerCase()].data = {}
   }
 }
 
 /** Add an empty skeleton with progress for the current level */
 function addLevelProgress(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number}>) {
   addGameProgress(state, action)
-  if (!state.games[action.payload.game].data[action.payload.world]) {
-    state.games[action.payload.game].data[action.payload.world] = {}
+  if (!state.games[action.payload.game.toLowerCase()].data[action.payload.world]) {
+    state.games[action.payload.game.toLowerCase()].data[action.payload.world] = {}
   }
-  if (!state.games[action.payload.game].data[action.payload.world][action.payload.level]) {
-    state.games[action.payload.game].data[action.payload.world][action.payload.level] = {...initalLevelProgressState}
+  if (!state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level]) {
+    state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level] = {...initalLevelProgressState}
   }
 }
 
@@ -78,125 +79,137 @@ export const progressSlice = createSlice({
     /** put edited code in the state and set completed to false */
     codeEdited(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number, code: string}>) {
       addLevelProgress(state, action)
-      state.games[action.payload.game].data[action.payload.world][action.payload.level].code = action.payload.code
-      state.games[action.payload.game].data[action.payload.world][action.payload.level].completed = false
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level].code = action.payload.code
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level].completed = false
     },
     /** TODO: docstring */
     changedSelection(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number, selections: Selection[]}>) {
       addLevelProgress(state, action)
-      state.games[action.payload.game].data[action.payload.world][action.payload.level].selections = action.payload.selections
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level].selections = action.payload.selections
     },
     /** mark level as completed */
     levelCompleted(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number}>) {
       addLevelProgress(state, action)
-      state.games[action.payload.game].data[action.payload.world][action.payload.level].completed = true
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level].completed = true
     },
     /** Set the list of rows where help is displayed */
     helpEdited(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number, help: number[]}>) {
       addLevelProgress(state, action)
       console.debug(`!setting help to: ${action.payload.help}`)
-      state.games[action.payload.game].data[action.payload.world][action.payload.level].help = action.payload.help
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level].help = action.payload.help
     },
     /** delete all progress for this game */
     deleteProgress(state: ProgressState, action: PayloadAction<{game: string}>) {
-      state.games[action.payload.game] = {inventory: [], data: {}, openedIntro: true, difficulty: DEFAULT_DIFFICULTY}
+      state.games[action.payload.game.toLowerCase()] = {inventory: [], data: {}, openedIntro: true, difficulty: DEFAULT_DIFFICULTY}
     },
     /** delete progress for this level */
     deleteLevelProgress(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number}>) {
       addLevelProgress(state, action)
-      state.games[action.payload.game].data[action.payload.world][action.payload.level] = initalLevelProgressState
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level] = initalLevelProgressState
     },
     /** load progress, e.g. from external import */
     loadProgress(state: ProgressState, action: PayloadAction<{game: string, data:GameProgressState}>) {
       console.debug(`setting data to:\n ${action.payload.data}`)
-      state.games[action.payload.game] = action.payload.data
+      state.games[action.payload.game.toLowerCase()] = action.payload.data
     },
     /** set the current inventory */
     changedInventory(state: ProgressState, action: PayloadAction<{game: string, inventory: string[]}>) {
       addGameProgress(state, action)
-      state.games[action.payload.game].inventory = action.payload.inventory
+      state.games[action.payload.game.toLowerCase()].inventory = action.payload.inventory
     },
     /** set the difficulty */
     changedDifficulty(state: ProgressState, action: PayloadAction<{game: string, difficulty: number}>) {
       addGameProgress(state, action)
-      state.games[action.payload.game].difficulty = action.payload.difficulty
+      state.games[action.payload.game.toLowerCase()].difficulty = action.payload.difficulty
     },
     /** set the difficulty */
     changedOpenedIntro(state: ProgressState, action: PayloadAction<{game: string, openedIntro: boolean}>) {
       addGameProgress(state, action)
-      state.games[action.payload.game].openedIntro = action.payload.openedIntro
+      state.games[action.payload.game.toLowerCase()].openedIntro = action.payload.openedIntro
     },
+    /** set the typewriter mode */
+    changeTypewriterMode(state: ProgressState, action: PayloadAction<{game: string, typewriterMode: boolean}>) {
+      addGameProgress(state, action)
+      state.games[action.payload.game.toLowerCase()].typewriterMode = action.payload.typewriterMode
+    }
   }
 })
 
 /** if the level does not exist, return default values */
 export function selectLevel(game: string, world: string, level: number) {
   return (state) =>{
-    if (!state.progress.games[game]) { return initalLevelProgressState }
-    if (!state.progress.games[game].data[world]) { return initalLevelProgressState }
-    if (!state.progress.games[game].data[world][level]) { return initalLevelProgressState }
-    return state.progress.games[game].data[world][level]
+    if (!state.progress.games[game.toLowerCase()]) { return initalLevelProgressState }
+    if (!state.progress.games[game.toLowerCase()].data[world]) { return initalLevelProgressState }
+    if (!state.progress.games[game.toLowerCase()].data[world][level]) { return initalLevelProgressState }
+    return state.progress.games[game.toLowerCase()].data[world][level]
   }
 }
 
 /** return the code of the current level */
 export function selectCode(game: string, world: string, level: number) {
   return (state) => {
-    return selectLevel(game, world, level)(state).code
+    return selectLevel(game.toLowerCase(), world, level)(state).code
   }
 }
 
 /** return the current inventory */
 export function selectInventory(game: string) {
   return (state) => {
-    if (!state.progress.games[game]) { return [] }
-    return state.progress.games[game].inventory
+    if (!state.progress.games[game.toLowerCase()]) { return [] }
+    return state.progress.games[game.toLowerCase()].inventory
   }
 }
 
 /** return the code of the current level */
 export function selectHelp(game: string, world: string, level: number) {
   return (state) => {
-    return selectLevel(game, world, level)(state).help
+    return selectLevel(game.toLowerCase(), world, level)(state).help
   }
 }
 
 /** return the selections made in the current level */
 export function selectSelections(game: string, world: string, level: number) {
   return (state) => {
-    return selectLevel(game, world, level)(state).selections
+    return selectLevel(game.toLowerCase(), world, level)(state).selections
   }
 }
 
 /** return whether the current level is clompleted */
 export function selectCompleted(game: string, world: string, level: number) {
   return (state) => {
-    return selectLevel(game, world, level)(state).completed
+    return selectLevel(game.toLowerCase(), world, level)(state).completed
   }
 }
 
 /** return progress for the current game if it exists */
 export function selectProgress(game: string) {
   return (state) => {
-    return state.progress.games[game] ?? null
+    return state.progress.games[game.toLowerCase()] ?? null
   }
 }
 
 /** return difficulty for the current game if it exists */
 export function selectDifficulty(game: string) {
   return (state) => {
-    return state.progress.games[game]?.difficulty ?? DEFAULT_DIFFICULTY
+    return state.progress.games[game.toLowerCase()]?.difficulty ?? DEFAULT_DIFFICULTY
   }
 }
 
 /** return whether the intro has been read */
 export function selectOpenedIntro(game: string) {
   return (state) => {
-    return state.progress.games[game]?.openedIntro
+    return state.progress.games[game.toLowerCase()]?.openedIntro
+  }
+}
+
+/** return typewriter mode for the current game if it exists */
+export function selectTypewriterMode(game: string) {
+  return (state) => {
+    return state.progress.games[game.toLowerCase()]?.typewriterMode ?? true
   }
 }
 
 /** Export actions to modify the progress */
 export const { changedSelection, codeEdited, levelCompleted, deleteProgress,
   deleteLevelProgress, loadProgress, helpEdited, changedInventory, changedOpenedIntro,
-  changedDifficulty } = progressSlice.actions
+  changedDifficulty, changeTypewriterMode} = progressSlice.actions

client/src/state/store.ts

@@ -7,21 +7,19 @@ import { debounce } from "debounce";
 import { connection } from '../connection'
 import { apiSlice } from './api'
 import { progressSlice } from './progress'
-import { saveState } from "./local_storage";
+import { preferencesSlice } from "./preferences"
+import { saveState, savePreferences, removePreferences} from "./local_storage";
 
 
 export const store = configureStore({
   reducer: {
     [apiSlice.reducerPath]: apiSlice.reducer,
     [progressSlice.name]: progressSlice.reducer,
+    [preferencesSlice.name]: preferencesSlice.reducer,
   },
   // Make connection available in thunks:
   middleware: getDefaultMiddleware =>
-    getDefaultMiddleware({
-      thunk: {
-        extraArgument: { connection }
-      }
-    }).concat(apiSlice.middleware),
+    getDefaultMiddleware().concat(apiSlice.middleware),
 });
 
 /**
@@ -31,6 +29,9 @@ export const store = configureStore({
 store.subscribe(
   debounce(() => {
     saveState(store.getState()[progressSlice.name]);
+
+    const preferencesState = store.getState()[preferencesSlice.name]
+    preferencesState.isSavePreferences ? savePreferences(preferencesState) : removePreferences()
   }, 800)
 );
 

client/src/window_width.tsx

@@ -1,21 +0,0 @@
-import {useState, useEffect} from 'react'
-
-function getWindowDimensions() {
-  const {innerWidth: width, innerHeight: height } = window
-  return {width, height}
-}
-
-export function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowDimensions(getWindowDimensions())
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-
-  }, [])
-
-  return windowDimensions
-}

doc/DOCUMENTATION.md

@@ -0,0 +1,67 @@
+# Server
+
+The server is made out of two parts, named "relay" and "server".
+
+The former, "relay", is the server which
+sets up a socket connection to the client, starts the lean servers to work on files and
+relays messages between the lean server and the client. `index.mjs` is the file that needs to
+be run, which is done for example using `pm2` or by calling `npm run start_server` or
+`npm run production`, see more later.
+
+The latter, "server", is the lean server which has two jobs. For one, it produces the "gameserver"
+executable which is the lean server that handles the files the player plays on. The second job
+is to provide the lean commands which are used when creating a game. These are located in
+`Commands.lean`.
+
+
+## Integration into Games
+
+Games need the "server" as a lake-dependency, which is done in the game's lakefile.
+
+A game imports `GameServer.Commands` which provides to all the API required to
+create a game.
+
+In particular the lean command `MakeGame` compiles the entire game. Static information is
+stored as JSON files in `.lake/gamedata` for faster loading, while other data is only
+saved to lean env-extensions which the lean server has access to after loading the lean file.
+
+For games to be run successfully, it is important that the "gameserver" executable inside
+the game's `.lake` folder is actually built.
+Currently, this happens through a lake-post-update-hook when calling `lake update -R` (in the game's folder), but if this fails, you can always build it manually by calling `lake build gameserver`.
+(both commands are to be executed in the game's directory!)
+
+## Modifying the server
+
+### Starting the server
+
+When using the [manual installation](running_locally.md#manual-installation) you can run the server
+using
+
+```
+npm start
+```
+
+This way any changes to files in `client/` or `relay/` will cause the server to restart automatically.
+
+Alternative, you can run `npm run build` followed by the commands
+
+```
+npm run start_client
+npm run production
+```
+
+(in two separate terminals) to test the production mode of the server. This way it will only
+change once you build and restart the server.
+
+### Modifying the lean server
+
+To test a modified lean server (i.e. content of `server/`), you can use the local dev setup and call
+`lake update -R -Klean4game.local` in your game followed by `lake build`.
+This will cause lake to look for the
+local lean server as a dependency instead of the version it downloaded from git.
+
+You can play a local game at https://localhost:3000/#/g/local/{FolderName} where you replace `{FolderName}` with the game folder name.
+
+After modifications in `server/`, you will need to call `lake build gameserver` (called in `server/` or in your game's folder) to rebuild
+the gameserver executable and
+`lake build` (called in the game's folder) to rebuild the game.

doc/changelog.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## v4.5.0
+
+### Breaking changes
+
+* Fix (#183): local store accepts case insensitive URL. The game progress has previously been saved under case sensitive URLs. You might need to recover old progress from your browser storage.
+
+## Other

doc/create_game.md

@@ -0,0 +1,285 @@
+# Creating a new game
+
+This tutorial walks you through creating a new game for lean4. It covers from writing new levels, over testing the game locally, to publishing the game online.
+
+## 1. Create the project
+
+1. Use the [GameSkeleton template](https://github.com/hhu-adam/GameSkeleton) to create a new github repo for your game: On github, click on "Use this template" > "Create a new repository".
+2. Clone the game repo.
+3. Call `lake update -R && lake build` to build the Lean project.
+
+### Running the game
+
+Now you can open the game in VSCode (`cd YourGame/` and `code .`), and start modifying it like a regular Lean project. To run the game consult the section "**5. Testing the Game Locally**" below.
+
+## 2. Game.lean
+
+The file `Game.lean` is the backbone of the game putting everything together.
+
+1. `MakeGame`: This command is where the game gets built. If there are things to fix, they will be shown here as warnings or errors (orange/red squigglies in VSCode). Note that you might have to call "Lean: Restart File" (Ctrl+Shift+X) to reload the file and see changes made in other files.
+1. `Title`: Set the display title of your game.
+1. `Introduction`: This is the text displayed at the beginning next to the world selection tree.
+1. `Info`: This will be displayed in the game's menu as "Game Info". Use it for credits, funding and other meta information about the game.
+1. Imports: The file needs to import all world files, which we look at in a second. If you add a new world, remember to import it here!
+1. `Dependency`: (optional) This command adds another edge in the world tree. The game computes them automatically based on used tactics/theorems. However, sometimes you need a dependency the game can't compute, for example you explained `≠` in one world and in another world, the user is expected to know it already. The syntax is `Dependency World₁ → World₂ → World₃`.
+
+So the `Game.lean` has the following structure:
+
+```lean
+import GameServer.Commands
+
+-- import all worlds
+import Game.Levels.Tutorial
+
+Title "My Game"
+
+Introduction "
+Hi, nice you're here! Click on a world to start.
+"
+
+Info "
+This game has been developed by me.
+"
+
+-- Dependency World₁ → World₂ -- because of `≠`
+
+MakeGame
+```
+
+## 3. Creating a Level
+
+In this tutorial we first learn about Levels. A game consists of a tree of worlds, each world has
+a number of levels, enumerated 1 to n. Here we create level 1 of a world `MyWorld`. We add this world to the game in the next section.
+
+A minimal level file looks like the following. There are many options to add, which we will dive
+into in a later section
+
+```lean
+import GameServer.Commands
+
+World "MyWorld"
+Level 1
+Title "Hello World"
+
+Introduction "
+A message shown at the beginning of the level. Use it to explain any new concepts.
+"
+
+/-- The exercise statement in natural language using latex: $\iff$. -/
+Statement (n : Nat) : 0 + n = n := by
+  sorry
+
+Conclusion "
+The message shown when the level is completed
+"
+```
+
+1. Create a folder `Game/Levels/MyWorld`
+1. Create a file `Game/Levels/MyWorld/L01_hello.lean`
+1. Copy the above inside your first level.
+
+## 4. Creating a World
+
+Now we create a world. For that we create a file `MyWorld.lean` that imports all levels of this world:
+
+```lean
+import Game.Levels.MyWorld.L01_hello
+
+World "MyWorld"
+Title "My First World"
+
+Introduction
+"
+This introduction text is shown when one first enters a world.
+"
+```
+
+1. Create a file `Game/Levels/MyWorld.lean`
+1. Use the template above and make sure you import all levels of this world.
+1. In `Game.lean` import the world with `import Game.Levels.MyWorld`
+
+Now you created a world with one level and added it🎉 The command `MakeGame` in `Game.lean` shows you any problems you might need to fix. Currently, it shows
+
+```text
+No world introducing sorry, but required by MyWorld
+```
+
+which means that the world `MyWorld` uses the tactic `sorry` in a proof, but `sorry` has not been
+introduced anywhere.
+
+## 5. Testing the Game Locally
+
+Now it's time to test the game locally and play it.
+
+There are multiple ways how you can start the game locally to test-play it described at [How to Run the Game Locally](running_locally.md). If you have problems getting one of the setups to work, please get in contact!
+
+
+## 6. Dive into Level creation
+
+Now that you have a running game, we have a closer look at the level files and all the options
+you have to design your game.
+
+### 6. a) Inventory
+
+The player has an inventory with tactics, theorems, and definitions that unlock during the game. You can unlock/introduce such items in a Level by adding one of the following below the `Statement`.
+
+```lean
+NewTactic induction simp
+NewTheorem Nat.zero_mul
+NewDefinition Pow
+```
+
+**Important:** All commands in this section 6a) expect the `Name` they take as input
+to be **fully qualified**. For example `NewTheorem Nat.zero_mul` and not `NewTheorem zero_mul`.
+
+#### Doc entries
+
+You'll see a warning about a missing Theorem documentation. You can fix it by adding doc-entries like the following somewhere above it.
+
+```lean
+/--
+some description
+-/
+TheoremDoc Nat.zero_mul as "zero_mul" in "Mul"
+
+/--
+some description
+-/
+TacticDoc simp
+
+/--
+some description
+-/
+DefinitionDoc Pow as "^"
+```
+
+(e.g. you could also create a file `Game/Doc/MyTheorems.lean`, add there your documentation and import it)
+
+If you do not provide any content for the inventory, the game will try to find a docstring of that item and display that docstring.
+
+#### Inventory management
+
+You have a few options to disable inventory items that have been unlocked in previous levels:
+
+```lean
+DisabledTactic, DisabledTheorem, OnlyTactic, OnlyTheorem
+```
+
+have the same syntax as above. The former two disable items for this level, the latter two
+disable all items except the ones specified.
+
+#### Theorem Tab
+
+Theorems are sorted into tabs. With `TheoremTab "Mul"` you specify which tab should be open by default in this level.
+
+#### HiddenTactic
+
+`NewHiddenTactic` lets you add a tactic without adding it to the inventory. This can be useful for variants of tactics. E.g. you could do
+
+```lean
+NewTactic rw
+NewHiddenTactic rewrite nth_rewrite rwa
+```
+
+and only `rw` would show up in the inventory.
+
+### 6. b) Statement
+
+The statement is the exercise of the level. The basics work the same as they would in `example` or `theorem`. Note however, that you **must** do a tactic proof, i.e. the `:= by` is a hard-coded part of the syntax
+
+#### Name
+
+You can give your exercise a name: `Statement my_first_exercise (n : Nat) …`. If you do so, it will be added to the inventory and be available in future levels.
+You can but a `Statement` inside namespaces like you would with `theorem`.
+
+#### Doc String / Exercise statement
+
+Add a docstring that contains the exercise statement in natural language. If you do this, it will appear at the top of the exercise. See [LaTeX in Games](latex.md) for more details on formatting.
+
+```lean
+/-- The exercise statement in natural language using latex: $\iff$. -/
+Statement ...
+  sorry
+```
+
+For more details and features, read [Writing Exercises](writing_exercises.md)
+
+### 6. c) Proof
+
+The proof must always be a tactic proof, i.e. `:= by` is a mandatory part of the syntax.
+
+There are a few extra tactics that help you with structuring the proof:
+
+- `Hint`: You can use `Hint "text"` to display text if the goal state in-game matches
+  the one where `Hint` is placed. For more options about hints, see below.
+- `Branch`: In the proof you can add a `Branch` that runs an alternative tactic sequence, which
+  helps to set `Hints` in different places. The `Branch` does not affect the main
+  proof and does not need to finish any goals.
+- `Template`/`Hole`: Used to provide a sample proof template. Anything inside `Template`
+  will be copied into the editor with all `Hole`s replaced with `sorry`. Note that
+  having a `Template` will force the user to use Editor-mode for this level.
+
+One thing to keep in mind is that the game will look at the main proof to figure out which tactics and theorems are needed, but it ignores any `Branch`es.
+
+### 6. d) Hints
+
+Most important for game development are probably the `Hints`.
+
+The hints will be displayed whenever the player's current goal matches the goal the hint is
+placed at inside the sample proof. You can use `Branch` to place hints in dead ends or alternative proof strands.
+
+Read [More about Hints](hints.md) for how they work and what the options are.
+
+### 6. e) Extra: Images
+You can add images on any layer of the game (i.e. game/world/level). These will be displayed in your game.
+
+The images need to be placed in `images/` and you need to add a command like `Image "images/path/to/myWorldImage.png"`
+in one of the files you created in 2), 3), or 4) (i.e. game/world/level).
+
+NOTE: At present, only the images for a world are displayed. They appear in the introduction of the world.
+
+## 7. Update your game
+
+In principle, it is as simple as modifying `lean-toolchain` to update your game to a new Lean version. However, you should read about the details in [Update An Existing Game](update_game.md).
+
+## 8. Add translation
+
+See [Translating a game](translate.md).
+
+## 9. Publish your game
+
+To publish your game on the official server, see [Publishing a game](publish_game.md)
+
+There are a few more options you can add in `Game.lean` before the `MakeGame` command, which describe the tile that is visible on the server's landing page:
+
+```lean
+Languages "English"
+CaptionShort "Game Template"
+CaptionLong "You should use this game as a template for your own game and add your own levels."
+Prerequisites "NNG"
+CoverImage "images/cover.png"
+```
+* `Languages`: Currently only a single language (capital English name). The tile will show a corresponding flag.
+* `CaptionShort`: One catchphrase. Appears above the image.
+* `CaptionLong`: 2-4 sentences to describe the game.
+* `Prerequisites` a list of other games you should play before this one, e.g. `Prerequisites "NNG" "STG"`. The game names are free-text.
+* `CoverImage`: You can create a folder `images/` and put images there for the game to use. The maximal ratio is ca. 500x200 (W x H) but it might be cropped horizontally on narrow screens.
+
+## 10. Advanced Topics
+
+### Escaping
+
+Inside strings, you need to escape backslashes, but not inside doc-strings, therefore you
+  would write `Introduction "some latex here: $\\iff$."` but
+  `/-- some latex here: $\iff$. -/ Statement ...`
+
+### LaTeX support
+
+LaTeX is rendered using the [KaTeX library](https://katex.org/),
+see [Using LaTeX in the Game](latex.md) for details.
+
+### Number Of Levels Limit
+
+A world with more than 16 levels will be displayed with the levels spiraling outwards,
+it might be desirable to stay below that bound. Above 22 levels the spiral starts getting out
+of control.

doc/hints.md

@@ -0,0 +1,105 @@
+# Hints
+
+Most important for game development are probably the "Hints". You can add Hints at any place in your proof using the `Hint` tactic
+
+```
+Statement .... := by
+  Hint "Hint to show at the start"
+  rw [h]
+  Hint "some tip after using rw"
+  ...
+```
+
+Note that hints are only **context-aware but not history-aware**. In particular, they only look at the assumptions and the current goal. Player's might encounter hints in a different order - or not at all - if they decide to go for a unique proof idea. The `Branch` tactic helps to place hints outside the sample solution's proof.
+
+## 1. When do hints show?
+
+A hint will be displayed if the player's goal matches the one where the hint was placed in the
+sample solutions and the entire context from the sample solutions is present in the
+player's context. The player's context may contain additional items.
+
+This means if you have multiple identical
+subgoals, you should only place a single hint in one of them, and it will be displayed in
+all of them.
+
+However, identical (non-hidden) hints which where already present in the step
+before are omitted. This is to allow a player to add new assumptions to context, for example
+with `have`, without seeing the same hint over and over again.
+Hidden hints are not filtered.
+
+## 2. Alternative Proofs / `Branch`
+
+You can use `Branch` to place hints
+in dead ends or alternative proof strands.
+
+A proof inside a `Branch`-block is normally evaluated by lean, but it's discarded at the end
+so that no progress has been made on proving the goal.
+
+```
+Statement .... := by
+  Hint "use `rw` or `rewrite`."
+  Branch
+    rewrite [h]
+    Hint "now you still need `rfl`"
+  rw [h]
+```
+
+## 3. Variables names
+
+Put variables in the hint text inside brackets like this: `{h}`! This way the server can replace
+the variable's name with the one the user actually used.
+
+*Note*: This means you need to escape any other uses of **opening** curly brackets (i.e. `\{`). See also [LaTeX in Games](latex.md) for
+examples of this.
+
+For example, if the sample proof contains
+
+```
+have h : True := trivial
+Hint "Now use `rw [{h}]` to use your assumption `{h}`."
+```
+
+but the player writes `have g : True := trivial`, they will see a hint saying
+"Now use `rw [g]` to use your assumption `g`."
+
+## 4. Hidden hints
+
+Some hints can be hidden, and only show after the user clicks on a button to get additional
+help. You mark a hint as hidden with `(hidden := true)`:
+
+```
+Hint (hidden := true) "some hidden hint"
+```
+
+## 5. Strict context matching
+
+If you use the attribute `(strict := true)` a hint is only shown if the entire context
+matches exactly the one where the hint is placed. With `(hint := false)`, which is the default,
+it does not matter if additional assumptions are present in the player's context.
+
+```
+Hint (strict := true) "now use `have` to create a new assumption."
+```
+
+You should probably use `(strict := true)` if you want to give fine-grained details about
+tactics like `have` which do not modify the goal or any existing assumptions, but only
+create new assumptions.
+
+## 6. Formatting
+
+You can use Markdown to format your hints and you can
+use LaTeX. See [LaTeX in Games](latex.md) for more details.
+
+### Images
+
+Hints and introductions/conclusions can also contain images.
+
+For remote images, simply add:
+
+```
+<img src=\"https://url.com/to/image\"/>
+```
+
+Local images can currently only be included with a hack:
+
+Images in the game's `images/` folder will be accessible at `data/g/[user]/[repo]/[image].[png|jpg|…]` and thus can be included as if they were external images.

doc/latex.md

@@ -0,0 +1,78 @@
+There are multiple ways how to format the text content of your game. Notably Markdown with KaTeX.
+
+# Escaping
+Generally, if you add text inside quotes `" "` (e.g. in `Hint`) you need to escape
+backslashes, but if you provide text inside a doc comment
+`/-- -/` (e.g. in the `Statement` description) you do not!
+
+This means for example you'd write `/-- $\iff$ -/` but `"$\\iff$"`.
+
+Furthermore, inside `Hint` you need to escape all opening curly brackets as `\{` since `{h}` is syntax for inserting a variable name `h`.
+
+# KaTeX
+
+LaTeX syntax is provided trough the [KaTeX library](https://katex.org). KateX supports most but not all of latex and its packages.
+See [supported](https://katex.org/docs/supported.html).
+
+## Examples
+
+### Commutative diagrams
+
+Here is an example of how to write a commutative diagram in KaTeX:
+
+$$
+\begin{CD}
+      A  @>{f}>> B @<{g}<< C    \\
+  @V{h}VV    @V{i}VV   @V{j}VV \\
+      D  @<{k}<< E @>{l}>> F    \\
+  @A{m}AA    @A{n}AA   @V{p}VV \\
+      G  @<{q}<< H @>{r}>> I
+\end{CD}
+$$
+
+```
+$$
+\begin{CD}
+      A  @>{f}>> B @<{g}<< C    \\
+  @V{h}VV    @V{i}VV   @V{j}VV \\
+      D  @<{k}<< E @>{l}>> F    \\
+  @A{m}AA    @A{n}AA   @V{p}VV \\
+      G  @<{q}<< H @>{r}>> I
+\end{CD}
+$$
+```
+
+Again, note that inside a string like `Hint`/`Introduction`/`Conclusion`/etc. you need to escape `\` and potentially `{`.
+
+E.g. `\begin` as `\\begin`, `\\` as `\\\\` and inside a
+`Hint`, `@>{f}>>` as `@>\{f}>>`.
+
+See https://www.jmilne.org/not/Mamscd.pdf
+
+### Truth Tables
+
+KaTeX does not support the tabular environment. You can use the array environment instead.
+
+$$
+\begin{array}{|c|c|}
+  \hline
+  P & ¬P \\
+  \hline
+  T & F  \\
+  F & T  \\
+  \hline
+\end{array}
+$$
+
+```
+$$
+\begin{array}{|c|c|}
+  \hline
+  P & ¬P \\
+  \hline
+  T & F  \\
+  F & T  \\
+  \hline
+\end{array}
+$$
+```

doc/npm_scripts.md

@@ -0,0 +1,19 @@
+## NPM Scripts
+
+* `npm start`: Start the project in development mode. The browser will automatically reload when client files get changed. The Lean server will get recompiled and restarted when lean files get changed. The Lean server will be started without a container. The client and server can be started separately using the scripts `npm run start_client` and `npm run start_server`. The project can be accessed via `http://localhost:3000`.
+Internally, websocket requests to `ws://localhost:3000/websockets` will be forwarded to a Lean server running on port `8080`.
+
+* `npm run build`: Build the project in production mode. All assets of the client will be compiled into `client/dist`.
+On the server side, the command will set up a docker image containing the Lean server. The two parts can be built separately using `npm run build_client` and `npm run build_server`.
+
+* `npm run production`: Start the project in production mode. This requires that the build script has been run. It will start a server on the port specified in the `PORT` environment variable or by default on `8080`. You can run on a specific port by running `PORT=80 npm run production`. The server will serve the files in `client/dist` via http and give access to the bubblewrapped Lean server via the web socket protocol.
+
+### Environment Variables
+
+The client and server ports, as well as the default language, can be configured using environment variables:
+
+* `PORT`: Sets the port for the backend server (default: `8080`).
+* `CLIENT_PORT`: Sets the port for the client server (default: `3000`).
+* `VITE_CLIENT_DEFAULT_LANGUAGE`: Sets the default language for the application (default: `en`).
+
+Ensure these environment variables are set appropriately in your environment to configure the project as needed.

doc/publish_game.md

@@ -0,0 +1,36 @@
+# Publishing games
+
+You can publish your game on the official [Lean Game Server](https://adam.math.hhu.de) in a few simple
+steps.
+
+## 1. Upload Game to github
+
+First, you need your game in a public Github repository and make sure the github action has run.
+You can check this by spotting the green checkmark on the start page, or by looking at the "Actions"
+tab.
+
+## 2. Import the game
+
+You call the URL that's listed under "What's Next?" in the latest action run. Explicitly you call
+the URL of the form
+
+> adam.math.hhu.de/import/trigger/{USER}/{REPOSITORY}
+
+where `{USER}` and `{REPOSITORY}` are replaced with the github user and repository name.
+
+You should see a white screen which shows import updates and eventually reports "Done."
+
+## 3. Play the game
+
+Now you can immediately play the game at `adam.math.hhu.de/#/g/{USER}/{REPOSITORY}`!
+
+## 4. Update
+
+To upload a new version of the game you will have to repeat 1. and 2. whenever you want to publish the updated version.
+
+## 5. Main page
+
+Adding games to the main page happens manually by the server maintainers. Tell us if you want us
+to add a tile for your game!
+
+For example, you can [contact Jon on Zulip](https://leanprover.zulipchat.com/#narrow/dm/385895-Jon-Eugster). Or [via Email](https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster).

doc/running_locally.md

@@ -0,0 +1,138 @@
+# Running Games Locally
+
+The installation instructions are not yet tested on Mac/Windows. Comments very welcome!
+
+Please also consult the [Troubleshooting Collection](troubleshoot.md), where some known pitfalls are collected.
+
+There are several options to play a game locally:
+
+1. VSCode Dev Container: needs `docker` installed on your machine
+2. Codespaces: Needs active internet connection and computing time is limited.
+3. Gitpod: does not work yet (Is that true?)
+4. Manual installation: Needs `npm` installed on your system
+
+The recommended option is "VSCode Dev containers" but you may choose any option above depending on your setup.
+
+The template game [GameSkeleton](https://github.com/hhu-adam/GameSkeleton) contains all the relevant files to make your local setup (dev container / gitpod / codespaces) work. You might need to update these files manually by copying them from there if you need any new improvements to the dev setup you're using in an existing game.
+
+## VSCode Dev Containers
+
+1.  **Install Docker and Dev Containers** *(once)*:<br/>
+    See [official instructions](https://code.visualstudio.com/docs/devcontainers/containers#_getting-started).
+    Explicitly this means:
+    * Install docker engine if you have not yet: [Instructions](https://docs.docker.com/engine/install/).
+      I followed the "Server" instructions for linux.
+    * Note that on Linux you need to add your user to the `docker` group
+      ([see instructions](https://docs.docker.com/engine/install/linux-postinstall/)) and probably reboot.
+    * Open the games folder in VSCode: `cd NNG4 && code .` or "Open Folder" within VSCode
+    * a message appears prompting you to install the "Dev Containers" extension (by Microsoft). (Alternatively install it from the VSCode extensions).
+
+2.  **Open Project in Dev Container** *(everytime)*:<br/>
+    Once you have the Dev Containers Extension installed, (re)open the project folder of your game in VSCode.
+    A message appears asking you to "Reopen in Container".
+
+    * The first start will take a while, ca. 2-15 minutes. After the first
+      start this should be very quickly.
+    * Once built, you can open http://localhost:3000 in your browser, which should load the game.
+
+3.  **Editing Files** *(everytime)*:<br/>
+    After editing some Lean files in VSCode, open VSCode's terminal (View > Terminal) and run `lake build`. Now you can reload your browser to see the changes.
+
+## Codespaces
+
+You can work on your game using Github codespaces (click "Code" and then "Codespaces" and then "create codespace on main"). It should run the game locally in the background. You can open it for example under "Ports" and clicking on "Open in Browser".
+
+Note: You have to wait until npm started properly, which might take a good while.
+
+As with devcontainers, you need to run `lake build` after changing any lean files and then reload the browser.
+
+## Gitpod
+
+TODO: Not sure this works yet!
+
+Open the game clicking on the gitpod link. Again you will need to wait until it is fully built and then enter `lake build` in the shell whenever you made changes.
+
+## Manual installation
+
+This installs the `lean4game` manually on your computer. (It is the same installation as one would
+use to setup a proper server online, only the run command (i.e. `npm start`) is different.)
+
+Install `nvm`:
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
+```
+then reopen bash and test with `command -v nvm` if it is available (Should print "nvm").
+
+Now install node:
+```bash
+nvm install node
+```
+
+Clone the game (e.g. `GameSkeleton` here):
+```bash
+git clone https://github.com/hhu-adam/GameSkeleton.git
+# or: git clone git@github.com:hhu-adam/GameSkeleton.git
+```
+
+Download dependencies and build the game:
+```bash
+cd GameSkeleton
+lake update -R
+lake build
+```
+
+Clone the server repository into a directory next to the game:
+```bash
+cd ..
+git clone https://github.com/leanprover-community/lean4game.git
+# or: git clone git@github.com:leanprover-community/lean4game.git
+```
+The folders `GameSkeleton` and `lean4game` must be in the same directory!
+
+In `lean4game`, install dependencies:
+```bash
+cd lean4game
+npm install
+```
+
+Run the game:
+```bash
+npm start
+```
+
+You should see a message like this:
+```bash
+[server] > lean4-game@0.1.0 start_server
+[server] > (cd server && lake build) && (cd relay && cross-env NODE_ENV=development nodemon -e mjs --exec "node ./index.mjs")
+[server]
+[client]
+[client] > lean4-game@0.1.0 start_client
+[client] > cross-env NODE_ENV=development vite --host
+[client]
+[server] [nodemon] 3.0.#
+[server] [nodemon] to restart at any time, enter `rs`
+[server] [nodemon] watching path(s): *.*
+[server] [nodemon] watching extensions: mjs
+[server] [nodemon] starting `node ./index.mjs`
+[client]
+[client]   VITE v4.5.1  ready in \#\#\# ms
+[client]
+[client]   ➜  Local:   http://localhost:3000/
+[client]   ➜  Network: http://###.###.###.##:3000/
+[client] [vite-plugin-static-copy] Collected 7 items.
+[server] (node:#####) [DEP0040] [server] Listening on 8080
+```
+
+This takes a little time. Eventually, the game is available on http://localhost:3000/#/g/local/GameSkeleton. Replace `GameSkeleton` with the folder name of your local game.
+
+## Modifying the GameServer
+
+When modifying the game engine itself (in particular the content in `lean4game/server`) you can test it live with the same setup as above (manual installation) by using `lake update -R -Klean4game.local`:
+
+```bash
+cd NNG4
+lake update -R -Klean4game.local
+lake build
+```
+This causes lake to search locally for the `GameServer` lake package instead of using the version from github. Therefore, you can the local copy of the edit `GameServer` in `../lean4game` and
+`lake build` will then directly use this modified copy to build your game.

doc/server.md

@@ -0,0 +1,47 @@
+
+# Notes for Server maintainer
+
+In order to set up the server to allow imports, one needs to create a
+[Github Access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens). A fine-grained access token with only reading rights for public
+repos will suffice.
+
+You need to set the environment variables `LEAN4GAME_GITHUB_USER` and `LEAN4GAME_GITHUB_TOKEN`
+with your user name and access token. For example, you can set these in `ecosystem.config.cjs` if
+you're using `pm2`
+
+Then people can call:
+
+> https://{website}/import/trigger/{owner}/{repo}
+
+where you replace:
+- website: The website your server runs on, e.g. `localhost:3000`
+- owner, repo: The owner and repository name of the game you want to load from github.
+
+ will trigger to download the latest version of your game from github onto your server.
+ Once this import reports "Done", you should be able to play your game under:
+
+> https://{website}/#/g/{owner}/{repo}
+
+## Data management
+Everything downloaded remains in the folder `lean4game/games`.
+The subfolder `tmp` contains downloaded artifacts and can be deleted without loss.
+The other folders should only contain the built lean-games, sorted by owner and repo.
+
+## Server capacity
+
+If you would like to display the server capacity on the landing page,
+you can create a file `lean4game/games/stats.csv` of the following form:
+
+```
+CPU,MEM
+0.1,0.8
+```
+
+These numbers will be displayed on the landing page ("CPU: 10 % used" and "RAM: 80 % used").
+
+If you only want one of the numbers, replace the number you don't want with `nan` (or anything
+else which does not parse as number).
+
+If you don't want to show either, simply do not create `stats.csv`
+
+Use your own script or cronjob to update the CSV file as desired.

doc/translate.md

@@ -0,0 +1,30 @@
+# Translation
+
+The game server supports internationalisation ("i18n") using [lean-i18n](https://github.com/hhu-adam/lean-i18n) and [i18next](https://www.npmjs.com/package/i18next).
+
+The intended workflow currently is the following:
+
+1. When you call `lake build` in your game, it should automatically create a template file `.i18n/en/Game.pot`. Alternatively you can call `lake exe i18n --template` to recreate it.
+2. Open the file `Game.pot` (the "t" stands for "template") with [Poedit](https://poedit.net/) (or a similar software) and translate all strings. Save your work as `.i18n/{language}/Game.po`.
+4. Call `lake exe i18n --export-json` to create all Json files `.i18n/{language}/Game.json` which the server needs.
+5. Add your translations (i.e. `.po` and `.json`, but not the `.mo` files) and push your results, and [publish the game](publish_game.md).
+
+If you choose the correct language in the "Preferences" of the game, you should see your translations.
+
+## Alternative: avoiding .po
+
+Note: This workflow is subject to change, and it might be that in future the server can directly read `.po` files. Until then, there is also an alternative workflow you might choose:
+
+0. Add `useJson: true` to `.i18n/config.json`
+1. `lake build` or `lake exe i18n --template` will now create a Json instead: `.i18n/en/Game.json`.
+2. Add translations to a copy of this Json an save it as `.i18n/{language}/Game.json`
+
+## Non-English games
+
+For games written in a language different than English, you should set the correct source language (`sourceLang`) in `.i18n/config.json`. Afterwards, on `lake build` the template should appear under the chosen language, and can be translated (e.g. into English) as described above.
+
+## New languages
+
+The server has a set number of languages one can select.
+If your game has been translated to a language not selectable, [open an issue at lean4game](https://github.com/leanprover-community/lean4game/issues) requesting this new language.
+Or, even better, create a PR to translate the [server interface](https://github.com/leanprover-community/lean4game/tree/main/client/public/locales) into that new language.

doc/troubleshoot.md

@@ -0,0 +1,37 @@
+# Troubleshooting
+
+Here are some issues experienced by users.
+
+- You can reset the lake projects involved (i.e. the `server/` folder here as well as your [game's folder](https://github.com/hhu-adam/GameSkeleton)) with the following commands:
+  ```
+  cd [THE PROJECT]
+  rm -rf .lake/
+  lake update -R
+  lake build
+  ```
+  If you experience problems related to Lean or lake, you should first try to reset it this way.
+
+# VSCode Dev-Container
+* If you don't get the pop-up, you might have disabled them, and you can reenable it by
+  running the `remote-containers.showReopenInContainerNotificationReset` command in vscode.
+* If the starting the container fails, in particular with a message `Error: network xyz not found`,
+  you might have deleted stuff from docker via your shell. Try deleting the container and image
+  explicitly in VSCode (left side, "Docker" icon). Then reopen vscode and let it rebuild the
+  container. (this will again take some time)
+* On a working dev container setup, http://localhost:3000 should directly redirect you to http://localhost:3000/#/g/local/game, try if the latter is accessible.
+
+
+# Manual Installation
+Here are known issues/pitfalls with the local setup using `npm`.
+
+* If `CDPATH` is set on your mac/linux system, it might provide issues with `npm start` resulting in a server crash or blank screen. In particular `npm start` will display
+  ```
+  [server] sh: line 0: cd: server: No such file or directory
+  [server] npm run start_server exited with code 1
+  ```
+  As a fix you might need to delete your manually set `CDPATH` environment variable.
+
+# Publication
+Errors concerning uploads to the server.
+
+* Your game overview loads but the server crashes on loading a level: Check your game's github action is identical to the [GameSkeleton's](https://github.com/hhu-adam/GameSkeleton/blob/main/.github/workflows/build.yml), in particular that there is a step about building the "`gameserver`-executable".

doc/update_game.md

@@ -0,0 +1,52 @@
+# How to update your Game
+
+## New Lean version
+
+You can update the game to any Lean version by simply editing the `lean-toolchain` in your game repo to contain the
+new lean version `leanprover/lean4:v4.X.0`.
+
+Before you continue, make sure there [exists a `v4.X.0`-tag in this repo](https://github.com/leanprover-community/lean4game/tags).
+
+Then, depending on the setup you use, do one of the following:
+
+* **Dev Container**: Rebuild the VSCode Devcontainer (without Cache!).
+* **Local Setup**: in your game's folder run the following:
+  ```
+  lake update -R
+  lake build
+  ```
+
+  * Additionally, if you have a local copy of the server `lean4game`,
+    you should update this one to the matching version. Run the following in the folder `lean4game/`:
+    ```
+    git fetch
+    git checkout {VERSION_TAG}
+    npm install
+    ```
+    where `{VERSION_TAG}` is the tag from above of the form `v4.X.0`
+* **Gitpod/Codespaces**: Create a fresh one
+
+This will update your game (and the mathlib version you might be using) to the new lean version.
+
+## Newest developing setup
+
+There are a few files in your game repository which are used for the developing setup
+(dev container/codespaces/gitpod). If you need to update your developing setup, for example because it doesn't work
+anymore, you will need to copy the relevant files from the [GameSkeleton](https://github.com/hhu-adam/GameSkeleton) template into your game repo.
+
+The relevant files are:
+
+```
+.devcontainer/
+.docker/
+.github/
+.gitpod/
+.vscode/
+lakefile.lean
+```
+
+simply copy them from the `GameSkeleton` into your game and proceed as above,
+i.e. `lake update -R && lake build`.
+
+(Note: You should not need to modify any of these files, with the exception of the `lakefile.lean`,
+where you need to add any dependencies of your game, or remove mathlib if you don't need it.)

doc/writing_exercises.md

@@ -0,0 +1,56 @@
+# Writing exercises
+
+This page deals in more details with the `Statement` command and all the options you have
+to write better exercises/levels.
+
+
+## Local `let` definitions
+
+If you want to make a local definition/notation which only holds for this exercise (e.g.
+a function `f : ℤ → ℤ := fun x ↦ 2 * x`) the recommended way is to use a `let`-statement:
+
+```lean
+Statement (a : ℤ) (h : 0 < a) :
+    let f : ℤ → ℤ := fun x ↦ 2 * x
+    0 < f a := by
+  sorry
+```
+
+The game automatically `intros` such `let`-statements, such that you and the player will see
+the following initial proof state:
+
+```
+a: ℤ
+h: 0 < a
+f: ℤ → ℤ := fun x => 2 * x
+⊢ 0 < f a
+```
+
+## "Preamble" & non-`Prop`-valued exercises
+
+You can use the following syntax with `(preamble := tac)` where `tac` is a tactic sequence.
+
+```
+Statement my_statement (preamble := dsimp) (a : ℤ) (h : 0 < a) :
+    0 < f a := by
+  sorry
+```
+
+This tactic sequence will be executed before the exercise is handed to the player.
+
+For example, if your exercise is to construct a structure, you could use `preamble` to fill
+all data fields correctly, leaving all `Prop`-valued fields of the structure as separate goals
+for the player to proof.
+
+Note: `(preamble := tac)` always has to be written between the optional name and the first
+hypothesis. Nevertheless, you can use all hypotheses in the tactic sequence, because it is
+only evaluated at the beginning of the proof.
+
+## Attributes
+
+You can add attributes as you would for a `theorem`. Most notably, you can make your named exercise a `simp` lemma:
+
+```lean
+@[simp]
+Statement my_simp_lemma ...
+```

docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  lean4game:
+    build: .
+    privileged: true # needed to run bubblewrap inside docker
+    environment:
+      - LEAN4GAME_GITHUB_USER=${LEAN4GAME_GITHUB_USER}
+      - LEAN4GAME_GITHUB_TOKEN=${LEAN4GAME_GITHUB_TOKEN}
+    ports:
+      - "8080:8080"
+    volumes:
+      - games_data:/app/games
+
+volumes:
+  games_data:

ecosystem.config.cjs

@@ -2,10 +2,12 @@
 module.exports = {
   apps : [{
     name   : "lean4game",
-    script : "server/index.mjs",
+    script : "relay/index.mjs",
     env: {
-       NODE_ENV: "production",
-       PORT: 8002
+      LEAN4GAME_GITHUB_USER: "",
+      LEAN4GAME_GITHUB_TOKEN: "",
+      NODE_ENV: "production",
+      PORT: 8002
     },
   }]
 }

env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_LEAN4GAME_SINGLE: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

index.html

@@ -33,7 +33,7 @@
       </p>
     </div>
   </noscript>
-  <script src="bundle.js"></script>
+  <script type="module" src="client/src/index.tsx"></script>
 </body>
 
 </html>

package.json

@@ -1,31 +1,43 @@
 {
   "name": "lean4-game",
   "version": "0.1.0",
+  "type": "module",
   "private": true,
   "homepage": ".",
   "dependencies": {
+    "@babel/plugin-transform-optional-chaining": "^7.23.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^4.5.8",
     "@fontsource/roboto-mono": "^4.5.8",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@leanprover/infoview": "^0.4.3",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.1",
     "@reduxjs/toolkit": "^1.9.1",
     "@types/cytoscape": "^3.19.9",
     "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react-swc": "^3.4.0",
     "cross-env": "^7.0.3",
     "cytoscape": "^3.23.0",
     "cytoscape-elk": "^2.1.0",
     "cytoscape-klay": "^3.1.4",
     "debounce": "^1.2.1",
     "express": "^4.18.2",
+    "i18next": "^23.10.1",
+    "i18next-http-backend": "^2.5.0",
+    "i18next-scanner-typescript": "^1.2.0",
     "lean4-infoview": "https://gitpkg.now.sh/leanprover/vscode-lean4/lean4-infoview?de0062c",
-    "lean4web": "github:hhu-adam/lean4web",
-    "octokit": "^2.0.14",
+    "lean4web": "github:hhu-adam/lean4web#414d9e62638a392fca278761b4c61a1d2e138bc7",
+    "octokit": "^3.1.2",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-markdown": "^8.0.4",
     "react-native": "^0.72.3",
     "react-redux": "^8.0.5",
@@ -34,45 +46,41 @@
     "rehype-katex": "^6.0.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
+    "request": "^2.88.2",
     "request-progress": "^3.0.0",
+    "vite": "^4.5.0",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-plugin-svgr": "^4.1.0",
     "vscode-ws-jsonrpc": "^2.0.1",
     "web-worker": "^1.2.0",
     "ws": "^8.11.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@redux-devtools/core": "^3.13.1",
     "@testing-library/react": "^13.4.0",
     "@types/debounce": "^1.2.1",
-    "babel-loader": "^8.3.0",
     "concurrently": "^7.6.0",
     "css-loader": "^6.7.3",
     "file-loader": "^6.2.0",
-    "nodemon": "^2.0.20",
+    "i18next-scanner": "^4.4.0",
+    "nodemon": "^3.0.1",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-shell-plugin-next": "^2.3.1"
+    "url-loader": "^4.1.1"
   },
   "scripts": {
     "start": "concurrently -n server,client -c blue,green \"npm run start_server\" \"npm run start_client\"",
-    "start_server": "cd server && lake build && cross-env NODE_ENV=development nodemon -e mjs --exec \"node ./index.mjs\"",
-    "start_client": "cross-env NODE_ENV=development webpack-dev-server --hot",
-    "build": "cross-env NODE_ENV=production webpack",
-    "production": "cross-env NODE_ENV=production node server/index.mjs",
-    "build_robo": "rm -rf ./Robo && git clone https://github.com/hhu-adam/Robo && docker build ./Robo --file ./Robo/Dockerfile --tag g/hhu-adam/robo && rm -rf ./Robo",
-    "build_nng": "rm -rf ./NNG4 && git clone https://github.com/hhu-adam/NNG4 && docker build ./NNG4 --file ./NNG4/Dockerfile --tag g/hhu-adam/nng4 && rm -rf ./NNG4",
-    "update_lean": "./UPDATE_LEAN.sh"
+    "start_server": "(cd server && lake build) && (cd relay && cross-env NODE_ENV=development nodemon -e mjs --exec \"node ./index.mjs\")",
+    "start_client": "cross-env NODE_ENV=development vite --host",
+    "build": "npm run build_server && npm run build_client",
+    "preview": "vite preview",
+    "build_server": "cd server && lake build",
+    "build_client": "cross-env NODE_ENV=production vite build",
+    "production": "cross-env NODE_ENV=production node relay/index.mjs",
+    "translate": "npx i18next-scanner --config client/i18next-scanner.config.cjs"
   },
   "eslintConfig": {
     "extends": [

relay/bubblewrap.sh

@@ -1,12 +1,17 @@
 #/bin/bash
 
+# Note: This fails if there is no default toolchain installed
 ELAN_HOME=$(lake env printenv ELAN_HOME)
 
+# $1 : the game directory
+# $2 : the lean4game folder
+# $3 : the gameserver executable
+
 (exec bwrap\
-  --ro-bind ../../lean4game /lean4game \
-  --ro-bind ../../$1 /game \
-  --ro-bind $ELAN_HOME /elan \
-  --ro-bind /usr /usr \
+  --bind $2 /lean4game \
+  --bind $1 /game \
+  --bind $ELAN_HOME /elan \
+  --bind /usr /usr \
   --dev /dev \
   --proc /proc \
   --symlink usr/lib /lib\
@@ -22,6 +27,6 @@ ELAN_HOME=$(lake env printenv ELAN_HOME)
   --unshare-uts  \
   --unshare-cgroup \
   --die-with-parent \
-  --chdir "/lean4game/server/build/bin/" \
+  --chdir "/game/.lake/packages/GameServer/server/.lake/build/bin/" \
   ./gameserver --server /game
 )

relay/cpu_usage.py

@@ -0,0 +1,43 @@
+import time
+
+def measure_proc_stat() -> dict[str, int]:
+  proc_stat_header = open("/proc/stat", "r").readline()
+  proc_stat = proc_stat_header.split(' ')[2:]
+  proc_stat[-1] = proc_stat[-1].removesuffix('\n')
+  proc_stat = list(map(int, proc_stat))
+
+  proc_stat_dict= {'user': proc_stat[0],
+                   'nice': proc_stat[1],
+                   'system': proc_stat[2],
+                   'idle': proc_stat[3],
+                   'iowait': proc_stat[4],
+                   'irq': proc_stat[5],
+                   'softirq': proc_stat[6],
+                   'steal': proc_stat[7],
+                   'guest': proc_stat[8],
+                   'guest_nice': proc_stat[9]}
+
+  return proc_stat_dict
+
+if __name__ == "__main__":
+  """
+  Script emulates htop calculation of CPU at the
+  moment of calling.
+  """
+  prev = measure_proc_stat()
+  prev_idle = prev.get('idle') + prev.get('iowait')
+  prev_non_idle = prev.get('user') + prev.get('nice') + prev.get('system') + prev.get('irq') + prev.get('softirq') + prev.get('steal')
+  prev_total = prev_idle + prev_non_idle
+
+  time.sleep(0.1)
+
+  curr = measure_proc_stat()
+  curr_idle = curr.get('idle') + curr.get('iowait')
+  curr_non_idle = curr.get('user') + curr.get('nice') + curr.get('system') + curr.get('irq') + curr.get('softirq') + curr.get('steal')
+  curr_total = curr_idle + curr_non_idle
+
+  d_total = curr_total - prev_total
+  d_idle = curr_idle - prev_idle
+
+  cpu_usage = ((d_total - d_idle)/d_total)
+  print(cpu_usage)

relay/import.mjs

@@ -11,6 +11,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const TOKEN = process.env.LEAN4GAME_GITHUB_TOKEN
+const USERNAME = process.env.LEAN4GAME_GITHUB_USER
 const octokit = new Octokit({
   auth: TOKEN
 })
@@ -41,9 +42,10 @@ async function download(id, url, dest) {
     requestProgress(request({
       url,
       headers: {
-        'User-Agent': 'abentkamp',
+        'accept': 'application/vnd.github+json',
+        'User-Agent': USERNAME,
         'X-GitHub-Api-Version': '2022-11-28',
-        'Authorization': 'Bearer '+TOKEN
+        'Authorization': 'Bearer ' + TOKEN
       }
     }))
     .on('progress', function (state) {
@@ -76,35 +78,44 @@ async function doImport (owner, repo, id) {
       .reduce((acc, cur) => acc.created_at < cur.created_at ? cur : acc)
     artifactId = artifact.id
     const url = artifact.archive_download_url
-    if (!fs.existsSync("tmp")){
-      fs.mkdirSync("tmp");
+    // Make sure the download folder exists
+    if (!fs.existsSync(path.join(__dirname, "..", "games"))){
+      fs.mkdirSync(path.join(__dirname, "..", "games"));
+    }
+    if (!fs.existsSync(path.join(__dirname, "..", "games", "tmp"))){
+      fs.mkdirSync(path.join(__dirname, "..", "games", "tmp"));
     }
     progress[id].output += `Download from ${url}\n`
-    await download(id, url, `tmp/artifact_${artifactId}.zip`)
+    await download(id, url, path.join(__dirname, "..", "games", "tmp", `${owner.toLowerCase()}_${repo.toLowerCase()}_${artifactId}.zip`))
     progress[id].output += `Download finished.\n`
-    await runProcess(id, "/bin/bash", [`${__dirname}/unpack.sh`, artifactId],".")
-    let manifest = fs.readFileSync(`tmp/artifact_${artifactId}_inner/manifest.json`);
-    manifest = JSON.parse(manifest);
-    if (manifest.length !== 1) {
-      throw `Unexpected manifest: ${JSON.stringify(manifest)}`
-    }
-    manifest[0].RepoTags = [`g/${owner.toLowerCase()}/${repo.toLowerCase()}:latest`]
-    fs.writeFileSync(`tmp/artifact_${artifactId}_inner/manifest.json`, JSON.stringify(manifest));
-    await runProcess(id, "tar", ["-cvf", `../archive_${artifactId}.tar`, "."], `tmp/artifact_${artifactId}_inner/`)
-    await runProcess(id, "docker", ["load", "-i", `tmp/archive_${artifactId}.tar`])
+
+    await runProcess(id, "/bin/bash", [path.join(__dirname, "unpack.sh"), artifactId, owner.toLowerCase(), repo.toLowerCase()], path.join(__dirname, ".."))
+
+
+    // let manifest = fs.readFileSync(`tmp/artifact_${artifactId}_inner/manifest.json`);
+    // manifest = JSON.parse(manifest);
+    // if (manifest.length !== 1) {
+    //   throw `Unexpected manifest: ${JSON.stringify(manifest)}`
+    // }
+    // manifest[0].RepoTags = [`g/${owner.toLowerCase()}/${repo.toLowerCase()}:latest`]
+    // fs.writeFileSync(`tmp/artifact_${artifactId}_inner/manifest.json`, JSON.stringify(manifest));
+    // await runProcess(id, "tar", ["-cvf", `../archive_${artifactId}.tar`, "."], `tmp/artifact_${artifactId}_inner/`)
+    // // await runProcess(id, "docker", ["load", "-i", `tmp/archive_${artifactId}.tar`])
+
     progress[id].done = true
-    progress[id].output += `Done.\n`
+    progress[id].output += `Done!\n`
+    progress[id].output += `Play the game at: {your website}/#/g/${owner}/${repo}\n`
   } catch (e) {
     progress[id].output += `Error: ${e.toString()}\n${e.stack}`
   } finally {
+    // clean-up temp. files
     if (artifactId) {
-      fs.rmSync(`tmp/artifact_${artifactId}.zip`, {force: true, recursive: true});
-      fs.rmSync(`tmp/artifact_${artifactId}`, {force: true, recursive: true});
-      fs.rmSync(`tmp/artifact_${artifactId}_inner`, {force: true, recursive: true});
-      fs.rmSync(`tmp/archive_${artifactId}.tar`, {force: true, recursive: true});
+      fs.rmSync(path.join(__dirname, "..", "games", "tmp", `${owner}_${repo}_${artifactId}.zip`), {force: true, recursive: false});
+      fs.rmSync(path.join(__dirname, "..", "games", "tmp", `${owner}_${repo}_${artifactId}`), {force: true, recursive: true});
     }
     progress[id].done = true
   }
+  await new Promise(resolve => setTimeout(resolve, 10000))
 }
 
 export const importTrigger = (req, res) => {

relay/index.mjs

@@ -0,0 +1,251 @@
+import { WebSocketServer } from 'ws';
+import express from 'express'
+import path from 'path'
+import * as cp from 'child_process';
+import * as url from 'url';
+import * as rpc from 'vscode-ws-jsonrpc';
+import * as jsonrpcserver from 'vscode-ws-jsonrpc/server';
+import os from 'os';
+import fs from 'fs';
+import anonymize from 'ip-anonymize';
+import { importTrigger, importStatus } from './import.mjs'
+import process from 'process';
+import { spawn } from 'child_process'
+// import fs from 'fs'
+
+/**
+ * Add a game here if the server should keep a queue of pre-loaded games ready at all times.
+ *
+ * IMPORTANT! Tags here need to be lower case!
+*/
+const queueLength = {
+  "g/hhu-adam/robo": 2,
+  "g/leanprover-community/nng4": 5,
+  "g/djvelleman/stg4": 2,
+  "g/trequetrum/lean4game-logic": 2,
+}
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const app = express()
+
+const PORT = process.env.PORT || 8080;
+
+var router = express.Router();
+
+router.get('/import/status/:owner/:repo', importStatus)
+router.get('/import/trigger/:owner/:repo', importTrigger)
+
+const server = app
+  .use(express.static(path.join(__dirname, '..', 'client', 'dist'))) // TODO: add a dist folder from inside the game
+  .use('/i18n/g/:owner/:repo/:lang/*', (req, res, next) => {
+    const owner = req.params.owner;
+    const repo = req.params.repo
+    const lang = req.params.lang
+
+    const ip = anonymize(req.headers['x-forwarded-for'] || req.socket.remoteAddress)
+    const log = `${process.cwd()}/logs/game-access.log`
+    const header = "date;anon-ip;game;lang\n"
+    const data = `${new Date()};${ip};${owner}/${repo};${lang}\n`
+
+    fs.writeFile(log, header.concat(data), { flag: 'ax' }, (file_exists) => {
+	    if (file_exists) {
+		fs.appendFile(log, data, (err) => {
+		  if (err) console.log("Failed to append to log!")
+		});
+	    }
+    });
+
+    console.log(`[${new Date()}] ${ip} requested translation for ${owner}/${repo} in ${lang}`)
+
+    const filename = req.params[0];
+    req.url = filename;
+    express.static(path.join(getGameDir(owner,repo),".i18n",lang))(req, res, next);
+  })
+  .use('/data/g/:owner/:repo/*', (req, res, next) => {
+    const owner = req.params.owner;
+    const repo = req.params.repo
+    const filename = req.params[0];
+    req.url = filename;
+    express.static(path.join(getGameDir(owner,repo),".lake","gamedata"))(req, res, next);
+  })
+  .use('/data/stats', (req, res, next) => {
+    const statsProcess = spawn('/bin/bash', [path.join(__dirname, "stats.sh"), process.pid])
+    let outputData = ''
+    let errorData = ''
+    statsProcess.stdout.on('data', (data) => {
+      outputData += data.toString();
+    })
+    statsProcess.stderr.on('data', (data) => {
+      errorData += data.toString();
+    })
+    statsProcess.on('close', (code) => {
+      if (code === 0) {
+        res.send(outputData);
+      } else {
+        res.status(500).send(`Error executing script: ${errorData}`)
+        console.error(`stats.sh exited with code ${code}. Error: ${errorData}`)
+      }
+    })
+  })
+  .use('/', router)
+  .listen(PORT, () => console.log(`Listening on ${PORT}`));
+
+const wss = new WebSocketServer({ server })
+
+var socketCounter = 0
+
+const environment = process.env.NODE_ENV
+const isDevelopment = environment === 'development'
+
+/** We keep queues of started Lean Server processes to be ready when a user arrives */
+const queue = {}
+
+function getTag(owner, repo) {
+  return `g/${owner.toLowerCase()}/${repo.toLowerCase()}`
+}
+
+function getGameDir(owner, repo) {
+  owner = owner.toLowerCase()
+  if (owner == 'local') {
+    if(!isDevelopment) {
+      console.error(`No local games in production mode.`)
+      return ""
+    }
+  } else {
+    if(!fs.existsSync(path.join(__dirname, '..', 'games'))) {
+      console.error(`Did not find the following folder: ${path.join(__dirname, '..', 'games')}`)
+      console.error('Did you already import any games?')
+      return ""
+    }
+  }
+
+  let game_dir = (owner == 'local') ?
+    path.join(__dirname, '..', '..', repo) : // note: here we need `repo` to be case sensitive
+    path.join(__dirname, '..', 'games', `${owner}`, `${repo.toLowerCase()}`)
+
+  if(!fs.existsSync(game_dir)) {
+    console.error(`Game '${game_dir}' does not exist!`)
+    return ""
+  }
+
+  return game_dir;
+}
+
+function startServerProcess(owner, repo) {
+
+  let game_dir = getGameDir(owner, repo)
+  if (!game_dir) return;
+
+  let serverProcess
+  if (isDevelopment) {
+    let args = ["--server", game_dir]
+    let binDir = path.join(game_dir, ".lake", "packages", "GameServer", "server", ".lake", "build", "bin")
+    // Note: `cwd` is important to be the `bin` directory as `Watchdog` calls `./gameserver` again
+    if (fs.existsSync(binDir)) {
+      // Try to use the game's own copy of `gameserver`.
+      serverProcess = cp.spawn("./gameserver", args, { cwd: binDir })
+    } else {
+      // If the game is built with `-Klean4game.local` there is no copy in the lake packages.
+      serverProcess = cp.spawn("./gameserver", args,
+        { cwd: path.join(__dirname, "..", "server", ".lake", "build", "bin") })
+    }
+  } else {
+    serverProcess =  cp.spawn("./bubblewrap.sh",
+      [ game_dir, path.join(__dirname, '..')],
+      { cwd: __dirname })
+  }
+
+  serverProcess.on('error', error =>
+    console.error(`Launching Lean Server failed: ${error}`)
+  )
+  if (serverProcess.stderr !== null) {
+    serverProcess.stderr.on('data', data =>
+      console.error(`Lean Server: ${data}`)
+    )
+  }
+  return serverProcess
+}
+
+/** start Lean Server processes to refill the queue */
+function fillQueue(tag) {
+  while (queue[tag].length < queueLength[tag]) {
+    let serverProcess
+    serverProcess = startServerProcess(tag)
+    if (serverProcess == null) {
+      console.error('serverProcess was undefined/null')
+      return
+    }
+    queue[tag].push(serverProcess)
+  }
+}
+
+// // TODO: We disabled queue for now
+// if (!isDevelopment) { // Don't use queue in development
+//   for (let tag in queueLength) {
+//     queue[tag] = []
+//     fillQueue(tag)
+//   }
+// }
+
+const urlRegEx = /^\/websocket\/g\/([\w.-]+)\/([\w.-]+)$/
+
+wss.addListener("connection", function(ws, req) {
+    const reRes = urlRegEx.exec(req.url)
+    if (!reRes) { console.error(`Connection refused because of invalid URL: ${req.url}`); return; }
+    const owner = reRes[1]
+    const repo = reRes[2]
+
+    const tag = getTag(owner, repo)
+
+    let ps
+    if (!queue[tag] || queue[tag].length == 0) {
+      ps = startServerProcess(owner, repo)
+    } else {
+        console.info('Got process from the queue')
+        ps = queue[tag].shift() // Pick the first Lean process; it's likely to be ready immediately
+        fillQueue(tag)
+    }
+
+    if (ps == null) {
+      console.error('server process is undefined/null')
+      return
+    }
+
+    socketCounter += 1;
+    const ip = anonymize(req.headers['x-forwarded-for'] || req.socket.remoteAddress)
+
+    // TODO (Matvey): extract further information from `req`, for example browser language.
+    console.log(`[${new Date()}] Socket opened - ${ip} - ${owner}/${repo}`)
+
+    const socket = {
+        onMessage: (cb) => { ws.on("message", cb) },
+        onError: (cb) => { ws.on("error", cb) },
+        onClose: (cb) => { ws.on("close", cb) },
+        send: (data, cb) => { ws.send(data,cb) }
+    }
+    const reader = new rpc.WebSocketMessageReader(socket)
+    const writer = new rpc.WebSocketMessageWriter(socket)
+    const socketConnection = jsonrpcserver.createConnection(reader, writer, () => ws.close())
+    const serverConnection = jsonrpcserver.createProcessStreamConnection(ps)
+    socketConnection.forward(serverConnection, message => {
+        if (isDevelopment) {console.log(`CLIENT: ${JSON.stringify(message)}`)}
+        return message;
+    })
+    serverConnection.forward(socketConnection, message => {
+      if (isDevelopment) {console.log(`SERVER: ${JSON.stringify(message)}`)}
+        return message;
+    });
+
+    console.log(`[${new Date()}] Number of open sockets - ${socketCounter}`)
+    console.log(`[${new Date()}] Free RAM - ${Math.round(os.freemem() / 1024 / 1024)} / ${Math.round(os.totalmem() / 1024 / 1024)} MB`)
+
+    ws.on('close', () => {
+      console.log(`[${new Date()}] Socket closed - ${ip}`)
+      socketCounter -= 1
+    })
+
+    socketConnection.onClose(() => serverConnection.dispose())
+    serverConnection.onClose(() => socketConnection.dispose())
+})

relay/stats.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# Load python interpreter
+python=/usr/bin/python3
+# Load python script
+cpu_usage=relay/cpu_usage.py
+# Execute python script
+cpu=$($python $cpu_usage)
+# Calculate memory usage by computing 1 - %free_memory
+mem=$(free | sed '2q;d' | awk '{print 1 - ($4/$2)}')
+
+printf "CPU, MEM\n%f, %f\n" $cpu $mem

relay/unpack.sh

@@ -0,0 +1,34 @@
+#/bin/bash
+
+ARTIFACT_ID=$1
+OWNER=$2
+REPO=$3
+
+# mkdir -p games
+cd games
+
+# mkdir -p tmp
+mkdir -p ${OWNER}
+
+echo "Unpacking ZIP."
+unzip -o tmp/${OWNER}_${REPO}_${ARTIFACT_ID}.zip -d tmp/${OWNER}_${REPO}_${ARTIFACT_ID}
+echo "Unpacking game."
+
+# exit the npm project to avoid reloading. TODO: Where should we actually save these?
+
+
+
+echo "Delete old version of the game"
+rm -rf ${OWNER}/${REPO}
+mkdir -p ${OWNER}/${REPO}
+
+for f in tmp/${OWNER}_${REPO}_${ARTIFACT_ID}/* #Should only be one file
+do
+  echo "Unpacking $f"
+  #tar -xvzf $f -C games/${OWNER}/${REPO}
+  unzip -q -o $f -d ${OWNER}/${REPO}
+done
+
+# Delete temporary files
+rm -f tmp/${OWNER}_${REPO}_${ARTIFACT_ID}.zip
+rm -fr tmp/${OWNER}_${REPO}_${ARTIFACT_ID}

server/.gitignore

@@ -1,3 +0,0 @@
-build
-adam
-nng

server/GameServer.lean

@@ -0,0 +1,17 @@
+import GameServer.FileWorker
+import GameServer.Commands
+
+-- TODO: The only reason we import `Commands` is so that it gets built to on `lake build`
+-- should we have a different solution?
+
+unsafe def main : List String → IO UInt32 := fun args => do
+  let e ← IO.getStderr
+
+  Lean.enableInitializersExecution
+
+  -- TODO: remove this argument
+  if args[0]? == some "--server" then
+    GameServer.FileWorker.workerMain {} args
+  else
+    e.putStrLn s!"Expected `--server`"
+    return 1

server/GameServer/AbstractCtx.lean

@@ -1,4 +1,5 @@
 import Lean
+import GameServer.Utils
 
 section AbstractCtx
 open Lean
@@ -20,7 +21,7 @@ def abstractCtx (goal : MVarId) : MetaM AbstractCtxResult := do
 def openAbstractCtxResult (res : AbstractCtxResult) (k : Array Expr → Expr → MetaM α) : MetaM α := do
   let (_mvars, _binderInfo, expr) ← openAbstractMVarsResult res.abstractMVarsResult
   lambdaLetTelescope (← instantiateMVars expr) k
-  -- TODO: Unfornately, lambdaLetTelescope does not allow us to provide the number of arguments.
+  -- TODO: Unfortunately, lambdaLetTelescope does not allow us to provide the number of arguments.
   -- If the goal is a function, this will not work.
 
 end AbstractCtx