feat: render interactive ashen fields world

2026-08-19 08:25:42 +02:00
parent fce03e220d
commit 1e2bfe6e4b
21 changed files with 1933 additions and 17 deletions
--- a/apps/web/src/app/features/world/travel-panel.component.scss
+++ b/apps/web/src/app/features/world/travel-panel.component.scss
@@ -0,0 +1,90 @@
+:host {
+  display: block;
+}
+
+.travel-panel {
+  padding: var(--ar-space-3) var(--ar-space-4);
+  border: 1px solid var(--ar-border-highlight);
+  border-radius: var(--ar-radius-sm);
+  background:
+    linear-gradient(125deg, rgb(255 255 255 / 0.045), transparent 42%), rgb(12 15 17 / 0.96);
+  box-shadow: var(--ar-shadow-raised);
+  text-align: center;
+}
+
+.travel-panel__eyebrow {
+  color: var(--ar-gold);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
+.travel-panel h2 {
+  margin: var(--ar-space-1) 0 var(--ar-space-3);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.25rem;
+  font-weight: 400;
+}
+
+.travel-panel__details {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--ar-space-2);
+  margin: 0 0 var(--ar-space-3);
+  padding-block: var(--ar-space-2);
+  border-block: 1px solid rgb(155 122 66 / 0.45);
+}
+
+.travel-panel__details div {
+  min-inline-size: 0;
+}
+
+.travel-panel dt {
+  color: var(--ar-text-muted);
+  font-size: 0.7rem;
+}
+
+.travel-panel dd {
+  margin: var(--ar-space-1) 0 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 0.95rem;
+}
+
+.travel-panel__danger--low {
+  color: var(--ar-success);
+}
+
+.travel-panel button {
+  inline-size: 100%;
+  padding: var(--ar-space-2) var(--ar-space-4);
+  border: 1px solid var(--ar-border-highlight);
+  border-radius: var(--ar-radius-sm);
+  color: var(--ar-text);
+  background: linear-gradient(180deg, #263b4b, #17232d);
+  cursor: pointer;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1rem;
+}
+
+.travel-panel button:hover:not(:disabled) {
+  border-color: #d6b26b;
+  background: linear-gradient(180deg, #315067, #1a2c3a);
+}
+
+.travel-panel button:disabled {
+  border-color: var(--ar-border);
+  color: var(--ar-text-muted);
+  background: #1a1c1d;
+  cursor: not-allowed;
+}
+
+.travel-panel__instruction {
+  margin: var(--ar-space-2) 0 0;
+  color: var(--ar-text-muted);
+}
+
+@media (width < 720px) {
+  .travel-panel__details {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}