From dec762c7005b378cfe9aaa0c5a0551851d0901a0 Mon Sep 17 00:00:00 2001 From: Christian David Date: Fri, 27 Oct 2023 10:46:39 -0400 Subject: [PATCH 1/2] css n html built --- css/style.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 23 ++++++++++++++++++++- 2 files changed, 76 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 134028f..f1f9d32 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,63 @@ /* global styles */ - +*{ + box-sizing: border-box; + +} /* 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; +} +.button-wrapper{ + display: flex; + justify-content: center; + gap: 1rem; +} +.stats-wrapper{ +} +.game-state-wrapper{ + display: flex; + justify-content: center; +} /* headings */ +.game-title{ + text-align: center; -/* buttons */ +} +/* buttons */ +.button-wrapper button { + background-color: rgb(11, 153, 255); + color: white; + padding: 1.3rem 1.5 rem; + font-size: 1.8rem; + border: .2rem solid #134a71; + border-radius: .25 rem; +} +.button-wrapper button:active{ + background-color: #197bc2; + border: .2rem solid #0b3553; +} /* images */ +.game-graphic{ +max-height: 33vmin; +} diff --git a/index.html b/index.html index 18d09e9..d18b1ab 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,28 @@ -

Tamagotchi Code Along

+
+

Tamagotchi Code Along

+ +
+
+ + + + +
+
+ +

Happiness: 10

+

Hunger: 0

+

Tiredness: 5

+
+
+ + +
+ +
\ No newline at end of file From bc84bef591087d22e7ec122fafa92171898d63f2 Mon Sep 17 00:00:00 2001 From: Christian David Date: Fri, 27 Oct 2023 11:20:41 -0400 Subject: [PATCH 2/2] js coming along --- index.html | 2 +- js/main.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index d18b1ab..33196a5 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

Tamagotchi Code Along

Tiredness: 5

- +
diff --git a/js/main.js b/js/main.js index f1af6c4..b9819c1 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,66 @@ console.log('js:loaded') - /*----- constants -----*/ +// initial data states +// animation names +// image assets paths +const INIT_STATE = { + boredom: 0, + hunger: 0, + sleepiness: 0, +} /*----- state variables -----*/ +// state is the data that will change while the game is running​ +// let boredom; // integer +// let hunger; // integer +// let sleepiness; // integer​ +let state; +// 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') + +// TODO: add cache for game message string once added to game​ +const gameBtnEls = document.querySelectorAll('#controller button') +// TODO: add cache for restart button after game over /*----- event listeners -----*/ +/*----- functions -----*/ + +init() // starts game when js loads​ + +function init(){ + // init will start the game and load the initial values for our game state​ + state = {...INIT_STATE} + // taking th init state object -> copy of its content and storing into a new object + // assigning the new object to the state variable + + age = 0 ; + cycles = 0; + interval = 5000; // ms pass for each cycles + timer = setInterval(runGame, interval); // setInterval id + + // TODO / ICEBOX - init() on load and after a reset (optional) + + console.log("game has started") + + // it will also call render() -> dom updates (trigger all render helper function -> updating stats) + render() +} -/*----- functions -----*/ \ No newline at end of file +function runGame(){ + console.log('game is running') +} +function render(){ + console.log('rendering game') +} \ No newline at end of file