Add pictures to some locations

components/Info.js

@@ -1,25 +1,34 @@
 // @ts-check
 
-import { dict, layers } from '../data/dict.js';
+/**
+ * @typedef {import('../data/types.js').LocationData} LocationData
+ */
+
+import { dict } from '../data/dict.js';
 import { furigana } from '../js/furigana.js';
 import { state } from '../js/state.js';
 import { replaceSpecialChars } from '../js/utils.js';
 import van from '../lib/van.js';
+import { Picture } from './Picture.js';
 
 const { a, div, img } = van.tags
 
 /**
- * @param {import('../data/regions.js').Name} name
+ * @param {LocationData} data
  * @returns {HTMLElement}
  */
-const InfoData = (name) => div(
-  {
-    id: 'info-data',
-  },
-  Flag(),
-  furigana(name),
-  div({ class: 'wikipedia' }, a({ href: `https://ja.wikipedia.org/wiki/${name.ja}`, target: '_blank' }, furigana(dict.wikipedia))),
-);
+const InfoData = (data) => {
+  const { name, picture } = data;
+  return div(
+    {
+      id: 'info-data',
+    },
+    Flag(),
+    furigana(name),
+    Wikipedia(name),
+    picture && Picture(data),
+  );
+}
 
 const InfoTooltip = div(
   {
@@ -28,30 +37,42 @@ const InfoTooltip = div(
   furigana(dict.toolTip),
 );
 
-const flagUrl = () => {
+export const filePath = (prefix = '') => {
   const { municipality, city, prefecture } = state;
   if (municipality.val) {
-    return `./img/tokyo/${replaceSpecialChars(municipality.val.name.en)}.svg`;
+    return `tokyo/${prefix + replaceSpecialChars(municipality.val.name.en)}`;
   }
   if (city.val) {
-    return `./img/city/${replaceSpecialChars(city.val.name.en)},${replaceSpecialChars(prefecture.val.name.en)}.svg`;
+    return `city/${prefix + replaceSpecialChars(city.val.name.en)},${replaceSpecialChars(prefecture.val.name.en)}`;
   }
   if (prefecture.val) {
-    return `./img/prefecture/${replaceSpecialChars(prefecture.val.name.en)}.svg`;
+    return `prefecture/${prefix + replaceSpecialChars(prefecture.val.name.en)}`;
   }
   return null;
 }
 
 const Flag = () => {
-  const src = flagUrl();
-
-  if (!src) {
+  if (!filePath()) {
     return null;
   }
 
+  const src = `./img/${filePath()}.svg`;
   return div({ class: 'flag' }, img({ src }))
 }
 
+const Wikipedia = (name) => div(
+  {
+    class: 'wikipedia'
+  },
+  a(
+    {
+      href: `https://ja.wikipedia.org/wiki/${name.ja}`,
+      target: '_blank'
+    },
+    furigana(dict.wikipedia),
+  ),
+);
+
 export const InfoElm = () => {
   const data = state.municipality.val || state.city.val || state.prefecture.val || state.region.val || null;
 
@@ -60,6 +81,6 @@ export const InfoElm = () => {
       id: 'info',
       class: (data) ? 'data' : 'tooltip',
     },
-    data ? InfoData(data.name) : InfoTooltip,
+    data ? InfoData(data) : InfoTooltip,
   )
 };

components/Modal.js

@@ -0,0 +1,16 @@
+// @ts-check
+
+import { state } from '../js/state.js';
+import van from '../lib/van.js';
+
+const { div } = van.tags;
+
+export const ModalElm = () => div(
+  {
+    id: 'modal',
+    onclick: () => {
+      state.modal.val = null;
+    },
+  },
+  state.modal.val
+);

components/Picture.js

@@ -0,0 +1,56 @@
+// @ts-check
+
+/**
+ * @typedef {import('../data/types.js').LocationData} LocationData
+ */
+
+import { furigana } from '../js/furigana.js';
+import { state } from '../js/state.js';
+import van from '../lib/van.js';
+import { filePath } from './Info.js';
+
+const { div, img, h6 } = van.tags
+
+const picturePath = (prefix = '') => `https://static-nihon.jp7.io/upload/${filePath(prefix)}.webp`;
+
+/**
+ * @param {LocationData} data
+ * @returns {HTMLElement}
+ */
+export const PictureModal = (data) => div(
+  {
+    id: 'picture-modal',
+  },
+  div({ class: 'modal-content' },
+    h6(
+      {},
+      furigana(data.name),
+      div({ class: 'close' }, '╳')
+    ),
+    img(
+      {
+        src: picturePath(),
+      }
+    ),
+  )
+);
+
+/**
+ * @param {LocationData} data
+ * @returns {HTMLElement}
+ */
+export const Picture = (data) => {
+  return div(
+    {
+      class: 'picture'
+    },
+    img(
+      {
+        src: picturePath('thumb/'),
+        onclick: () => {
+          state.modal.val = PictureModal(data);
+        }
+      }
+    ),
+  );
+}

components/index.js

@@ -10,13 +10,14 @@ import { LayersAndFillElm } from './LayersAndFill/index.js';
 import { ShurikenElm } from './Shuriken.js';
 import { MapElm } from './Map/index.js';
 import { SvgSourcesElm } from './SvgSources.js';
+import { ModalElm } from './Modal.js';
 
 const { div } = van.tags;
 
 export const Root = div(
   {
     id: 'root',
-    class: () => `fillmode-${toId(state.fillmode.val.en)}`,
+    class: () => `fillmode-${toId(state.fillmode.val.en)} ${state.modal.val ? 'modal' : ''}`,
   },
   TitleElm,
   LegendElm,
@@ -25,4 +26,5 @@ export const Root = div(
   ShurikenElm,
   MapElm,
   SvgSourcesElm,
+  () => ModalElm(),
 );

css/index.css

@@ -15,8 +15,16 @@
   --external-margin: 2em;
 }
 
-body {
+div {
+  box-sizing: border-box;
+}
+
+html, body, #root {
   width: 100%;
+  height: 100%;
+}
+
+body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1vw;
   margin: 0;
@@ -33,3 +41,20 @@ a {
   text-decoration: none;
   color: #000;
 }
+
+#modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+  display: none;
+}
+
+#root.modal #modal {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}

css/info.css

@@ -39,21 +39,34 @@
 }
 
 #info .flag,
-#info img {
+#info .flag img,
+#info .picture {
   width: 3em;
   height: 2em;
 }
 
-#info .flag {
+#info .flag,
+#info .picture {
   border: 0.05em solid #ccc;
   border-radius: 0.2em;
 }
 
-#info img {
+#info .flag img,
+#info .picture img {
   border-radius: 0.15em;
   display: block;
 }
 
+#info .picture {
+  margin-right: -0.4em;
+}
+
+#info .picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .wikipedia {
   display: flex;
   align-items: center;
@@ -67,3 +80,37 @@
   text-decoration: none;
   font-size: 0.4em;
 }
+
+#picture-modal {
+  width: 70%;
+  height: 90%;
+}
+
+#picture-modal .modal-content {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #666;
+  border-radius: 0.5em;
+  overflow: hidden;
+  background: #fff;
+}
+
+#picture-modal img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+#picture-modal h6 {
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 2em;
+  color: #000;
+  margin: 0;
+  padding: 0.4em;
+  display: flex;
+  justify-content: space-between;
+}
+
+#picture-modal h6 .close {
+  cursor: pointer;
+}

css/mobile.css

@@ -56,6 +56,7 @@
 
   #shuriken {
     font-size: 0.7vh !important;
+    padding-bottom: 14em !important;
   }
 
   svg text {
@@ -83,7 +84,8 @@
   }
 
   #info .flag,
-  #info img {
+  #info .flag img,
+  #info .picture {
     width: 4.5em;
     height: 3em;
   }
@@ -99,4 +101,9 @@
   #tokyo:not(.Tokyo) svg {
     width: 120% !important;
   }
+
+  #picture-modal {
+    width: 90%;
+    height: 70%;
+  }
 }