SEIR-1016-EC · toastyThink · 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,144 @@
-/* global styles  */
 
+  /* auto calculates the remaining spce available, whats left over after calculating content size
+    this includes padding, margin, border */
+
+/* global styles  */
+*{
+    /* box-sizing: border-box; */
+}
 /* element styles */
+body{
+    /* fonts */
+    margin: 0;
+    min-height: 100vh;
+    /* border: 1px solid red; */
+    background-color: #e6e6e6;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    /* referance size for rem units (16px) */
+}
+
+h1{
+font-size: 3.5rem;
+/* margin:0; */
 
-/* layout */
+}
 
+/* layout */
+.container{
+ width: 90vw;
+ margin: 0 auto 0 auto;
+}
+.button-wrapper{
+    display: flex;
+    justify-content: space-around;
+    gap: 1rem;
+}
+.stats-wrapper{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    text-align: center;
+}
 /* headings */
+.game-title{
+text-align: center;
+}
 
+/* 11 153 255 */
 /* buttons */
+.button-wrapper button{
+    max-height: 20vmin;
+    background-color: rgb(11, 153, 255);
+    color:white;
+    padding: 1.3rem;
+    font-size: 1.8rem;
+    border: .2rem solid ;
+    border-radius: .25rem; /*4px*/
+}
+
+.button-wrapper button:active{
+    max-height: 20vmin;
+    background-color: rgb(27, 82, 121);
+
+}
+
+#restart{
+    max-height: 20vmin;
+    background-color: rgb(11, 153, 255);
+    color:white;
+    padding: 1.3rem;
+    font-size: 1.8rem;
+    border: .2rem solid ;
+    border-radius: .25rem; /*4px*/
+}
+#restart:active{
+    background-color: rgb(27, 82, 121);
+}
+
 
 /* images */
+.game-graphic{
+    max-height: 33vmin;
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.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 */
+    border: 10px solid salmon;
+
+    animation: shake 0.5s;
+
+    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,31 @@
 </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-->
+             <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-->
+            <h2 id="tama-message" class="hidden">Oh no! <span id="message-content">You starved!</span></h2>
+            <img id="tama-graphic" src="./imgs/wolf-1.png" class="game-graphic">
+            <button id="restart" class="hidden">Play Again</button>
+        </section>
+    </main>
 </body>
 
 </html>
diff --git a/js/main.js b/js/main.js
@@ -1,15 +1,206 @@
-console.log('js:loaded')
 
-/*----- constants -----*/
+//use for of loops for iterating in arrays 
+//use for in loops for iterating in objects
+
+/*----- constants -----*
+//initial data states 
+//animation names 
+//image assets paths
 
 
 /*----- state variables -----*/
+//state is the data that will change while the game is running
+let boredom;  //integer
+let hunger; //integer
+let sleepiness; //integer
+
+const INIT_STATE = {
+     boredom: 0,  //integer
+     hunger: 0, //integer
+     sleepiness: 0
+};
 
+//HFM later on - icebox features (age cycle for tama)
+let age;
+let cycles;
+
+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');
+
+//In game messages
+
+const gameMessageEl = document.querySelector('#tama-message')
+
+//TODO: add ache for game message string once added to game
+const gameBtnEls = document.querySelectorAll('#controller button')
+const gamePlayAgainEl = document.querySelector('#restart');
+
+//TODO: add cache for restart btton after game over
 
 /*----- event listeners -----*/
 
 
-/*----- functions -----*/
+gameBtnEls.forEach(function (btn){
+    btn.addEventListener('click', handleBtnClick)
+});
+
+gamePlayAgainEl.addEventListener('click', init)
+
+//icebox -after a click remove th lisener and then add it back 2 seconds later
+//throttle the user and rpevent spammming
+
+function handleBtnClick(event){
+    console.log(event.target.innerText)
+
+        const convertProp = {
+            feed: 'hunger', 
+            sleep: 'sleepiness', 
+            play: 'boredom'
+        }
+    const key = convertProp[event.target.innerText]
+
+    updateStat(key, -3);
+    render();
+}
+
+
+
+
+/*----- functions -----*/
+
+init(); //starts game
+//init will start the game and load the initial value for our game state
+//init() on load and after a reset (optional)
+//it will also call render() -> dom updates
+
+
+//it will also call rend() -> dom updates (trigger all redner hekoer functyions -> updateing stats0)
+render() 
+
+
+function init(){
+
+    resetUI();
+
+    age = 0;
+    cycles = 0;
+
+    interval = 500; //make sure to set values of params before functions are declared
+    timer = setInterval(runGame, interval)
+
+    state = {...INIT_STATE}
+    //taking the init state objec t-> copy of its conent and storing into a new object
+    //assinging the new object tot he state varible
+
+    render();
+
+    console.log(state);
+}
+
+function runGame(){
+    if (continueGame()){
+        updateStats();
+    }else{
+        gameOver();
+    }
+
+}
+
+function render(){
+//any featuers that might update DOM (UI) -> will be called by render
+
+    renderStats()
+}
+
+function renderStats(){
+boredomStatEl.textContent = state.boredom;
+hungerStatEl.textContent = state.hunger;
+sleepyStatEl.textContent = state.sleepiness;
+
+//icebox - consider iterator for dnsmic render of content
+}
+
+
+function updateStats(){
+    //call iterator over state and for each state property update the corresponding keu
+    //iterate over stat {}
+    //capture random number
+    //update current 
+
+    for(key in state){
+
+        updateStat(key, Math.floor(Math.random()*3))
+    }
+}
+
+ function updateStat(stat, value){
+    //error bounding in code - prevent users from lowering stat belower 0
+    if(state[stat]+value >= 0){
+        state[stat] += value;
+    }else{
+        state[stat] = 0;
+    }
+}
+
+function continueGame(){
+    //check all properties of state
+    //evaluate if any of those values are less than ten
+
+    //if any of them are 10 or more, then call gameOver
+    let keepRunning = true;
+    let currentStats = [];
+
+    for(let key in state){
+        currentStats.push(state[key])
+    }
+
+    for(let stat of currentStats){
+        if(stat >=10){
+            keepRunning = false; 
+        }
+    }
+
+    console.log(currentStats);
+    return keepRunning;
+
+}
+
+
+
+function gameOver(){
+
+    //the way to get ethe game to end is to stop the initialising
+    //ie stop the timer from runnig 
+
+    clearInterval(timer); 
+    //stop the interval calling runGame when gameOver is called
+
+    gamePlayAgainEl.classList.remove('hidden');
+    gameMessageEl.classList.remove('hidden');
+
+
+}
+
+function resetUI(){
+    //hides reset buttons, and losing message
+
+    gamePlayAgainEl.classList.add('hidden'); 
+    gameMessageEl.classList.add('hidden');
+}
+
+
+ /** 
+  *         previous updateStats function
+  *  // let randomAmount = Math.floor(Math.random()*3) //engine for update state
+        // let currentVlaue = state[key]; //current state value
+        // state[key] = currentVlaue + randomAmount; //updating state with new value
+        // console.log(key, randomAmount); //test
+  * 
+  * 
+ */