map planner final

build/asset-manifest.json

@@ -1,41 +1,61 @@
 {
   "files": {
-    "main.js": "/static/js/main.d746ec7a.chunk.js",
-    "main.js.map": "/static/js/main.d746ec7a.chunk.js.map",
+    "main.js": "/static/js/main.8fcc73fa.chunk.js",
+    "main.js.map": "/static/js/main.8fcc73fa.chunk.js.map",
     "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
     "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
-    "static/js/2.df0b61b5.chunk.js": "/static/js/2.df0b61b5.chunk.js",
-    "static/js/2.df0b61b5.chunk.js.map": "/static/js/2.df0b61b5.chunk.js.map",
+    "static/js/2.59a46b82.chunk.js": "/static/js/2.59a46b82.chunk.js",
+    "static/js/2.59a46b82.chunk.js.map": "/static/js/2.59a46b82.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.9cb364d34892bca2646c538d34e4a466.js": "/precache-manifest.9cb364d34892bca2646c538d34e4a466.js",
+    "precache-manifest.99763fb56063bd37d0326b32ac23144e.js": "/precache-manifest.99763fb56063bd37d0326b32ac23144e.js",
     "service-worker.js": "/service-worker.js",
+    "static/media/academy-sz-map.png": "/static/media/academy-sz-map.750d725a.png",
     "static/media/ancho-v_games.png": "/static/media/ancho-v_games.07d5d0f6.png",
+    "static/media/arena-sz-map.png": "/static/media/arena-sz-map.ab6337eb.png",
     "static/media/arowana_mall.png": "/static/media/arowana_mall.26cf0823.png",
     "static/media/blackbelly_skatepark.png": "/static/media/blackbelly_skatepark.a90313b1.png",
     "static/media/bridge.png": "/static/media/bridge.fba72008.png",
+    "static/media/camp-sz-map.png": "/static/media/camp-sz-map.fd12d440.png",
     "static/media/camp_triggerfish.png": "/static/media/camp_triggerfish.c698e702.png",
+    "static/media/canal-sz-map.png": "/static/media/canal-sz-map.2574bf0f.png",
     "static/media/depot.png": "/static/media/depot.c5459318.png",
+    "static/media/dome-sz-OLD.png": "/static/media/dome-sz-OLD.ae19b298.png",
+    "static/media/fitness-sz-map.png": "/static/media/fitness-sz-map.cb897cd4.png",
+    "static/media/games-sz-map.png": "/static/media/games-sz-map.a24791ba.png",
     "static/media/goby_arena.png": "/static/media/goby_arena.567a4ee9.png",
     "static/media/heights.png": "/static/media/heights.7e33477e.png",
+    "static/media/hotel-sz-map.png": "/static/media/hotel-sz-map.565c49e2.png",
     "static/media/humpback_pump_track.png": "/static/media/humpback_pump_track.fac19229.png",
     "static/media/inkblot_art_academy.png": "/static/media/inkblot_art_academy.fdae0280.png",
+    "static/media/institute-sz-map.png": "/static/media/institute-sz-map.660356be.png",
     "static/media/kelp_dome.png": "/static/media/kelp_dome.6610593e.png",
     "static/media/koshienBanner.png": "/static/media/koshienBanner.34fca5d9.png",
     "static/media/league.png": "/static/media/league.7aa42d81.png",
     "static/media/mahi.png": "/static/media/mahi.0e9369da.png",
+    "static/media/mainstage-rm-new.png": "/static/media/mainstage-rm-new.50d64707.png",
     "static/media/makomart.png": "/static/media/makomart.8a4f661e.png",
+    "static/media/mall-sz-map.png": "/static/media/mall-sz-map.18d7f3f2.png",
+    "static/media/manta-sz-map.png": "/static/media/manta-sz-map.358a54c1.png",
     "static/media/manta_maria.png": "/static/media/manta_maria.38baf9f6.png",
+    "static/media/mart-sz-map.png": "/static/media/mart-sz-map.735d07fd.png",
     "static/media/moray_towers.png": "/static/media/moray_towers.4f71cd0b.png",
     "static/media/museum.png": "/static/media/museum.176394c2.png",
     "static/media/musselforge_fitness.png": "/static/media/musselforge_fitness.a66323de.png",
     "static/media/new_albacore_hotel.png": "/static/media/new_albacore_hotel.0c283c87.png",
+    "static/media/pavilion-sz-map.png": "/static/media/pavilion-sz-map.b72018a6.png",
     "static/media/piranha_pit.png": "/static/media/piranha_pit.48621b6f.png",
+    "static/media/pit-sz-map.png": "/static/media/pit-sz-map.6bbb94c0.png",
+    "static/media/port-sz-map.png": "/static/media/port-sz-map.78ee3c80.png",
     "static/media/port_mackerel.png": "/static/media/port_mackerel.d73c53e5.png",
+    "static/media/pumptrack-sz-map.png": "/static/media/pumptrack-sz-map.250f2d33.png",
     "static/media/ranked.png": "/static/media/ranked.415f6ad8.png",
+    "static/media/reef-sz-new.png": "/static/media/reef-sz-new.f4e0aafd.png",
     "static/media/regular.png": "/static/media/regular.4848edcb.png",
     "static/media/rig.png": "/static/media/rig.87b5e71c.png",
     "static/media/rm.png": "/static/media/rm.ee623ae2.png",
     "static/media/shellendorf_institute.png": "/static/media/shellendorf_institute.d6669767.png",
+    "static/media/shipyard-sz-map.png": "/static/media/shipyard-sz-map.f595739b.png",
+    "static/media/skatepark-sz-new.png": "/static/media/skatepark-sz-new.4554b1e4.png",
     "static/media/skipper_pavilion.png": "/static/media/skipper_pavilion.1b3dbb2a.png",
     "static/media/snapper_canal.png": "/static/media/snapper_canal.870cef8e.png",
     "static/media/starfish_mainstage.png": "/static/media/starfish_mainstage.10fbda60.png",
@@ -43,7 +63,10 @@
     "static/media/sz.png": "/static/media/sz.563a7566.png",
     "static/media/tc.png": "/static/media/tc.bd2d39a4.png",
     "static/media/the_reef.png": "/static/media/the_reef.5b7355e7.png",
+    "static/media/towers-sz-new-map.png": "/static/media/towers-sz-new-map.f317c025.png",
     "static/media/underpass.png": "/static/media/underpass.c55c527a.png",
-    "static/media/wahoo_world.png": "/static/media/wahoo_world.27b4f7eb.png"
+    "static/media/wahoo_world.png": "/static/media/wahoo_world.27b4f7eb.png",
+    "static/media/warehouse-sz-map.png": "/static/media/warehouse-sz-map.5255a949.png",
+    "static/media/world-sz-map.png": "/static/media/world-sz-map.20437c49.png"
   }
 }

build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>sendou.ink</title></head><body style="background-color:#f2f7fd"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.df0b61b5.chunk.js"></script><script src="/static/js/main.d746ec7a.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>sendou.ink</title></head><body style="background-color:#f2f7fd"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.59a46b82.chunk.js"></script><script src="/static/js/main.8fcc73fa.chunk.js"></script></body></html>

build/precache-manifest.99763fb56063bd37d0326b32ac23144e.js

@@ -1,24 +1,32 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "ca60d981bfc253d9414d837aa69efbf0",
+    "revision": "79c292ac74fae648ef8d043a28d98353",
     "url": "/index.html"
   },
   {
-    "revision": "ac5d6ef5cbbbdf972b71",
-    "url": "/static/js/2.df0b61b5.chunk.js"
+    "revision": "78e7d50d7c98735926e0",
+    "url": "/static/js/2.59a46b82.chunk.js"
   },
   {
-    "revision": "7e7590e59d1182b2ed08",
-    "url": "/static/js/main.d746ec7a.chunk.js"
+    "revision": "8bec99e5038b32adb431",
+    "url": "/static/js/main.8fcc73fa.chunk.js"
   },
   {
     "revision": "42ac5946195a7306e2a5",
     "url": "/static/js/runtime~main.a8a9905a.js"
   },
+  {
+    "revision": "750d725a5163f7f1c1b8ae8173b9f466",
+    "url": "/static/media/academy-sz-map.750d725a.png"
+  },
   {
     "revision": "07d5d0f61430f1817edfe2dbb733da66",
     "url": "/static/media/ancho-v_games.07d5d0f6.png"
   },
+  {
+    "revision": "ab6337eb0bfd6867ca78df3085780448",
+    "url": "/static/media/arena-sz-map.ab6337eb.png"
+  },
   {
     "revision": "26cf082351f37127260252c125762568",
     "url": "/static/media/arowana_mall.26cf0823.png"
@@ -31,14 +39,34 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "fba720089b3644e959ae4d7d7f87e328",
     "url": "/static/media/bridge.fba72008.png"
   },
+  {
+    "revision": "fd12d44054ce8ff12e1f73fd26ccc9b0",
+    "url": "/static/media/camp-sz-map.fd12d440.png"
+  },
   {
     "revision": "c698e7024cbc51d209ca714ddf966b78",
     "url": "/static/media/camp_triggerfish.c698e702.png"
   },
+  {
+    "revision": "2574bf0f4ac3e35602f44ca3ea48d060",
+    "url": "/static/media/canal-sz-map.2574bf0f.png"
+  },
   {
     "revision": "c5459318010bbec7ac0f9b4ed0625967",
     "url": "/static/media/depot.c5459318.png"
   },
+  {
+    "revision": "ae19b2983e852dd43792cfa5f8242da1",
+    "url": "/static/media/dome-sz-OLD.ae19b298.png"
+  },
+  {
+    "revision": "cb897cd4b157c863276825fcbc063683",
+    "url": "/static/media/fitness-sz-map.cb897cd4.png"
+  },
+  {
+    "revision": "a24791baca5dc6cd38a1f625926256d0",
+    "url": "/static/media/games-sz-map.a24791ba.png"
+  },
   {
     "revision": "567a4ee9b0c771d28f94896429a2a92d",
     "url": "/static/media/goby_arena.567a4ee9.png"
@@ -47,6 +75,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "7e33477e6270d5436d0e31069ce6ba75",
     "url": "/static/media/heights.7e33477e.png"
   },
+  {
+    "revision": "565c49e24b61a992826242dcfb06957c",
+    "url": "/static/media/hotel-sz-map.565c49e2.png"
+  },
   {
     "revision": "fac19229b892def33b3a7623e3395626",
     "url": "/static/media/humpback_pump_track.fac19229.png"
@@ -55,6 +87,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "fdae0280f3033b34230bee6376b178e1",
     "url": "/static/media/inkblot_art_academy.fdae0280.png"
   },
+  {
+    "revision": "660356bea57824b945d4bb9c337e40e7",
+    "url": "/static/media/institute-sz-map.660356be.png"
+  },
   {
     "revision": "6610593ec2d587f95a48f82f3f31ab2c",
     "url": "/static/media/kelp_dome.6610593e.png"
@@ -71,14 +107,30 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "0e9369da56634efad39d159a7275d993",
     "url": "/static/media/mahi.0e9369da.png"
   },
+  {
+    "revision": "50d647072e6e133f5c31bcf24d66368d",
+    "url": "/static/media/mainstage-rm-new.50d64707.png"
+  },
   {
     "revision": "8a4f661e7ea2c4b7d40398ad02639f07",
     "url": "/static/media/makomart.8a4f661e.png"
   },
+  {
+    "revision": "18d7f3f216670bc43dbf16c1dc49f6f5",
+    "url": "/static/media/mall-sz-map.18d7f3f2.png"
+  },
+  {
+    "revision": "358a54c1f816ec32fe11364d4740b325",
+    "url": "/static/media/manta-sz-map.358a54c1.png"
+  },
   {
     "revision": "38baf9f610b7ad757d64a65e4e7459ba",
     "url": "/static/media/manta_maria.38baf9f6.png"
   },
+  {
+    "revision": "735d07fd1bba33dab83aa88922d42cab",
+    "url": "/static/media/mart-sz-map.735d07fd.png"
+  },
   {
     "revision": "4f71cd0b781714eab42fdffc7eaeba8d",
     "url": "/static/media/moray_towers.4f71cd0b.png"
@@ -95,18 +147,38 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "0c283c87ddd2cc2841ca1dc4eee60942",
     "url": "/static/media/new_albacore_hotel.0c283c87.png"
   },
+  {
+    "revision": "b72018a6b5ad3ea4c69abdb485f0329e",
+    "url": "/static/media/pavilion-sz-map.b72018a6.png"
+  },
   {
     "revision": "48621b6fe27e7cface671a7302437888",
     "url": "/static/media/piranha_pit.48621b6f.png"
   },
+  {
+    "revision": "6bbb94c000db87a3a92f39ad5dc4fdbe",
+    "url": "/static/media/pit-sz-map.6bbb94c0.png"
+  },
+  {
+    "revision": "78ee3c8019acef4896cfa950989216b3",
+    "url": "/static/media/port-sz-map.78ee3c80.png"
+  },
   {
     "revision": "d73c53e5b66491368591b9beb0933daa",
     "url": "/static/media/port_mackerel.d73c53e5.png"
   },
+  {
+    "revision": "250f2d33031d216d5bc838b4e88c9d48",
+    "url": "/static/media/pumptrack-sz-map.250f2d33.png"
+  },
   {
     "revision": "415f6ad807ea2b730558b437f1929043",
     "url": "/static/media/ranked.415f6ad8.png"
   },
+  {
+    "revision": "f4e0aafddd4797e6bd97bd62f45b1a21",
+    "url": "/static/media/reef-sz-new.f4e0aafd.png"
+  },
   {
     "revision": "4848edcb5eba727112fc12301e9bf5cd",
     "url": "/static/media/regular.4848edcb.png"
@@ -123,6 +195,14 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "d6669767d9544a4826ded8279571e3bc",
     "url": "/static/media/shellendorf_institute.d6669767.png"
   },
+  {
+    "revision": "f595739bcab46dd285b0a52416e4a1fc",
+    "url": "/static/media/shipyard-sz-map.f595739b.png"
+  },
+  {
+    "revision": "4554b1e48f21da820b59c5241b7a3e49",
+    "url": "/static/media/skatepark-sz-new.4554b1e4.png"
+  },
   {
     "revision": "1b3dbb2a194816f6fd1c3c52237da7db",
     "url": "/static/media/skipper_pavilion.1b3dbb2a.png"
@@ -151,6 +231,10 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "revision": "5b7355e761ab75bb5d0f7eed36c0e2e3",
     "url": "/static/media/the_reef.5b7355e7.png"
   },
+  {
+    "revision": "f317c0252ad71f0755db7e1e43e02720",
+    "url": "/static/media/towers-sz-new-map.f317c025.png"
+  },
   {
     "revision": "c55c527ab9b1f079f606848b880b5f4c",
     "url": "/static/media/underpass.c55c527a.png"
@@ -158,5 +242,13 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
     "revision": "27b4f7ebda451ca449c81ad69b4d0292",
     "url": "/static/media/wahoo_world.27b4f7eb.png"
+  },
+  {
+    "revision": "5255a949abfd90290e227c67a9252ce1",
+    "url": "/static/media/warehouse-sz-map.5255a949.png"
+  },
+  {
+    "revision": "20437c49b39cc1ccc8ef495ff33778ec",
+    "url": "/static/media/world-sz-map.20437c49.png"
   }
 ]);

build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.0/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.9cb364d34892bca2646c538d34e4a466.js"
+  "/precache-manifest.99763fb56063bd37d0326b32ac23144e.js"
 );
 
 self.addEventListener('message', (event) => {

react-ui/src/components/Misc/Footer.js

@@ -6,7 +6,7 @@ const Footer = () => {
     <div style={{"fontSize": "small", "paddingTop": "25px"}} >
       <hr />
       Website by <a href="https://twitter.com/sendouc">Sendou</a>. Data for the X Rank Leaderboards provided by <a href="https://twitter.com/LeanYoshi">Lean</a>. 
-      Data for the rotations provided by <a href="https://splatoon2.ink/">splatoon2.ink</a>.<br />
+      Data for the rotations provided by <a href="https://splatoon2.ink/">splatoon2.ink</a>. Map pictures for the planner provided by <a href="https://twitter.com/im_flc">flc</a>.<br />
       <Icon name='github' /> Source code for this site is available on <a href="https://github.com/Sendouc/sendou-ink">GitHub</a>
     </div>
   )

react-ui/src/components/Tools/MapPlanner.js

@@ -1,19 +1,46 @@
 import React, { useState, useEffect } from 'react'
 import { SketchField, Tools } from 'react-sketch'
 import { CirclePicker } from 'react-color'
-import { Dropdown, Button, Icon, Input, Grid } from 'semantic-ui-react'
+import { Dropdown, Button, Icon, Input, Grid, Label, Message } from 'semantic-ui-react'
 
 import WeaponForm from '../XSearch/WeaponForm'
 import weaponDict from '../../utils/english_internal.json'
 
+import academy from '../img/plannerMaps/academy-sz-map.png'
+import arena from '../img/plannerMaps/arena-sz-map.png'
+import camp from '../img/plannerMaps/camp-sz-map.png'
+import canal from '../img/plannerMaps/canal-sz-map.png'
+import dome from '../img/plannerMaps/dome-sz-OLD.png'
+import fitness from '../img/plannerMaps/fitness-sz-map.png'
+import games from '../img/plannerMaps/games-sz-map.png'
+import hotel from '../img/plannerMaps/hotel-sz-map.png'
+import institute from '../img/plannerMaps/institute-sz-map.png'
+import mainstage from '../img/plannerMaps/mainstage-rm-new.png'
+import mall from '../img/plannerMaps/mall-sz-map.png'
+import manta from '../img/plannerMaps/manta-sz-map.png'
+import mart from '../img/plannerMaps/mart-sz-map.png'
+import pavilion from '../img/plannerMaps/pavilion-sz-map.png'
+import pit from '../img/plannerMaps/pit-sz-map.png'
+import port from '../img/plannerMaps/port-sz-map.png'
+import pumptrack from '../img/plannerMaps/pumptrack-sz-map.png'
+import reef from '../img/plannerMaps/reef-sz-new.png'
+import shipyard from '../img/plannerMaps/shipyard-sz-map.png'
+import skatepark from '../img/plannerMaps/skatepark-sz-new.png'
+import towers from '../img/plannerMaps/towers-sz-new-map.png'
+import warehouse from '../img/plannerMaps/warehouse-sz-map.png'
+import world from '../img/plannerMaps/world-sz-map.png'
+
 const MapPlanner = ({ setMenuSelection }) => {
   let sketch = null
+  const isMobile = window.innerWidth <= 1000
   const [tool, setTool] = useState(Tools.Pencil)
   const [color, setColor] = useState('#f44336')
   const [weapon, setWeapon] = useState('')
   const [canUndo, setCanUndo] = useState(false)
   const [canRedo, setCanRedo] = useState(false)
   const [text, setText] = useState('')
+  const [bg, setBg] = useState(reef)
+
   const tools = [
     { key: 1, text: 'Pencil', value: Tools.Pencil, icon: 'pencil' },
     { key: 2, text: 'Line', value: Tools.Line, icon: 'window minimize outline' },
@@ -22,6 +49,32 @@ const MapPlanner = ({ setMenuSelection }) => {
     { key: 5, text: 'Select', value: Tools.Select, icon: 'object group outline' }
   ]
 
+  const maps = [
+    { key: 'The Reef', text: 'The Reef', value: reef },
+    { key: 'Musselforge Fitness', text: 'Musselforge Fitness', value: fitness },
+    { key: 'Starfish Mainstage', text: 'Starfish Mainstage', value: mainstage },
+    { key: 'Humpback Pumptrack', text: 'Humpback Pumptrack', value: pumptrack },
+    { key: 'Inkblot Art Academy', text: 'Inkblot Art Academy', value: academy },
+    { key: 'Sturgeon Shipyard', text: 'Sturgeon Shipyard', value: shipyard },
+    { key: 'Moray Towers', text: 'Moray Towers', value: towers },
+    { key: 'Port Mackerel', text: 'Port Mackerel', value: port },
+    { key: 'Manta Maria', text: 'Manta Maria', value: manta },
+    { key: 'Kelp Dome', text: 'Kelp Dome', value: dome },
+    { key: 'Snapper Canal', text: 'Snapper Canal', value: canal },
+    { key: 'Blackbelly Skatepark', text: 'Blackbelly Skatepark', value: skatepark },
+    { key: 'MakoMart', text: 'MakoMart', value: mart },
+    { key: 'Walleye Warehouse', text: 'Walleye Warehouse', value: warehouse },
+    { key: 'Shellendorf Institute', text: 'Shellendorf Institute', value: institute },
+    { key: 'Arowana Mall', text: 'Arowana Mall', value: mall },
+    { key: 'Goby Arena', text: 'Goby Arena', value: arena },
+    { key: 'Piranha Pit', text: 'Piranha Pit', value: pit },
+    { key: 'Camp Triggerfish', text: 'Camp Triggerfish', value: camp },
+    { key: 'Wahoo World', text: 'Wahoo World', value: world },
+    { key: 'New Albacore Hotel', text: 'New Albacore Hotel', value: hotel },
+    { key: 'Ancho-V Games', text: 'Ancho-V Games', value: games },
+    { key: 'Skipper Pavilion', text: 'Skipper Pavilion', value: pavilion },
+  ]
+
   const addImageToSketch = () => {
     sketch.addImg(process.env.PUBLIC_URL + `/wpnMedium/Wst_${weaponDict[weapon]}.png`)
     setTool(Tools.Select)
@@ -62,16 +115,24 @@ const MapPlanner = ({ setMenuSelection }) => {
     }
   }
 
+  const onBgChange = (value) => {
+    setBg(value)
+    sketch.clear()
+    setCanUndo(false)
+    sketch.setBackgroundFromDataUrl(value)
+  }
+
   useEffect(() => {
     if (!sketch) return
     setMenuSelection('plans')
-    sketch.setBackgroundFromDataUrl('https://cdn.gamer-network.net/2017/usgamer/splatoon-2-humpback-pump-track.jpg')
-  }, [sketch])
+    document.title = 'Planner - sendou.ink'
+    sketch.setBackgroundFromDataUrl(academy)
+  }, [sketch, setMenuSelection])
 
   return (
     <div>
       <h1>Make your plans!</h1>
-      (in the final version you can choose any map as the background)
+      {isMobile && <Message negative>Unfortunately this tool isn't designed for narrow screens but you can still give it a go.</Message>}
       <div>
       <SketchField
         name="sketch"
@@ -132,6 +193,16 @@ const MapPlanner = ({ setMenuSelection }) => {
           </Grid.Column>
         </Grid>
       </div>
+      <h3>Choose the map</h3>
+      <Dropdown
+        onChange={(e, { value }) => onBgChange(value)}
+        options={maps}
+        selection
+        value={bg}
+      />
+      <Label basic color='red' pointing='left'>
+        Please note that changing the map also clears all the drawings
+      </Label>
       <h3>Choose a weapon to add</h3>
       <WeaponForm weaponForm={weapon} setWeaponForm={setWeapon} />
       <div style={{'paddingTop': '7px'}}>