diff --git a/css/style.css b/css/style.css index 134028f..c51b721 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,80 @@ /* global styles */ - +* { + box-sizing: border-box; +} /* element styles */ +body { + margin: 0; + min-height: 100vh; + background-color: rgb(212, 165, 243); + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; +} +h1 { + font-size: 3.5rem; + margin: 0; +} + /* layout */ +.container { + /* border: 3px solid blue;*/ + width: 90%; + margin: 0 auto; +} +.button-wrapper { + display: flex; + justify-content: center; + gap: 1rem; +} +.stats-wrapper { + +} +.game-state-wrapper { + display: flex; + justify-content: center; +} + /* headings */ +.header-title { + text-align: center; + +} /* buttons */ +.button-wrapper button { + color: white; + background-color: rgb(136, 29, 237); + padding: 1.3rem; + font-size: 1.8rem; + border: .2rem solid rgb(87, 6, 154); + border-radius: .25rem; +} + /* images */ + +#tama-graphic { + max-height: 32vh; +} + +#tama-graphic:hover { + 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 index 18d09e9..028b01b 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,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..4f39d50 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,119 @@ -console.log('js:loaded') +console.log("js:loaded"); /*----- constants -----*/ - +const INIT_STATE = { + boredom: 0, + hunger: 0, + sleepiness: 0, +}; /*----- state variables -----*/ +let state; +let boredom; +let hunger; +let sleepiness; + +let age; +let cycles; +let timer; +let interval; /*----- cached elements -----*/ +const boredomStatEl = document.querySelector("#boredom-stat"); +const hungerStatEl = document.querySelector("#hunger-stat"); +const sleepyStatEl = document.querySelector("#sleepiness-stat"); +const gameBtnEls = document.querySelectorAll(".controller-button"); /*----- event listeners -----*/ +gameBtnEls.forEach((btn) => btn.addEventListener("click", handleBtnClick)); + +/*----- functions -----*/ +function handleBtnClick(e) { + + const convertProp = { + feed: "hunger", + sleep: "sleepiness", + play: "boredom", + }; + + + const btnText = convertProp[e.target.innerText]; + + + const newValue = -1 * (3 + Math.floor(Math.random() * 3)); + + + updateStat(btnText, newValue); + + + 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 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 continueGame() { + const testGame = Object.values(state).every((stat) => stat < 10); + return testGame; +} + +function runGame() { + cycles++; + + if (continueGame()) { + updateStats(); + } else { + return gameOver(); + } + + render(); +} + +function gameOver() { + alert("Game Over!"); + clearInterval(timer); -/*----- functions -----*/ \ No newline at end of file + location.reload(); +}