feat: render interactive ashen fields world

apps/web/src/app/layout/context-panel/context-panel.component.html

@@ -1,4 +1,37 @@
 <aside class="context-panel" aria-label="Gebietsinformationen">
-  <span class="context-panel__eyebrow">Gebiet</span>
-  <p class="context-panel__hint">Informationen erscheinen mit der Weltansicht.</p>
+  @if (worldStore.currentLocation(); as location) {
+    <span class="context-panel__eyebrow">GEBIETSINFO</span>
+    <h2>{{ location.name }}</h2>
+
+    @if (worldStore.selectedConnection(); as selected) {
+      <p class="context-panel__selection">Ausgewähltes Ziel: {{ selected.targetLocation.name }}</p>
+    }
+
+    <img
+      class="context-panel__artwork"
+      [src]="location.artworkPath"
+      [alt]="'Ortsansicht: ' + location.name"
+    />
+    <p class="context-panel__description">{{ location.description }}</p>
+
+    <dl class="context-panel__facts">
+      <div>
+        <dt>Empfohlene Stufe</dt>
+        <dd>{{ location.minRecommendedLevel }}–{{ location.maxRecommendedLevel }}</dd>
+      </div>
+      <div>
+        <dt>Sicherheit</dt>
+        <dd [class.context-panel__safe]="location.isSafe">
+          {{ location.isSafe ? 'Sicherer Ort' : 'Gefährliches Gebiet' }}
+        </dd>
+      </div>
+      <div>
+        <dt>Jagd</dt>
+        <dd>{{ location.huntingEnabled ? 'Jagd möglich' : 'Keine Jagd' }}</dd>
+      </div>
+    </dl>
+  } @else {
+    <span class="context-panel__eyebrow">GEBIETSINFO</span>
+    <p class="context-panel__hint">Informationen erscheinen mit der Weltansicht.</p>
+  }
 </aside>

apps/web/src/app/layout/context-panel/context-panel.component.scss

@@ -10,6 +10,14 @@
   background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 16%), var(--ar-panel);
 }
 
+.context-panel h2 {
+  margin: var(--ar-space-2) 0 var(--ar-space-3);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.55rem;
+  font-weight: 400;
+  line-height: 1.15;
+}
+
 .context-panel__eyebrow {
   display: block;
   padding-block-end: var(--ar-space-3);
@@ -24,3 +32,53 @@
   font-size: var(--ar-font-sm);
   line-height: 1.55;
 }
+
+.context-panel__selection {
+  margin: 0 0 var(--ar-space-3);
+  color: var(--ar-gold);
+  font-size: var(--ar-font-sm);
+}
+
+.context-panel__artwork {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  margin-block-end: var(--ar-space-3);
+  border: 1px solid var(--ar-border);
+  object-fit: cover;
+}
+
+.context-panel__description {
+  margin: 0 0 var(--ar-space-4);
+  color: var(--ar-text-muted);
+  font-size: var(--ar-font-sm);
+  line-height: 1.55;
+}
+
+.context-panel__facts {
+  display: grid;
+  gap: var(--ar-space-3);
+  margin: 0;
+  padding-block-start: var(--ar-space-3);
+  border-block-start: 1px solid var(--ar-border);
+}
+
+.context-panel__facts div {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--ar-space-3);
+}
+
+.context-panel__facts dt {
+  color: var(--ar-text-muted);
+  font-size: var(--ar-font-sm);
+}
+
+.context-panel__facts dd {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+}
+
+.context-panel__safe {
+  color: var(--ar-success);
+}

apps/web/src/app/layout/context-panel/context-panel.component.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { WorldStore } from '../../features/world/world.store';
 
 @Component({
   selector: 'app-context-panel',
   templateUrl: './context-panel.component.html',
   styleUrl: './context-panel.component.scss',
 })
-export class ContextPanelComponent {}
+export class ContextPanelComponent {
+  protected readonly worldStore = inject(WorldStore);
+}