SEIR-1016-EC · bsong1124 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,126 @@
 /* global styles  */
+*{
+    box-sizing: border-box;
+    /* border: solid red 1px; */
+}
 
 /* element styles */
+body{
+    min-height: 100vh;
+    background-color: #e6e6e6;
+    font-family: Arial, Helvetica, sans-serif;
+    /* reference size for rem units(16px) */
+    font-size: 16px;
+    margin: 0;
+}
+
+/* fonts */
+h1{
+    font-size: 3.5rem;
+    /* margin: 0; */
+}
 
 /* layout */
+.container{
+    /* border: solid blue 3px; */
+    width: 90vw;
+    margin: 0 auto;
+}
+.button-wrapper{
+    display: flex;
+    justify-content: space-around;
+    gap: 1rem;
+
+
+}
+.stat-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: solid #134a71 .2rem;
+    border-radius: .25rem;
+}
+
+.button-wrapper button:active{
+    background-color: #0b99ff;
+    border: solid #134a71 .2rem;
+    border-radius: .25rem;
+}
 
 /* images */
+.game-graphic{
+    max-height: 33vmin;
+}
+.game-graphic:hover{
+    /* border: solid salmon 10px; */
+
+    /* 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(5px, 5px) rotate(10deg);
+    }
+
+    10% {
+        transform: translate(-5px, -6px) rotate(-10deg);
+    }
+
+    20% {
+        transform: translate(-6px, 7px) rotate(10deg);
+    }
+
+    30% {
+        transform: translate(6px, 5px) rotate(5deg);
+    }
+
+    40% {
+        transform: translate(5px, -5px) rotate(10deg);
+    }
+
+    50% {
+        transform: translate(-7px, 8px) rotate(-10deg);
+    }
+
+    60% {
+        transform: translate(-6px, 4px) rotate(5deg);
+    }
+
+    70% {
+        transform: translate(3px, 1px) rotate(-10deg);
+    }
+
+    80% {
+        transform: translate(-1px, -1px) rotate(10deg);
+    }
+
+    90% {
+        transform: translate(1px, 2px) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(1px, -2px) rotate(-10deg);
+    }
+}
diff --git a/index.html b/index.html
@@ -6,11 +6,35 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="css/style.css">
-    <script src="./js/main.js" defer></script>
+    <!-- <script defer src="./js/main.js" defer></script> -->
 </head>
 
 <body>
-        <h1>Tamagotchi Code Along</h1>
+    <header>
+        <h1 class="game-title">Tamagotchi</h1>
+    </header>
+    <main class="container">
+        <!-- button wrapper -->
+        <section id="controller" class="button-wrapper">
+            <button>feed</button>
+            <button>play</button>
+            <button>sleep</button>
+        </section>
+
+        <!-- data -->
+        <section id="stat-display" class="stat-wrapper">
+            <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>
+
+        <!-- game state -->
+        <section id="game-state" class="game-state-wrapper">
+            <img id="tama-graphic" src="./imgs/wolf-1.png" class="game-graphic">
+        </section>
+    </main>
+    <script src="./js/main.js" defer></script>
 </body>
 
-</html>
+</html>
+
diff --git a/js/main.js b/js/main.js
@@ -1,15 +1,113 @@
-console.log('js:loaded')
+console.log("js:loaded");
 
 /*----- constants -----*/
-
+const INIT_STATE = {
+  boredom: 6,
+  hunger: 6,
+  sleepiness: 6,
+};
 
 /*----- state variables -----*/
+// let boredom; // integer
+// let hunger; // integer
+// let sleepiness; // integer
+let state;
+
+let age; // integer
+let cycles; // integer
 
+let timer; // object
+let interval; // integer
 
 /*----- cached elements  -----*/
 
+const boredomStatEl = document.querySelector("#boredom-stat");
+const hungerStatEl = document.querySelector("#hunger-stat");
+const sleepinessStatEl = document.querySelector("#sleepiness-stat");
+
+const gameBtnEls = document.querySelectorAll("#controller button");
 
 /*----- event listeners -----*/
+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)
+}
+
+/*----- functions -----*/
+init();
+function init() {
+  state = { ...INIT_STATE };
+  age = 0;
+  cycles = 0;
+  interval = 5000;
+  timer = setInterval(runGame, interval);
+
+  //   console.log("game has started");
+  render();
+}
+
+function runGame() {
+  if (continueGame()) {
+    updateStats();
+  } else {
+    gameOver();
+  }
+  // console.log("game is running");
+  render();
+}
+
+function render() {
+  // console.log("rendering game")
+  renderStat();
+}
+
+function renderStat() {
+  boredomStatEl.textContent = state.boredom;
+  hungerStatEl.textContent = state.hunger;
+  sleepinessStatEl.textContent = state.sleepiness;
+}
+
+function updateStats() {
+  for (key in state) {
+    updateStat(key, Math.floor(Math.random() * 3));
+    console.log(key);
+  }
+}
 
+function updateStat(stat, value) {
+  if (state[stat] + value >= 0) {
+    state[stat] += value;
+  } else {
+    state[stat] = 0;
+  }
+    // console.log(state)
+}
 
-/*----- functions -----*/
+function continueGame() {
+  let currentStats = [];
+  let keepRunning = true;
+  for (let key in state) {
+    currentStats.push(state[key]);
+  }
+  console.log(currentStats);
+  for (let stat of currentStats) {
+    if (stat >= 10) {
+      keepRunning = false;
+    }
+  }
+  return keepRunning;
+}
+function gameOver() {
+//   alert("GAME OVER");
+  clearInterval(timer)
+}