SEIR-1016-EC · valenium · Oct 27, 2023
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,127 @@
+/* start with mapping out how page needs to look from mockup 
+best practice is to start with pseudocode in JS and test the game in JS console before HTML/CSS*/
 /* global styles  */
 
+*{
+    box-sizing: border-box;
+    /* border: 1px solid red; */
+}
+
 /* element styles */
 
+body {
+    margin: 0;
+    min-height: 100vh;
+    background-color: #e6e6e6;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+
+h1 {
+    font-size: 3.5rem;
+    /* margin: 0; */
+}
+
 /* layout */
 
+.container {
+    /* border: 3px solid blue; */
+    width: 90vw;
+    margin: 0 auto 0 auto;
+}
+
+.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;
+}
 /* images */
+
+.game-graphic{
+    max-height: 20vmin;
+}
+
+.game-graphic:hover{
+    /* border: 10px solid salmon; */
+    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
@@ -10,7 +10,30 @@
 </head>
 
 <body>
-        <h1>Tamagotchi Code Along</h1>
+    <header>
+        <h1 class="game-title">Tamagotchi</h1>
+    </header>
+    <main class="container">
+        <section id="controller" class="button-wrapper">
+            <!-- button wrapper -->
+            <!-- make button casing lowercase cause it's easy to manipulate casing in CSS -->
+            <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">...</span></p>
+            <p>hunger: <span id="hunger-stat">...</span></p>
+            <p>tiredness: <span id="sleepiness-stat">...</span></p>
+        </section>
+
+        <section id="game-state" class="game-state-wrapper">
+            <!-- game state -> UI 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,152 @@
 console.log('js:loaded')
 
 /*----- constants -----*/
+// init data states, animation names, img asset paths
+// WILL NOT CHANGE
 
-
+// good to put in an obj if you're going to add on more in the future
+const INIT_STATE={
+    boredom: 0,
+    hunger: 0,
+    sleepiness:0,
+}
 /*----- state variables -----*/
+// data that changes while game runs
+
+// let boredom; // interger
+// let hunger; // interger
+// let sleepiness; // interger
+let state;
 
+// icebox features (age cycle)
+let age; // interger
+let cycles; // interger
+
+let timer; // setInterval id
+let interval; // count of cycles
 
 /*----- cached elements  -----*/
 
+const boredomStatEl = document.querySelector('#boredom-stat')
+const hungerStatEl = document.querySelector('#hunger-stat')
+const sleepyStatEl = document.querySelector('#sleepiness-stat')
+
+// TODO: add cache for game msg string once added to game
+
+const gameBtnEls = document.querySelector('#controller button')
+
+// TODO: add cache for restart button after game over
+
 
 /*----- event listeners -----*/
 
+gameBtnEls.forEach(function(btn){
+    btn.addEventListener('click', handleBtnClick)
+})
+function handleBtnClick(event){
+    console.log(event.target.innterText)
+
+    const convertProp = {
+        feed: 'hunger',
+        sleep: 'sleepiness',
+        play: 'boredom'
+    }
+
+    const key = convertProp(event.target.innterText)
+    console.log(key)
+
+    updateStat(key, -3)
+}
+
+/*----- functions -----*/
+
+init() // starts game when JS loads
+
+function init(){
+
+    state = {...INIT_STATE}
+    // taking init state obj -> copy and store
+    age=0;
+    cycles=0;
+
+    interval = 5000; // milliseconds pass for each cycles
+    timer = setInterval(runGame, interval);
+    // TODO: init() on load and after a reset
+
+    // console.log('game has started')
+
+    render()
+} 
+
+// loop func all of logic for game will change state
+function runGame(){
+    if (continueGame()){
+        updateStats()
+    }else{
+        gameOver()
+    }
+}
+
+function render(){
+    // any features which may update the DOM(UI) will be called by render
+    // console.log('rendering game')
+    renderStats()
+}
+
+function renderStats(){
+    // console.log('rendering stats')
+    boredomStatEl.textContent = state.boredom
+    hungerStatEl.textContent = state.hunger
+    sleepyStatEl.textContent = state.sleepiness
+}
+
+function updateStats(){
+    // call iterator over state - for each stae property, update corresponding key
+    // iterate over states {
+        // capture random #
+        // capture
+        // update current
+
+    for (key in state){
+        // OLD CODE
+            // let randomAmount = Math.floor(Math.random()*3)
+            // let currentValue = state[key]
+            // state[key] = currentValue + randomAmount
+            // console.log(key, state[key], randomAmount)
+        updateStat(key, Math.floor(Math.random()*3))
+    }
+}
+
+function updateStat(stat,value){
+
+    // prevent user from inputting negative values
+    if (state[stat] + value >= 0){
+        state[stat] += value;
+    }else{
+        state[stat] = 0;
+    }
+}
+
+function continueGame(){
+    let keepRunning = true
+    let currentStats = {}
+    // check all properties of state
+    // eval if any properties are less than 10
+for (let key in state){
+    currentStats.push(state[key])
+}
+console.log(currentStats)
+    // if 10 or greater, call gameover()
+
+for (let stat of currentStats){
+    if(stat>=10){
+        keepRunning = false
+    }
+    console.log('should I keey going? ' + keepRunning)
+}
+}
 
-/*----- functions -----*/
+function gameOver(){
+    alert('game over!')
+    clearInterval(timer)
+}