initial feedback -- DO NOT MERGE

app.js

@@ -20,32 +20,19 @@ export function securityInstructions() {
 
 securityInstructions();
 
+const avatarMap = {
+    grant: 'assets/avatars/square-av_alan-grant.png',
+    sattler: 'assets/avatars/square-av_ellie-sattler.png',
+    malcolm: 'assets/avatars/square-av_ian-malcolm.png',
+};
+
 export function grabAvatarImage() {
     const avatarChoice = document.querySelector('input:checked');
     const hasSelected = avatarChoice !== null;
 
-    if (hasSelected) {
-        if (avatarChoice.value === 'grant') {
-            const selectedAvatar = 'assets/avatars/square-av_alan-grant.png';
-            return selectedAvatar;
-        }
-
-        if (avatarChoice.value === 'sattler') {
-            const selectedAvatar = 'assets/avatars/square-av_ellie-sattler.png';
-            return selectedAvatar;
-        }
-
-        if (avatarChoice.value === 'malcolm') {
-            const selectedAvatar = 'assets/avatars/square-av_ian-malcolm.png';
-            return selectedAvatar;
-        }
-    }
-    else {
-        const selectedAvatar = 'assets/deadDinoHead.png';
-        return selectedAvatar;
-    }
-
+    return hasSelected ? avatarMap[avatarChoice.value] : 'assets/deadDinoHead.png';
 }
+
 securityScan.addEventListener('click', () => {
     if (userNameElement.value.length === 0) {
         userNameElement.value = 'Anonymous';

jeff/jeff-utils.js

@@ -1,9 +1,9 @@
+const nameArray = ['Ian', 'Malcolm', 'Jeff', 'Goldblum'];
+
 export function chaosAudit(user) {
     const universalName = user.userName.toLowerCase();
 
-    if (universalName === 'Ian' || universalName === 'Malcolm' || universalName === 'Jeff' || universalName === 'Goldblum') {
-        window.location = './jeff/index.html';
-    } else {
-        window.location = '../lab/index.html';
-    }
+    window.location = (nameArray.includes(universalName)) 
+        ? './jeff/index.html'
+        : '../lab/index.html';
 }

lab/lab.js

@@ -32,6 +32,7 @@ greetingImage.style.borderRadius = '5px';
 greeting.append(greetingImage);
 
 //On change event for any range input - grab total of 3 %s 
+// nice use of the forEach array method!
 document.querySelectorAll('.range-input').forEach(range => {
     range.addEventListener('change', (e) => {
         let tRexTotal = dinoRangeTRex.value;
@@ -47,23 +48,27 @@ document.querySelectorAll('.range-input').forEach(range => {
         tRexTotal = dinoRangeTRex.value;
         triceratopsTotal = dinoRangeTriceratops.value;
         pterodactylTotal = dinoRangePterodactyl.value;
-        let newTotal = grabSum(tRexTotal, triceratopsTotal, pterodactylTotal);
+        const newTotal = grabSum(tRexTotal, triceratopsTotal, pterodactylTotal);
 
         const dnaTracker = document.getElementById('dna-tracker');
         dnaTracker.textContent = `${newTotal}% DNA resources used.`;
 
+        let tubeNumber = 1;
 // Update test-tube image based on total
+        // i'm staring at this trying to find a better way....but I'm kinda stumped! I guess this is just the way to do it--nice work!
         if (newTotal > 1 && newTotal < 5) {
-            totalImage.src = '../assets/lab-images/test-tube-1.png';
+            tubeNumber = 1;
         } else if (newTotal > 4 && newTotal < 35) {
-            totalImage.src = '../assets/lab-images/test-tube-2.png';
+            tubeNumber = 2;
         } else if (newTotal > 34 && newTotal < 65) {
-            totalImage.src = '../assets/lab-images/test-tube-3.png';
+            tubeNumber = 3;
         } else if (newTotal > 64 && newTotal < 100) {
-            totalImage.src = '../assets/lab-images/test-tube-4.png';
+            tubeNumber = 4;
         } else if (newTotal === 100) {
-            totalImage.src = '../assets/lab-images/test-tube-5.png';
+            tubeNumber = 5;
         }
+
+        totalImage.src = `../assets/lab-images/test-tube-${tubeNumber}.png`;
     });
 });
 
@@ -109,6 +114,7 @@ incubateButton.addEventListener('click', () => {
     }
     if (user) {
         const newDino = {
+            // nice id generations!
             dinoId: user.dinoArray[user.dinoArray.length - 1].dinoId + 1,
             species: '',
             hp: 100,

map/map-utils.js

@@ -85,45 +85,49 @@ export function renderTechnicalInfo(user, dinoId) {
 // if dinos are within range of eachother and both are alive, return nearby dino
 export function dinoCollision(clickedDino, dinoArray) {
     for (const comparedDino of dinoArray) {
-        if (comparedDino !== clickedDino && comparedDino.hp > 0 && clickedDino.hp > 0){
-            if (isWithinRange(clickedDino.top, comparedDino.top, 8) && isWithinRange(clickedDino.left, comparedDino.left, 8)) return comparedDino;
-        }
+        if ((comparedDino !== clickedDino && comparedDino.hp > 0 && clickedDino.hp > 0)
+                && isWithinRange(clickedDino.top, comparedDino.top, 8) 
+                && isWithinRange(clickedDino.left, comparedDino.left, 8)
+        ) return comparedDino;
     }
     return null;
 }
 
 // check if two values are within range
 function isWithinRange(value1, value2, range) {
-    if (Math.abs(value1 - value2) <= range) return true;
-    return false;
+    return Math.abs(value1 - value2) <= range;
 }
 
+const deadDinoHeadUrl = '../assets/deadDinoHead.png';
+
 // grab both dinos, and move through fight
 export function dinoFight(dino1, dino2) {
     // generate random damage
     const dino1Damage = Math.ceil(Math.random() * 60);
     const dino2Damage = Math.ceil(Math.random() * 40);
-    let message = '';
-   // if both dinos are alive
-    if (dino1.hp > 0 && dino2.img !== '../assets/deadDinoHead.png') dino1.hp -= dino2Damage;
-    if (dino2.hp > 0 && dino1.img !== '../assets/deadDinoHead.png') dino2.hp -= dino1Damage;
-
-    message = `${dino1.name} did ${dino1Damage} damage to ${dino2.name}. They did ${dino2Damage} back`;
+    // if both dinos are alive
+    // intereasting way of tracking state by checking the DOM! i'd rather see this state tracked sepoarately in case, for example, the filename changes one day. A bit of a maintainability issue there
+    if (dino1.hp > 0 && dino2.img !== deadDinoHeadUrl) dino1.hp -= dino2Damage;
+    if (dino2.hp > 0 && dino1.img !== deadDinoHeadUrl) dino2.hp -= dino1Damage;
+    
+    let message = `${dino1.name} did ${dino1Damage} damage to ${dino2.name}. They did ${dino2Damage} back`;
     //check health to see what dino won, change message accordingly
     if (dino1.hp <= 0){
         message = `${dino1.name} was slain by ${dino2.name}`;
-        dino1.img = '../assets/deadDinoHead.png';
-    } 
+        dino1.img = deadDinoHeadUrl;
+    }
     if (dino2.hp <= 0){
         message = `${dino2.name} was slain by ${dino1.name}`;
-        dino2.img = '../assets/deadDinoHead.png';
+        dino2.img = deadDinoHeadUrl;
     } 
     if (dino1.hp <= 0 && dino2.hp <= 0) {
         message = `${dino2.name} and ${dino1.name} slayed eachother`;
-        dino2.img = '../assets/deadDinoHead.png';
-        dino1.img = '../assets/deadDinoHead.png';
+        dino2.img = deadDinoHeadUrl;
+        dino1.img = deadDinoHeadUrl;
     }
+
     dino2.hp = clamp(dino2.hp, 0, 100);
-    dino2.hp = clamp(dino2.hp, 0, 100);
+    dino2.hp = clamp(dino2.hp, 0, 100); // does this need to happen twice for some reason?
+
     return message;
 }

map/map.js

@@ -11,7 +11,7 @@ const advanceDayButton = document.getElementById('advance-day');
 const createAnotherButton = document.getElementById('create-another');
 const galleryButton = document.getElementById('gallery');
 
-userNotesTextarea.placeholder = `Dr.${user.userName}'s notes`;
+userNotesTextarea.placeholder = `Dr. ${user.userName}'s notes`;
 infoAreaContainerDiv.style.position = 'relative';
 
 // grab each dino and render a dinoIcon to map
@@ -46,5 +46,4 @@ createAnotherButton.addEventListener('click', () =>{
 
 galleryButton.addEventListener('click', () => {
     window.location = '../dino-gallery';
-});
-
+});

utils.js

@@ -1,5 +1,4 @@
 export function grabSum(numOne, numTwo, numThree) {
-
     let totalPercent = Number(numOne) + Number(numTwo) + Number(numThree);
 
     return totalPercent;
@@ -17,6 +16,8 @@ export function getRandomCoordinate() {
     return Math.ceil(Math.random() * 100);
 }
 
+
+// love this function!
 export function incrementRandomCoordinate() {
     let moveAmount = Math.ceil(Math.random() * 10);
     moveAmount *= (Math.round(Math.random()) === 1) ? 1 : -1;