impl

src/SlaySharp.Web/Pages/Index.razor

@@ -12,9 +12,15 @@
 
 @if (_showIntroBoot)
 {
-    <!-- Cyberpunk Roslyn CLR Intro Boot Sequence -->
+    <!-- Cyberpunk Roslyn CLR Intro Boot Video Sequence -->
     <div class="intro-boot-screen @(_isGlitchTransitioning ? "intro-glitch-out" : "") font-mono" @onclick="EnterTitleScreenAsync">
+        <!-- Live Cinematic Video Background -->
+        <video class="intro-video-bg" autoplay muted loop playsinline>
+            <source src="videos/intro_boot.mp4" type="video/mp4" />
+        </video>
+        <div class="intro-video-overlay"></div>
         <div class="intro-crt-lines"></div>
+
         <div class="intro-content-box p-4 p-md-5">
             <!-- Terminal Header -->
             <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom border-secondary">
@@ -22,9 +28,9 @@
                     <span style="color: #e06c75; font-size: 0.9rem;">●</span>
                     <span style="color: #e5c07b; font-size: 0.9rem;">●</span>
                     <span style="color: #98c379; font-size: 0.9rem;">●</span>
-                    <span class="text-muted ms-2" style="font-size: 0.78rem;">pwsh -- SlaySharp Roslyn CLR v8.0 Bootstrapper</span>
+                    <span class="text-white ms-2 fw-bold" style="font-size: 0.82rem;">pwsh -- SlaySharp Roslyn CLR v8.0 Bootstrapper</span>
                 </div>
-                <span class="badge bg-dark text-info border border-info px-2 py-1" style="font-size: 0.7rem;">x64-wasm</span>
+                <span class="badge bg-danger text-white border border-danger px-2 py-1 shadow-sm pulse-icon" style="font-size: 0.72rem;">● LIVE VIDEO FEED</span>
             </div>
 
             <!-- Animated Terminal Diagnostics Log -->
@@ -36,23 +42,18 @@
                 <div class="text-white">&gt; [READY] Principal .NET Architect credentials authenticated.</div>
             </div>
 
-            <!-- Center ASCII / Neon Title Logo -->
+            <!-- Center Neon Title Logo -->
             <div class="intro-ascii-logo text-center my-3 my-md-4">
-                <pre class="neon-glow-text mb-0" style="color: #61afef; font-size: clamp(0.55rem, 1.4vw, 1.05rem); font-weight: 900; line-height: 1.15;">
+                <h1 class="neon-glow-text text-white fw-bolder mb-1" style="font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 3px;">
-  ____  _             ____  _                     
+                    SLAYSHARP
- / ___|| | __ _ _   _/ ___|| |__   __ _ _ __ _ __  
+                </h1>
- \___ \| |/ _` | | | \___ \| '_ \ / _` | '__| '_ \ 
+                <div class="text-info fw-bolder mt-1" style="font-size: clamp(0.85rem, 1.8vw, 1.18rem); letter-spacing: 2px;">
-  ___) | | (_| | |_| |___) | | | | (_| | |  | |_) |
- |____/|_|\__,_|\__, |____/|_| |_|\__,_|_|  | .__/ 
-                |___/                       |_|    
-                </pre>
-                <div class="text-info fw-bolder mt-3" style="font-size: clamp(0.9rem, 2vw, 1.25rem); letter-spacing: 2px;">
                     THE C# &amp; .NET RUNTIME ROGUELIKE DECKBUILDER
                 </div>
             </div>
 
             <!-- Glowing Launch CTA -->
-            <div class="text-center mt-4">
+            <div class="text-center mt-4 d-flex justify-content-center gap-3 flex-wrap">
                 <button class="btn btn-success btn-lg font-mono fw-bolder px-5 py-3 shadow-lg intro-start-btn" @onclick="EnterTitleScreenAsync">
                     ⚡ INITIALIZE WORKSPACE (PRESS ANYWHERE) ➔
                 </button>
@@ -441,7 +442,7 @@ else
 }
 
 <style>
-/* Intro Boot Screen & Terminal Styles */
+/* Intro Boot Video Screen & Terminal Styles */
 .intro-boot-screen {
     position: fixed;
     inset: 0;
@@ -455,6 +456,23 @@ else
     animation: intro-fade-in 0.4s ease-out;
 }
 
+.intro-video-bg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1;
+    filter: brightness(0.85) contrast(1.15);
+}
+
+.intro-video-overlay {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.45) 0%, rgba(10, 13, 20, 0.82) 100%);
+    z-index: 2;
+}
+
 @@keyframes intro-fade-in {
     from { opacity: 0; transform: scale(0.98); }
     to { opacity: 1; transform: scale(1); }

src/SlaySharp.Web/wwwroot/css/app.css

@@ -69,7 +69,7 @@ a, .btn-link {
 .wasm-loader-container {
     position: fixed;
     inset: 0;
-    background-color: #14161a;
+    background-color: #0a0d14;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -78,9 +78,27 @@ a, .btn-link {
     overflow: hidden;
 }
 
+.wasm-video-bg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1;
+    filter: brightness(0.65) contrast(1.15);
+}
+
+.wasm-video-overlay {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.45) 0%, rgba(10, 13, 20, 0.82) 100%);
+    z-index: 2;
+}
+
 .wasm-circuit-bg {
     position: absolute;
     inset: 0;
+    z-index: 3;
     background: 
         radial-gradient(circle at 50% 50%, rgba(97, 175, 239, 0.08) 0%, transparent 70%),
         linear-gradient(rgba(24, 26, 31, 0.85) 1px, transparent 1px),

src/SlaySharp.Web/wwwroot/favicon.svg

@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="100%" height="100%">
+  <defs>
+    <!-- Cyberpunk Neon Gradients -->
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f172a" />
+      <stop offset="50%" stop-color="#1e1b4b" />
+      <stop offset="100%" stop-color="#090d16" />
+    </linearGradient>
+    
+    <linearGradient id="borderGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#00d2ff" />
+      <stop offset="50%" stop-color="#70a1ff" />
+      <stop offset="100%" stop-color="#e056fd" />
+    </linearGradient>
+
+    <linearGradient id="csharpGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#67e8f9" />
+      <stop offset="50%" stop-color="#38bdf8" />
+      <stop offset="100%" stop-color="#818cf8" />
+    </linearGradient>
+
+    <linearGradient id="swordGrad" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ff4757" />
+      <stop offset="50%" stop-color="#ffa502" />
+      <stop offset="100%" stop-color="#ffd700" />
+    </linearGradient>
+
+    <!-- Neon Glow Filter -->
+    <filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+
+  <!-- Hexagon Cyber Shield Base -->
+  <polygon points="64,6 118,34 118,94 64,122 10,94 10,34" 
+           fill="url(#bgGrad)" 
+           stroke="url(#borderGrad)" 
+           stroke-width="5" 
+           stroke-linejoin="round" />
+
+  <!-- Inner Cyber Circuit Accent -->
+  <polygon points="64,16 108,40 108,88 64,112 20,88 20,40" 
+           fill="none" 
+           stroke="#00d2ff" 
+           stroke-width="1.5" 
+           stroke-dasharray="8 4" 
+           opacity="0.4" />
+
+  <!-- Glowing Crossed Cyber Blade (Diagonal) -->
+  <g filter="url(#neonGlow)">
+    <!-- Blade -->
+    <line x1="32" y1="96" x2="96" y2="32" stroke="url(#swordGrad)" stroke-width="5" stroke-linecap="round" />
+    <!-- Guard -->
+    <line x1="42" y1="74" x2="54" y2="86" stroke="#ffd700" stroke-width="4" stroke-linecap="round" />
+    <!-- Pommel -->
+    <circle cx="28" cy="100" r="3.5" fill="#ff4757" />
+  </g>
+
+  <!-- Big Bold Stylized C# Monogram -->
+  <!-- 'C' -->
+  <path d="M 52,48 C 45,48 38,54 38,64 C 38,74 45,80 52,80 C 58,80 62,76 64,72" 
+        fill="none" 
+        stroke="url(#csharpGrad)" 
+        stroke-width="8" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+        filter="url(#neonGlow)" />
+
+  <!-- '#' Symbol -->
+  <!-- Vertical lines -->
+  <line x1="74" y1="46" x2="70" y2="82" stroke="#e056fd" stroke-width="4.5" stroke-linecap="round" filter="url(#neonGlow)" />
+  <line x1="88" y1="46" x2="84" y2="82" stroke="#e056fd" stroke-width="4.5" stroke-linecap="round" filter="url(#neonGlow)" />
+  <!-- Horizontal lines -->
+  <line x1="66" y1="56" x2="94" y2="56" stroke="#e056fd" stroke-width="4.5" stroke-linecap="round" filter="url(#neonGlow)" />
+  <line x1="64" y1="70" x2="92" y2="70" stroke="#e056fd" stroke-width="4.5" stroke-linecap="round" filter="url(#neonGlow)" />
+
+  <!-- Sparkle Particle Star -->
+  <polygon points="98,22 100,28 106,30 100,32 98,38 96,32 90,30 96,28" fill="#ffd700" filter="url(#neonGlow)" />
+</svg>

src/SlaySharp.Web/wwwroot/index.html

@@ -10,13 +10,21 @@
     <link rel="stylesheet" href="css/bootstrap-icons/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="stylesheet" href="css/game.css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link rel="icon" type="image/png" sizes="64x64" href="favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
     <link href="SlaySharp.Web.styles.css" rel="stylesheet" />
 </head>
 
 <body>
     <div id="app">
         <div class="wasm-loader-container">
+            <!-- Background Video Feed during WebAssembly Initialization -->
+            <video class="wasm-video-bg" autoplay muted loop playsinline>
+                <source src="videos/intro_boot.mp4" type="video/mp4" />
+            </video>
+            <div class="wasm-video-overlay"></div>
+
             <div class="wasm-circuit-bg"></div>
             <div class="wasm-loader-card">
                 <!-- Glowing C# Hexagon Icon -->

src/SlaySharp.Web/wwwroot/web.config

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+  <system.webServer>
+    <!-- Static File MIME Types for Blazor WebAssembly .NET 8 & Media Assets -->
+    <staticContent>
+      <!-- WebAssembly & .NET CLR 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=".pdb" />
+      <mimeMap fileExtension=".pdb" 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=".clfmt" />
+      <mimeMap fileExtension=".clfmt" mimeType="application/octet-stream" />
+      
+      <!-- Fonts & Images -->
+      <remove fileExtension=".woff" />
+      <mimeMap fileExtension=".woff" mimeType="font/woff" />
+      
+      <remove fileExtension=".woff2" />
+      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
+
+      <remove fileExtension=".webp" />
+      <mimeMap fileExtension=".webp" mimeType="image/webp" />
+
+      <remove fileExtension=".svg" />
+      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
+
+      <!-- Video Formats (MP4, WebM, M4V, OGV) -->
+      <remove fileExtension=".mp4" />
+      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
+
+      <remove fileExtension=".m4v" />
+      <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
+
+      <remove fileExtension=".webm" />
+      <mimeMap fileExtension=".webm" mimeType="video/webm" />
+
+      <remove fileExtension=".ogv" />
+      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
+
+      <!-- Audio Formats (MP3, WAV, OGG) -->
+      <remove fileExtension=".mp3" />
+      <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
+
+      <remove fileExtension=".wav" />
+      <mimeMap fileExtension=".wav" mimeType="audio/wav" />
+
+      <remove fileExtension=".ogg" />
+      <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
+    </staticContent>
+
+    <!-- SPA URL Rewrite Rules (Requires IIS URL Rewrite Module) -->
+    <rewrite>
+      <rules>
+        <rule name="Serve-PushState-Requests" 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="index.html" />
+        </rule>
+      </rules>
+    </rewrite>
+
+    <!-- Security Headers -->
+    <httpProtocol>
+      <customHeaders>
+        <add name="X-Content-Type-Options" value="nosniff" />
+      </customHeaders>
+    </httpProtocol>
+  </system.webServer>
+</configuration>