Adding menu, changing typos and fixing nomeclature

assets/javascript/developers.js

@@ -1,25 +1,37 @@
-function Developer(name, price, basePerformance, description, buffs, imageName) {
+function Developer(id, name, price, basePerformance, description, buffs) {
+  this.id = id;
   this.name = name;
-  this.price = price;
+  this.basePrice = price;
   this.basePerformance = basePerformance;
   this.description = description;
   this.buffs = buffs;
   this.level = 0;
   this.speed = 1;
-  this.imageName = imageName;
+
   this.performance = function() {
     let performance = basePerformance + Math.floor((this.level * basePerformance) / 2);
-    let extra_performance = 0;
-    this.buffs.forEach(
-      function (buff) {
-        if(buff.active && buff.target === 'performance'){
-          performance += performance * buff.value;
+
+    return this.buffs.reduce((performance, buff) => {
+      if (buff.active && buff.target === 'performance') {
+        return performance += performance * buff.value;
+      }
+      return Math.ceil(performance);
+    }, performance);
+  };
+
+  this.levelUp = function (amount) {
+    let level = this.level + amount;
+
+    this.level = level;
+    this.buffs.forEach(buff => {
+        if (!buff.active && buff.requiredLevel <= level) {
+          buff.active = true;
         }
       }
-    );
-    performance += extra_performance;
-    return performance
-  }
+    )
+  };
+
+  this.price = () => this.basePrice + this.basePrice * this.level * this.level;
 }
 
 function Buff(requiredLevel, description, target, value) {
@@ -32,6 +44,23 @@ function Buff(requiredLevel, description, target, value) {
 
 let developers = [
   new Developer(
+    'main-guy',
+    "Main Guy",
+    1,
+    1,
+    "It's you, or at least our imagination of you since we didn't implement character customization!",
+    [
+      new Buff(10, 'Increase your performance by 50%', 'performance', 0.5),
+      new Buff(25, 'Double your performance, wow!', 'performance', 1),
+      new Buff(50, 'And again! But only by 25%', 'performance', 0.25),
+      new Buff(100, 'Oh boy, another increase, this time by 40%', 'performance', 0.4),
+      new Buff(250, 'This is a small buff, but a big one as a whole, 10%', 'performance', 0.1),
+      new Buff(500, 'Will increase your performance by 60%, you are almost at the top', 'performance', 0.6),
+      new Buff(1000, 'Triple your base performance, best coder alive!', 'basePerformance', 2)
+    ]
+  ),
+  new Developer(
+    'noobium-foreverintern',
     "Noobium Foreverintern",
     40,
     3,
@@ -44,10 +73,10 @@ let developers = [
       new Buff(250, 'Increase his speed by 50%', 'speed', 0.5),
       new Buff(500, 'Increase his performance by 60%', 'performance', 0.6),
       new Buff(1000, 'Double his base performance', 'basePerformance', 1)
-    ],
-    'noobium-foreverintern'
+    ]
   ),
   new Developer(
+    'invisible-man',
     "Invisible man",
     60,
     4,
@@ -60,10 +89,10 @@ let developers = [
       new Buff(250, 'Increase his speed by 25%', 'speed', 0.25),
       new Buff(500, 'Increase his performance by 12%', 'performance', 0.12),
       new Buff(1000, 'Double his base performance', 'basePerformance', 1)
-    ],
-    'invisible-man'
+    ]
   ),
   new Developer(
+    'invisible-woman',
     "Invisible woman",
     100,
     10,
@@ -76,7 +105,6 @@ let developers = [
       new Buff(250, 'Increase her speed by 25%', 'speed', 0.25),
       new Buff(500, 'Increase her performance by 12%', 'performance', 0.12),
       new Buff(1000, 'Double her base performance', 'basePerformance', 1)
-    ],
-    'invisible-woman'
+    ]
   )
 ];

assets/javascript/game.js

@@ -1,76 +1,161 @@
 let money = 0;
 let writtenLines = 0;
-let click_value = 1;
-let helper_count = 0;
 let project = new Project();
 const stageElement = document.getElementById('stage');
 const moneyElement = document.getElementById('money');
+const office = document.getElementById('office');
 const writtenLinesElement = document.getElementById('project-progress');
-const employers = document.querySelector('#office > .employers');
+const employees = document.querySelector('#office > .employees');
+const menu = document.querySelector('#menus');
+const buttons = document.getElementsByClassName('developer__button');
+const mainDeveloper = developers.find(developer => developer.id === 'main-guy');
+const developersElement = document.getElementById('developers__menu');
+const mainDeveloperElement = document.getElementById(mainDeveloper.id);
+
 
 window.onload = function startGame() {
-  document.getElementById('office').addEventListener("click", click);
-  document.getElementById('improve_self').addEventListener("click", improveSelf);
-  document.getElementById('hire_help').addEventListener("click", hireDeveloper);
-  document.getElementById('stage').innerHTML= "You are in the stage "+stage;
+  mainDeveloper.levelUp(1);
+
+  mainDeveloperElement.firstElementChild.lastElementChild.addEventListener("click", showDeveloperInfo);
+
+  office.addEventListener("click", officeClick);
+
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener("click", improveDeveloper);
+    buttons[i].parentElement.parentElement.firstElementChild.firstElementChild.addEventListener("click", showDeveloperInfo);
+  }
+
+  stageElement.innerHTML= "You are in the stage "+stage;
+
   outsourcedWork();
   updateMoney();
+  setupModalTriggers();
+  updateDeveloper(mainDeveloper);
 };
 
 function outsourcedWork() {
   developers.forEach(developer => {
-    if(developer.level > 0) {
+    if (developer.level > 0 && developer !== mainDeveloper) {
       writtenLines += developer.performance();
     }
   });
+
   updatePerformance();
   setTimeout(outsourcedWork, 1000);
 }
 
 function updateMoney() {
-  moneyElement.innerHTML = '$'+money
+  moneyElement.innerHTML = '$' + money;
 }
 
 function updatePerformance() {
   writtenLinesElement.innerHTML = "You have written " + writtenLines + " lines of code!";
+
   if (writtenLines >= project.linesOfCode) {
     writtenLines = 0;
     givePayment(project.payment);
     stage++;
     project = new Project;
-    stageElement.innerHTML = "You are in the stage: "+stage;
+    stageElement.innerHTML = "You are in the stage: " + stage;
   }
 }
 
 function givePayment(value) {
   money += value;
+
   updateMoney();
 }
 
-function improveSelf() {
-  if(money >= (Math.pow(click_value, 2))) {
-    money = money - (Math.pow(click_value, 2));
+function improveDeveloper(event) {
+  let developerId = event.target.parentNode.parentNode.id;
+  let developer = developers.find(developer => developer.id === developerId);
+  let price = developer.price();
+
+  if (money >= price) {
+    money = money - price;
+    developer.levelUp(1);
+
+    if (developer.level === 1) {
+      employees.innerHTML += `<img alt="${developer.name}" class="developer" src="assets/images/employees/${developer.id}.png">`;
+    }
+
+    updateDeveloper(developer);
     updateMoney();
-    click_value++;
   }
 }
 
-function hireDeveloper() {
-  let developer = developers[helper_count];
-  if(money >= developer.price) {
-    money = money - developer.price;
-    updateMoney();
-    helper_count ++;
-    addNewDeveloper(developer);
+function updateDeveloper(developer) {
+  let developerElement = document.getElementById(developer.id);
+  let developerPosition = developers.indexOf(developer);
+  let developerAttributes = developerElement.childNodes[3];
+
+  developerElement.childNodes[1].classList = 'developer__icon';
+  developerAttributes.childNodes[1].classList = 'developer__attribute';
+  developerAttributes.childNodes[3].innerHTML = 'Level: ' + developer.level;
+  developerAttributes.childNodes[3].classList = 'developer__attribute';
+  developerAttributes.childNodes[5].innerHTML = 'Lines/Click: ' + developer.performance();
+  developerAttributes.childNodes[5].classList = 'developer__attribute';
+  developerAttributes.childNodes[7].innerHTML = 'Price: ' + developer.price() + '$';
+  developerAttributes.childNodes[7].classList = 'developer__attribute';
+  developerAttributes.childNodes[9].innerHTML = 'Improve skills';
+
+  if (developersElement.lastElementChild === developerElement && developerPosition < developers.length - 1) {
+    addNewMenuDeveloper(developers[developerPosition + 1]);
   }
 }
 
-function click() {
-  writtenLines = writtenLines + click_value;
+function officeClick() {
+  writtenLines = writtenLines + mainDeveloper.performance();
+
   updatePerformance();
 }
 
-function addNewDeveloper(developer) {
-  developer.level = 1;
-  employers.innerHTML += '<img alt="' + developer.name + '" class="character" src="assets/images/employers/' + developer.imageName + '.png">'
+function addNewMenuDeveloper(developer) {
+  developersElement.insertAdjacentHTML("beforeend",`<div id=${developer.id} class="developer__menu">
+        <div class="developer__icon--inactive">
+          <img alt=${developer.name} class="developer" src="assets/images/employees/${developer.id}.png">
+        </div>
+        <div class="developer__attributes">
+          <p class="developer__attribute--inactive">Name: ${developer.name}</p>
+          <p class="developer__attribute--inactive">Level: ${developer.level}</p>
+          <p class="developer__attribute--inactive">Lines/Click: 0</p>
+          <p class="developer__attribute--inactive">Price: ${developer.price()}$</p>
+          <button class="developer__button">Hire this developer</button>
+        </div>
+      </div>`);
+
+  developersElement
+    .lastElementChild
+    .lastElementChild
+    .lastElementChild
+    .addEventListener("click", improveDeveloper);
+
+  developersElement
+    .lastElementChild
+    .firstElementChild
+    .lastElementChild
+    .addEventListener("click", showDeveloperInfo);
+}
+
+function showDeveloperInfo(event) {
+  let developerId = event.target.parentNode.parentNode.id;
+  let developer = developers.find(developer => developer.id === developerId);
+  customizeModal(developer);
+  openModal();
 }
+
+function preventZoom(event) {
+  event.preventDefault();
+
+  let secondTouch = event.timeStamp;
+  let firstTouch = event.currentTarget.dataset.lastTouch || secondTouch;
+  let timeDifference = secondTouch - firstTouch;
+  let fingers = event.touches.length;
+  event.currentTarget.dataset.lastTouch = secondTouch;
+
+  if (!timeDifference || timeDifference > 500 || fingers > 1) return; // not double-tap
+
+  event.target.click();
+}
+
+office.addEventListener('touchstart', preventZoom);

assets/javascript/modal.js

@@ -0,0 +1,49 @@
+const modalElement = document.getElementById('modal');
+const modalOverlays = document.querySelectorAll('.modal--overlay');
+const closeBtns = document.querySelectorAll('.modal-close');
+const modalTitleElement = document.getElementById('modal--title');
+const modalIconElement = document.getElementById('modal--body--icon');
+const modalDescriptionElement = document.getElementById('modal--body--description');
+const modalBuffsElement = document.getElementById('modal--body--buffs');
+
+function openModal() {
+  modalElement.classList.add('open');
+}
+
+function closeModal() {
+  modalElement.classList.remove('open');
+}
+
+function customizeModal(developer) {
+  modalTitleElement.innerHTML = developer.name;
+  modalIconElement.innerHTML = `<img alt="${developer.name}" class="developer" src="assets/images/employees/${developer.id}.png">`;
+  modalDescriptionElement.innerHTML = developer.description;
+
+  let buffs = '<div class="row">' +
+    '              <div class="cell">Buff description</div>' +
+    '              <div class="cell">Required level</div>' +
+    '              <div class="cell">Status</div>' +
+    '            </div>';
+
+  developer.buffs.forEach(buff => {
+    buffs += `<div class="row">
+               <div class="cell">${buff.description}</div>
+               <div class="cell">${buff.requiredLevel}</div>
+               <div class="cell">${buff.active}</div>
+             </div>`
+  });
+
+  modalBuffsElement.innerHTML = buffs;
+}
+
+function setupModalTriggers() {
+  modalOverlays.forEach(overlay => {
+    overlay.addEventListener('click', function() {
+      modalElement.classList.remove('open');
+    });
+  });
+
+  closeBtns.forEach(btn => {
+    btn.addEventListener('click', closeModal);
+  });
+}