https://github.com/lexux3000/vrg_demo

Military simulation React.js demo
https://github.com/lexux3000/vrg_demo

css express mui reactjs socket-io sqlite3 typescript

Last synced: 3 months ago
JSON representation

Military simulation React.js demo

• Host: GitHub
• URL: https://github.com/lexux3000/vrg_demo
• Owner: Lexux3000
• Created: 2025-01-28T10:50:11.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-09T12:53:16.000Z (over 1 year ago)
• Last Synced: 2025-02-17T03:31:13.257Z (over 1 year ago)
• Topics: css, express, mui, reactjs, socket-io, sqlite3, typescript
• Language: TypeScript
• Homepage:
• Size: 9.37 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
K spuštění aplikace (terminal):

- cd frontend

- (optinal if yarn is not installed => npm install -g yarn)

- yarn install

- yarn run build

- yarn start build

App should run on: http://localhost:3000/

Za využití libovolných frameworků, knihoven a nástrojů navrhněte a připravte rozhraní simulátoru bojových operací. Základ by měl tvořit:

- MenuBar

- Main layout (dockable view)

  - panel mapy

  - panel řízení simulace

  - panel informaci o vybrané jednotce

  - panel data-logu

![Ukázkový wireframe](images/exampleWireframe.png)

Aplikace by měla implementovat:

- zobrazení mapového podkladu (např. pomocí OpenLayers - https://openlayers.org/)

- vykreslení entit v mapě (třeba jako symboly dle definice NATO - https://commons.wikimedia.org/wiki/NATO_Military_Map_Symbols)

- kliknutím na entitu v mapě:

  - zobrazit informace v panelu entity (typ, volací znak, pozice, aktuální úloha, rychlost, stav poškození, množství munice, ...)

  - vykreslit její trasu do mapy (tu lze mít libovolně staticky definovanou)

- layout umožňující dokování do flexibilních panelů (nebo jiný vhodný NE-statický layout)

- zobrazení nějakého modálního dialogu (např. měření vzdálenosti mezi dvěma entitami)

- klikatelné tlačítka řízení simulace play/pause/step/stop (jejichž akce jsou např. zapisovány do panelu data-logu)

## Smysl Vašeho dema

Není nutné připravovat pixel-perfect rozhraní, řešit všechny okrajové případy nebo ukazovat 100% znalost mapových a jiných knihoven. Není důležitý ani vzhled. Demo by mělo primárně ukazovat Vaši schopnost zorientovat se v požadovaných technologiích, zvolit ty nejvýhodnější a navrhnout s nimi dobrou architekturu celé aplikace.

## Další rozšíření

- Při spuštění se frontend-aplikace pokouší spojit s backendem přes websocket a dokud se nenačte, tak se zobrazuje loading screen.

- Backend posílá přes websocket informace o

    - nově vytvořených entitách

    - pozicích a stavu entit

    - entitách, které byly zničeny.

- Frontend posílá backendu povely pro řízení simulace (play/pause/step/stop).

- Frontend slouží k řízení pohybu entit klikáním do mapy - přidává body do naplánované trasy entity.

Pokud budete mít čas, tak v libovolné technologii implementujte jednoduchý websocket backend, který provádí některou z výše uvedených činností.