{{ 'common.empty_list'|trans }}
+{{ 'empty_list'|trans }}
{% endif %} @@ -470,7 +482,7 @@ Backoffice list pages follow a consistent template pattern for displaying filter 3. **Conditional Data Display**: - Check `{% if items is not empty %}` before rendering table - - Show `{{ 'common.empty_list'|trans }}` message when no data + - Show `{{ 'empty_list'|trans }}` message when no data 4. **Table Styling**: - `table-responsive` wrapper for mobile scrolling @@ -488,7 +500,7 @@ Backoffice list pages follow a consistent template pattern for displaying filter - Pass item data via `data-*` attributes for JavaScript handling 7. **Empty State**: - - Simple text message: `{{ 'common.empty_list'|trans }}
` + - Simple text message: `{{ 'empty_list'|trans }}
` **Sorting Implementation**: @@ -528,13 +540,134 @@ Copy `.env` to `.env.local` and configure: ## Testing -Run tests with PHPUnit: +LARPilot uses **Codeception** for all testing (unit, functional, and acceptance tests). + +### Running Tests + ```bash -vendor/bin/phpunit -c phpunit.xml.dist +# Run all tests +make test + +# Run specific test suites +make test-unit # Unit tests only (fast, no database) +make test-functional # Functional tests (with database, no browser) +make test-acceptance # Acceptance tests (browser-based) + +# Run a specific test file or path +make test-filter FILTER=Functional/Authentication/UserSignupAndApprovalCest +make test-filter FILTER=Unit/Domain/Infrastructure + +# Rebuild actors after suite configuration changes +make test-build ``` +### Test Structure + +``` +tests/ +├── Unit/ # Unit tests (no dependencies) +├── Functional/ # Functional tests (with database) +├── Acceptance/ # Browser-based tests +└── Support/ + ├── Helper/ + │ └── Authentication.php # Custom Codeception helper + └── Factory/ # Foundry factories (organized by domain) + ├── Account/ + ├── Core/ + └── Survey/ +``` + +### Writing Tests + +**Functional Test Example** (Cest format): +```php +wantTo('verify PENDING users cannot access backoffice'); + + $pendingUser = $I->createPendingUser(); + $I->amLoggedInAs($pendingUser); + + $I->amOnRoute('backoffice_larp_create'); + $I->seeResponseCodeIs(302); + } +} +``` + +### Authentication Helper Methods + +The `Authentication` helper (`tests/Support/Helper/Authentication.php`) provides factory-based methods for test data: + +**User Creation:** +- `$I->createPendingUser()` - Create PENDING user +- `$I->createApprovedUser()` - Create APPROVED user +- `$I->createSuspendedUser()` - Create SUSPENDED user +- `$I->createBannedUser()` - Create BANNED user +- `$I->createSuperAdmin()` - Create SUPER_ADMIN user + +**Authentication:** +- `$I->amLoggedInAs($user)` - Log in as specific user + +**LARP Creation:** +- `$I->createLarp($organizer)` - Create LARP (default: DRAFT) +- `$I->createDraftLarp($organizer)` - Create DRAFT LARP +- `$I->createPublishedLarp($organizer)` - Create PUBLISHED LARP +- `$I->addParticipantToLarp($larp, $user, 'player')` - Add participant + +**Location Creation:** +- `$I->createPendingLocation($creator)` - Create PENDING location +- `$I->createApprovedLocation($creator)` - Create APPROVED location +- `$I->createRejectedLocation($creator, $reason)` - Create REJECTED location + +**Utilities:** +- `$I->getEntityManager()` - Get Doctrine EntityManager +- `$I->getUrl('route_name', $params)` - Generate URL from route + +### Foundry Factories + +Tests use **Zenstruck Foundry** factories for test data creation. Factories are organized by domain under `tests/Support/Factory/`: + +**Example Usage:** +```php +use Tests\Support\Factory\Account\UserFactory; +use Tests\Support\Factory\Core\LarpFactory; +use Tests\Support\Factory\Survey\SurveyFactory; + +// Create user with factory +$user = UserFactory::new()->approved()->create(); + +// Create LARP with factory +$larp = LarpFactory::new() + ->forOrganizer($user) + ->withStatus('published') + ->create(); + +// Create survey with questions +$survey = SurveyFactory::new() + ->forLarp($larp) + ->withQuestions(5) + ->create(); +``` + +See factory classes for available methods and options. + +### Test Database + Test database uses suffix `_test` (configured in `config/packages/doctrine.yaml`). +**Prepare test database:** +```bash +make prepare-test-db +``` + ## Code Quality Standards - **PHP Version**: 8.2+ diff --git a/assets/controllers/application-mode-toggle_controller.js b/assets/controllers/application-mode-toggle_controller.js new file mode 100644 index 0000000..04445ad --- /dev/null +++ b/assets/controllers/application-mode-toggle_controller.js @@ -0,0 +1,76 @@ +import { Controller } from '@hotwired/stimulus'; + +/** + * Application Mode Toggle Controller + * + * Manages the visibility of the "Publish Characters Publicly" checkbox + * based on the selected application mode in LARP settings. + * + * - CHARACTER_SELECTION mode: Shows the checkbox + * - SURVEY mode: Hides the checkbox and unchecks it + */ +export default class extends Controller { + static targets = ['publishCheckbox']; + + connect() { + this.updateVisibility(); + } + + /** + * Called when application mode radio buttons change + */ + change(event) { + this.updateVisibility(); + } + + updateVisibility() { + const selectedMode = this.getSelectedMode(); + const publishContainer = this.findPublishCheckboxContainer(); + + if (!publishContainer) { + return; + } + + if (selectedMode === 'character_selection') { + // Show the checkbox for character selection mode + publishContainer.style.display = 'block'; + } else if (selectedMode === 'survey') { + // Hide the checkbox for survey mode and uncheck it + publishContainer.style.display = 'none'; + + // Uncheck the checkbox + const checkbox = publishContainer.querySelector('input[type="checkbox"]'); + if (checkbox) { + checkbox.checked = false; + } + } + } + + getSelectedMode() { + // Find the checked radio button + const checkedRadio = this.element.querySelector('input[type="radio"]:checked'); + return checkedRadio ? checkedRadio.value : null; + } + + findPublishCheckboxContainer() { + // The checkbox is in a sibling form group + // Look for the parent form and then find the publish checkbox container + const form = this.element.closest('form'); + if (!form) { + return null; + } + + // Find by data attribute if available + if (this.hasPublishCheckboxTarget) { + return this.publishCheckboxTarget.closest('.mb-3, .form-group'); + } + + // Fallback: Find by field name pattern + const publishField = form.querySelector('input[name*="publishCharactersPublicly"]'); + if (publishField) { + return publishField.closest('.mb-3, .form-group'); + } + + return null; + } +} diff --git a/assets/controllers/character-gallery-card_controller.js b/assets/controllers/character-gallery-card_controller.js new file mode 100644 index 0000000..e92b0f2 --- /dev/null +++ b/assets/controllers/character-gallery-card_controller.js @@ -0,0 +1,55 @@ +import { Controller } from '@hotwired/stimulus'; + +/** + * Character Gallery Card Controller + * + * Handles interactions for character cards in the public gallery. + * Currently provides hover effects and could be extended for lazy loading, + * favoriting, or other interactive features. + */ +export default class extends Controller { + static targets = ['image', 'card']; + + connect() { + this.addHoverEffects(); + } + + addHoverEffects() { + if (this.hasCardTarget) { + this.cardTarget.addEventListener('mouseenter', () => { + this.cardTarget.classList.add('shadow-lg'); + }); + + this.cardTarget.addEventListener('mouseleave', () => { + this.cardTarget.classList.remove('shadow-lg'); + }); + } + } + + /** + * Navigate to character detail page + * Can be used for card click handling if needed + */ + viewDetails(event) { + // Prevent navigation if clicking on a link inside the card + if (event.target.tagName === 'A' || event.target.closest('a')) { + return; + } + + const detailUrl = this.element.dataset.detailUrl; + if (detailUrl) { + window.location.href = detailUrl; + } + } + + /** + * Lazy load image when card enters viewport + * Usage: data-action="intersection@window->character-gallery-card#lazyLoadImage" + */ + lazyLoadImage() { + if (this.hasImageTarget && this.imageTarget.dataset.src) { + this.imageTarget.src = this.imageTarget.dataset.src; + delete this.imageTarget.dataset.src; + } + } +} diff --git a/assets/controllers/map-config-preview_controller.js b/assets/controllers/map-config-preview_controller.js new file mode 100644 index 0000000..0632463 --- /dev/null +++ b/assets/controllers/map-config-preview_controller.js @@ -0,0 +1,290 @@ +import { Controller } from '@hotwired/stimulus'; +import L from 'leaflet'; +import 'leaflet/dist/leaflet.min.css'; + +/** + * Map Configuration Preview Controller + * + * Provides real-time preview of map image with configurable grid overlay. + * Allows users to see changes before saving. + */ +export default class extends Controller { + static targets = [ + 'preview', // The map container div + 'fileInput', // File input for new image + 'gridRows', // Grid rows input + 'gridColumns', // Grid columns input + 'gridOpacity', // Grid opacity input + 'gridVisible', // Grid visibility checkbox + 'placeholder' // Placeholder shown when no image + ]; + + static values = { + existingImage: String, // URL of existing image (for edit mode) + gridRows: { type: Number, default: 10 }, + gridColumns: { type: Number, default: 10 }, + gridOpacity: { type: Number, default: 0.5 }, + gridVisible: { type: Boolean, default: true } + }; + + connect() { + this.map = null; + this.gridLayer = null; + this.imageOverlay = null; + this.blobUrl = null; + + // Initialize with existing image if available + if (this.existingImageValue) { + this.loadImage(this.existingImageValue); + } + + // Sync initial values from form inputs + this.syncFromInputs(); + } + + disconnect() { + this.cleanup(); + } + + cleanup() { + if (this.map) { + this.map.remove(); + this.map = null; + } + if (this.blobUrl) { + URL.revokeObjectURL(this.blobUrl); + this.blobUrl = null; + } + } + + /** + * Sync grid values from form inputs + */ + syncFromInputs() { + if (this.hasGridRowsTarget) { + this.gridRowsValue = parseInt(this.gridRowsTarget.value) || 10; + } + if (this.hasGridColumnsTarget) { + this.gridColumnsValue = parseInt(this.gridColumnsTarget.value) || 10; + } + if (this.hasGridOpacityTarget) { + this.gridOpacityValue = parseFloat(this.gridOpacityTarget.value) || 0.5; + } + if (this.hasGridVisibleTarget) { + this.gridVisibleValue = this.gridVisibleTarget.checked; + } + } + + /** + * Handle file input change - create blob URL and load preview + */ + onFileChange(event) { + const file = event.target.files[0]; + if (!file) return; + + // Validate file type + if (!file.type.startsWith('image/')) { + console.warn('Selected file is not an image'); + return; + } + + // Revoke previous blob URL + if (this.blobUrl) { + URL.revokeObjectURL(this.blobUrl); + } + + // Create new blob URL for preview + this.blobUrl = URL.createObjectURL(file); + this.loadImage(this.blobUrl); + } + + /** + * Handle grid rows input change + */ + onGridRowsChange(event) { + const value = parseInt(event.target.value); + if (value > 0 && value <= 100) { + this.gridRowsValue = value; + this.redrawGrid(); + } + } + + /** + * Handle grid columns input change + */ + onGridColumnsChange(event) { + const value = parseInt(event.target.value); + if (value > 0 && value <= 100) { + this.gridColumnsValue = value; + this.redrawGrid(); + } + } + + /** + * Handle grid opacity input change + */ + onGridOpacityChange(event) { + const value = parseFloat(event.target.value); + if (value >= 0 && value <= 1) { + this.gridOpacityValue = value; + this.redrawGrid(); + } + } + + /** + * Handle grid visibility checkbox change + */ + onGridVisibleChange(event) { + this.gridVisibleValue = event.target.checked; + this.redrawGrid(); + } + + /** + * Load image and initialize map + */ + loadImage(imageUrl) { + // Clean up existing map + if (this.map) { + this.map.remove(); + this.map = null; + } + + // Show preview, hide placeholder + if (this.hasPlaceholderTarget) { + this.placeholderTarget.classList.add('d-none'); + } + if (this.hasPreviewTarget) { + this.previewTarget.classList.remove('d-none'); + } + + const img = new Image(); + img.src = imageUrl; + + img.onload = () => { + this.imageWidth = img.width; + this.imageHeight = img.height; + + const bounds = [[0, 0], [img.height, img.width]]; + + // Initialize Leaflet map with simple CRS for image + this.map = L.map(this.previewTarget, { + crs: L.CRS.Simple, + minZoom: -3, + maxZoom: 2, + center: [img.height / 2, img.width / 2], + zoom: -1, + attributionControl: false + }); + + // Add image overlay + this.imageOverlay = L.imageOverlay(imageUrl, bounds).addTo(this.map); + this.map.fitBounds(bounds); + + // Draw initial grid + this.redrawGrid(); + }; + + img.onerror = () => { + console.error('Failed to load image:', imageUrl); + // Show placeholder on error + if (this.hasPlaceholderTarget) { + this.placeholderTarget.classList.remove('d-none'); + } + if (this.hasPreviewTarget) { + this.previewTarget.classList.add('d-none'); + } + }; + } + + /** + * Redraw grid overlay with current settings + */ + redrawGrid() { + if (!this.map || !this.imageWidth || !this.imageHeight) { + return; + } + + // Remove existing grid layer + if (this.gridLayer) { + this.map.removeLayer(this.gridLayer); + this.gridLayer = null; + } + + // Don't draw if grid is not visible + if (!this.gridVisibleValue) { + return; + } + + const rows = this.gridRowsValue; + const cols = this.gridColumnsValue; + const opacity = this.gridOpacityValue; + const width = this.imageWidth; + const height = this.imageHeight; + + const cellWidth = width / cols; + const cellHeight = height / rows; + + this.gridLayer = L.layerGroup().addTo(this.map); + + // Draw horizontal lines + for (let i = 0; i <= rows; i++) { + const y = i * cellHeight; + L.polyline([[y, 0], [y, width]], { + color: '#000000', + weight: 1, + opacity: opacity + }).addTo(this.gridLayer); + } + + // Draw vertical lines + for (let i = 0; i <= cols; i++) { + const x = i * cellWidth; + L.polyline([[0, x], [height, x]], { + color: '#000000', + weight: 1, + opacity: opacity + }).addTo(this.gridLayer); + } + + // Add grid labels (only if grid is not too dense) + if (rows <= 26 && cols <= 26) { + for (let row = 0; row < rows; row++) { + for (let col = 0; col < cols; col++) { + const x = col * cellWidth + cellWidth / 2; + const y = row * cellHeight + cellHeight / 2; + const label = this.getCellLabel(row, col); + + // Only show labels if cells are large enough + if (cellWidth > 30 && cellHeight > 30) { + L.marker([y, x], { + icon: L.divIcon({ + className: 'map-grid-label', + html: `{{ 'game_map.upload_to_preview'|trans({}, 'forms') }}
+{{ mapping.mappingConfiguration|json_encode(constant('JSON_PRETTY_PRINT')) }}
- {{ mapping.metaConfiguration|json_encode(constant('JSON_PRETTY_PRINT')) }}
+ {{ mapping.mappingConfiguration|json_encode(constant('JSON_PRETTY_PRINT')) }}
+ {{ mapping.metaConfiguration|json_encode(constant('JSON_PRETTY_PRINT')) }}
| Title | -Address | -City | -Capacity | -Status | -Approval | -Actions | -
|---|---|---|---|---|---|---|
| {{ 'location.title'|trans }} | +{{ 'location.address'|trans }} | +{{ 'location.city'|trans }} | +{{ 'location.capacity'|trans }} | +{{ 'location.status'|trans }} | +{{ 'location.approval'|trans }} | +{{ 'actions'|trans }} | +