# Project Steps
## SET UP
### Create your pitch
[pitch link](https://hackmd.io/KEtIW1JYSEGS-3Mu78xN9A)
- MVP vs Stretch vs Icebox
- Wireframes
### Create your local project
To create a new project, cd to the location you want to create your new project; I'll use my SEI Unit 1 folder to start.
> **You can skip this step if you already have a directory with a README set up on your machine.
> Confirm it is a git repo and has a README by running `ls -a`**
Create the directory and move into it:
```bash
mkdir tamagotchi-project
cd tamagotchi-project
git init
```
> *Change your branch from master to main with this command*:
> `git branch -M main`
Create the necessary file structure & files:
```bash
mkdir scripts styles
touch index.html scripts/main.js styles/main.css README.md
```
After making changes to the files, it's time to git add & commit:
```bash
git add .
git commit -m "add pitch to readme"
```
### Create your remote project
Create a new repository on github, give it a name, keep the view setting on "public", and ***DO NOT*** add a README file. There is already a README on our local project, so if we create one online we will have divergent histories and it will be more difficult to link the projects.
After creating the github repo you should see a screen of setup options, and the desired url will be visible in a few places.
Save that url to your clipboard so we can use it in the next step.
### Link the remote and local projects
Create an origin stream for our local project with this command, replacing my url argument for your own:
```bash
git remote add origin https://github.com/aprilkrg/tamagotchi.git
```
Running this command will show the online repos your project has streams to, so confirm the origin has been set:
```bash
git remote -v
```
Now that we've set the origin, we can push. In previous steps we added and committed so we can skip that this time - *but when in doubt run a full git add commit & push cycle!*
```bash
git push origin main
```
Confirm that the work on your local repo has been pushed to the remote repo by going back to your github page and refreshing. You should now see your file structure and the latest commit message.
The repository set up is complete! Next steps could be setting up the html boilerplate and linking the scripts and styles, or psuedocoding.
### Connect files
Example of deferred script and google font link tags in an HTML head.
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2 family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
<link href="./styles/main.css" rel="stylesheet" />
<script defer src="./scripts/main.js"></script>
<title>TAMAGOTCHI</title>
```
## PSUEDOCODE
### Ideas
Gameplay steps:
- player starts game
- the character stats start to decrement
- the player can increment stats by interacting with buttons
- when a stat is decreased, check for a 0 value; if 0 the game has been lost
- use a timer to track how long the game has lasted; when it reaches a set value the game has been won
- after a win or loss the user gets a chance to play again with reset values
**Function:**
start game
change stat
check for end of game
reset
**Form:**
stat buttons
stat bars
reset button
win message
instructions
### Planning
Character class:
- play, eat, sleep levels (10 max)
- static empty object so we can share information between classes
- method to increase each stat levels up to 10
Game class:
- timer set to null
- static empty object, and variables initialized as null for the intervals
- method to increment time attribute
- method to set (2) interval timers for the game time and stat change
- method to handle stat change on button click
- method to check for game over conditions
Render function:
- select dom elements to render: stats and timer
- set the inner text of the stat p tag to the characters current stat level
- set the width of the stat using rems and concatenation
- set timer html element to current game time
- only render if game isn't over
DOM Content Loaded function:
- create new instances of Game and Character classes
- set new instances as static obj value on each class
- select dom elements to use for event listeners: buttons
- add event listeners to start and stats button on start click
- invoke game start method
- loop over stat buttons to attach listener that invokes character method to increase stat
- invoke render
- add event listener to reset button on reset click
- create new class instances
- set start btn and msg to original settings
- invoke render
Let's use classes for the character and the game. We'll create the classes first, then use the dom content loaded function to create new instances of those classes. The character class will be responsible for increasing it's own stats, the game class will be responsible for decreasing stats.
<!-- #### meta considerations
- show them to create good frequent commit messages
- use branches
- tell them about the css reset
- -->
## PLANNING
## Semantic HTML
- one div to contain them all...
- split board up into 3 cards
- top hold game instructions, start button, and game time
- middle holds character stats and stat buttons
- bottom holds reset button
- split middle div into (2) sections for the stats and btns
- give btns an id, and the stat btns also get a class
- use p tag to display stats
- target specific innerText by using a span for the game time
## Styling
### CSS Reset
Creates a clean base to build css on across browsers by resetting their default styling.
```css
* {
margin:0;
box-sizing: border-box;
}
```
### CSS Variables
Example of variable creation and use:
```css
:root {
--green-blue: #7BE1C9;
--yellow-green: #C3E791;
--celeste: #B9EEEA;
--pink: #fde2e4;
--lavender: #cddafd;
}
button {
color: black;
background-color: var(--green-blue);
}
```
## Javascript
Create a connection check console log statement, and comments to guide our psuedocode.
```javascript!
console.log("good morning developers")
// character class
// game class
// render function
// dom content loaded function
```
Load that in the browser from your VSCode by using the 'open in browser' or 'Live Server' extension (*Live Server will be nice for seeing style changes immediately*). Then open your dev tools console to read your message - if you see it you're good to go! If not, that means your files are not linked; check the files are saved and that you've written the html script correctly.
### Organization
Comments to organize our classes:
```javascript
class ... {
// === ! STATIC VARS ! === //
// === ! CONSTRUCTOR ! === //
constructor() {
console.log(this)
}
// === ! METHODS! === //
}
```
And create our DOMContentLoaded function:
```javascript
document.addEventListener("DOMContentLoaded", function() {
console.log("main.js loaded")
// === ! CREATE CLASS INSTANCES ! === //
// === ! DOM VARIABLES ! === //
// === ! EVENT LISTENERS ! === //
}
```
A process that will promote debuggability of our code will be to start with the game logic of the classes, and focus on their interactions. We'll build Classes and invoke their creation and other methods in the dom content loaded function so that we can access that data in the dev tools console. We can test things there.
Once we have the game logic to MVP we'll move onto rendering the data on the DOM in a useful way. We'll create DOM variables and set their values to properties from the classes.
We can scaffold our testing by first displaying the data onto the DOM, and once we can do that then we invoke functions in the dev tools console and work to get the DOM to respond to the changing values, then we'll attach that functionality to buttons.
Finally we'll work on a function to figure out the control flow of all the functions and connect them to event listeners and set intervals, leaving styling for last.
### Classes
Each class should handle the data changes for itself, and to invoke those functions we'll save the instances of our classes as static properties on each class.
Character Class
```javascript
class Character {
// === ! STATIC VARS ! === //
static charObj = {}
// === ! CONSTRUCTOR ! === //
constructor() {
this.name = "pet"
this.playLevel = 10
this.eatLevel = 10
this.sleepLevel = 10
console.log(this)
}
// === ! METHODS! === //
increaseStatLevel(event) {
console.log("increase stat invoked", event.target)
}
}
```
Game Class
```javascript
class Game {
// === ! STATIC VARS ! === //
static gameObj = {}
static timerInterval = null
static statInterval = null
// === ! CONSTRUCTOR ! === //
constructor () {
this.timer = null
console.log(this)
}
// === ! METHODS! === //
gameTimer() {
console.log("timer tick toc")
}
handleStatChange() {
console.log("handle stat change invoked")
}
gameStart() {
console.log("game start invoked")
// increases the game time
// decreases the stats of the character
}
gameOver() {
console.log("game over invoked")
// === ! LOSE CONDITION ! === //
// === ! WIN CONDITION ! === //
}
}
```
Sign in with Wallet
Connect another wallet