Nach „Neues Projekt" erscheint die Feldauswahl mit vier Varianten:

Hochkant · Ganz

Volles Spielfeld, vertikal (Standard 11v11)

Hochkant · Halb

Halbfeld vertikal (Angriffsvorbereitung)

Quer · Ganz

Volles Spielfeld, horizontal

Quer · Halb

Halbfeld horizontal

Die vier Feldvarianten

Die App besteht aus vier Bereichen:

• Topbar (oben) — Menüs, Projektname, Sprache, Teilen
• Linke Sidebar — Werkzeugauswahl
• Canvas (Mitte) — das Spielfeld mit allen platzierten Elementen
• Rechtes Panel — kontextabhängige Einstellungen für das aktive Werkzeug

Die vier Hauptbereiche der App

Canvas-Steuerung

Das Spielfeld lässt sich zoomen und verschieben:

• Zoom: Schaltflächen − / + unten rechts, oder Pinch-Geste auf Touchscreen
• Zentrieren: Klick auf die Prozentanzeige setzt Zoom und Position zurück
• Verschieben: Im Bearbeiten-Modus (V) das Spielfeld durch Klicken und Ziehen verschieben, oder Zwei-Finger-Wischen auf Touchpad / Touchscreen

Dunkles Spielfeld

Über das Sonnen-/Mond-Symbol in der Topbar wird das Spielfeld zwischen hellem und dunklem Hintergrund umgeschaltet. Elemente in der Farbe Schwarz werden auf dem dunklen Feld automatisch weiß dargestellt.

Helles Feld

Dunkles Feld

Projektname

Der Projektname in der Topbar-Mitte ist direkt anklickbar und editierbar. Er erscheint auch im Dateinamen beim Speichern und Exportieren. Hinter dem Namen zeigt ein Punkt „Automatisch gespeichert" — die App speichert kontinuierlich im Browser-Speicher.

Das Spieler-Werkzeug wird über die linke Sidebar oder die Taste P aktiviert. Ein Klick auf das Feld platziert sofort einen Spieler mit den aktuellen Panel-Einstellungen.

Spieler-Panel mit allen Einstellungen

Spielertypen

Verteidiger (DP)

Gefüllter Kreis — für defensive Positionen

Angreifer (OP)

Gefülltes Dreieck — für offensive Positionen

Verteidiger gerichtet (DPD)

Kreis mit Richtungsanzeige

Angreifer gerichtet (OPD)

Dreieck mit Richtungsanzeige

Einstellungen

• Größe: Schieberegler 1–7
• Ausrichtung: −180° bis +180° in 15°-Schritten (nur bei gerichteten Typen)
• Farbe: Farbpalette mit Blau, Gelb, Rot, Grün, Grau, Schwarz
• Nummer: Texteingabe für Trikotnummer (max. 3 Zeichen)
• Vorschau: Zeigt den Spieler mit aktuellen Einstellungen in Echtzeit

Linien-Panel mit allen 9 Linientypen

Linientypen

Freihand

Freies Zeichnen durch Klicken & Ziehen

Linie

Gerade: 2 Klicks (Start, Ende)

Bogen

Gebogene Linie: 3 Klicks (Start, Bogen, Ende)

Pfeil

Gerade mit Pfeilspitze — für Pässe und Läufe

Gestrichelter Pfeil

Gestrichelt — für Läufe ohne Ball

Wellenpfeil

Wellenform — für Dribblings

Gebogener Pfeil

Kurvenförmige Laufrichtung

Geb. gestrichelt

Gebogener Lauf ohne Ball

Geb. Welle

Gebogenes Dribbling

Einstellungen

• Farbe: Farbpalette
• Stärke: 2–6 px in 0,5-px-Schritten

Formen werden durch Klicken und Ziehen auf dem Feld aufgezogen. Das Polygon wird durch Klicks auf einzelne Punkte und Doppelklick (oder Enter) zum Schließen gezeichnet.

Formen-Panel mit Fläche- und Kontur-Modus

Formtypen

Rechteck

Aufziehen mit Klick & Ziehen

Oval

Aufziehen mit Klick & Ziehen

Dreieck

Aufziehen mit Klick & Ziehen

Freiform (Polygon)

Punkte klicken, Doppelklick zum Schließen

Fläche vs. Kontur

Im Panel gibt es zwei Farbzeilen:

• Fläche — Farbe wählen aktiviert die ausgefüllte Form (ohne Outline)
• Kontur — Farbe wählen aktiviert den Kontur-Modus (nur Rand, keine Füllung). Bei Kontur erscheint ein zusätzlicher Stärke-Schieberegler (1–12 px)

Weitere Einstellungen

• Transparenz: 10–100 % in 5-%-Schritten
• Rotation: −180° bis +180° (nur Rechteck und Dreieck)

Ein Klick auf das Feld platziert das ausgewählte Objekt. Alle Objekte sind als Vektorgrafiken gerendert und skalieren verlustfrei.

Objekte-Panel mit allen 8 Objekttypen und Vorschau

Objekttypen

Ball

Fußball (keine Farbauswahl)

Tor

Tor in Vogelperspektive

Koordinationsleiter

Trainingsleiter

Dummy

Abwehr-Dummy / Pfosten

Fahne

Eckfahne / Slalomstange

Kegel

Hoher Trainingskegel

Hütchen

Flaches Markierungshütchen

Hürde

Koordinationshürde

Einstellungen

• Größe: 1–7
• Ausrichtung: −180° bis +180° in 15°-Schritten (außer Ball)
• Farbe: Farbpalette (außer Ball)
• Vorschau: Zeigt das Objekt mit aktuellen Einstellungen

Text-Panel mit Eingabe und Vorschau

Text eingeben, Größe und Farbe wählen, dann auf das Feld klicken zum Platzieren. Schriftgröße: 10–72 px. Der Text wird zentriert am Klickpunkt gesetzt.

Bearbeiten-Modus (V)

Im Bearbeiten-Modus wird jedes Element auf dem Feld durch Anklicken ausgewählt. Das rechte Panel zeigt dann alle editierbaren Eigenschaften des ausgewählten Elements:

Spieler — Farbe, Größe, Nummer, Ausrichtung

Form — Fläche/Kontur, Transparenz, Rotation

Linie — Farbe, Stärke

Kein Element ausgewählt

Verschieben

Ausgewählte Elemente lassen sich durch Klicken und Ziehen frei auf dem Feld repositionieren. Die Aktion ist mit ⌘Z rückgängig zu machen.

Schnelles Löschen

Ausgewählte Elemente können jederzeit mit ⌫ (Backspace) oder Entf (Delete) gelöscht werden — unabhängig vom aktiven Werkzeug. Element anklicken, Taste drücken, fertig.

Rechtsklick-Kontextmenü

Ein Rechtsklick auf ein Element öffnet ein Kontextmenü mit der Option „Löschen". Praktisch, wenn man direkt auf dem Feld arbeitet und nicht zum Radierer wechseln möchte.

Löschen-Modus (E)

Im Löschen-Modus wird jedes angeklickte Element sofort entfernt. Auch hier greift ⌘Z zum Rückgängigmachen.

Löschen-Modus aktiv

Escape-Taste

Esc bricht die aktuelle Aktion ab (Zeichnen, Auswahl) und wechselt automatisch zum Bearbeiten-Werkzeug zurück.

Undo / Redo

Alle Aktionen (Platzieren, Verschieben, Löschen, Eigenschaftsänderungen) sind rückgängig zu machen:

• ⌘Z — Rückgängig (bis zu 60 Schritte)
• ⇧⌘Z oder ⌘Y — Wiederherstellen

Datei-Menü

Bearbeiten-Menü

Datei

• Neues Projekt ⌘N — Öffnet die Feldauswahl für ein neues Projekt
• Projekt öffnen… ⌘O — Lädt eine .1x1-Datei vom Gerät
• Speichern ⌘S — Speichert das aktuelle Projekt als .1x1-Datei
• Speichern unter… ⇧⌘S — Speichert mit neuem Namen
• Als PNG exportieren… — Exportiert das Spielfeld (ohne UI) als Bilddatei

Dateiformat .1x1

Projekte werden als .1x1-Dateien gespeichert (JSON-Format). Diese Dateien enthalten alle platzierten Elemente, Feldvariante und Projektname und können auf jedem Gerät wieder geöffnet werden.

Bearbeiten

• Rückgängig ⌘Z
• Wiederherstellen ⇧⌘Z
• Feld leeren… — Entfernt alle Elemente nach Bestätigung (Feld bleibt)

Der Teilen-Button in der Topbar öffnet den Teilen-Dialog mit zwei Tabs:

Tab: Bild (PNG)

Exportiert das Spielfeld mit allen Elementen als PNG-Datei. Die App rendert das Bild direkt im Browser — kein Server, keine Wartezeit. Das Bild enthält nur das Feld und die Elemente, keine UI-Elemente.

PNG-Export mit Vorschau und Download

Tab: Projekt-Link

Kodiert das gesamte Projekt in einen URL. Wer den Link öffnet, sieht genau die Tafel mit allen Elementen — kein Login, kein Server nötig. Das Projekt steckt vollständig im Link selbst (Base64-kodiertes JSON im URL-Hash).

Projekt-Link — komplett serverseitenlos

Werkzeuge

Datei

Bearbeiten

Formen zeichnen