@fuzo/soccer-board 0.2.0-alpha.2 → 0.2.0-alpha.3

package/.claude/settings.local.json

@@ -0,0 +1,6 @@
+{
+  "enabledMcpjsonServers": [
+    "nx-mcp"
+  ],
+  "enableAllProjectMcpServers": true
+}

package/CHANGELOG.md

@@ -0,0 +1,98 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0-alpha.3] - 2026-01-18
+
+### Added
+- Control for `maxPlayersPerSide` in demo application
+
+### Fixed
+- **Consistent Coordinate System**: Fixed critical issue where player positions were lost when switching between Landscape and Portrait orientations
+  - Made `fieldX` always represent length (0-100%) regardless of orientation
+  - Made `fieldY` always represent width (0-100%) regardless of orientation
+  - Coordinates now represent the same physical position regardless of orientation
+  - Transform coordinates only during rendering in `fieldToHalfCoordinates()`
+
+### Changed
+- **CSS-Based Responsive Sizing**: Implemented pure CSS responsive sizing using `aspect-ratio`
+  - Landscape: `width: 100%`, `height: auto` (calculated by aspect-ratio)
+  - Portrait: `height: 100%`, `width: auto` (calculated by aspect-ratio)
+  - Removed fixed widths from players sidebar (300px) for full responsiveness
+  - Container centered horizontally in Portrait, vertically in Landscape
+  - Removed `ngAfterViewInit()` that was calling `updateFieldSize()` unnecessarily
+  - Only use JavaScript size calculations when `fit="contain"` is explicitly set
+  - Removed `updateFieldSizeFromCSS()` call from `updateFieldSize()` fallback
+- Updated players grid gap to 1.5rem for better spacing
+
+## [0.2.0-alpha.2] - 2026-01-10
+
+### Fixed
+- **Drag and Drop Positioning Fix**: Fixed critical issue where players would not position correctly when dropped, especially when multiple players were on the field
+  - Improved calculation of drop position to use cursor coordinates more accurately
+  - Fixed timing issue where styles were cleaned before new position bindings were applied
+  - Optimized `playerPositions` computed signal to prevent unnecessary re-renders during drag
+  - Players now correctly stay where the mouse is dropped on the field
+  - Other players no longer "twitch" or move unexpectedly during drag operations
+
+### Improved
+- Better synchronization between drag end event and position update
+- More stable rendering during drag operations with multiple players on field
+
+## [0.2.0-alpha.1] - 2026-01-09
+
+### Fixed
+- **Drag and Drop Fix**: Fixed issue where player card would "jump" or move away from mouse cursor when starting to drag
+  - Now applies `position: fixed` immediately at drag start to maintain visual position
+  - Correctly calculates offset relative to click point before applying fixed positioning
+  - Player card now smoothly follows cursor during drag without jumping
+
+### Changed
+- Improved drag offset calculation to prevent visual jumps when initiating drag operation
+- Better handling of element positioning during drag state transitions
+
+## [0.1.0-alpha.2] - 2025-01-XX
+
+### Changed
+- **BREAKING**: Renamed all types and interfaces with `SoccerBoard` prefix to prevent naming conflicts
+  - `Player` → `SoccerBoardPlayer`
+  - `FieldOrientation` → `SoccerBoardOrientation`
+  - `TeamSide` → `SoccerBoardTeamSide`
+  - `FitMode` → `SoccerBoardFitMode`
+  - `PlayerSize` → `SoccerBoardPlayerSize`
+  - `FIELD_CONSTANTS` → `SoccerBoardFieldConstants`
+  - `PositionZone` → `SoccerBoardPositionZone` (internal)
+  - All type aliases updated (e.g., `FieldOrientationType` → `SoccerBoardOrientationType`)
+
+### Fixed
+- Improved type safety and namespace isolation
+- Better IDE autocomplete grouping
+
+## [0.1.0-alpha.1] - 2025-01-XX
+
+### Added
+- Initial alpha release
+- FIFA-compliant soccer field component with accurate dimensions and markings
+- Support for portrait and landscape orientations
+- Drag and drop functionality for positioning players on the field
+- Tactical position detection (GK, CB, RB, LB, CDM, CM, CAM, LW, RW, ST, etc.)
+- Beautiful player cards with photos, numbers, and positions
+- Export to PNG functionality with high-quality images
+- Responsive design with `fit="contain"` mode
+- Integrated layout with player sidebar and field
+- Player click events for interaction
+- Maximum players per side configuration
+- Player removal from field functionality
+- 100% reactive implementation using Angular signals
+- Tailwind CSS styling support
+- Server-side rendering (SSR) compatibility
+
+### Technical Details
+- Built with Angular 21+ (standalone components)
+- Uses Angular signals for reactive state management
+- Supports modern CSS color functions (oklab/oklch) via html2canvas-pro
+- Fully typed with TypeScript
+- Zero dependencies (except Angular peer dependencies)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzo/soccer-board",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.3",
   "description": "A beautiful, interactive soccer field component for Angular applications. Create tactical formations, manage player positions, and export your field as PNG images.",
   "keywords": [
     "angular",
@@ -25,9 +25,13 @@
     "url": ""
   },
   "homepage": "",
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "link": "npm run build && ./scripts/link.sh",
+    "unlink": "./scripts/unlink.sh"
+  },
   "dependencies": {
-    "html2canvas-pro": "^1.6.0",
-    "tslib": "^2.3.0"
+    "html2canvas-pro": "^1.6.0"
   },
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -36,16 +40,5 @@
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
-  },
-  "module": "fesm2022/fuzo-soccer-board.mjs",
-  "typings": "types/fuzo-soccer-board.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/fuzo-soccer-board.d.ts",
-      "default": "./fesm2022/fuzo-soccer-board.mjs"
-    }
   }
-}
+}

package/scripts/link.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# Script para crear el npm link correctamente para @fuzo/soccer-board
+# Uso: npm run link (desde soccer-board-angular/)
+
+set -e
+
+# Obtener el directorio de node_modules global
+NPM_ROOT=$(npm root -g)
+
+# Ruta absoluta al dist
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+DIST_PATH="$(cd "$SCRIPT_DIR/../../dist/soccer-board-angular" && pwd)"
+
+# Crear directorio @fuzo si no existe
+mkdir -p "$NPM_ROOT/@fuzo"
+
+# Crear o actualizar el symlink
+LINK_PATH="$NPM_ROOT/@fuzo/soccer-board"
+
+if [ -L "$LINK_PATH" ]; then
+  echo "Removing existing link..."
+  rm "$LINK_PATH"
+fi
+
+echo "Creating link: $LINK_PATH -> $DIST_PATH"
+ln -s "$DIST_PATH" "$LINK_PATH"
+
+echo "✅ Link creado correctamente!"
+echo "   $LINK_PATH -> $DIST_PATH"
+echo ""
+echo "Ahora desde tu proyecto ejecuta:"
+echo "   npm link @fuzo/soccer-board"

package/scripts/unlink.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Script para remover el npm link de @fuzo/soccer-board
+# Uso: npm run unlink (desde soccer-board-angular/)
+
+NPM_ROOT=$(npm root -g)
+LINK_PATH="$NPM_ROOT/@fuzo/soccer-board"
+
+if [ -L "$LINK_PATH" ]; then
+  echo "Removing link: $LINK_PATH"
+  rm "$LINK_PATH"
+  echo "✅ Link removido correctamente!"
+else
+  echo "⚠️  Link no encontrado o ya fue removido"
+fi