diff --git a/css/style.css b/css/style.css index 134028f..8c35cc5 100644 --- 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); + } +} \ No newline at end of file diff --git a/index.html b/index.html index 18d09e9..3210b35 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,35 @@ Document - + -

Tamagotchi Code Along

+
+

Tamagotchi

+
+
+ +
+ + + +
+ + +
+

Happiness: 10...

+

Hunger: 0...

+

Tiredness: 5...

+
+ + +
+ +
+
+ - \ No newline at end of file + + diff --git a/js/main.js b/js/main.js index f1af6c4..f681f85 100644 --- 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 -----*/ \ No newline at end of file +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) +}