mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 12:10:46 +00:00
Arkadiusz Sygulski
6bd95d4884
# Pathfinding pt. 4 https://pf-pt-4.openfront.dev/ ## Description: Hello again! Pathfinding. It's fast, but inaccurate. This PR makes it more accurate and actually faster. Sadly it is _faster_ because of a blunder in previous PR (using BucketQueue where MinHeap would be better), not because of a new tech. More importantly, it is more accurate. And that's what people apparently want. ## What changed? Most of the functional changes relate to `SpatialQuery` module. This is the thingy that answers "we know the target, which tile of my territory is the best to launch an invasion". To make it compute a path from South America to the deep inland China river, it has to work on a coerced map, one with a very small resolution, so small in fact, that every 4096 map tiles gets compressed to just one pixel. I hope you see where this is going. Previously we selected a random coastal tile within this big pixel (honestly it wasn't random at all, but could very well be for the illustrative purposes). Now, we try to be a bit more deliberate. Since we already know the rough location of the probably best tile, we can exclude all other tiles from the computation. Imagine a player's territory spans both Americas on global map - that's a lot of shores. But since we already know the best tile is somewhere close to Miami, the problem space was greatly reduced, no need to consider all other shores. But pathing to the target in China from Miami is still crazy expensive. This is where second trick comes to play - instead of pathing all the way to China, we select a _waypoint_ in the rough direction of China, about 100 to 200 tiles away. This way we fairly cheaply select best tile to launch an invasion towards this abstract point. And chances are, this point is far enough, the newly computed path is very close to being optimal. When you throw a dart from far away, the difference between scoring 10 and missing is very small. This is why aiming in the general direction of the board - as opposed to the ceiling - is usually good enough. ## Okay, but what about the crazy paths when I send invasion to the opposed bank of a river?! Well, pathing from America to China is cool, but most players wouldn't notice the difference on such long paths, what about the short ones? We now try more accurate pathing first and defer to hierarchy only if it fails. This produces much better paths for short invasions. While the fix described above ensures the accuracy is improved also on medium-to-long routes. ## Playground Yes. https://github.com/user-attachments/assets/9cf9586f-c99a-416d-b856-8cf0a21c35ed ## CodeRabbit Grab a 🥕. Remember `tests/pathfinding/playground` is mostly generated code and go easy on it. It's enough for it to work and do it's job of visualizing the paths. No need for throughout review of these files. ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: moleole
979 lines
15 KiB
CSS
979 lines
15 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #3c3c3c;
|
|
color: #e0e0e0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Welcome screen */
|
|
.welcome-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(28, 28, 28, 0.98);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.welcome-screen.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.welcome-content {
|
|
text-align: center;
|
|
max-width: 1100px;
|
|
padding: 40px;
|
|
background: rgba(42, 42, 42, 0.95);
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.welcome-content h1 {
|
|
font-size: 42px;
|
|
color: #fff;
|
|
margin: 0 0 16px 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.welcome-content p {
|
|
font-size: 18px;
|
|
color: #aaa;
|
|
margin: 0 0 30px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Map grid */
|
|
.map-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.map-card {
|
|
background: #1a1a1a;
|
|
border: 2px solid #404040;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.map-card:hover {
|
|
border-color: #0066cc;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
|
|
}
|
|
|
|
.map-card img {
|
|
width: 100%;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.map-card-name {
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
color: #e0e0e0;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
background: #2a2a2a;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.welcome-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.welcome-selector label {
|
|
font-size: 14px;
|
|
color: #aaa;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.welcome-selector select {
|
|
width: 400px;
|
|
padding: 14px 18px;
|
|
font-size: 16px;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
border: 2px solid #404040;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.welcome-selector select:hover {
|
|
border-color: #0066cc;
|
|
}
|
|
|
|
.welcome-selector select:focus {
|
|
outline: none;
|
|
border-color: #0066cc;
|
|
}
|
|
|
|
/* Fullscreen canvas container */
|
|
.canvas-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #3c3c3c;
|
|
z-index: 1;
|
|
}
|
|
|
|
.canvas-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #0a0a0a;
|
|
cursor: grab;
|
|
}
|
|
|
|
.canvas-wrapper:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.canvas-wrapper.selecting {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
#mapCanvas {
|
|
z-index: 1;
|
|
}
|
|
|
|
#overlayCanvas {
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Top panel - overlay on map */
|
|
.top-panel {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
max-width: 900px;
|
|
background: rgba(42, 42, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.top-panel h1 {
|
|
font-size: 24px;
|
|
color: #fff;
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.scenario-selector {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.status-section {
|
|
padding-top: 15px;
|
|
border-top: 1px solid #404040;
|
|
}
|
|
|
|
.scenario-selector select {
|
|
width: 350px;
|
|
padding: 12px 16px;
|
|
font-size: 16px;
|
|
background: #1a1a1a;
|
|
color: #e0e0e0;
|
|
border: 1px solid #404040;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.scenario-selector select:focus {
|
|
outline: none;
|
|
border-color: #0066cc;
|
|
}
|
|
|
|
.info {
|
|
padding-top: 15px;
|
|
border-top: 1px solid #404040;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
gap: 30px;
|
|
margin-bottom: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Debug panel (bottom left) */
|
|
.debug-panel {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: rgba(42, 42, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.debug-panel-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* View panel (bottom right) */
|
|
.view-panel {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: rgba(42, 42, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.zoom-control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #404040;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.zoom-control input[type="range"] {
|
|
width: 100%;
|
|
}
|
|
|
|
.zoom-control span {
|
|
font-size: 13px;
|
|
color: #aaa;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.clear-button {
|
|
background: #cc3333;
|
|
color: white;
|
|
border: 2px solid #dd4444;
|
|
padding: 10px 12px 10px 10px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
width: 100%;
|
|
}
|
|
|
|
.clear-button:hover {
|
|
background: #aa2222;
|
|
border-color: #cc3333;
|
|
}
|
|
|
|
.toggle-button {
|
|
background: #333;
|
|
color: #e0e0e0;
|
|
border: 2px solid #555;
|
|
padding: 10px 12px 10px 10px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
min-width: 100px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.toggle-button::before {
|
|
content: "☐";
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
color: #888;
|
|
}
|
|
|
|
.toggle-button:hover {
|
|
background: #404040;
|
|
border-color: #666;
|
|
}
|
|
|
|
.toggle-button[data-active="true"] {
|
|
background: #0066cc;
|
|
border-color: #0088ff;
|
|
color: white;
|
|
box-shadow: 0 0 10px rgba(0, 102, 204, 0.4);
|
|
}
|
|
|
|
.toggle-button[data-active="true"]::before {
|
|
content: "☑";
|
|
color: #00ff88;
|
|
}
|
|
|
|
.toggle-button[data-active="true"]:hover {
|
|
background: #0052a3;
|
|
border-color: #0066cc;
|
|
}
|
|
|
|
/* Timings panel (left side) */
|
|
.timings-panel {
|
|
position: fixed;
|
|
top: 280px;
|
|
left: 20px;
|
|
background: rgba(42, 42, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 12px;
|
|
padding: 20px 20px 15px 20px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
min-width: 280px;
|
|
}
|
|
|
|
.timings-header {
|
|
display: none;
|
|
}
|
|
|
|
.timing-section {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.timing-section + .timing-section {
|
|
margin-top: 15px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #404040;
|
|
}
|
|
|
|
.timing-label {
|
|
font-size: 18px;
|
|
color: #e0e0e0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.refresh-icon {
|
|
background: none;
|
|
border: none;
|
|
color: #00aaff;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
line-height: 1;
|
|
transition: color 0.2s;
|
|
border-radius: 4px;
|
|
width: 26px;
|
|
height: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.refresh-icon span {
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
|
|
.refresh-icon:hover {
|
|
color: #00ccff;
|
|
background: rgba(0, 170, 255, 0.1);
|
|
}
|
|
|
|
.refresh-icon.spinning span {
|
|
animation: spin 0.6s ease-in-out;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.timing-label-detail {
|
|
color: #888;
|
|
text-transform: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.timing-value-large {
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
color: #00ff88;
|
|
font-family: "Courier New", monospace;
|
|
line-height: 1;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.timing-value-large.faded {
|
|
color: #888888;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.timing-value-speedup {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
color: #ffaa00;
|
|
font-family: "Courier New", monospace;
|
|
line-height: 1;
|
|
}
|
|
|
|
.timing-breakdown {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.timing-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 3px 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.timing-name {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.timing-value {
|
|
font-family:
|
|
"Consolas", "Monaco", "SF Mono", "Roboto Mono", "Courier New", monospace;
|
|
color: #f5f5f5;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Comparison rows */
|
|
.comparison-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
margin: 0 -8px;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #333;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.comparison-row:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.comparison-row.active {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.comparison-row.active .comp-name {
|
|
color: #fff;
|
|
}
|
|
|
|
.comparison-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.comp-color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
opacity: 0.4;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.comparison-row.active .comp-color {
|
|
opacity: 1;
|
|
}
|
|
|
|
.comp-name {
|
|
color: #aaa;
|
|
flex: 1;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.comp-tiles {
|
|
font-family: monospace;
|
|
color: #888;
|
|
width: 50px;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.comp-time {
|
|
font-family: monospace;
|
|
color: #f5f5f5;
|
|
width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Legend panel (right side) */
|
|
.legend-panel {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 20px;
|
|
transform: translateY(-50%);
|
|
background: rgba(42, 42, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
min-width: 160px;
|
|
}
|
|
|
|
.legend-header {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 28px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Form elements */
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 120px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button {
|
|
background: #0066cc;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
button:hover {
|
|
background: #0052a3;
|
|
}
|
|
|
|
button:disabled {
|
|
background: #404040;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.timing-button {
|
|
width: 100%;
|
|
background: #555;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.timing-button:hover:not(:disabled) {
|
|
background: #666;
|
|
}
|
|
|
|
.timing-button:disabled {
|
|
background: #404040;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#status {
|
|
font-size: 14px;
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
#status.loading {
|
|
color: #00aaff;
|
|
}
|
|
|
|
#status.error {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
/* Error toast notification */
|
|
.error-toast {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(138, 26, 26, 0.98);
|
|
color: #ff6b6b;
|
|
padding: 20px 30px;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
|
|
z-index: 100;
|
|
display: none;
|
|
max-width: 500px;
|
|
text-align: center;
|
|
border: 2px solid #ff6b6b;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.error-toast.visible {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translate(-50%, -60%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translate(-50%, -50%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Tooltip */
|
|
#tooltip {
|
|
position: fixed;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
color: #fff;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
display: none;
|
|
border: 1px solid #666;
|
|
max-width: 350px;
|
|
line-height: 1.5;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
#tooltip.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid #404040;
|
|
border-top-color: #00aaff;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 1200px) {
|
|
.top-panel {
|
|
left: 10px;
|
|
right: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.debug-panel {
|
|
left: 10px;
|
|
padding: 12px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.debug-panel-row {
|
|
gap: 8px;
|
|
}
|
|
|
|
.view-panel {
|
|
right: 10px;
|
|
padding: 12px;
|
|
gap: 8px;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.toggle-button {
|
|
min-width: auto;
|
|
padding: 8px 10px 8px 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.clear-button {
|
|
padding: 8px 10px 8px 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.legend-panel {
|
|
right: 10px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.top-panel h1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.debug-panel {
|
|
gap: 6px;
|
|
}
|
|
|
|
.debug-panel-row {
|
|
gap: 6px;
|
|
}
|
|
|
|
.view-panel {
|
|
gap: 6px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.toggle-button {
|
|
min-width: auto;
|
|
padding: 7px 8px 7px 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.clear-button {
|
|
padding: 7px 8px 7px 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.timings-panel {
|
|
top: auto;
|
|
bottom: 180px;
|
|
left: 10px;
|
|
transform: none;
|
|
min-width: auto;
|
|
max-width: calc(100vw - 20px);
|
|
}
|
|
|
|
.legend-panel {
|
|
top: auto;
|
|
bottom: 200px;
|
|
right: 10px;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Mode switch */
|
|
.mode-switch {
|
|
display: flex;
|
|
gap: 0;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 2px solid #404040;
|
|
}
|
|
|
|
.mode-button {
|
|
flex: 1;
|
|
background: #1a1a1a;
|
|
color: #888;
|
|
border: none;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.mode-button:hover {
|
|
background: #2a2a2a;
|
|
color: #aaa;
|
|
}
|
|
|
|
.mode-button.active {
|
|
background: #0066cc;
|
|
color: white;
|
|
}
|
|
|
|
.mode-button.active:hover {
|
|
background: #0052a3;
|
|
}
|
|
|
|
/* Transport Ship controls - positioned at bottom left like debug panel */
|
|
.transport-controls {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: rgba(42, 42, 42, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
min-width: 220px;
|
|
}
|
|
|
|
.transport-control-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.transport-control-row label {
|
|
font-size: 14px;
|
|
color: #aaa;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.transport-control-row input[type="range"] {
|
|
flex: 1;
|
|
}
|
|
|
|
.transport-control-row span {
|
|
font-size: 14px;
|
|
color: #e0e0e0;
|
|
min-width: 24px;
|
|
text-align: right;
|
|
}
|
|
|
|
.transport-control-row .clear-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.transport-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #404040;
|
|
font-size: 13px;
|
|
color: #888;
|
|
}
|
|
|
|
.transport-info strong {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.transport-legend {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px 12px;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
.transport-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
}
|
|
|
|
.transport-legend-color {
|
|
width: 14px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
}
|