From 80360b3b0c0957763a7335c881f508c6a4a5550a Mon Sep 17 00:00:00 2001 From: honeybee Date: Fri, 27 Oct 2023 10:45:37 -0400 Subject: [PATCH 1/3] populate html and basic styling --- css/style.css | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 39 +++++++++++++++++++++++++++++---------- 2 files changed, 78 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 134028f..7f9888a 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,59 @@ /* 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: 33vmin; +} diff --git a/index.html b/index.html index 18d09e9..aa12a3a 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 +
+ + +
+
+ + From 15d01e9b5514b912845ac91ac66e953b5d4afc61 Mon Sep 17 00:00:00 2001 From: honeybee Date: Fri, 27 Oct 2023 11:15:32 -0400 Subject: [PATCH 2/3] populate init values for game in js --- css/style.css | 25 +++++++++++++++++++++++-- js/main.js | 43 ++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 7f9888a..c51b721 100644 --- a/css/style.css +++ b/css/style.css @@ -54,6 +54,27 @@ h1 { } /* images */ -.tama-graphic { - max-height: 33vmin; + +#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/js/main.js b/js/main.js index f1af6c4..c400918 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,56 @@ 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 sleepytatEl = document.querySelector('#sleepiness-stat') +const gameBtnEls = document.querySelector('#controller button') /*----- event listeners -----*/ -/*----- functions -----*/ \ No newline at end of file +/*----- functions -----*/ + +init(); + +function init() { + state = { ...INIT_STATE }; + + age = 0; + cycles = 0; + + interval = 5000; + timer = setInterval(runGame, interval); + + render(); + } + + function runGame() { + console.log('Game is running') + } + function render() { + console.log('rendering game') + } From 692308db60a4e4e0bad5ae6b5b804d93ce2e27bc Mon Sep 17 00:00:00 2001 From: honeybee Date: Fri, 27 Oct 2023 13:27:11 -0400 Subject: [PATCH 3/3] event listeners --- index.html | 2 +- js/main.js | 117 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 91 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index aa12a3a..028b01b 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@

Tamagotchi

-
+
diff --git a/js/main.js b/js/main.js index c400918..4f39d50 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,14 @@ -console.log('js:loaded') +console.log("js:loaded"); /*----- constants -----*/ const INIT_STATE = { - boredom: 0, - hunger: 0, - sleepiness: 0, - }; - + boredom: 0, + hunger: 0, + sleepiness: 0, +}; /*----- state variables -----*/ -let state +let state; let boredom; let hunger; let sleepiness; @@ -20,37 +19,101 @@ let cycles; let timer; let interval; - - /*----- cached elements -----*/ -const boredomStatEl = document.querySelector('#boredom-stat') -const hungerStatEl = document.querySelector('#hunger-stat') -const sleepytatEl = document.querySelector('#sleepiness-stat') +const boredomStatEl = document.querySelector("#boredom-stat"); +const hungerStatEl = document.querySelector("#hunger-stat"); +const sleepyStatEl = document.querySelector("#sleepiness-stat"); -const gameBtnEls = document.querySelector('#controller button') +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(); + 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 runGame() { - console.log('Game is running') +function updateStat(stat, value) { + if (state[stat] + value >= 0) { + state[stat] += value; + } else { + state[stat] = 0; } - function render() { - console.log('rendering game') +} + +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); + + location.reload(); +}