| | | 1 | | @page "/getting-started" |
| | | 2 | | @attribute [Authorize] |
| | | 3 | | @inject GettingStartedViewModel VM |
| | | 4 | | @implements IDisposable |
| | | 5 | | |
| | | 6 | | @code { |
| | | 7 | | private readonly ILogger<GettingStarted> _logger; |
| | | 8 | | |
| | | 9 | | // Direct constructor injection |
| | 10 | 10 | | public GettingStarted(ILogger<GettingStarted> logger) |
| | | 11 | | { |
| | 10 | 12 | | _logger = logger; |
| | 10 | 13 | | } |
| | | 14 | | } |
| | | 15 | | |
| | | 16 | | <PageTitle>Quick Start Guide - Chronicis</PageTitle> |
| | | 17 | | |
| | | 18 | | <div class="getting-started-page"> |
| | | 19 | | <div class="getting-started-content"> |
| | 25 | 20 | | @if (VM.CurrentStep == 0) |
| | | 21 | | { |
| | | 22 | | <!-- Step 1: Welcome --> |
| | | 23 | | <div class="step-container chronicis-fade-in"> |
| | | 24 | | <div class="welcome-icon">📖✨</div> |
| | 10 | 25 | | <h1>@(VM.IsReturningUser ? "Quick Start Guide" : "Welcome to Chronicis")</h1> |
| | | 26 | | <p class="welcome-subtitle"> |
| | | 27 | | Your personal chronicle for tabletop adventures |
| | | 28 | | </p> |
| | | 29 | | |
| | | 30 | | <div class="welcome-features"> |
| | | 31 | | <div class="feature-item"> |
| | | 32 | | <span class="feature-icon">🌍</span> |
| | | 33 | | <div> |
| | | 34 | | <strong>Build Your World</strong> |
| | | 35 | | <p>Create rich settings with locations, NPCs, and lore</p> |
| | | 36 | | </div> |
| | | 37 | | </div> |
| | | 38 | | <div class="feature-item"> |
| | | 39 | | <span class="feature-icon">📝</span> |
| | | 40 | | <div> |
| | | 41 | | <strong>Track Your Sessions</strong> |
| | | 42 | | <p>Document adventures and never forget what happened</p> |
| | | 43 | | </div> |
| | | 44 | | </div> |
| | | 45 | | <div class="feature-item"> |
| | | 46 | | <span class="feature-icon">🔗</span> |
| | | 47 | | <div> |
| | | 48 | | <strong>Connect Everything</strong> |
| | | 49 | | <p>Link articles together with wiki-style [[brackets]]</p> |
| | | 50 | | </div> |
| | | 51 | | </div> |
| | | 52 | | <div class="feature-item"> |
| | | 53 | | <span class="feature-icon">🤖</span> |
| | | 54 | | <div> |
| | | 55 | | <strong>AI-Powered Summaries</strong> |
| | | 56 | | <p>Let AI help you remember the important details</p> |
| | | 57 | | </div> |
| | | 58 | | </div> |
| | | 59 | | </div> |
| | | 60 | | |
| | | 61 | | <MudButton Variant="Variant.Filled" |
| | | 62 | | Color="Color.Primary" |
| | | 63 | | Size="Size.Large" |
| | | 64 | | OnClick="VM.NextStep" |
| | | 65 | | Class="mt-6" |
| | | 66 | | EndIcon="@Icons.Material.Filled.ArrowForward"> |
| | | 67 | | @(VM.IsReturningUser ? "Review the Basics" : "Let's Get Started") |
| | | 68 | | </MudButton> |
| | | 69 | | </div> |
| | | 70 | | } |
| | 15 | 71 | | else if (VM.CurrentStep == 1) |
| | | 72 | | { |
| | | 73 | | <!-- Step 2: Understanding the Structure --> |
| | | 74 | | <div class="step-container chronicis-fade-in"> |
| | | 75 | | <div class="step-icon">🏗️</div> |
| | | 76 | | <h1>How Chronicis is Organized</h1> |
| | | 77 | | <p class="step-subtitle"> |
| | | 78 | | Your content is organized in a hierarchy that mirrors how tabletop campaigns work. |
| | | 79 | | </p> |
| | | 80 | | |
| | | 81 | | <div class="structure-explanation"> |
| | | 82 | | <div class="structure-item"> |
| | | 83 | | <div class="structure-header"> |
| | | 84 | | <span class="structure-icon">🌍</span> |
| | | 85 | | <strong>World</strong> |
| | | 86 | | </div> |
| | | 87 | | <p> |
| | | 88 | | Your campaign setting — the universe where your adventures take place. |
| | | 89 | | This could be an official setting like <em>Forgotten Realms</em> or <em>Eberron</em>, |
| | | 90 | | or your own homebrew creation. Everything else lives inside a World. |
| | | 91 | | </p> |
| | | 92 | | </div> |
| | | 93 | | |
| | | 94 | | <div class="structure-item"> |
| | | 95 | | <div class="structure-header"> |
| | | 96 | | <span class="structure-icon">📜</span> |
| | | 97 | | <strong>Campaign</strong> |
| | | 98 | | </div> |
| | | 99 | | <p> |
| | | 100 | | A specific adventure or ongoing game with your group. You might run |
| | | 101 | | <em>Curse of Strahd</em> and <em>Tomb of Annihilation</em> in the same world — |
| | | 102 | | those would be two separate campaigns. Each campaign tracks its own story. |
| | | 103 | | </p> |
| | | 104 | | </div> |
| | | 105 | | |
| | | 106 | | <div class="structure-item"> |
| | | 107 | | <div class="structure-header"> |
| | | 108 | | <span class="structure-icon">📚</span> |
| | | 109 | | <strong>Arc</strong> |
| | | 110 | | </div> |
| | | 111 | | <p> |
| | | 112 | | Story chapters within a campaign. Maybe your party spent several sessions |
| | | 113 | | in Waterdeep, then traveled to Baldur's Gate — those could be separate arcs. |
| | | 114 | | Arcs help you organize sessions into meaningful chunks. |
| | | 115 | | </p> |
| | | 116 | | </div> |
| | | 117 | | |
| | | 118 | | <div class="structure-item"> |
| | | 119 | | <div class="structure-header"> |
| | | 120 | | <span class="structure-icon">🎲</span> |
| | | 121 | | <strong>Session</strong> |
| | | 122 | | </div> |
| | | 123 | | <p> |
| | | 124 | | A single game night. Each session belongs to an arc and captures what |
| | | 125 | | happened during that play session — encounters, discoveries, memorable moments. |
| | | 126 | | </p> |
| | | 127 | | </div> |
| | | 128 | | </div> |
| | | 129 | | |
| | | 130 | | <div class="button-row"> |
| | | 131 | | <MudButton Variant="Variant.Text" |
| | | 132 | | Color="Color.Default" |
| | | 133 | | OnClick="VM.PreviousStep" |
| | | 134 | | StartIcon="@Icons.Material.Filled.ArrowBack"> |
| | | 135 | | Back |
| | | 136 | | </MudButton> |
| | | 137 | | <MudButton Variant="Variant.Filled" |
| | | 138 | | Color="Color.Primary" |
| | | 139 | | Size="Size.Large" |
| | | 140 | | OnClick="VM.NextStep" |
| | | 141 | | EndIcon="@Icons.Material.Filled.ArrowForward"> |
| | | 142 | | Continue |
| | | 143 | | </MudButton> |
| | | 144 | | </div> |
| | | 145 | | </div> |
| | | 146 | | } |
| | 13 | 147 | | else if (VM.CurrentStep == 2) |
| | | 148 | | { |
| | | 149 | | <!-- Step 3: Sidebar Sections --> |
| | | 150 | | <div class="step-container chronicis-fade-in"> |
| | | 151 | | <div class="step-icon">📂</div> |
| | | 152 | | <h1>Your Sidebar Sections</h1> |
| | | 153 | | <p class="step-subtitle"> |
| | | 154 | | Each world has five main sections in the sidebar to organize your content. |
| | | 155 | | </p> |
| | | 156 | | |
| | | 157 | | <div class="sections-explanation"> |
| | | 158 | | <div class="section-item campaigns"> |
| | | 159 | | <div class="section-header"> |
| | | 160 | | <span class="section-badge">📁</span> |
| | | 161 | | <strong>CAMPAIGNS</strong> |
| | | 162 | | </div> |
| | | 163 | | <p> |
| | | 164 | | Where your game sessions live. Create campaigns, add arcs to organize |
| | | 165 | | the story, then log sessions as you play. This is your adventure timeline. |
| | | 166 | | </p> |
| | | 167 | | <div class="section-tip"> |
| | | 168 | | <strong>Tip:</strong> After each session, jot down key events, NPCs met, |
| | | 169 | | and decisions made. Future you will thank present you. |
| | | 170 | | </div> |
| | | 171 | | </div> |
| | | 172 | | |
| | | 173 | | <div class="section-item characters"> |
| | | 174 | | <div class="section-header"> |
| | | 175 | | <span class="section-badge">👥</span> |
| | | 176 | | <strong>PLAYER CHARACTERS</strong> |
| | | 177 | | </div> |
| | | 178 | | <p> |
| | | 179 | | Home for player characters in your group. Create a character articles on the World Detail pa |
| | | 180 | | then <strong>claim it as yours</strong> to see it on your dashboard. |
| | | 181 | | Track backstory, goals, relationships, and growth. |
| | | 182 | | </p> |
| | | 183 | | <div class="section-tip"> |
| | | 184 | | <strong>Tip:</strong> Link your character to NPCs and locations using |
| | | 185 | | [[wiki links]] to build a web of connections. |
| | | 186 | | </div> |
| | | 187 | | </div> |
| | | 188 | | |
| | | 189 | | <div class="section-item wiki"> |
| | | 190 | | <div class="section-header"> |
| | | 191 | | <span class="section-badge">📖</span> |
| | | 192 | | <strong>WIKI</strong> |
| | | 193 | | </div> |
| | | 194 | | <p> |
| | | 195 | | Your world-building encyclopedia. Document locations, NPCs, factions, |
| | | 196 | | items, lore, religions, history — anything that makes your world feel alive. |
| | | 197 | | Nest articles to create hierarchies (e.g., Continent → Region → City → District). |
| | | 198 | | </p> |
| | | 199 | | <div class="section-tip"> |
| | | 200 | | <strong>Tip:</strong> Use the AI Summary feature on articles with lots of |
| | | 201 | | backlinks to auto-generate useful overviews. |
| | | 202 | | </div> |
| | | 203 | | </div> |
| | | 204 | | |
| | | 205 | | <div class="section-item maps"> |
| | | 206 | | <div class="section-header"> |
| | | 207 | | <span class="section-badge">🗺️</span> |
| | | 208 | | <strong>MAPS</strong> |
| | | 209 | | </div> |
| | | 210 | | <p> |
| | | 211 | | Store campaign maps with uploaded basemap images. Open the Maps page to |
| | | 212 | | create new maps, review existing ones, and click any map in the sidebar |
| | | 213 | | to open its dedicated map view. In Session Notes, type <code>[[maps/</code> |
| | | 214 | | to insert map chips, or <code>[[maps/{map}/</code> to link a feature on |
| | | 215 | | that map and open it centered in the modal viewer. |
| | | 216 | | </p> |
| | | 217 | | <div class="section-tip"> |
| | | 218 | | <strong>Tip:</strong> Drag an image file onto the map upload target to |
| | | 219 | | add a basemap quickly when creating a map. |
| | | 220 | | </div> |
| | | 221 | | </div> |
| | | 222 | | |
| | | 223 | | <div class="section-item resources"> |
| | | 224 | | <div class="section-header"> |
| | | 225 | | <span class="section-badge">🔗</span> |
| | | 226 | | <strong>WORLD LINKS & DOCUMENTS</strong> |
| | | 227 | | </div> |
| | | 228 | | <p> |
| | | 229 | | Quick links to tools your group uses — D&D Beyond character sheets, |
| | | 230 | | Roll20 or Foundry VTT, shared Google Drives, Discord servers. |
| | | 231 | | Plus, upload documents like character sheets, maps, handouts, and reference |
| | | 232 | | materials (PDFs, Office files, images up to 200MB) to keep everything in one place. |
| | | 233 | | </p> |
| | | 234 | | <div class="section-tip"> |
| | | 235 | | <strong>Tip:</strong> Only the world owner can upload and manage documents, |
| | | 236 | | but all members can download them. |
| | | 237 | | </div> |
| | | 238 | | </div> |
| | | 239 | | </div> |
| | | 240 | | |
| | | 241 | | <div class="button-row"> |
| | | 242 | | <MudButton Variant="Variant.Text" |
| | | 243 | | Color="Color.Default" |
| | | 244 | | OnClick="VM.PreviousStep" |
| | | 245 | | StartIcon="@Icons.Material.Filled.ArrowBack"> |
| | | 246 | | Back |
| | | 247 | | </MudButton> |
| | | 248 | | <MudButton Variant="Variant.Filled" |
| | | 249 | | Color="Color.Primary" |
| | | 250 | | Size="Size.Large" |
| | | 251 | | OnClick="VM.NextStep" |
| | | 252 | | EndIcon="@Icons.Material.Filled.ArrowForward"> |
| | | 253 | | Continue |
| | | 254 | | </MudButton> |
| | | 255 | | </div> |
| | | 256 | | </div> |
| | | 257 | | } |
| | 9 | 258 | | else if (VM.CurrentStep == 3) |
| | | 259 | | { |
| | | 260 | | <!-- Step 4: Ready to Go --> |
| | | 261 | | <div class="step-container chronicis-fade-in"> |
| | | 262 | | <div class="step-icon">🎉</div> |
| | | 263 | | <h1>You're Ready!</h1> |
| | | 264 | | <p class="step-subtitle"> |
| | | 265 | | Here's how to get the most out of Chronicis: |
| | | 266 | | </p> |
| | | 267 | | |
| | | 268 | | <div class="tips-grid"> |
| | | 269 | | <div class="tip-card"> |
| | | 270 | | <div class="tip-icon">🔗</div> |
| | | 271 | | <strong>Link Everything</strong> |
| | | 272 | | <p>Type <code>[[Article Name]]</code> to create wiki links between articles. |
| | | 273 | | Autocomplete finds matches as you type. This builds a connected knowledge base.</p> |
| | | 274 | | </div> |
| | | 275 | | |
| | | 276 | | <div class="tip-card"> |
| | | 277 | | <div class="tip-icon">👤</div> |
| | | 278 | | <strong>Claim Your Character</strong> |
| | | 279 | | <p>Open your character article and click "Claim as My Character" |
| | | 280 | | to see it on your dashboard.</p> |
| | | 281 | | </div> |
| | | 282 | | |
| | | 283 | | <div class="tip-card"> |
| | | 284 | | <div class="tip-icon">🤖</div> |
| | | 285 | | <strong>Generate Summaries</strong> |
| | | 286 | | <p>Articles with backlinks can generate AI summaries. |
| | | 287 | | Click the summary button in the article sidebar — great for NPC recaps before a session.</p> |
| | | 288 | | </div> |
| | | 289 | | |
| | | 290 | | <div class="tip-card"> |
| | | 291 | | <div class="tip-icon">⌨️</div> |
| | | 292 | | <strong>Keyboard Shortcuts</strong> |
| | | 293 | | <p><code>Ctrl+S</code> to save, <code>Ctrl+N</code> to create a sibling article, |
| | | 294 | | <code>Ctrl+Q</code> to open the quest log. Your work also auto-saves as you type.</p> |
| | | 295 | | </div> |
| | | 296 | | |
| | | 297 | | <div class="tip-card"> |
| | | 298 | | <div class="tip-icon">📜</div> |
| | | 299 | | <strong>Session Notes for Everyone</strong> |
| | | 300 | | <p>Each player can add their own session note with their perspective. |
| | | 301 | | The AI summary on the Session page combines all of them into one cohesive recap.</p> |
| | | 302 | | </div> |
| | | 303 | | |
| | | 304 | | <div class="tip-card"> |
| | | 305 | | <div class="tip-icon">🔒</div> |
| | | 306 | | <strong>GM Private Notes</strong> |
| | | 307 | | <p>Every World, Campaign, Arc, and Session has a Private Notes tab only you can see. |
| | | 308 | | Use it for plot twists, encounter prep, or secrets you're not ready to reveal.</p> |
| | | 309 | | </div> |
| | | 310 | | |
| | | 311 | | <div class="tip-card"> |
| | | 312 | | <div class="tip-icon">📂</div> |
| | | 313 | | <strong>Drag to Organize</strong> |
| | | 314 | | <p>Drag articles in the sidebar to reorganize your hierarchy. |
| | | 315 | | Nest content however makes sense for your world.</p> |
| | | 316 | | </div> |
| | | 317 | | |
| | | 318 | | <div class="tip-card"> |
| | | 319 | | <div class="tip-icon">🗺️</div> |
| | | 320 | | <strong>Use Maps for Visual Context</strong> |
| | | 321 | | <p>Create maps from the Maps section, upload a basemap image, then rename maps |
| | | 322 | | from the map page header as your world evolves. In Session Notes, use |
| | | 323 | | <code>[[maps/</code> to link those maps inline.</p> |
| | | 324 | | </div> |
| | | 325 | | |
| | | 326 | | <div class="tip-card"> |
| | | 327 | | <div class="tip-icon">🌐</div> |
| | | 328 | | <strong>Share Your World</strong> |
| | | 329 | | <p>Make your world public in World Settings to share it with anyone |
| | | 330 | | via a custom URL — no login required for viewers.</p> |
| | | 331 | | </div> |
| | | 332 | | |
| | | 333 | | <div class="tip-card"> |
| | | 334 | | <div class="tip-icon">📚</div> |
| | | 335 | | <strong>Embed D&D Rules</strong> |
| | | 336 | | <p>Type <code>[[srd/</code> in any article to search and embed official SRD content — |
| | | 337 | | spells, monsters, magic items, and more — directly inline.</p> |
| | | 338 | | </div> |
| | | 339 | | |
| | | 340 | | <div class="tip-card"> |
| | | 341 | | <div class="tip-icon">❓</div> |
| | | 342 | | <strong>Help Is Always Here</strong> |
| | | 343 | | <p>Click the <strong>?</strong> button in the top bar at any time to open |
| | | 344 | | page-specific help for wherever you are in the app — or to return to this guide.</p> |
| | | 345 | | </div> |
| | | 346 | | </div> |
| | | 347 | | |
| | | 348 | | <div class="tip-callout"> |
| | | 349 | | <span class="tip-callout-icon">🧭</span> |
| | | 350 | | <p> |
| | | 351 | | Your tutorial world is waiting — a fully populated example campaign you can explore |
| | | 352 | | and edit freely. Whenever you're unsure what to do next, the <strong>?</strong> button |
| | | 353 | | in the app bar is your guide. It shows tips tailored to the page you're on — |
| | | 354 | | so whether you're setting up a World, running a Session, or building your Wiki, |
| | | 355 | | relevant help is always one click away. |
| | | 356 | | </p> |
| | | 357 | | </div> |
| | | 358 | | |
| | | 359 | | <div class="button-row"> |
| | | 360 | | <MudButton Variant="Variant.Text" |
| | | 361 | | Color="Color.Default" |
| | | 362 | | OnClick="VM.PreviousStep" |
| | | 363 | | StartIcon="@Icons.Material.Filled.ArrowBack"> |
| | | 364 | | Back |
| | | 365 | | </MudButton> |
| | | 366 | | <MudButton Variant="Variant.Filled" |
| | | 367 | | Color="Color.Primary" |
| | | 368 | | Size="Size.Large" |
| | | 369 | | OnClick="VM.CompleteOnboardingAsync" |
| | | 370 | | Disabled="VM.IsCompleting" |
| | | 371 | | EndIcon="@Icons.Material.Filled.Check"> |
| | | 372 | | @if (VM.IsCompleting) |
| | | 373 | | { |
| | | 374 | | <MudProgressCircular Size="Size.Small" Indeterminate="true" Class="mr-2" /> |
| | | 375 | | <span>Finishing up...</span> |
| | | 376 | | } |
| | | 377 | | else if (VM.IsReturningUser) |
| | | 378 | | { |
| | | 379 | | <span>Back to Dashboard</span> |
| | | 380 | | } |
| | | 381 | | else |
| | | 382 | | { |
| | | 383 | | <span>Start Your Chronicle</span> |
| | | 384 | | } |
| | | 385 | | </MudButton> |
| | | 386 | | </div> |
| | | 387 | | </div> |
| | | 388 | | } |
| | | 389 | | |
| | | 390 | | <!-- Progress Dots --> |
| | | 391 | | <div class="progress-dots"> |
| | 250 | 392 | | @for (int i = 0; i < GettingStartedViewModel.TotalSteps; i++) |
| | | 393 | | { |
| | 100 | 394 | | var step = i; |
| | | 395 | | <div class="dot @(step == VM.CurrentStep ? "active" : "") @(step < VM.CurrentStep ? "completed" : "")" |
| | | 396 | | @onclick="() => VM.GoToStep(step)"></div> |
| | | 397 | | } |
| | | 398 | | </div> |
| | | 399 | | </div> |
| | | 400 | | </div> |
| | | 401 | | |
| | | 402 | | @code { |
| | | 403 | | protected override async Task OnInitializedAsync() |
| | | 404 | | { |
| | | 405 | | VM.PropertyChanged += OnVmPropertyChanged; |
| | | 406 | | await VM.InitializeAsync(); |
| | | 407 | | } |
| | | 408 | | |
| | | 409 | | private void OnVmPropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e) |
| | | 410 | | { |
| | 10 | 411 | | InvokeAsync(StateHasChanged); |
| | 10 | 412 | | } |
| | | 413 | | |
| | | 414 | | public void Dispose() |
| | | 415 | | { |
| | 10 | 416 | | VM.PropertyChanged -= OnVmPropertyChanged; |
| | 10 | 417 | | } |
| | | 418 | | } |