SEIR-1016-EC · quynguy · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,129 @@
 /* global styles  */
 
+*{
+    box-sizing: border-box;
+    /* border: 1px solid red; */
+}
+
 /* element styles */
 
+
+body{
+    /* fonts */
+    margin: 0;
+    min-height: 100vh;
+    background-color: #e6e6e6;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px; 
+    /* referene size for rem units (16px) */
+}
+
+h1{
+    font-size: 3.5rem;
+    /* margin: 0; */
+}
+
 /* layout */
 
+.container{
+    /* border: 3px solid blue; */
+    width: 90vw;
+    margin: 0 auto;
+    /* auto calculates the remaining space avaiable (left over after calculating content size)  */
+}
+
+.button-wrapper{
+    display: flex;
+    justify-content: space-around;
+    gap: 1rem;
+}
+
+.stats-wrapper{
+
+}
+
+
+.game-state-wrapper{
+    display: flex;
+    justify-content: center;
+}
 /* headings */
+.game-title{
+    text-align: center;
+}
 
 /* buttons */
+.button-wrapper button{
+    background-color: #0b99ff;
+    color: white;
+    padding: 1.3rem 1.6rem;
+    font-size: 1.8rem;
+    border: .2rem solid #134a71;
+    border-radius: .25rem;
+}
 
+.button-wrapper button:active{
+    background-color: #197bc2;
+    border: .2rem solid #0b3553;
+}
+/* 11, 153, 255 */
 /* images */
+.game-graphic{
+    max-height: 20vmin;
+}
+
+.game-graphic:hover{
+    /* source: https://www.w3schools.com/howto/howto_css_shake_image.asp */
+    /* Start the shake animation and make the animation last for 0.5 seconds */
+    animation: shake 0.5s;
+
+    /* When the animation is finished, start again */
+    animation-iteration-count: infinite;
+}
+
+
+@keyframes shake {
+    0% {
+        transform: translate(1px, 1px) rotate(0deg);
+    }
+
+    10% {
+        transform: translate(-1px, -2px) rotate(-1deg);
+    }
+
+    20% {
+        transform: translate(-3px, 0px) rotate(1deg);
+    }
+
+    30% {
+        transform: translate(3px, 2px) rotate(0deg);
+    }
+
+    40% {
+        transform: translate(1px, -1px) rotate(1deg);
+    }
+
+    50% {
+        transform: translate(-1px, 2px) rotate(-1deg);
+    }
+
+    60% {
+        transform: translate(-3px, 1px) rotate(0deg);
+    }
+
+    70% {
+        transform: translate(3px, 1px) rotate(-1deg);
+    }
+
+    80% {
+        transform: translate(-1px, -1px) rotate(1deg);
+    }
+
+    90% {
+        transform: translate(1px, 2px) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(1px, -2px) rotate(-1deg);
+    }
+}
diff --git a/index.html b/index.html
@@ -1,16 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/style.css" />
     <script src="./js/main.js" defer></script>
-</head>
-
-<body>
-        <h1>Tamagotchi Code Along</h1>
-</body>
-
+  </head>
+
+  <body>
+    <header>
+        <h1 class="game-title">Tamagotchi</h1>
+    </header>
+    <main class="container">
+        <section id="controller" class="button-wrapper">
+            <!-- button wrapper -->
+            <button>feed</button>
+            <button>play</button>
+            <button>sleep</button>
+        </section>
+        <section id="stat-display" class="stats-wrapper">
+            <!-- stats display -->
+            <p>Happiness: <span id="boredom-stat">10</span></p>
+            <p>Hunger: <span id="hunger-stat">0</span></p>
+            <p>Tiredness: <span id="sleepiness-stat">5</span></p>
+        </section>
+        <section id="game-state" class="game-state-wrapper">
+            <!-- game state -> UI -> user interface for seeing changes to game -->
+            <img id="tama-graphic" src="./imgs/wolf-1.png" class="game-graphic">
+        </section>
+    </main>
+  </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,15 +1,116 @@
-console.log('js:loaded')
+// Tamagotchi Code Along //
 
-/*----- constants -----*/
 
+const INIT_STATE = {
+    boredom: 6, 
+    hunger: 4, 
+    sleepiness: 9,
+}
 
-/*----- state variables -----*/
+let state;
 
+let age;
+let cycles; 
 
-/*----- cached elements  -----*/
+let timer; 
+let interval; 
 
 
-/*----- event listeners -----*/
+const boredomStatEl = document.querySelector('#boredom-stat')
+const hungerStatEl = document.querySelector('#hunger-stat')
+const sleepyStatEl = document.querySelector('#sleepiness-stat')
 
+const gameBtnEls = document.querySelectorAll('#controller button')
 
-/*----- functions -----*/
+
+gameBtnEls.forEach(function(btn){
+    btn.addEventListener('click', handleBtnClick)
+})
+
+function handleBtnClick(event){
+    console.log(event.target.innerText)
+
+    const convertProp = {
+        feed: "hunger",
+        sleep: "sleepiness",
+        play: "boredom",
+    }
+
+    const key = convertProp(event.target.innerText)
+    console.log(key)
+
+    updateStat(key, -3)
+    render()
+}
+
+
+
+init()
+function init(){
+
+    state = {...INIT_STATE} 
+
+    age = 0;
+    cycles = 0; 
+
+    interval = 5000; 
+    timer = setInterval(runGame, interval); 
+    render()
+}
+
+function runGame(){
+    updateStats()
+    render()
+}
+
+function render(){
+    renderStats()
+}
+
+function renderStats(){
+    boredomStatEl.textContent= state.boredom
+    hungerStatEl.textContent= state.hunger
+    sleepyStatEl.textContent= state.sleepiness
+
+}
+
+function runGame() {
+    cycles++;
+
+
+    if (continueGame()) {
+      updateStats();
+
+    } else {
+      return gameOver();
+    }
+
+    render();
+  }
+
+  function continueGame() {
+    const testGame = Object.values(state).every((stat) => stat < 10);
+    return testGame;
+  }
+
+  function updateStats() {
+    for (key in state) {
+      updateStat(key, Math.floor(Math.random() * 3));
+    }
+  }
+
+  function updateStat(stat, value) {
+    if (state[stat] + value >= 0) {
+      state[stat] += value;
+    } else {
+      state[stat] = 0;
+    }
+  }
+
+  function gameOver() {
+   console.log('game over!')
+   clearInterval(timer)
+   init()
+  }
+
+