Simplify race setup with wizard and preset-aware basic mode

This commit is contained in:
larssand
2026-03-20 14:30:05 +01:00
parent 4379553499
commit db1038f9bf
4 changed files with 1292 additions and 364 deletions

View File

@@ -35,6 +35,14 @@ JMK RB RaceController is an RC timing and race-control system with support for s
- `Event` = sponsor events with shared cars/transponders
- `Race Setup` = competition races with personal driver transponders
- Race Setup includes:
- grouped `Participants` and `Teams` sections in `Manage`
- a four-step `Create Race Wizard` for new races
- `Manage` split into `Setup`, `Format`, `Generation`, and `Live / results`
- Basic mode now reacts to the selected preset, including a cleaner endurance view
- `Basic / Advanced` mode for `Race Format`
- a right-side race summary card
- separate `Race actions` for generation, reseeding and bump-up
- reorganized in-app `Guide` with overview cards and two-column sections
- explicit race participant selection
- practice standings
- qualifying standings with `points` or `best result`
@@ -115,6 +123,30 @@ JMK RB RaceController is an RC timing and race-control system with support for s
- `SV`
- `EN`
## Create Race Wizard
- `Race Setup` now starts with a four-step wizard for new races:
- `Basics`
- `Participants`
- `Session plan`
- `Confirm`
- The wizard is intended to create the first race structure quickly:
- choose class and preset
- scope valid race drivers
- create practice, qualifying, and/or team-race sessions automatically
- Finals are still generated later from `Race Actions` after practice or qualifying is complete.
## Manage workflow
- After the race is created, `Manage` is split into four clear stages:
- `Setup`
- `Format`
- `Generation`
- `Live / results`
- `Setup` handles race participants and teams.
- `Format` handles practice/qualifying, finals, validation, presets, and advanced settings. In Basic mode, endurance hides most qualifying/finals fields until Advanced is opened.
- `Generation` is kept separate so actions like qualifying generation, reseeding, finals generation, and bump-up do not clutter the format form.
- `Live / results` is where grid, standings, print, PDF, and finals matrix are used once the structure is ready.
## Race features
### Follow-up time

View File

@@ -32,7 +32,15 @@ RC timing app med sponsor-eventflöde (delade bilar/transpondrar mellan olika he
- UI-separering:
- `Event` = sponsor-event med delade bilar/transpondrar
- `Race Setup` = riktiga race med personlig transponder per förare
- `Race Setup` innehåller nu även:
- `Race Setup` innehåller nu även:
- grupperade sektioner för `Deltagare` och `Lag` i `Hantera`
- en fyrstegs `Create Race Wizard` för nya race
- `Hantera` uppdelad i `Setup`, `Format`, `Generering` och `Live / resultat`
- Grundläge reagerar nu på valt preset, inklusive renare endurance-vy
- `Grundläge / Avancerat` för `Raceformat`
- en sammanfattningspanel till höger
- separata `Race actions` för generering, reseeding och bump-up
- omgjord inbyggd `Guide` med översiktskort och tvåkolumnslayout
- välj exakt vilka förare som är med i racet
- practice-ranking
- kval-ranking med `poäng` eller `bästa resultat`
@@ -104,6 +112,30 @@ RC timing app med sponsor-eventflöde (delade bilar/transpondrar mellan olika he
- AMMC + npm setup på Windows och Linux
- Språkval i UI: `SV` / `EN`
## Create Race Wizard
- `Race Setup` startar nu med en fyrstegs wizard för nya race:
- `Grunddata`
- `Deltagare`
- `Sessionsplan`
- `Bekräfta`
- Wizarden är till för att snabbt skapa första grundstrukturen:
- välj klass och preset
- välj vilka förare som faktiskt ska vara giltiga i racet
- skapa practice, kval och/eller team race automatiskt
- Finaler skapas fortfarande senare från `Race actions` när practice eller kval är färdiga.
## Hantera-flödet
- Efter att racet skapats är `Hantera` uppdelat i fyra tydliga steg:
- `Setup`
- `Format`
- `Generering`
- `Live / resultat`
- `Setup` används för racedeltagare och lag.
- `Format` används för practice/kval, finaler, validering, presets och avancerade val. I Grundläge döljer endurance de flesta kval-/finalfält tills du öppnar Avancerat.
- `Generering` ligger separat så knappar för kval, reseeding, finaler och bump-up inte blandas ihop med raceformatet.
- `Live / resultat` är där grid, standings, print, PDF och finalmatris används när upplägget väl är klart.
## Nya racefunktioner
### Follow-up time

1368
src/app.js

File diff suppressed because it is too large Load Diff

View File

@@ -252,6 +252,10 @@ body {
align-items: center;
}
.panel-header-with-pill {
gap: 10px;
}
.panel-header h3 {
margin: 0;
font-size: 1rem;
@@ -346,6 +350,217 @@ body {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.btn.is-active {
border-color: #d30702;
box-shadow: inset 0 0 0 1px rgba(242, 13, 7, 0.25);
}
.race-wizard-steps,
.manage-step-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.wizard-step,
.manage-step-card {
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, 0.025);
display: grid;
gap: 6px;
}
.wizard-step span {
width: 26px;
height: 26px;
border-radius: 999px;
display: grid;
place-items: center;
border: 1px solid var(--line);
font-weight: 800;
}
.wizard-step strong,
.manage-step-card strong {
font-size: 0.92rem;
}
.wizard-step-active {
border-color: rgba(225, 6, 0, 0.55);
background: rgba(225, 6, 0, 0.08);
}
.wizard-step-complete span,
.wizard-step-active span {
border-color: #d30702;
background: rgba(225, 6, 0, 0.16);
}
.manage-step-card p {
margin: 0;
color: var(--muted);
line-height: 1.45;
}
.race-wizard-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.wizard-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.wizard-summary-item-wide {
grid-column: span 2;
}
.race-stage-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 14px;
}
.race-setup-shell {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.95fr);
gap: 14px;
align-items: start;
}
.race-setup-main,
.race-format-sections,
.race-summary-list {
display: grid;
gap: 12px;
}
.race-setup-modebar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.race-setup-toggle {
gap: 8px;
}
.race-format-section,
.race-summary-card,
.race-actions-panel {
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
}
.race-format-section .panel-header,
.race-summary-card .panel-header,
.race-actions-panel .panel-header {
background: rgba(255, 255, 255, 0.02);
}
.race-format-grid {
gap: 10px;
}
.race-preset-actions-card,
.race-format-note-card,
.race-format-context-card {
align-content: start;
}
.race-format-context-card {
grid-column: span 2;
border-color: rgba(225, 6, 0, 0.22);
background: rgba(225, 6, 0, 0.06);
}
.race-preset-actions-card-compact .actions-inline {
justify-content: flex-start;
}
.race-format-save-row {
display: flex;
justify-content: flex-end;
}
.race-summary-item {
display: grid;
gap: 4px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
}
.race-summary-item span {
color: var(--muted);
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.race-summary-item strong {
font-size: 0.92rem;
line-height: 1.35;
}
.panel-header-inline {
padding: 0;
border: 0;
background: transparent;
}
.guide-overview-grid,
.guide-section-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.guide-overview-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.guide-overview-card {
padding: 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
display: grid;
gap: 8px;
}
.guide-overview-card strong {
font-size: 0.95rem;
}
.guide-overview-card p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
.guide-list {
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
}
.guide-list li {
line-height: 1.5;
}
input,
select {
width: 100%;
@@ -1424,6 +1639,13 @@ select:focus {
grid-template-columns: 1fr;
}
.race-setup-modebar,
.race-format-save-row,
.race-wizard-footer {
align-items: stretch;
flex-direction: column;
}
.topbar {
flex-direction: column;
align-items: flex-start;