From 67eef20193e24c4cdb73a75eac810e9a1f95a9e8 Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Sat, 17 Feb 2024 17:18:54 +0100
Subject: [PATCH] Add simple Japan map page.

---
 src/App.js                                    |  5 ++--
 src/Japan/Japan.js                            | 21 -------------
 src/Pages/Japan/Japan.js                      | 30 +++++++++++++++++++
 .../Japan/components}/Dropdown.js             |  0
 .../Japan/components}/JapanMap.js             | 12 ++++----
 src/Pages/Japan/en/main.md                    |  5 +++-
 src/Pages/Japan/nl/main.md                    |  5 +++-
 src/overrides.scss                            |  4 +++
 8 files changed, 51 insertions(+), 31 deletions(-)
 delete mode 100644 src/Japan/Japan.js
 create mode 100644 src/Pages/Japan/Japan.js
 rename src/{Japan => Pages/Japan/components}/Dropdown.js (100%)
 rename src/{Japan => Pages/Japan/components}/JapanMap.js (99%)

diff --git a/src/App.js b/src/App.js
index 911e8d6..da3fefb 100644
--- a/src/App.js
+++ b/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 />
diff --git a/src/Japan/Japan.js b/src/Japan/Japan.js
deleted file mode 100644
index 232308b..0000000
--- a/src/Japan/Japan.js
+++ /dev/null
@@ -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;
diff --git a/src/Pages/Japan/Japan.js b/src/Pages/Japan/Japan.js
new file mode 100644
index 0000000..fe6e64d
--- /dev/null
+++ b/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;
diff --git a/src/Japan/Dropdown.js b/src/Pages/Japan/components/Dropdown.js
similarity index 100%
rename from src/Japan/Dropdown.js
rename to src/Pages/Japan/components/Dropdown.js
diff --git a/src/Japan/JapanMap.js b/src/Pages/Japan/components/JapanMap.js
similarity index 99%
rename from src/Japan/JapanMap.js
rename to src/Pages/Japan/components/JapanMap.js
index 778034a..a3a3252 100644
--- a/src/Japan/JapanMap.js
+++ b/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"
diff --git a/src/Pages/Japan/en/main.md b/src/Pages/Japan/en/main.md
index b1f13d6..89512d0 100644
--- a/src/Pages/Japan/en/main.md
+++ b/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)
\ No newline at end of file
+*   [Wani Kani](https://www.wanikani.com/users/PA4KEV)
+
+
+*   [Map of Japan](./japanMap)
\ No newline at end of file
diff --git a/src/Pages/Japan/nl/main.md b/src/Pages/Japan/nl/main.md
index 913e77b..8b02771 100644
--- a/src/Pages/Japan/nl/main.md
+++ b/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)
\ No newline at end of file
+*   [Wani Kani](https://www.wanikani.com/users/PA4KEV)
+
+
+*   [Kaart van Japan](./japanMap)
\ No newline at end of file
diff --git a/src/overrides.scss b/src/overrides.scss
index 8d19630..092bedf 100644
--- a/src/overrides.scss
+++ b/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";
\ No newline at end of file