reanme folder

website/index.html → docs/indextemplate.html

@@ -58,17 +58,17 @@ <h3>It's a match!</h3>
 
 </div>
 
-
-
   <div class="tinder--cards" id="tindercards">
     <div class="tinder--card">
       <img src="https://butterfly-conservation.org/sites/default/files/styles/srcset_medium/public/2018-06/34575316620_e27f38176c_o.jpg">
       <h3>Elephant Hawkmoth</h3>
-      <p><a id="locationtext"><i class="fa fa-map-marker"></i> <span id="moth-dist-1">?</span> km from your location</a></p>
+      <span class="sci-name">Deilephila elpenor</span>
+      <p><a id="locationtext"><i class="fa fa-map-marker"></i> <span id="Deilephila elpenorid">?</span> km from your location</a></p>
       <p>I like lamps</p>
       <p>I am sad</p>
       <p>I like the black of the night</p>
     </div>
+
     <div class="tinder--card">
       <img src="https://placeimg.com/600/300/nature">
       <h3>Demo card 2</h3>
@@ -84,10 +84,20 @@ <h3>Demo card 3</h3>
       <h3>Demo card 4</h3>
       <p>This is a demo for Tinder like swipe cards</p>
     </div>
-    <div class="tinder--card">
-      <img src="https://placeimg.com/600/300/nature">
-      <h3>Demo card 5</h3>
-      <p>This is a demo for Tinder like swipe cards</p>
+    <div class="tinder--bottomcard">
+      <br>
+      <h3>Sadly we can't talk to moths yet</h3>
+      <br>
+      <p>But if we could, some of them might not be very happy.</p>
+      <br>
+      <p>Moth trends for Britain and Ireland from the Rothamsted Insect Survey light-trap network (1968 to 2016) found that 8 of the 10 species you just met are in population decline.</p>
+      <br>
+      <p>You can help by getting involved with biodiversity monitoring.</p>
+      <br>
+
+      <a href="index.html">Play again and match with more moths?</a>
+
+
     </div>
   </div>
 

website/python_code/base.py → docs/python_code/base.py

@@ -10,8 +10,8 @@
 templatefile = '../index.html'
 statsfile = '../../data/cleaned_stats_for_page.csv'
 textfile = '../../data/text_from_facts2.csv'
-tstartline = 63 # <div class="tinder-cards" id="tindercards"> line
-tendline   = 91 # </div> of last tinder card line 
+tstartline = 61 # <div class="tinder-cards" id="tindercards"> line
+tendline   = 86 # </div> of last moth tinder card line (not the bottom card)
 
 # 1) read in the template
 with open(templatefile, 'r') as tfile:
@@ -27,21 +27,15 @@
 '''
    <div class="tinder--card">
       <img src="IMAGEURL"
-      width="500"
-      height="150"
+      width="600"
+      height="300"
       title=IMGATT/>
       <h3>MOTHNAME</h3>
+      <span class="sci-name">Deilephila elpenor</span>
       <p><a id="locationtext"><i class="fa fa-map-marker"></i> <span id="moth-dist-1">?</span> km from your location</a></p>
-      <p>FACT1</p>
-      <p>FACT2</p>
-      <p>FACT3</p>
-      <p>FACT4</p>
-      <p>FACT5</p>
-      <p>FACT6</p>
-
-    </div>
 '''
-
+ptemplate = 'FACT'
+templateend = '    </div>'
 # 4) Read in the data from the csv files
 stats = pd.read_csv(statsfile)
 texts = pd.read_csv(textfile, encoding='ANSI')
@@ -77,64 +71,71 @@
     imgurl     = stats['image'].iloc[moth]
     imgatt     = stats['att'].iloc[moth]
 
+    ptemplates = []
+
     # 5) Edit template with data from step 4
     newtemplate = template.replace('MOTHNAME', mothname)
     if pd.isna(plants):
-        newtemplate = newtemplate.replace('<p>FACT1</p>', '')
+        pass
     else:
-        newtemplate = newtemplate.replace('FACT1', 'Fave plants: ' + str(plants))
+        newptemplate = ptemplate.replace('FACT', 'Fave plants: ' + str(plants))
+        ptemplates.append(newptemplate)
 
     # resident
     if pd.isna(resident):
-        newtemplate = newtemplate.replace('<p>FACT2</p>', '')
+        pass
     else:
         if resident == True:
             rint = np.random.randint(0, residence_texts_t.shape[0])
             rtext = residence_texts_t.iloc[rint]
         elif resident == False:
             rint = np.random.randint(0, residence_texts_f.shape[0])        
             rtext = residence_texts_f.iloc[rint]
-        newtemplate = newtemplate.replace('FACT2', rtext)
+        newptemplate = ptemplate.replace('FACT', rtext)
+        ptemplates.append(newptemplate)
 
     # diurnal
     if pd.isna(diurnal):
-        newtemplate = newtemplate.replace('<p>FACT3</p>', '')
+        pass
     else:
         if diurnal == True:
             rint = np.random.randint(0, diurnal_texts_t.shape[0])
             dtext = diurnal_texts_t.iloc[rint]
         elif diurnal == False:
             rint = np.random.randint(0, diurnal_texts_f.shape[0])        
             dtext = diurnal_texts_f.iloc[rint]
-        newtemplate = newtemplate.replace('FACT3', dtext)
+        newptemplate = ptemplate.replace('FACT', dtext)
+        ptemplates.append(newptemplate)
 
     # abundance
     if pd.isna(abundance):
-        newtemplate = newtemplate.replace('<p>FACT4</p>', '')
+        pass
     else:    
         if abundance == True:
             rint = np.random.randint(0, abundance_texts_t.shape[0])
             atext = abundance_texts_t.iloc[rint]
         elif abundance == False:
             rint = np.random.randint(0, abundance_texts_f.shape[0])        
             atext = abundance_texts_f.iloc[rint]
-        newtemplate = newtemplate.replace('FACT4', atext)
+        newptemplate = ptemplate.replace('FACT', atext)
+        ptemplates.append(newptemplate)
 
     # mass
     if pd.isna(mass):
-        newtemplate = newtemplate.replace('<p>FACT5</p>', '')
+        pass
     else:
         if mass == True:
             rint = np.random.randint(0, mass_texts_t.shape[0])
             mtext = mass_texts_t.iloc[rint]
         elif abundance == False:
             rint = np.random.randint(0, mass_texts_f.shape[0])        
             mtext = mass_texts_f.iloc[rint]
-        newtemplate = newtemplate.replace('FACT5', mtext)
+        newptemplate = ptemplate.replace('FACT', mtext)
+        ptemplates.append(newptemplate)
 
     # pickiness
     if pd.isna(pickiness):
-        newtemplate = newtemplate.replace('<p>FACT6</p>', '')
+        pass
     else:
         if pickiness == 'O':
             rint = np.random.randint(0, pick_texts_o.shape[0])
@@ -145,7 +146,8 @@
         elif pickiness == 'M':
             rint = np.random.randint(0, pick_texts_m.shape[0])
             ptext = pick_texts_m.iloc[rint]
-        newtemplate = newtemplate.replace('FACT6', ptext)
+        newptemplate = ptemplate.replace('FACT', ptext)
+        ptemplates.append(newptemplate)
 
     # image url
     if pd.isna(imgurl):
@@ -155,7 +157,36 @@
         imgatt = ''
     newtemplate = newtemplate.replace('IMGATT', '"' + imgatt + '"')
 
-    newtemplates.append(newtemplate)
+    random.shuffle(ptemplates)
+
+    # randomly group some into paragraphs
+    if len(ptemplates) == 1:
+        newptemplates = ['<p>' + ptemplates[0] + '</p>']
+    elif len(ptemplates) == 0:
+        pass
+    else:
+        newptemplates = []
+        for t in range(0, len(ptemplates)):
+            rint = np.random.randint(0, 2)
+            if t == 0:
+                if rint == 0:
+                    newptemplate2 = ptemplates[t] + '. '
+                elif rint == 1:
+                    newptemplate2 = ptemplates[t] + '</p>\n<p>'
+                newptemplate2 = '<p>' + newptemplate2
+            elif t == len(ptemplates)-1:
+                newptemplate2 = ptemplates[t] + '</p>'
+            else:
+                if rint == 0:
+                    newptemplate2 = ptemplates[t] + '. '
+                elif rint == 1:
+                    newptemplate2 = ptemplates[t] + '</p>\n<p>'
+            newptemplates.append(newptemplate2)
+
+
+    ptemplates = ''.join(newptemplates)
+    finaltemplate = '\n'.join([newtemplate, ptemplates, templateend])
+    newtemplates.append(finaltemplate)
 
 # 6) Write beginning, edited templates and end to new file
 # Shuffle order of edited templates to randomise the order of the cards

website/script.js → docs/script.js

@@ -1,6 +1,39 @@
 'use strict';
 
 
+// shuffling
+function shuffle() {
+  console.log("test");
+  var container = document.getElementById("tindercards");
+  var elementsArray = Array.prototype.slice.call(container.getElementsByClassName('tinder--card'));
+    elementsArray.forEach(function(element){
+    container.removeChild(element);
+  })
+  shuffleArray(elementsArray);
+  elementsArray.forEach(function(element){
+  container.appendChild(element);
+})
+}
+
+function shuffleArray(array) {
+    for (var i = array.length-1; i > 0; i--) {
+        var j = Math.floor(Math.random() * (i + 1));
+        var temp = array[i];
+        array[i] = array[j];
+        array[j] = temp;
+    }
+    return array;
+}
+
+shuffle();
+
+const nelements = document.getElementById("tindercards").childElementCount;
+
+for (var i=100; i < nelements;i++ ) {
+  console.log("test");
+  document.getElementById("tindercards").removeChild(document.getElementById("tindercards").lastElementChild);
+}
+
 // Get the modal
 var modal = document.getElementById("myModal");
 
@@ -180,22 +213,24 @@ function getPosition(position) {
   var lat = position.coords.latitude;
   var lng = position.coords.longitude;
 
-  console.log(document.getElementById("tindercards"));
-
-  async function getDist() {
-    let species = "Deilephila elpenor"
+  async function getDist(species,divid) {
     let species_nearby = await getData('https://api.inaturalist.org/v1/observations?taxon_name='+ species+'&lat=' + lat + '&lng=' + lng + '&radius=25&per_page=15');
     const distances = [];
 
     for (const sp in species_nearby.results){
       let location = species_nearby.results[sp].location.split(',');
       distances.push(distance(lat,lng,Number(location[0]),Number(location[1]),"K"));
     }
-    document.getElementById("moth-dist-1").innerHTML = Math.round(Math.min(...distances)); 
+    document.getElementById(divid).innerHTML = Math.round(Math.min(...distances)); 
     //document.getElementById("locationtext").setAttribute('href', "https://www.inaturalist.org/observations?q="+species+"&lat=",lat,"&lng="+lng);
   }; 
 
-  getDist()
+  for (const i in Array.from(Array(document.getElementsByClassName("sci-name").length).keys())) {
+    getDist(document.getElementsByClassName("sci-name")[i].innerHTML,document.getElementsByClassName("sci-name")[i].innerHTML+"id")
+  }
+
+
+
 }
 
 

website/style.css → docs/style.css

@@ -81,6 +81,17 @@ body {
   cursor: grab;
 }
 
+.tinder--bottomcard {
+  display: inline-block;
+  width: 75vw;
+  max-width: 400px;
+  height: 70vh;
+  padding-bottom: 40px;
+  border-radius: 8px;
+  overflow: auto;
+  position: absolute;
+}
+
 .moving.tinder--card {
   transition: none;
   cursor: -webkit-grabbing;
@@ -95,20 +106,21 @@ body {
 .tinder--card h3 {
   text-align: left;
   margin-top: 32px;
-  font-size: 32px;
+  font-size: 25px;
   padding: 0 16px;
   pointer-events: none;
 }
 
 .tinder--card p {
   text-align: left;
   margin-top: 24px;
-  font-size: 20px;
+  font-size: 16px;
   padding: 0 16px;
   pointer-events: none;
 }
 
 .tinder--buttons {
+  z-index: 8;
   flex: 0 0 100px;
   text-align: center;
   padding-top: 20px;
@@ -148,14 +160,16 @@ h1{
   text-align: center;
   font-family: 'Contrail One', cursive;
   font-size: 50px;
+  z-index: 5;
+  text-shadow: 0 0 10px #fde4c1;
 }
 
 
 /* The Modal (background) */
 .modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
-  z-index: 4; /* Sit on top */
+  z-index: 9; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
@@ -216,4 +230,12 @@ h1{
   text-align: center;
   text-decoration: none;
   display: inline-block;
+}
+
+img{
+  object-fit: cover;
+}
+
+.sci-name{
+  display:none;
 }