beta 1
This commit is contained in:
Starisms
GitHub
parent
e6a7fbd98d
commit
1d90d55a61
BIN
images/01.png
Normal file
BIN
images/01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
images/02.png
Normal file
BIN
images/02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
images/03.png
Normal file
BIN
images/03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
images/04.png
Normal file
BIN
images/04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
images/05.png
Normal file
BIN
images/05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
images/06.png
Normal file
BIN
images/06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
images/07.png
Normal file
BIN
images/07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
images/08.png
Normal file
BIN
images/08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
images/10.png
Normal file
BIN
images/10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
images/marker0.png
Normal file
BIN
images/marker0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
images/marker1.png
Normal file
BIN
images/marker1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
images/marker2.png
Normal file
BIN
images/marker2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
images/marker3.png
Normal file
BIN
images/marker3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
images/marker4.png
Normal file
BIN
images/marker4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
45
index.html
Normal file
45
index.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<html lang="en">
|
||||
<html><header><title>Rabi-Ribi Rando Location Tracker Starisms</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/locations.js"></script>
|
||||
</header>
|
||||
<body class="body" onload="justLoaded()">
|
||||
<button onclick="showSection(0)" type="button" style= "background-color:#62a362">S. Woodland</button>
|
||||
<button onclick="showSection(1)" type="button" style= "background-color:#5478a5">W. Coast</button>
|
||||
<button onclick="showSection(2)" type="button" style= "background-color:#5ea9a4">Island Core</button>
|
||||
<button onclick="showSection(3)" type="button" style= "background-color:#8165d1">N Tundra</button>
|
||||
<button onclick="showSection(4)" type="button" style= "background-color:#b89368">E. Highlands</button>
|
||||
<button onclick="showSection(5)" type="button" style= "background-color:#a96036">Other</button>
|
||||
<input type="color" id="bgcolor" value="#666666" onchange="changeBG()">
|
||||
<button onClick="info()" type="button">info</button>
|
||||
<div id="info" class="info">
|
||||
<a href="https://github.com/allibear17/Rabi-Ribi-Rando-Tracker" target="_blank">Click here for readme and source</a>
|
||||
</div>
|
||||
|
||||
<div id="mapdisplay" class="map-container">
|
||||
<p><span id="tt" class="tooltip">Tooltip Info</span></p>
|
||||
|
||||
<div id="swood" class="base">
|
||||
<img src="images/01.png">
|
||||
</div>
|
||||
<div id="wcoast" class="base">
|
||||
<img src="images/02.png">
|
||||
</div>
|
||||
<div id="core" class="base">
|
||||
<img src="images/03.png">
|
||||
</div>
|
||||
<div id="ntun" class="base">
|
||||
<img src="images/04.png">
|
||||
</div>
|
||||
<div id="ehigh" class="base">
|
||||
<img src="images/05.png">
|
||||
</div>
|
||||
<div id="other" class="base">
|
||||
<img src="images/06.png">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
readme.txt
Normal file
4
readme.txt
Normal file
@ -0,0 +1,4 @@
|
||||
WIP for a map location tracker to help with Rabi Ribi rando.
|
||||
|
||||
Feel free to download the files and run index.html locally or use the
|
||||
gitpage for it at https://allibear17.github.io/Rabi-Ribi-Rando-Tracker/
|
||||
232
scripts/locations.js
Normal file
232
scripts/locations.js
Normal file
@ -0,0 +1,232 @@
|
||||
markers = [
|
||||
new Location(2, 35), // 0 Start of Southern Woodlands
|
||||
new Location(71, 35),
|
||||
new Location(71, 70),
|
||||
new Location(205, 70),
|
||||
new Location(205, 105),
|
||||
new Location(140, 140), // 5
|
||||
new Location(205, 172),
|
||||
new Location(206, 207),
|
||||
new Location(243, 207),
|
||||
new Location(345, 140),
|
||||
new Location(412, 140), // 10
|
||||
new Location(310, 35),
|
||||
new Location(448, 35),
|
||||
new Location(515, 70),
|
||||
new Location(585, 70),
|
||||
new Location(585, 0), // 15
|
||||
new Location(620, 35),
|
||||
new Location(686, 0),
|
||||
new Location(482, 172),
|
||||
new Location(585, 172),
|
||||
new Location(585, 208), // 20
|
||||
new Location(140, 240),
|
||||
new Location(140, 275),
|
||||
new Location(175, 275),
|
||||
new Location(140, 345),
|
||||
new Location(105, 310), // 25
|
||||
new Location(278, 376),
|
||||
new Location(310, 343),
|
||||
new Location(343, 308),
|
||||
new Location(310, 275),
|
||||
new Location(378, 376), // 30
|
||||
new Location(413, 343),
|
||||
new Location(446, 275),
|
||||
new Location(446, 242),
|
||||
new Location(548, 310),
|
||||
new Location(582, 378),
|
||||
new Location(582, 343), // 36 End of South Woodlands
|
||||
new Location(74, 204), // 37 Start of Western Coast
|
||||
new Location(132, 115),
|
||||
new Location(190, 85),
|
||||
new Location(280, 115), //40
|
||||
new Location(308, 204),
|
||||
new Location(336, 115),
|
||||
new Location(367, 87),
|
||||
new Location(394, 204),
|
||||
new Location(394, 172), // 45
|
||||
new Location(425, 204),
|
||||
new Location(424, 145),
|
||||
new Location(424, 57),
|
||||
new Location(454, 0),
|
||||
new Location(482, 57), // 50
|
||||
new Location(482, 174),
|
||||
new Location(510, 144),
|
||||
new Location(540, 174),
|
||||
new Location(570, 144),
|
||||
new Location(570, 85),
|
||||
new Location(660, 85), // 56 End of Western Coast
|
||||
new Location(190, 0), // 57 Start of Island Core
|
||||
new Location(160, 33),
|
||||
new Location(220, 33),
|
||||
new Location(343, 64), // 60
|
||||
new Location(343, 95),
|
||||
new Location(440, 95),
|
||||
new Location(130, 127),
|
||||
new Location(67, 157),
|
||||
new Location(220, 157), // 65
|
||||
new Location(250, 157),
|
||||
new Location(95, 220),
|
||||
new Location(65, 250),
|
||||
new Location(285, 250),
|
||||
new Location(190, 280), // 70
|
||||
new Location(190, 280),
|
||||
new Location(34, 343),
|
||||
new Location(66, 376),
|
||||
new Location(99, 405),
|
||||
new Location(190, 405), // 75
|
||||
new Location(33, 470),
|
||||
new Location(99, 440),
|
||||
new Location(66, 470),
|
||||
new Location(285, 355),
|
||||
new Location(315, 355),
|
||||
new Location(407, 392), // 80
|
||||
new Location(525, 348),
|
||||
new Location(525, 315),
|
||||
new Location(525, 280),
|
||||
new Location(587, 280),
|
||||
new Location(587, 310), // 85
|
||||
new Location(587, 342),
|
||||
new Location(618, 280),
|
||||
new Location(651, 342),
|
||||
new Location(618, 438),
|
||||
new Location(557, 468), // 91 End of Island Core + Town
|
||||
new Location(30, 0), // 92 Start of Northen Tundra
|
||||
new Location(30, 30),
|
||||
new Location(30, 390),
|
||||
new Location(60, 360), // 95
|
||||
new Location(60, 210),
|
||||
new Location(90, 90),
|
||||
new Location(150, 30),
|
||||
new Location(150, 90),
|
||||
new Location(150, 120), // 100
|
||||
new Location(180, 60),
|
||||
new Location(180, 150),
|
||||
new Location(120, 210),
|
||||
new Location(270, 60),
|
||||
new Location(270, 0), // 105
|
||||
new Location(330, 90),
|
||||
new Location(360, 30),
|
||||
new Location(480, 30),
|
||||
new Location(480, 60),
|
||||
new Location(450, 120), // 110
|
||||
new Location(510, 120),
|
||||
new Location(270, 180),
|
||||
new Location(210, 240),
|
||||
new Location(270, 270),
|
||||
new Location(240, 330), // 115
|
||||
new Location(180, 390),
|
||||
new Location(390, 360),
|
||||
new Location(450, 210),
|
||||
new Location(480, 240),
|
||||
new Location(510, 270), // 120
|
||||
new Location(540, 270),
|
||||
new Location(630, 240),
|
||||
new Location(660, 300),
|
||||
new Location(660, 330),
|
||||
new Location(660, 360),
|
||||
new Location(600, 390), // 126 End of N Tundra
|
||||
new Location(30, 150), // 127 Start of E. Highlands
|
||||
new Location(90, 150),
|
||||
new Location(90, 180),
|
||||
new Location(90, 210), // 130
|
||||
new Location(30, 268),
|
||||
new Location(60, 328),
|
||||
new Location(90, 328),
|
||||
new Location(210, 237),
|
||||
new Location(240, 178), // 135
|
||||
new Location(240, 118),
|
||||
new Location(240, 237),
|
||||
new Location(240, 270),
|
||||
new Location(300, 30),
|
||||
new Location(330, 150), // 140
|
||||
new Location(300, 270),
|
||||
new Location(360, 270),
|
||||
new Location(330, 330),
|
||||
new Location(360, 330),
|
||||
new Location(390, 150), // 145
|
||||
new Location(418, 88),
|
||||
new Location(418, 358),
|
||||
new Location(450, 358),
|
||||
new Location(450, 390),
|
||||
new Location(478, 58), // 150
|
||||
new Location(478, 150),
|
||||
new Location(478, 237),
|
||||
new Location(507, 267),
|
||||
new Location(538, 58),
|
||||
new Location(538, 208), // 155
|
||||
new Location(538, 390),
|
||||
new Location(538, 30),
|
||||
new Location(568, 30),
|
||||
new Location(598, 60),
|
||||
new Location(658, 0), // 160
|
||||
new Location(688, 90),
|
||||
new Location(658, 358),
|
||||
new Location(688, 358), // 163 End of E. Highlands
|
||||
new Location(63, 164), // 164 Start of other
|
||||
new Location(-5, 297),
|
||||
new Location(-5, 432),
|
||||
new Location(150, 275),
|
||||
new Location(95, 98),
|
||||
new Location(127, 68), // 170
|
||||
new Location(451, 96),
|
||||
new Location(451, 194),
|
||||
new Location(483, 68),
|
||||
new Location(513, 0),
|
||||
new Location(676, 355),
|
||||
new Location(553, 302), // 175
|
||||
new Location(583, 332),
|
||||
new Location(678, 425),
|
||||
new Location(678, 485),
|
||||
new Location(461, 425),
|
||||
new Location(398, 457), // 180
|
||||
new Location(305, 365),
|
||||
new Location(275, 365),
|
||||
];
|
||||
|
||||
openMarkers = [0,4,6,7,10,19,23,22,25,28,30,34, //S Woodlands
|
||||
39,40,47,49,52,53,54,55,56, //W Coast
|
||||
59,60,75,76,77,79,82,83,84,89, //I Core
|
||||
92,93,101,102,106,109,116,117,119,120,123, //N Tundra
|
||||
127,129,134,136,142,147,151,152,153,156,159,160, //E Highlands
|
||||
166,167,169,174,177,178,181, //Other
|
||||
];
|
||||
|
||||
function drawMarkers(){
|
||||
|
||||
var sw = document.getElementById("swood");
|
||||
var wc = document.getElementById("wcoast");
|
||||
var ic = document.getElementById("core");
|
||||
var nt = document.getElementById("ntun");
|
||||
var eh = document.getElementById("ehigh");
|
||||
var ot = document.getElementById("other");
|
||||
|
||||
|
||||
for ( i = 0; i < markers.length; i++){
|
||||
markers[i].elem = document.createElement("img");
|
||||
markers[i].elem.setAttribute("src", "images/marker0.png");
|
||||
markers[i].elem.setAttribute("class", "markera");
|
||||
markers[i].elem.id = "marker " + i;
|
||||
markers[i].elem.style.left = markers[i].x + "px";
|
||||
markers[i].elem.style.top = markers[i].y + "px";
|
||||
markers[i].elem.onclick = toggleMarker;
|
||||
markers[i].elem.onmouseenter = showTooltip;
|
||||
markers[i].elem.onmouseleave = hideTooltip;
|
||||
if ( i < 37 ){
|
||||
sw.appendChild(markers[i].elem);
|
||||
} else if (( i >= 37 ) && ( i <= 56 )){
|
||||
wc.appendChild(markers[i].elem);
|
||||
} else if (( i >= 57 ) && ( i <= 91)){
|
||||
ic.appendChild(markers[i].elem);
|
||||
} else if (( i >= 92 ) && ( i <= 126 )){
|
||||
nt.appendChild(markers[i].elem);
|
||||
} else if (( i >= 127 ) && ( i <= 163 )){
|
||||
eh.appendChild(markers[i].elem);
|
||||
} else if (( i >= 164 ) && ( i <= 182 )){
|
||||
ot.appendChild(markers[i].elem);
|
||||
}
|
||||
}
|
||||
for ( i = 0; i < openMarkers.length; i++){
|
||||
markers[openMarkers[i]].elem.setAttribute("class", "markerb");
|
||||
}
|
||||
}
|
||||
141
scripts/main.js
Normal file
141
scripts/main.js
Normal file
@ -0,0 +1,141 @@
|
||||
var sectionShown = [];
|
||||
var markers = [];
|
||||
var openMarkers = [];
|
||||
var markerTypes = [
|
||||
"images/marker0.png",
|
||||
"images/marker1.png",
|
||||
"images/marker2.png",
|
||||
"images/marker3.png",
|
||||
"images/marker4.png",
|
||||
];
|
||||
|
||||
var lastClick;
|
||||
|
||||
function justLoaded(){
|
||||
hideAll();
|
||||
drawMarkers();
|
||||
showSection(5);
|
||||
}
|
||||
|
||||
function hideAll(){
|
||||
for (i = 0; i < 6; i++){
|
||||
sectionShown[i] = false;
|
||||
}
|
||||
swood.style.display = "none";
|
||||
wcoast.style.display = "none";
|
||||
core.style.display = "none";
|
||||
ntun.style.display = "none";
|
||||
ehigh.style.display = "none";
|
||||
other.style.display = "none";
|
||||
}
|
||||
|
||||
function showSection(m) {
|
||||
if (!sectionShown[m]){
|
||||
hideAll();
|
||||
sectionShown[m] = true;
|
||||
switch(m){
|
||||
case 0:
|
||||
swood.style.display = "block";
|
||||
break;
|
||||
case 1:
|
||||
wcoast.style.display = "block";
|
||||
break;
|
||||
case 2:
|
||||
core.style.display = "block";
|
||||
break;
|
||||
case 3:
|
||||
ntun.style.display = "block";
|
||||
break;
|
||||
case 4:
|
||||
ehigh.style.display = "block";
|
||||
break;
|
||||
case 5:
|
||||
other.style.display = "block";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMarker(event) {
|
||||
var clicked = document.getElementById(this.id);
|
||||
var clickedSrc = clicked.getAttribute("src");
|
||||
var type = 0;
|
||||
|
||||
for ( i = 0; i < markerTypes.length; i++){
|
||||
if ( clickedSrc == markerTypes[i] ){
|
||||
type = i+1;
|
||||
}
|
||||
}
|
||||
if ( markerTypes[type] ){
|
||||
clicked.setAttribute("src", markerTypes[type]);
|
||||
}
|
||||
else {
|
||||
clicked.setAttribute("src", markerTypes[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function showTooltip(event){
|
||||
var id = document.getElementById("tt");
|
||||
var clicked = document.getElementById(this.id);
|
||||
id.style.display = "block";
|
||||
id.innerHTML = clicked.id;
|
||||
id.style.top = "20px";
|
||||
id.style.left = "20px";
|
||||
}
|
||||
|
||||
function hideTooltip(){
|
||||
document.getElementById("tt").style.display = "none";
|
||||
}
|
||||
function changeBG(){
|
||||
document.body.style.backgroundColor = document.getElementById("bgcolor").value;
|
||||
document.getElementById("shopDropdown").style.backgroundColor = document.getElementById("bgcolor").value;
|
||||
}
|
||||
|
||||
function info(){
|
||||
var id = document.getElementById("info")
|
||||
if (id.style.display == "block"){
|
||||
id.style.display = "none";
|
||||
}
|
||||
else {
|
||||
id.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function Location(x, y){
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.canReach = false;
|
||||
this.elem = "";
|
||||
}
|
||||
|
||||
function toggleItem(e){
|
||||
id = e.target;
|
||||
if ( id.style.opacity == 1.0 ){
|
||||
id.style.opacity = 0.5;
|
||||
id.style.filter = "grayscale(100%)";
|
||||
} else {
|
||||
id.style.opacity = 1.0;
|
||||
id.style.filter = "none";
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('contextmenu', function(e) {
|
||||
e.preventDefault();
|
||||
if (( e.target.className == "markera" ) || ( e.target.className == "markerb" )){
|
||||
var clicked = document.getElementById(e.target.id);
|
||||
var clickedSrc = clicked.getAttribute("src");
|
||||
var type = 0;
|
||||
|
||||
for ( i = 0; i < markerTypes.length; i++){
|
||||
if ( clickedSrc == markerTypes[i] ){
|
||||
type = i-1;
|
||||
}
|
||||
}
|
||||
if ( type >= 0 ){
|
||||
clicked.setAttribute("src", markerTypes[type]);
|
||||
}
|
||||
else {
|
||||
clicked.setAttribute("src", markerTypes[4]);
|
||||
}
|
||||
}
|
||||
});
|
||||
149
style.css
Normal file
149
style.css
Normal file
@ -0,0 +1,149 @@
|
||||
body {
|
||||
background-color: #7b4785
|
||||
}
|
||||
button {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 4px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin: 2px 0px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px #999;
|
||||
}
|
||||
button:active{
|
||||
box-shadow: 0 2px #666;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.markera{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
padding: 0px 0px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.markerb{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
padding: 0px 0px;
|
||||
z-index: 2;
|
||||
outline: rgba(255, 255, 255, 1) solid 2px;
|
||||
outline-offset: -1.5px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
background: #ffffcc;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
z-index: 1000;
|
||||
color: black;
|
||||
}
|
||||
.base{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 720px;
|
||||
padding-top: 0px;
|
||||
padding-left: 0px;
|
||||
display: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.info{
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: 20;
|
||||
left: 200;
|
||||
width: 600px;
|
||||
padding-top: 0px;
|
||||
padding-left: 0px;
|
||||
display: none;
|
||||
z-index: 3;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.map-container{
|
||||
position: relative;
|
||||
max-width: 720px;
|
||||
max-height: 480px;
|
||||
}
|
||||
a{
|
||||
background-color: #ffffcc;
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
color: #000000;
|
||||
}
|
||||
.shop-dropdown{
|
||||
display: none;
|
||||
background-color: #666666;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 210px;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
|
||||
padding-top: 4px;
|
||||
padding-left: 4px;
|
||||
border: 2px solid black;
|
||||
z-index: 4;
|
||||
}
|
||||
.shop-item{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding: 2px 2px 2px 2px;
|
||||
background-color: #444444;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.in-shop{
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
padding: 0px 0px;
|
||||
display: inline-block;
|
||||
margin: 0px 0px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
box-shadow: 0 0px #999;
|
||||
z-index: 4;
|
||||
}
|
||||
.in-shop:active{
|
||||
box-shadow: 0 0px #999;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
.item{
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0.5;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
table{
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 28px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: -13px;
|
||||
}
|
||||
td{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user