Add species images and fix Minesweeper miscoloring in IDEAS

app/src/components/Modal/MinesweeperDialog.vue

@@ -17,7 +17,7 @@
         </v-card-title>
         <v-card-text>
           <p>Try to find locations with <b>very high diversity</b>
-          and mark them with a <b>flower (right click)</b> and learn about
+          and mark them with a <b>flag (right click)</b> and learn about
           Earth Observation data along the way.
           </p>
           <p>
@@ -31,8 +31,8 @@
           <p>
           Game is played like a minesweeper:
           <br>
-          <b>Left mouse click</b> to uncover a <b>field.</b>
-          <b>Right mouse click</b> to flag it with a <b>flower.</b></p>
+          <b>Left mouse click</b> to uncover a <b>field. </b>
+          <b>Right mouse click</b> to flag it with a <b>flag.</b></p>
           <br>A random game location is chosen every day. <b>Come back to explore more </b>tomorrow!
             <!-- To explore new locations, add query parameter
             seed with any value e.g. &seed=SeedString.
@@ -190,7 +190,7 @@ export default {
         return;
       }
       // Get wildlife species index
-      const r1 = await fetch('https://eox-ideas.s3.eu-central-1.amazonaws.com/indicator2/species_index.json');
+      const r1 = await fetch('https://eox-ideas.s3.eu-central-1.amazonaws.com/indicator2/Species_Index_Images.json');
       const speciesIndex = await r1.json();
 
       // Get locations of species

app/src/components/SpeciesList.vue

@@ -1,8 +1,27 @@
 <template>
   <dl>
-    <div v-for="s in species" :key="s.species" style="margin-bottom: 16px;">
-      <dt><b>{{ s.species }}</b><span v-if="s.count > 1" class="count">{{ s.count }}</span></dt>
-      <dd v-if="s.common_name !== 'Unknown'">({{ s.common_name }})</dd>
+    <div
+      class="species v-row"
+      v-for="s in species"
+      :key="s.species"
+      style="margin-bottom: 16px;"
+    >
+      <img
+        v-if="s.image_url && /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i.test(s.image_url)"
+        :src="s.image_url"
+      />
+
+      <div
+        v-else
+        class="placeholder"
+      >?</div>
+
+      <a :href="s.image_url" class="names" target="_blank">
+        <dt><b>{{ s.species.replace(/(?:^|\s)\S/g, (match) => match.toUpperCase()) }}</b></dt>
+        <dd v-if="s.common_name !== 'Unknown'">({{ s.common_name }})</dd>
+      </a>
+
+      <span v-if="s.count > 1" class="count">{{ s.count }}</span>
     </div>
   </dl>
 </template>
@@ -19,6 +38,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.species {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  min-width: 280px;
+
+  img, .placeholder {
+    height: 64px;
+    width: 64px;
+    border-radius: 4px;
+    margin-right: 12px;
+    border: 2px solid #99a;
+  }
+
+  .placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    font-weight: 600;
+    background: #00417011;
+  }
+
+  .names {
+    width: 200px;
+    font-size: 15px;
+  }
+}
+
 .count {
   height:22px;
   padding: 0 9px;

app/src/plugins/minesweeper/index.js

@@ -128,12 +128,12 @@ const setupGrid = (game) => {
 function getColorFromValue(v, min = 1, max = 8) {
   let value;
 
-  if (v.isNaN) {
-    value = 0.0;
-  } else {
-    value = v;
+  if (Number.isNaN(v)) {
+    return 'rgba(0, 0, 0, 0)';
   }
 
+  value = v;
+
   // Ensure the value is within the expected range
   value = Math.max(min, Math.min(max, value));