Starisms
5 years ago
committed by
GitHub
parent
e6a7fbd98d
commit
1d90d55a61
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 172 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -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> |
||||
@ -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/ |
||||
@ -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"); |
||||
} |
||||
} |
||||
@ -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]); |
||||
} |
||||
} |
||||
}); |
||||
@ -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…
Reference in new issue