232 lines
9.9 KiB
HTML
232 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="style.css" rel="stylesheet" type="text/css" media="all">
|
|
<title>Derail Valley Community Map</title>
|
|
<meta property="og:title" content="Derail Valley Community Map">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://pyronicampt.github.io/DV-Community-Map/">
|
|
<meta property="og:image" content="https://pyronicampt.github.io/DV-Community-Map/opengraph.png">
|
|
<meta property="og:description" content="Web-based map of Derail Valley">
|
|
<script type="module" src="index.js"></script>
|
|
<script type="module" src="legend.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="mapContainer">
|
|
<div id="mapNavigator">
|
|
<svg id="map" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 10000 10000">
|
|
<style>
|
|
.sign{
|
|
transform: scale(var(--signScale));
|
|
}
|
|
.sign, .rail, .signText{
|
|
cursor: default;
|
|
}
|
|
.signText{
|
|
fill:#000;
|
|
font: 60px Arial;
|
|
font-weight: bold;
|
|
}
|
|
.signText.gradeSign{
|
|
font-size: 30px;
|
|
stroke:#fff;
|
|
stroke-width: 6px;
|
|
paint-order: stroke fill;
|
|
}
|
|
.rail{
|
|
fill: none;
|
|
}
|
|
.rail.grade_flat{
|
|
stroke: var(--grade_flat);
|
|
}
|
|
.rail.grade_0{
|
|
stroke: var(--grade_0);
|
|
}
|
|
.rail.grade_1{
|
|
stroke: var(--grade_1);
|
|
}
|
|
.rail.grade_2{
|
|
stroke: var(--grade_2);
|
|
}
|
|
.rail.grade_3{
|
|
stroke: var(--grade_3);
|
|
}
|
|
.rail.grade_4{
|
|
stroke: var(--grade_4);
|
|
}
|
|
.rail.grade_5{
|
|
stroke: var(--grade_5);
|
|
}
|
|
.rail.grade_6{
|
|
stroke: var(--grade_6);
|
|
}
|
|
.rail.grade_7{
|
|
stroke: var(--grade_7);
|
|
}
|
|
.rail.grade_8{
|
|
stroke: var(--grade_8);
|
|
}
|
|
.rail.grade_9{
|
|
stroke: var(--grade_9);
|
|
}
|
|
|
|
.gradeSign.grade_flat{
|
|
fill: var(--grade_flat);
|
|
}
|
|
.gradeSign.grade_0{
|
|
fill: var(--grade_0);
|
|
}
|
|
.gradeSign.grade_1{
|
|
fill: var(--grade_1);
|
|
}
|
|
.gradeSign.grade_2{
|
|
fill: var(--grade_2);
|
|
}
|
|
.gradeSign.grade_3{
|
|
fill: var(--grade_3);
|
|
}
|
|
.gradeSign.grade_4{
|
|
fill: var(--grade_4);
|
|
}
|
|
.gradeSign.grade_5{
|
|
fill: var(--grade_5);
|
|
}
|
|
.gradeSign.grade_6{
|
|
fill: var(--grade_6);
|
|
}
|
|
.gradeSign.grade_7{
|
|
fill: var(--grade_7);
|
|
}
|
|
.gradeSign.grade_8{
|
|
fill: var(--grade_8);
|
|
}
|
|
.gradeSign.grade_9{
|
|
fill: var(--grade_9);
|
|
}
|
|
.cullThreshold_0{
|
|
display: var(--cullThreshold_state_0);
|
|
}
|
|
.cullThreshold_1{
|
|
display: var(--cullThreshold_state_1);
|
|
}
|
|
.cullThreshold_2{
|
|
display: var(--cullThreshold_state_2);
|
|
}
|
|
.cullThreshold_3{
|
|
display: var(--cullThreshold_state_3);
|
|
}
|
|
.cullThreshold_4{
|
|
display: var(--cullThreshold_state_4);
|
|
}
|
|
.cullThreshold_5{
|
|
display: var(--cullThreshold_state_5);
|
|
}
|
|
.cullThreshold_6{
|
|
display: var(--cullThreshold_state_6);
|
|
}
|
|
</style>
|
|
<style id="zoomStyle"></style>
|
|
<defs>
|
|
<g id="gradeArrow" transform="scale(10)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<path d="M 0 -7 L 3.8 4 L -3.8 4 z" fill="black"/>
|
|
<path d="M 0 -5 L 3 4 L 0 5 L -3 4 z"/>
|
|
</g>
|
|
<g id="speedSign" transform="scale(15)" viewBox="0 0 10 10" refX="5" refY="5" style="fill:#fff; stroke:#e73819">
|
|
<circle cx="0" cy="0" r="3"/>
|
|
</g>
|
|
<g id="speedSignWarning" transform="scale(15)" viewBox="0 0 10 10" refX="5" refY="5" style="fill:#702012; stroke:#e73819">
|
|
<circle cx="0" cy="0" r="3"/>
|
|
</g>
|
|
<g id="speedSign_1" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSignWarning"></use>
|
|
<text class="signText" style="fill:#fff;transform:translate(-15px, 20px)">1</text>
|
|
</g>
|
|
<g id="speedSign_2" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSignWarning"></use>
|
|
<text class="signText" style="fill:#fff;transform:translate(-15px, 20px)">2</text>
|
|
</g>
|
|
<g id="speedSign_3" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSignWarning"></use>
|
|
<text class="signText" style="fill:#fff;transform:translate(-15px, 20px)">3</text>
|
|
</g>
|
|
<g id="speedSign_4" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-15px, 20px)">4</text>
|
|
</g>
|
|
<g id="speedSign_5" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-16px, 20px)">5</text>
|
|
</g>
|
|
<g id="speedSign_6" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-15px, 20px)">6</text>
|
|
</g>
|
|
<g id="speedSign_7" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-15px, 20px)">7</text>
|
|
</g>
|
|
<g id="speedSign_8" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-16px, 20px)">8</text>
|
|
</g>
|
|
<g id="speedSign_9" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-15px, 20px)">9</text>
|
|
</g>
|
|
<g id="speedSign_10" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-35px, 20px)">10</text>
|
|
</g>
|
|
<g id="speedSign_12" transform="scale(1)" viewBox="0 0 10 10" refX="5" refY="5">
|
|
<use href="#speedSign"></use>
|
|
<text class="signText" style="transform:translate(-35px, 20px)">12</text>
|
|
</g>
|
|
</defs>
|
|
</svg>
|
|
<svg id="mapMarkers" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 10000 10000">
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div id="topleft">
|
|
<div id="headerbar" class="panel orange">
|
|
<div>
|
|
DV Community Map
|
|
</div>
|
|
</div>
|
|
<div id="legend" style="display: flex;">
|
|
<div style="display:flex; flex-direction:column; width: 400px;">
|
|
<div class="panel">
|
|
Welcome to the WIP community map of <a href="https://www.derailvalley.com/" style="white-space:nowrap;">Derail Valley</a>, a resource for documenting and displaying all tracks and points of interest.
|
|
<hr>
|
|
Hover over tracks and objects for detailed information.
|
|
</div>
|
|
<div class="panel">
|
|
<h3>Key</h3>
|
|
<hr>
|
|
<div id="legendKey"></div>
|
|
</div>
|
|
<div id="settingsPanel" class="panel">
|
|
<h3>Map Settings</h3>
|
|
<hr>
|
|
</div>
|
|
<div class="panel">
|
|
<a href="https://github.com/PyroNicampt/DV-Community-Map">Source</a> •
|
|
<a href="https://github.com/PyroNicampt/DV-Community-Map/issues">Issue Tracker</a> •
|
|
<a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
|
|
</div>
|
|
</div>
|
|
<div id="legendButton" class="panel orange" style="height: fit-content;"><svg style="transform:rotate(180deg) translateY(-3px)" height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
<div id="footer" class="orange">
|
|
<div id="zoomLevelDisplay"></div>
|
|
Map v0.3 alpha
|
|
<br>
|
|
Updated for Game Build 99.3
|
|
<br>
|
|
This tool is a fan work, Derail Valley owned by Altfuture
|
|
</div>
|
|
</body>
|
|
</html>
|