This Tactical Soccer Board is a web application that provides an interactive platform for creating and managing soccer tactics. Users can dynamically place players, draw shapes, and add annotations on a soccer field to visualize and plan strategies effectively.
- Player Management: Add and move player tokens on the soccer field.
- Drawing Tools: Use various tools to draw lines, arrows, circles, rectangles, and add text annotations.
- Soccer Ball: Add and move a soccer ball on the field.
- Toolbar: A set of interactive buttons to manage tools, download the board as an image, and toggle fullscreen mode.
- Responsive Design: The application adapts to different screen sizes and maintains a user-friendly interface.
tactical-soccer-board/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ ├── app.js
│ ├── field.js
│ ├── players.js
│ └── tools.js
├── assets/
│ └── soccer-ball.svg
└
- Ensure you have a modern web browser installed (e.g., Chrome, Firefox, Safari).
- Clone the Repository:
git clone https://github.com/Nimsalcade/Tactical-Soccer-Board.git
- Navigate to the Directory:
cd tactical-soccer-board - Open
index.htmlin a Web Browser:- You can directly open
index.htmlby double-clicking it in your file explorer, or - Use a simple HTTP server to serve the files. For example, using Python:
Then, open a web browser and go to
python -m http.server
http://localhost:8000.
- You can directly open
If you want to generate a contents file for the directory structure (useful for documentation), you can run the provided Python script:
python done.py /path/to/tactical-soccer-boardThis will create a tactical-soccer-board_contents.txt file with the directory's contents.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.