diff --git a/images/01.png b/images/01.png
new file mode 100644
index 0000000..129bbb6
Binary files /dev/null and b/images/01.png differ
diff --git a/images/02.png b/images/02.png
new file mode 100644
index 0000000..eaff3e2
Binary files /dev/null and b/images/02.png differ
diff --git a/images/03.png b/images/03.png
new file mode 100644
index 0000000..43e18ad
Binary files /dev/null and b/images/03.png differ
diff --git a/images/04.png b/images/04.png
new file mode 100644
index 0000000..9bac771
Binary files /dev/null and b/images/04.png differ
diff --git a/images/05.png b/images/05.png
new file mode 100644
index 0000000..6192c0d
Binary files /dev/null and b/images/05.png differ
diff --git a/images/06.png b/images/06.png
new file mode 100644
index 0000000..b32384e
Binary files /dev/null and b/images/06.png differ
diff --git a/images/07.png b/images/07.png
new file mode 100644
index 0000000..239ff9b
Binary files /dev/null and b/images/07.png differ
diff --git a/images/08.png b/images/08.png
new file mode 100644
index 0000000..97a57d0
Binary files /dev/null and b/images/08.png differ
diff --git a/images/10.png b/images/10.png
new file mode 100644
index 0000000..1e3695d
Binary files /dev/null and b/images/10.png differ
diff --git a/images/marker0.png b/images/marker0.png
new file mode 100644
index 0000000..6d3df03
Binary files /dev/null and b/images/marker0.png differ
diff --git a/images/marker1.png b/images/marker1.png
new file mode 100644
index 0000000..f92b53a
Binary files /dev/null and b/images/marker1.png differ
diff --git a/images/marker2.png b/images/marker2.png
new file mode 100644
index 0000000..88dec2c
Binary files /dev/null and b/images/marker2.png differ
diff --git a/images/marker3.png b/images/marker3.png
new file mode 100644
index 0000000..d41f6f1
Binary files /dev/null and b/images/marker3.png differ
diff --git a/images/marker4.png b/images/marker4.png
new file mode 100644
index 0000000..f0ffbf5
Binary files /dev/null and b/images/marker4.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..30eda2d
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/readme.txt b/readme.txt
new file mode 100644
index 0000000..6c520d0
--- /dev/null
+++ b/readme.txt
@@ -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/
\ No newline at end of file
diff --git a/scripts/locations.js b/scripts/locations.js
new file mode 100644
index 0000000..4fce580
--- /dev/null
+++ b/scripts/locations.js
@@ -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");
+ }
+}
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 0000000..bbdc741
--- /dev/null
+++ b/scripts/main.js
@@ -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]);
+ }
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8d8b241
--- /dev/null
+++ b/style.css
@@ -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;
+}
\ No newline at end of file