This commit is contained in:
Michal Vrba
2026-09-21 18:04:30 +02:00
parent 0a03721a86
commit ce2b8bb91c
7 changed files with 636 additions and 626 deletions
@@ -2,75 +2,70 @@
@inject ILocalStorageService Storage
<div class="character-select-screen">
<div class="parchment-container">
<div class="parchment-container select-card-compact">
<div class="select-header">
<h1 class="game-main-title">🏰 ČÍSELNÁ VÝPRAVA</h1>
<p class="subtitle">Záchrana Číselného Kráľovstva</p>
<p class="subtitle">Vytvor si svojho hrdinu a vyber ročník</p>
</div>
<!-- KROK 1: VÝBER ROČNÍKA -->
<div class="select-content-grid">
<!-- LEFT: ROČNÍK & MENO -->
<div class="select-col-left">
<div class="selection-section">
<h2 class="step-title">1. Krok: Vyber si svoj ročník</h2>
<div class="grade-toggle-group grade-grid-3">
<h2 class="step-title">1. Tvoj ročník</h2>
<div class="grade-toggle-group">
<button class="grade-btn @(SelectedGrade == 1 ? "active" : "")" @onclick="() => SetGrade(1)">
<span class="grade-badge">🎒 1. ROČNÍK</span>
<span class="grade-desc">Počítanie a sčítanie do 10/20</span>
<span class="grade-desc">Do 10 / 20</span>
</button>
<button class="grade-btn @(SelectedGrade == 2 ? "active" : "")" @onclick="() => SetGrade(2)">
<span class="grade-badge">🎒 2. ROČNÍK</span>
<span class="grade-desc">Sčítanie a odčítanie do 20/100</span>
<span class="grade-desc">Do 20 / 100</span>
</button>
<button class="grade-btn @(SelectedGrade == 3 ? "active" : "")" @onclick="() => SetGrade(3)">
<span class="grade-badge">🎒 3. ROČNÍK</span>
<span class="grade-desc">Malá násobilka a delenie</span>
<span class="grade-desc">Násobilka & delenie</span>
</button>
</div>
</div>
<!-- KROK 2: VÝBER HRDINU -->
<div class="selection-section">
<h2 class="step-title">2. Krok: Vyber si svojho hrdinu</h2>
<h2 class="step-title">3. Meno hrdinu</h2>
<div class="name-field-row">
<input type="text" class="hero-name-input" @bind="HeroName" placeholder="Tvoje meno..." maxlength="20" />
<button class="btn-start-quest" @onclick="StartQuest">
Vstúpiť do hry 🚀
</button>
</div>
</div>
</div>
<!-- RIGHT: VÝBER HRDINU -->
<div class="select-col-right">
<div class="selection-section">
<h2 class="step-title">2. Vyber si hrdinu</h2>
<div class="heroes-grid">
@foreach (var hero in DataLoader.Heroes)
{
<div class="hero-card @(SelectedHeroId == hero.Id ? "selected-card" : "")"
@onclick="() => SelectHero(hero.Id)">
<div class="hero-avatar">
@if (hero.Id == "knight")
{
<span>⚔️</span>
}
else if (hero.Id == "mage")
{
<span>🧙‍♂️</span>
}
else
{
<span>🏹</span>
}
@(hero.Id == "knight" ? "⚔️" : hero.Id == "mage" ? "🧙‍♂️" : "🏹")
</div>
<h3 class="hero-name">@hero.Name</h3>
<span class="hero-title">@hero.Title</span>
<p class="hero-description">@hero.Description</p>
<div class="hero-skill">
✨ Špeciál: <strong>@hero.SpecialAttackName</strong>
✨ @hero.SpecialAttackName
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- KROK 3: MENO HRDINU & ŠTART -->
<div class="selection-section name-input-section">
<h2 class="step-title">3. Krok: Tvoje hrdinské meno</h2>
<div class="name-field-row">
<input type="text" class="hero-name-input" @bind="HeroName" placeholder="Zadaj svoje meno..." maxlength="20" />
<button class="btn-start-quest" @onclick="StartQuest">
Vstúpiť do kráľovstva 🚀
</button>
</div>
</div>
</div>
</div>
@code {
[Parameter] public EventCallback<PlayerProfile> OnProfileReady { get; set; }
File diff suppressed because it is too large Load Diff
+35
View File
@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<defs>
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f39c12"/>
<stop offset="100%" stop-color="#d68910"/>
</linearGradient>
<linearGradient id="crestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2980b9"/>
<stop offset="100%" stop-color="#1f618d"/>
</linearGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Outer Shield -->
<path d="M 32 4 C 48 4 58 10 58 10 C 58 38 46 54 32 60 C 18 54 6 38 6 10 C 6 10 16 4 32 4 Z"
fill="url(#shieldGrad)" stroke="#7e5109" stroke-width="2.5" filter="url(#shadow)"/>
<!-- Inner Shield Inlay -->
<path d="M 32 8 C 45 8 53 13 53 13 C 53 36 43 49 32 54 C 21 49 11 36 11 13 C 11 13 19 8 32 8 Z"
fill="url(#crestGrad)" stroke="#fcf6e8" stroke-width="1.5"/>
<!-- Golden Crown on Top -->
<path d="M 22 24 L 25 17 L 32 21 L 39 17 L 42 24 L 40 28 L 24 28 Z"
fill="#f1c40f" stroke="#b7950b" stroke-width="1"/>
<!-- Math Spark Symbol (7 x 8 = 56 spirit) -->
<text x="32" y="44" font-family="'Fredoka', 'Arial Black', sans-serif" font-size="16" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="1">123</text>
<!-- Small Star Sparkles -->
<circle cx="21" cy="20" r="1.5" fill="#ffffff"/>
<circle cx="43" cy="20" r="1.5" fill="#ffffff"/>
<circle cx="32" cy="15" r="1.5" fill="#ffffff"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+35
View File
@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<defs>
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f39c12"/>
<stop offset="100%" stop-color="#d68910"/>
</linearGradient>
<linearGradient id="crestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2980b9"/>
<stop offset="100%" stop-color="#1f618d"/>
</linearGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Outer Shield -->
<path d="M 32 4 C 48 4 58 10 58 10 C 58 38 46 54 32 60 C 18 54 6 38 6 10 C 6 10 16 4 32 4 Z"
fill="url(#shieldGrad)" stroke="#7e5109" stroke-width="2.5" filter="url(#shadow)"/>
<!-- Inner Shield Inlay -->
<path d="M 32 8 C 45 8 53 13 53 13 C 53 36 43 49 32 54 C 21 49 11 36 11 13 C 11 13 19 8 32 8 Z"
fill="url(#crestGrad)" stroke="#fcf6e8" stroke-width="1.5"/>
<!-- Golden Crown on Top -->
<path d="M 22 24 L 25 17 L 32 21 L 39 17 L 42 24 L 40 28 L 24 28 Z"
fill="#f1c40f" stroke="#b7950b" stroke-width="1"/>
<!-- Math Spark Symbol (7 x 8 = 56 spirit) -->
<text x="32" y="44" font-family="'Fredoka', 'Arial Black', sans-serif" font-size="16" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="1">123</text>
<!-- Small Star Sparkles -->
<circle cx="21" cy="20" r="1.5" fill="#ffffff"/>
<circle cx="43" cy="20" r="1.5" fill="#ffffff"/>
<circle cx="32" cy="15" r="1.5" fill="#ffffff"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+35
View File
@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<defs>
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f39c12"/>
<stop offset="100%" stop-color="#d68910"/>
</linearGradient>
<linearGradient id="crestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2980b9"/>
<stop offset="100%" stop-color="#1f618d"/>
</linearGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Outer Shield -->
<path d="M 32 4 C 48 4 58 10 58 10 C 58 38 46 54 32 60 C 18 54 6 38 6 10 C 6 10 16 4 32 4 Z"
fill="url(#shieldGrad)" stroke="#7e5109" stroke-width="2.5" filter="url(#shadow)"/>
<!-- Inner Shield Inlay -->
<path d="M 32 8 C 45 8 53 13 53 13 C 53 36 43 49 32 54 C 21 49 11 36 11 13 C 11 13 19 8 32 8 Z"
fill="url(#crestGrad)" stroke="#fcf6e8" stroke-width="1.5"/>
<!-- Golden Crown on Top -->
<path d="M 22 24 L 25 17 L 32 21 L 39 17 L 42 24 L 40 28 L 24 28 Z"
fill="#f1c40f" stroke="#b7950b" stroke-width="1"/>
<!-- Math Spark Symbol (7 x 8 = 56 spirit) -->
<text x="32" y="44" font-family="'Fredoka', 'Arial Black', sans-serif" font-size="16" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="1">123</text>
<!-- Small Star Sparkles -->
<circle cx="21" cy="20" r="1.5" fill="#ffffff"/>
<circle cx="43" cy="20" r="1.5" fill="#ffffff"/>
<circle cx="32" cy="15" r="1.5" fill="#ffffff"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

+3
View File
@@ -9,10 +9,13 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="preload" id="webassembly" />
<link rel="stylesheet" href="css/app.css" />
<link href="CiselnaVyprava.styles.css" rel="stylesheet" />
<script type="importmap"></script>
</head>
+89
View File
@@ -0,0 +1,89 @@
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<!-- Static Content & MIME mappings -->
<staticContent>
<!-- Blazor WASM binaries -->
<remove fileExtension=".wasm" />
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".dll" />
<mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
<remove fileExtension=".dat" />
<mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
<remove fileExtension=".blat" />
<mimeMap fileExtension=".blat" mimeType="application/octet-stream" />
<remove fileExtension=".pdb" />
<mimeMap fileExtension=".pdb" mimeType="application/octet-stream" />
<remove fileExtension=".symbols" />
<mimeMap fileExtension=".symbols" mimeType="application/octet-stream" />
<!-- Fonts -->
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="font/woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
<!-- Images & Media -->
<remove fileExtension=".webp" />
<mimeMap fileExtension=".webp" mimeType="image/webp" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".png" />
<mimeMap fileExtension=".png" mimeType="image/png" />
<remove fileExtension=".jpg" />
<mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
<remove fileExtension=".jpeg" />
<mimeMap fileExtension=".jpeg" mimeType="image/jpeg" />
<!-- Audio -->
<remove fileExtension=".mp3" />
<mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
<remove fileExtension=".ogg" />
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
<remove fileExtension=".wav" />
<mimeMap fileExtension=".wav" mimeType="audio/wav" />
</staticContent>
<!-- URL Rewrite for Single Page Application (SPA routing) -->
<rewrite>
<rules>
<rule name="Direct-File-Access" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" />
</conditions>
<action type="None" />
</rule>
<rule name="SPA-Routing-Fallback" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
<httpProtocol>
<customHeaders>
<add name="X-Content-Type-Options" value="nosniff" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>