Add simple Japan map page.

src/App.js

@@ -37,7 +37,7 @@ import Linux from './Pages/Linux/Linux';
 import Footer from './UI/Footer';
 
 import BasicPage from './Pages/BasicPage';
-import Japan from './Japan/Japan';
+import Japan from './Pages/Japan/Japan';
 import JapaneseMain from './Pages/Japan/JapaneseMain';
 
 const languages = ['en', 'nl'];
@@ -106,6 +106,7 @@ function App() {
 
   const paths = {
     'japan': <JapaneseMain />,
+    'japanMap': <Japan />,
     'radio': <RadioMain />,
     'software': <SoftwareMain />,
   };
@@ -167,8 +168,6 @@ function App() {
 
           <Route exact path='/basic' element={<BasicPage id="1" />}></Route>
           <Route exact path='/wine' element={<BasicPage id="4" />}></Route>
-
-          <Route exact path='/japanMap' element={<Japan />}></Route>
         </Routes>
       </div>
       <Footer />

src/Japan/Japan.js

@@ -1,21 +0,0 @@
-import React, { useState } from 'react';
-import JapanMap from './JapanMap';
-import Dropdown from './Dropdown';
-
-const Japan = () => {
-    const [selectedColor, setSelectedColor] = useState('');
-
-    const handleColorChange = (event) => {
-      setSelectedColor(event.target.value);
-    };
-
-    return (        
-        <div className='row'>
-            <h1>Japan</h1>
-            <Dropdown selectedColor={selectedColor} handleColorChange={handleColorChange} />
-            <JapanMap selection={selectedColor} />
-        </div>
-    )
-}
-
-export default Japan;

src/Pages/Japan/Japan.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import JapanMap from './components/JapanMap';
+import Dropdown from './components/Dropdown';
+import { getLanguage } from '../../App';
+
+const Japan = () => {
+    const [selectedColor, setSelectedColor] = useState('');
+
+    const handleColorChange = (event) => {
+        setSelectedColor(event.target.value);
+    };
+
+    const language = getLanguage();
+
+    return (
+        <article className='main-page'>
+            <div className='row'>
+                <Dropdown selectedColor={selectedColor} handleColorChange={handleColorChange} />
+                <div className='container-map'>
+                    <JapanMap selection={selectedColor} />
+                </div>
+            </div>
+            <div className='row'>
+                <p><a href='https://github.com/PA4KEV/japan-vector-map'>Get this map at Github</a></p>
+            </div>
+        </article>
+    )
+}
+
+export default Japan;

src/Pages/Japan/components/JapanMap.js

@@ -2,15 +2,17 @@ import React from "react";
 
 function JapanMap({ selection }) {
 
+  const hiroshima_fill = selection === "itsukushima_shrine" ? "red" : "none";
+  const miyagi_fill = selection === "sendai_daikannon" ? "red" : "none";
+  const okinawa_fill = selection === "shuri_castle" ? "red" : "none";
   const yamagata_fill = selection === "ginzan_onsen" ? "red" : "none";
+
   console.log(selection);
   console.log(yamagata_fill);
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="1536.819"
-      height="1750.502"
       version="1.1"
       viewBox="0 0 1536.819 1750.502"
     >
@@ -223,7 +225,7 @@ function JapanMap({ selection }) {
         </g>
         <g display="inline">
           <path
-            fill="none"
+            fill={okinawa_fill}
             stroke="#000"
             strokeLinecap="butt"
             strokeLinejoin="miter"
@@ -421,7 +423,7 @@ function JapanMap({ selection }) {
           </g>
           <g display="inline">
             <path
-              fill="none"
+              fill={miyagi_fill}
               stroke="#000"
               strokeLinecap="butt"
               strokeLinejoin="miter"
@@ -828,7 +830,7 @@ function JapanMap({ selection }) {
           </g>
           <g display="inline">
             <path
-              fill="none"
+              fill={hiroshima_fill}
               stroke="#000"
               strokeLinecap="butt"
               strokeLinejoin="miter"

src/Pages/Japan/en/main.md

@@ -1,3 +1,6 @@
 The Japanase language has facinated me for many years now, for I am married with a Japanese. To become fluent means practice every single day, no exceptions.
 
-*   [Wani Kani](https://www.wanikani.com/users/PA4KEV)
+*   [Wani Kani](https://www.wanikani.com/users/PA4KEV)
+
+
+*   [Map of Japan](./japanMap)

src/Pages/Japan/nl/main.md

@@ -1,3 +1,6 @@
 De Japanse taal heeft mij al jaren gefacineerd. Ik ben ook getrouwd met een Japanse. Om de taal vloeiend te kunnen beheersen, moet je elke dag oefenen. Geen uitzonderingen.
 
-*   [Wani Kani](https://www.wanikani.com/users/PA4KEV)
+*   [Wani Kani](https://www.wanikani.com/users/PA4KEV)
+
+
+*   [Kaart van Japan](./japanMap)

src/overrides.scss

@@ -86,6 +86,10 @@ body.light {
   background-color: rgb(236, 221, 221);
 }
 
+.container-map {
+  width: 65%;
+}
+
 // Core variables and mixins
 // @import "variables";
 // @import "mixins";