codetracker-learning · fimoefive · May 5, 2021 · May 5, 2021 · May 5, 2021 · May 5, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,14 @@
 # Tamagotchi
+
+## LINKS
+
+### [Netlify](https://mjs-tamagotchi.netlify.app)
+
+### [LOOM](https://www.loom.com/share/337babbff456431884c95f34b410cbe3)
+
+### Tamagotchi Screenshots
+<img width="1680" alt="Tamagotchi" src="https://user-images.githubusercontent.com/58958998/120896023-3908e900-c5e5-11eb-8a34-990417621f7d.png">
+
 Remember Tamagotchi's?  They looked something like this:
 
 ![Tamagotchi](./tamagotchi.jpg)

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.14.0",
-    "axios": "0.20.0",
+    "axios": "^0.21.1",
     "bootstrap": "4.5.2",
     "firebase": "^7.21.0",
     "jquery": "3.5.1",

diff --git a/src/index.html b/src/index.html
@@ -3,9 +3,20 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Test</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
+  <title>Tamagotchi</title>
 </head>
-<body>
-  <div id="app"></div>
-</body>
-</html>
+  <body>
+      <div id="app">
+        <div id="progress"></div>
+        <div id="eat" class="quad"></div>
+        <div id="play" class="quad"></div>
+        <div id="fight" class="quad"></div>
+        <div id="sleep" class="quad"></div>
+        <div id="pet"></div>
+      </div>
+  </body>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
+</html>
diff --git a/src/javascripts/data/eatData.js b/src/javascripts/data/eatData.js
@@ -0,0 +1,43 @@
+let full = 100;
+
+const getFull = () => {
+  $('#eat').html(`<h1>Eat</h1>
+  <div class="eat-container" id="eatProgress"></div>
+    <div>
+    <button type="button" class="btn btn-success" id="healthyFood">Healthy Food</button>
+        <button type="button" class="btn btn-danger" id="junkFood">Junk Food</button>
+    </div>
+  `);
+};
+
+const eatProgressBar = () => {
+  $('#eatProgress').html(
+    `<div class="progress-bar" role="progressbar" style="width: ${full}%" aria-valuenow="${full}" aria-valuemin="0" aria-valuemax="100">${full}% Full</div>`,
+  );
+};
+
+const eatHealthy = () => {
+  full += 10;
+  if (full > 100) {
+    full = 100;
+  }
+  eatProgressBar();
+};
+
+const eatJunk = () => {
+  full -= 3;
+  if (full < 0) {
+    full = 0;
+  }
+  eatProgressBar();
+};
+
+const startEat = () => {
+  getFull();
+  eatProgressBar();
+
+  $('#healthyFood').on('click', eatHealthy);
+  $('#junkFood').on('click', eatJunk);
+};
+
+export default startEat;
diff --git a/src/javascripts/data/fightData.js b/src/javascripts/data/fightData.js
@@ -0,0 +1,43 @@
+let strength = 100;
+
+const getStrength = () => {
+  $('#fight').html(`<h1>Fight</h1>
+  <div class="fight-container" id="fightProgress"></div>
+    <div>
+    <button type="button" class="btn btn-success" id="fightRun">Run Away</button>
+    <button type="button" class="btn btn-danger" id="fight-button">Fight</button>
+    </div>
+  `);
+};
+
+const fightProgressBar = () => {
+  $('#fightProgress').html(
+    `<div class="progress-bar" role="progressbar" style="width: ${strength}%" aria-valuenow="${strength}" aria-valuemin="0" aria-valuemax="100">${strength}% Strength</div>`,
+  );
+};
+
+const fightRun = () => {
+  strength += 1;
+  if (strength > 100) {
+    strength = 100;
+  }
+  fightProgressBar();
+};
+
+const fight = () => {
+  strength -= 10;
+  if (strength < 0) {
+    strength = 0;
+  }
+  fightProgressBar();
+};
+
+const startFight = () => {
+  getStrength();
+  fightProgressBar();
+
+  $('#fightRun').on('click', fightRun);
+  $('#fight-button').on('click', fight);
+};
+
+export default startFight;
diff --git a/src/javascripts/data/playData.js b/src/javascripts/data/playData.js
@@ -0,0 +1,43 @@
+let fun = 50;
+
+const getFun = () => {
+  $('#play').html(`<h1>Play</h1>
+  <div class="play-container" id="playProgress"></div>
+    <div>
+    <button type="button" class="btn btn-success" id="playHard">Play Hard</button>
+    <button type="button" class="btn btn-info" id="playSoft">Play Soft</button>
+    </div>
+  `);
+};
+
+const playProgressBar = () => {
+  $('#playProgress').html(
+    `<div class="progress-bar" role="progressbar" style="width: ${fun}%" aria-valuenow="${fun}" aria-valuemin="0" aria-valuemax="100">${fun}% Play</div>`,
+  );
+};
+
+const playHard = () => {
+  fun += 50;
+  if (fun > 100) {
+    fun = 100;
+  }
+  playProgressBar();
+};
+
+const playSoft = () => {
+  fun += 2;
+  if (fun > 100) {
+    fun = 100;
+  }
+  playProgressBar();
+};
+
+const startPlay = () => {
+  getFun();
+  playProgressBar();
+
+  $('#playHard').on('click', playHard);
+  $('#playSoft').on('click', playSoft);
+};
+
+export default startPlay;
diff --git a/src/javascripts/data/sleepData.js b/src/javascripts/data/sleepData.js
@@ -0,0 +1,44 @@
+let energy = 50;
+
+const getSleep = () => {
+  $('#sleep').html(`<h1>Sleep</h1>
+  <div class="progress-container" id="sleepProgress"></div>
+  <div class="eat-container" id="eatProgress"></div>
+    <div>
+    <button type="button" class="btn btn-success" id="sleepNap">Nap</button>
+    <button type="button" class="btn btn-danger" id="deepSleep">Deep Sleep</button>
+    </div>
+  `);
+};
+
+const sleepProgressBar = () => {
+  $('#sleepProgress').html(
+    `<div class="progress-bar" role="progressbar" style="width: ${energy}%" aria-valuenow="${energy}" aria-valuemin="0" aria-valuemax="100">${energy}% Energy</div>`,
+  );
+};
+
+const sleepNap = () => {
+  energy += 50;
+  if (energy > 100) {
+    energy = 100;
+  }
+  sleepProgressBar();
+};
+
+const deepSleep = () => {
+  energy += 60;
+  if (energy > 100) {
+    energy = 100;
+  }
+  sleepProgressBar();
+};
+
+const startSleep = () => {
+  getSleep();
+  sleepProgressBar();
+
+  $('#sleepNap').on('click', sleepNap);
+  $('#deepSleep').on('click', deepSleep);
+};
+
+export default startSleep;
diff --git a/src/javascripts/domEvents.js b/src/javascripts/domEvents.js
diff --git a/src/javascripts/main.js b/src/javascripts/main.js
@@ -1,8 +1,24 @@
+import startEat from './data/eatData';
+import startPlay from './data/playData';
+import startFight from './data/fightData';
+import startSleep from './data/sleepData';
 import '../styles/main.scss';
 
+// const printToDom = (divId, printText) => {
+//   const selectedDiv = document.querySelector(divId);
+//   selectedDiv.innerHTML = printText;
+// };
+
+// const domStringBuilder = (array) => {
+//   let domString = "";
+//   array.forEach()
+// };
+
 const init = () => {
-  $('#app').html('<h1>HELLO! You are up and running!</h1>');
-  console.log('YOU ARE UP AND RUNNING!');
+  startEat();
+  startPlay();
+  startFight();
+  startSleep();
 };
 
 init();
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -2,8 +2,38 @@
 @import "~@fortawesome/fontawesome-free/css/all.min.css";
 
 body {
-  background-color: antiquewhite;
-  color: brown;
-  text-align: center;
-  margin-top: 100px;
-}
+  height: 100vh;
+  width: 100vw;
+  // background-color: antiquewhite;
+  // color: brown;
+  // text-align: center;
+  // margin-top: 100px;
+}
+
+#app {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.quad {
+  height: 50%;
+  width: 50%;
+}
+
+#eat {
+  background-color: #bb9292;
+}
+
+#play {
+  background-color: #92bb98;
+}
+
+#fight {
+  background-color: #929ebb;
+}
+
+#sleep {
+  background-color: #bba792;
+}