Skip to content

ChillerDragon/twwe

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c8d0cb5 · Oct 19, 2024
Oct 25, 2023
Oct 19, 2024
Aug 17, 2023
Sep 14, 2023
Oct 19, 2024
Aug 22, 2023
Jan 2, 2023
Oct 19, 2024
Aug 12, 2022
Aug 13, 2023
Oct 19, 2024

Repository files navigation

Teeworlds Web Editor (TWWE)

TWWE on Sunny Side Up by Ravie.

Teeworlds / DDraceNetwork map editor. Online and collaborative, just like the game.

A demo server is hosted at tw.thissma.fr. A DDNet server is hosted with the name twwe -- tw.thissma.fr (ip: 82.64.235.33:8303).

Development Status (Oct. 2023)

The app is now mostly compatible with ddnet editor. Bugs are expected. It is advised to save regularly and if a bug happens, log out and back in to roll back to the previous save. Maps corruptions are unlikely to happen though thanks to @patiga's twmap library.

DDNet Compatibility

The table below shows the feature parity with ddnet's in-game map editor.

Support Comment
Groups
Layers
Images Image tab planned
Envelopes UX needs improvement
Sounds Not planned
Map details
Tiles 🆗 Missing: Shift tiles, Auto game tiles
Quads 🆗 Missing: Slice, Square, Align, Aspect ratio
Automappers
Server settings 🆗 Better support for server settings planned (#77)
Misc. Tools Missing: Append map, Allow/Remove unused, Destructive, Refocus, Goto, Place border
Misc. display Missing: Tile info, Grid, Proof, High detail, Zoom

Unique features

  • Collaborative editing
  • Automapper edit and live-preview
  • Rules++ support (experimental)

Roadmap to 1.0

  • Desktop client
  • Server bridging
  • sync with ddnet server / reload-on-save (#21)
  • Map passwords and permissions
  • Undo / Redo history (#31)
  • More tools: Proof, Quad tools
  • Bug squashing

Usage

Explore the UI, it resembles the ddnet editor for the most part.

Using the website

You can use this editor by simply going to tw.thissma.fr. You should see the default server with a bunch of maps that others created. For the default server, a ddnet server is also running with name twwe -- tw.thissma.fr on which you can test your map immediately. The server is reloaded each time the map is saved.

Using the standalone app

Alternatively, you can install the app to use the editor offline. On startup, the editor will look for maps in the various ddnet folders.

With the external editor, you can also enable sharing your map (top-right button), which gives access to you map to other users via one of the servers.

Key/Mouse bindings

Key Action
WheelUp / Down Zoom in / out
W / A / S / D / ↑ / ↓ / ← / → Move around
Ctrl🖱️ Left
🖱️ Middle
Pan around
🖱️ Left Copy tiles (empty selection)
Paste tiles
Shift🖱️ Left Delete tiles (empty selection)
Fill tiles (repeat selection)
🖱️ Right Clear selection
Space (hold) Open the tile picker
H / N Mirror selection horizontally
V / M Mirror selection vertically
R Rotate selection clockwise
ShiftR
T
Rotate selection counter-clockwise
Tab Show / Hide sidebars
CtrlS Save map
Save automapper
CtrlP Save map
Preview automapper

Additionally:

  • 🖱️ Right opens context-menus on quad points, envelope points and envelope lines.
  • You can select multiple layers with shift.
  • The Save button saves the map on the disk on the server side. If a teeworlds server using this map is running, enter reload in the server console to update it.

Building and Running

The code is split into a client, a desktop and a server part. The client generates a static site (html, js, …) that you can host wherever you want or even run locally. The server is a HTTP and WebSocket server that the client connects to. The maps are stored on the server machine.

the server can be installed from cargo: cargo install twwe-server

Server

Have rust and cargo installed. And create a server/maps/ directory with your .map files in it.

Run the server with twwe-server --maps <path_to_maps_dir> to run in release mode with debugging info printed to stdout.

Use the first command-line argument to change address and port e.g. twwe-server localhost:3333 --maps ... to run locally on port 3333.

Use the --cert and --key arguments to enable TLS support for websocket. They must point to your PEM certificate and private key.

Use the --rpp <path> argument to enable Rules++ support (experimental). <path> must be the absolute path to a directory containing: rpp (the rpp executable), base.r and base.p.

Limits

The HTTP server is rate-limited per IP. It allows bursts of 8 requests and then 500ms between requests. This is currently not configurable.

The --max-maps <Amount> argument limits the number of maps created by users. The --max-map-size <MiB> argument limits the size of each map file.

Server bridging

With the desktop client, it is possible to connect a "bridge" to a remote server (e.g. pi.thissma.fr:16900), to allow other users to access and edit a map on your hard drive from the internet. This feature has security implications for both the server and the client, so make sure you understand them before enabling bridging.

  • For the client, enabling bridge essentially gives the internet a direct access to the map file on your computer. Anyone who has access to the passphrase can do damage to your map file. Make sure you make a backup and trust the people with whom you share the passphrase.
  • For the server, bridging initiates a connection to an arbitrary websocket url chosen by the client. Make sure your server may not leak the local network or connect to unwanted networks.

The bridge_out and bridge_in feature flags guard this feature and are disabled by default. You can enable them with cargo run --feature bridge_in -- ....

Client

Copy the env.example file to .env or .env.production and configure the websocket server url.

Have npm installed and run npm install in the client directory to install dependencies, npm run dev to run a dev server and npm run build to produce a release in the dist directory.

Note: the client is written in non-strict Typescript. Typescript is only used for IDE hints and documentation, but ignored by the Vite bundler. Use npm run check to run Typescript checks on the project.

Desktop

The desktop client is a Tauri web-app that you can install and enables editing your local map files like the default editor. You can also enable sharing your maps over the internet (read Server bridging).

The app spins up a localhost server on port 16800. It looks for maps in the "standard" ddnet folders (see storage.cfg: $USERDIR, $DATADIR and $CURRENTDIR).

Binaries are can be found in the releases page.

License

This work is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). You are free to use and modify the code and executables under some conditions. Please contact me if the license doesn't fit your needs.

About

Teeworlds collaborative map editor online

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 36.6%
  • Svelte 30.1%
  • Rust 27.9%
  • SCSS 3.5%
  • JavaScript 1.7%
  • HTML 0.2%