Highlight multi-patch support (#69)

Author: Frotty

_doc/features.md

@@ -15,4 +15,12 @@ navigation:
   - /features/agents
 ---
 
-WurstScript is more than a programming language. It is a complete, integrated development environment for Warcraft III map making, from writing code to viewing assets to running your map, all from VS Code.
+WurstScript is more than a programming language. It is a patch-aware Warcraft III development toolchain: Grill selects the target game patch and fetches the matching core Jass definitions and standard library, while the compiler, CLI, and VS Code tooling use that same target consistently.
+
+This lets one ecosystem support classic Warcraft III installations and modern Reforged clients at the same time. Older MPQ-era patches can receive Jass output and layered MPQ game data, classic CASC-era patches can receive Jass output from CASC-backed clients, and Reforged projects can use Lua or Jass with CASC game data. The editor, client detection, map runner, asset browser, and model viewer all fit into that same workflow.
+
+| Target | Typical output | Installed game data |
+| --- | --- | --- |
+| Older MPQ-era classic patches | Jass | Layered MPQ archives |
+| Classic CASC-era patches (1.30/1.31) | Jass | CASC storage |
+| Reforged | Lua or Jass | CASC storage |

_doc/features/backends.md

@@ -22,7 +22,7 @@ Set `compilationTarget` in your `wurst.build` file:
 compilationTarget: lua
 ```
 
-Jass is the default and requires no configuration. Lua targets Reforged and is required if you want to run on Battle.net with modern clients.
+Jass is the default and works well for classic and pre-Reforged patches. Lua targets Reforged and is required if you want to run on Battle.net with modern clients. The patch selected for the project determines which core Jass definitions and standard library revision Grill provides alongside the compiler.
 
 ## Why They Differ
 

_doc/features/vscode.md

@@ -44,6 +44,20 @@ The extension can render common Warcraft III asset formats directly in the edito
 
 Open any of these files from the VS Code explorer and they are displayed inline.
 
+## Installed Game Data
+
+Wurst supports both MPQ-era classic installations and CASC-backed clients such as Warcraft III 1.30/1.31 and Reforged.
+
+The extension is the editor-facing part of Wurst’s broader patch-aware workflow. It detects the available Warcraft III client when possible and uses the selected game data for previews and map tooling, whether the project targets classic Jass or modern Reforged Lua.
+
+Wurst can also read assets directly from the Warcraft III installation — not only from files inside your project. This works with both Reforged CASC storage and classic Warcraft III MPQ installations.
+
+For MPQ-era classic installations, Wurst follows the game’s layered archive model, resolving files through the base game, expansion, locale, and patch archives so patched assets override their older versions:
+
+`war3.mpq` → `war3local.mpq` → `war3x.mpq` → `war3xlocal.mpq` → `war3patch.mpq`
+
+That means the asset browser, object metadata, icons, model viewer, textures, and model thumbnails can use the same game data that an older Warcraft III installation uses. Set `wurst.wc3path` to your Warcraft III installation directory if it is not detected automatically.
+
 ## MPQ Inspector
 
 `.w3x` and `.w3m` map archives can be browsed directly in VS Code:

_doc/start.md

@@ -8,7 +8,7 @@ icon:
 color: green
 ---
 
-WurstScript is a programming language and modding toolkit for Warcraft 3 maps.
+WurstScript is a patch-aware programming language and modding toolkit for Warcraft 3 maps.
 This guide covers the current streamlined setup with VS Code.
 
 ## Prerequisites
@@ -49,6 +49,18 @@ grill install
 
 For this flow, you usually do not need to run `grill install` manually right away.
 
+## Target a Warcraft III Patch
+
+Wurst supports multiple Warcraft III generations from one toolchain. Grill can select the patch your project targets and downloads the matching core Jass definitions and standard library version, keeping the compiler and dependencies aligned with the client you actually run.
+
+This is useful for both ends of Warcraft III’s history:
+
+- **Older MPQ-era classic patches** use Jass output and layered MPQ game data.
+- **Classic CASC-era patches such as 1.30/1.31** use Jass output and CASC game data.
+- **Reforged** projects can use Lua or Jass output and modern CASC game data.
+
+The VS Code extension detects the installed client when it can, and the asset and map tooling follows the same game-data selection. You can therefore work against an older MPQ installation without losing the modern Reforged workflow.
+
 ## Running Your Map
 
 Use the play button in VS Code to run your project quickly.

_includes/branding.html

@@ -3,7 +3,7 @@
 <div class="branding">
     <h1 class="logo">
         <a href="{{ '/' | relative_url }}">
-            {% if include.home %} <img src="/assets/images/wurst_icon64.png" style="margin:0px 0px 15px 00px"><br>{% else %}{% include icon.html icon=site.branding.icon %}{% endif %} 
+            {% if include.home %} <img src="/assets/images/wurst_icon64.png" style="margin:0px 0px 15px 00px" alt="WurstScript"> <br>{% else %}{% include icon.html icon=site.branding.icon %}{% endif %}
             <span class="text-highlight">{{ site.branding.highlight }}</span><span class="text-bold">{{ site.branding.bold }}<br></span>
         </a>
     </h1>

_includes/header.html

@@ -1,9 +1,9 @@
 <header class="branding">
-    <img src="/assets/images/wurst_icon64.png" class="logo">
+    <img src="/assets/images/wurst_icon64.png" class="logo" alt="WurstScript">
     <a class="branding-text" href="{{ '/' | relative_url }}">
         <span class="text-highlight">{{ site.branding.highlight }}</span><span class="text-bold">{{ site.branding.bold }}<br></span>
     </a>
-    <nav>
+    <nav aria-label="Primary navigation">
         <a class="nav-link" href="{{ '/start.html' | relative_url }}">Installation</a>
         <a class="nav-link" href="{{ '/documentation.html' | relative_url }}">Documentation</a>
         <a class="nav-link" href="{{ '/community.html' | relative_url }}">Community</a>

_layouts/home.html

@@ -26,7 +26,7 @@ <h1 class="name">WurstScript</h1>
 					<a class="btn btn-primary" href="/start">Get Started</a>
 				</div>
 				<div class="img-container">
-					<img src="/assets/images/wurst-scroll.png">
+					<img src="/assets/images/wurst-scroll.png" alt="WurstScript code scroll illustration">
 					<!-- Place this tag where you want the button to render. -->
 					<a class="github-button" href="https://github.com/wurstscript/wurstscript" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star wurstscript/wurstscript on GitHub">Star</a>
 				</div>
@@ -38,7 +38,7 @@ <h2 class="title">Latest Updates</h2>
 					{% assign posts = site.news | sort: 'date' | reverse %}
 					{% for post in posts limit:3 %}
 					<a class="btn card" href="{{ post.url }}">
-						<div class="card-image"><img src="{{ post.image }}"></div>
+						<div class="card-image"><img src="{{ post.image }}" alt=""></div>
 						<div class="card-content date">
 							<p class="date">{{ post.date | date: '%B %d, %Y' }}</p>
 							<h3>{{ post.title }}</h3>
@@ -97,24 +97,24 @@ <h3>VS Code knows WC3</h3>
 				<h2 class="title">Join the Community</h2>
 
 				<div class="cards">
-					<a class="btn card" href="https://github.com/wurstscript" target="_blank">
-						<div class="card-image"><img src="/assets/images/github-mark-white.png"></div>
+					<a class="btn card" href="https://github.com/wurstscript" target="_blank" rel="noopener noreferrer">
+						<div class="card-image"><img src="/assets/images/github-mark-white.png" alt=""></div>
 						<div class="card-content">
 							<h3>GitHub</h3>
 							<p>Report bugs, suggest features, contribute code.</p>
 						</div>
 					</a>
 
-					<a class="btn card" href="https://discord.gg/mSHZpWcadz" target="_blank">
-						<div class="card-image"><img src="/assets/images/icon_clyde_blurple_RGB.png"></div>
+					<a class="btn card" href="https://discord.gg/mSHZpWcadz" target="_blank" rel="noopener noreferrer">
+						<div class="card-image"><img src="/assets/images/icon_clyde_blurple_RGB.png" alt=""></div>
 						<div class="card-content">
 							<h3>Discord</h3>
 							<p>General chat for WurstScript and Warcraft mapping. Bridged to matrix.</p>
 						</div>
 					</a>
 
-					<a class="btn card" href="https://matrix.to/#/!qppIznMkBZgRaYJNYA:matrix.org?via=matrix.org" target="_blank">
-						<div class="card-image"><img src="/assets/images/Matrix_icon.png"></div>
+					<a class="btn card" href="https://matrix.to/#/!qppIznMkBZgRaYJNYA:matrix.org?via=matrix.org" target="_blank" rel="noopener noreferrer">
+						<div class="card-image"><img src="/assets/images/Matrix_icon.png" alt=""></div>
 						<div class="card-content">
 							<h3>Matrix</h3>
 							<p>General chat for WurstScript and Warcraft mapping. Bridged to discord.</p>

_sass/base.scss

@@ -397,7 +397,7 @@ select {
     }
 }
 
-nav {
+.branding nav {
     display: flex;
     gap: 12px;
     margin-left: 24px;

_sass/landing.scss

@@ -247,12 +247,17 @@
   }
 
   .card {
+    display: flex;
+    flex-direction: column;
     padding: 0;
     width: clamp(250px, 31%, 300px);
     min-height: 220px;
     border-radius: 10px;
     border: 1px solid var(--divider-dark);
     background-color: var(--smoky-white);
+    color: var(--text-color);
+    text-align: left;
+    text-decoration: none;
     box-shadow: var(--shadow-soft);
     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 
@@ -261,6 +266,12 @@
       box-shadow: var(--shadow-strong);
       transform: translateY(-2px);
     }
+
+    &:focus-visible {
+      outline: 3px solid var(--color-primary-light);
+      outline-offset: 3px;
+      text-decoration: none;
+    }
   }
 
   .card-image {
@@ -280,6 +291,7 @@
   }
 
   .card-content {
+    flex: 1;
     background-color: var(--smoky-white);
     min-height: 0;
     width: 100%;
@@ -303,6 +315,7 @@
     }
 
     p {
+      margin-bottom: 0;
       color: var(--text-color-secondary);
       font-size: 14px;
     }
@@ -365,7 +378,7 @@
     position: relative;
     width: 100%;
     border: 1px solid var(--divider);
-    @include border-radius(4px);
+    @include border-radius(10px);
 
     .link {
       position: absolute;
@@ -375,6 +388,12 @@
       left: 0;
       z-index: 1;
       background-image: url("../images/empty.png"); /* for IE8 */
+
+      &:focus-visible {
+        outline: 3px solid var(--color-primary-light);
+        outline-offset: -3px;
+        border-radius: 10px;
+      }
     }
 
     transition: 0.2s ease;
@@ -494,7 +513,10 @@
 
   .greeting {
     flex-direction: column;
-    
+
+    > div:first-child {
+      text-align: center;
+    }
 
     .name {
       font-size: 42px;