crashmedia/Arctic-Wolves-Production
1
0
Fork 0
Code Issues Pull requests 5 Projects Releases Packages Wiki Activity Actions

feat(drills): Update ice surface system with 5 views and full-res export #9

Open
crashmedia wants to merge 1 commit from feature/ice-surface-five-views into main
pull from: feature/ice-surface-five-views
merge into: crashmedia:main
Conversation 0 Commits 1 Files changed 14 +221 -108
crashmedia commented 2026-06-23 05:42:46 +00:00
Owner
Copy link

Summary

Updates the ice surface system in the drill designer with 5 named views and full-resolution export capabilities.

Changes

1. Ice Surface Upload Views (5 views)

Updated views/admin_system_tools.php and process_settings.php to support 5 ice surface views:

  • UpperRink — Full ice surface (9298×4320)
  • LowerRink — Half ice (based on full)
  • LeftZone — Left zone (based on full)
  • RinkZone — Center/neutral zone (based on full)
  • CenterIce — Center circle area (1:1 aspect)

2. Full Resolution Export

Updated js/drill_designer.js with new export system:

  • getExportDimensions() — Returns appropriate dimensions per view (9298×4320 for full)
  • createExportCanvas(maxSize?) — Creates composite canvas with ice surface + drill objects
  • exportImage() — Downloads full-res PNG composite
  • Thumbnail capture now uses composite canvas (2000px max) instead of items-only

3. Drill Cards — Scale Without Losing Quality

Updated views/drills_library.php:

  • Cards display the exported composite image (ice + objects)
  • CSS object-fit: contain maintains aspect ratio at any card size
  • Browser handles downscaling from high-res to card dimensions

4. Detailed Drill View — Flex Box Display

Updated views/view_drill.php:

  • Drill diagram displayed in flex box container with centered layout
  • Click-to-zoom toggle on the exported image
  • "Download Full Resolution" button for direct PNG download
  • Maintains aspect ratio with object-fit: contain

5. CSS Aspect Ratios

Updated css/drills.css with new data-ice-view selectors for all 5 views including CenterIce (1:1 circle).

Files Modified

  • views/admin_system_tools.php — Upload section with 5 views
  • process_settings.php — Backend validation for new view names
  • js/drill_designer.js — Export system + view mappings
  • js/ice_canvas.js — View name mappings
  • css/drills.css — Aspect ratios for new views
  • views/drills_create.php — Ice view dropdown
  • views/drills_library.php — Card thumbnails
  • views/view_drill.php — Flex box display
  • drill_share.php — View name mappings
  • practice_plan_share.php — View name mappings
  • views/practice_create.php — View name defaults
  • views/practice_plans.php — View name defaults
  • process_drills.php — Allowed views + defaults
  • generate_rink_images.php — Image generation view names
## Summary Updates the ice surface system in the drill designer with 5 named views and full-resolution export capabilities. ### Changes #### 1. Ice Surface Upload Views (5 views) Updated `views/admin_system_tools.php` and `process_settings.php` to support 5 ice surface views: - **UpperRink** — Full ice surface (9298×4320) - **LowerRink** — Half ice (based on full) - **LeftZone** — Left zone (based on full) - **RinkZone** — Center/neutral zone (based on full) - **CenterIce** — Center circle area (1:1 aspect) #### 2. Full Resolution Export Updated `js/drill_designer.js` with new export system: - `getExportDimensions()` — Returns appropriate dimensions per view (9298×4320 for full) - `createExportCanvas(maxSize?)` — Creates composite canvas with ice surface + drill objects - `exportImage()` — Downloads full-res PNG composite - Thumbnail capture now uses composite canvas (2000px max) instead of items-only #### 3. Drill Cards — Scale Without Losing Quality Updated `views/drills_library.php`: - Cards display the exported composite image (ice + objects) - CSS `object-fit: contain` maintains aspect ratio at any card size - Browser handles downscaling from high-res to card dimensions #### 4. Detailed Drill View — Flex Box Display Updated `views/view_drill.php`: - Drill diagram displayed in flex box container with centered layout - Click-to-zoom toggle on the exported image - "Download Full Resolution" button for direct PNG download - Maintains aspect ratio with `object-fit: contain` #### 5. CSS Aspect Ratios Updated `css/drills.css` with new data-ice-view selectors for all 5 views including CenterIce (1:1 circle). ### Files Modified - `views/admin_system_tools.php` — Upload section with 5 views - `process_settings.php` — Backend validation for new view names - `js/drill_designer.js` — Export system + view mappings - `js/ice_canvas.js` — View name mappings - `css/drills.css` — Aspect ratios for new views - `views/drills_create.php` — Ice view dropdown - `views/drills_library.php` — Card thumbnails - `views/view_drill.php` — Flex box display - `drill_share.php` — View name mappings - `practice_plan_share.php` — View name mappings - `views/practice_create.php` — View name defaults - `views/practice_plans.php` — View name defaults - `process_drills.php` — Allowed views + defaults - `generate_rink_images.php` — Image generation view names
- Update ice surface upload views to 5: UpperRink, LowerRink, LeftZone, RinkZone, CenterIce
- Add full-resolution export (9298x4320 for full ice) with composite ice+objects canvas
- Add createExportCanvas() method for reusable composite rendering
- Update drill cards to display exported composite image with object-fit:contain
- Update detailed drill view with flex box layout, zoom toggle, and download button
- Update CSS aspect ratios for new view names
- Update all view mappings across JS, PHP, and CSS files
- Add CenterIce view (center circle area, 1:1 aspect ratio)
This pull request has changes conflicting with the target branch.
  • css/drills.css
  • generate_rink_images.php
  • js/drill_designer.js
  • js/ice_canvas.js
  • process_drills.php
  • process_settings.php
  • views/admin_system_tools.php
  • views/drills_create.php
  • views/drills_library.php
  • views/view_drill.php
View command line instructions

Manual merge helper

Use this merge commit message when completing the merge manually.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin feature/ice-surface-five-views:feature/ice-surface-five-views
git switch feature/ice-surface-five-views

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main
git merge --no-ff feature/ice-surface-five-views
git switch feature/ice-surface-five-views
git rebase main
git switch main
git merge --ff-only feature/ice-surface-five-views
git switch feature/ice-surface-five-views
git rebase main
git switch main
git merge --no-ff feature/ice-surface-five-views
git switch main
git merge --squash feature/ice-surface-five-views
git switch main
git merge --ff-only feature/ice-surface-five-views
git switch main
git merge feature/ice-surface-five-views
git push origin main
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
crashmedia/Arctic-Wolves-Production!9
No description provided.