PUCKFACE DEV JOURNEY

I’m starting this blog to document my process of creating Puckface.

This is my third attempt at it. Every time I tstart building it out, I figure out a new better way to do things which requires rethinking the whole flow of the app.

This time, I’m going to smash my way through until it works, and then tweak from there.

I first started by creating a blank Next.js App through Vercel / Github, then cloning to my CPU from there.

The first 2 issues come up with this process. You have to own the directory before you can do anything with it.

sudo chown -R username project name

https://stackoverflow.com/questions/51674627/insufficient-permissions-in-vscode

Then you can finally run

npm run dev

Then you have to run npm install, to install packages, Next being one of them.

Don’t forget to add this to next.config.js:

module.exports = {
  reactStrictMode: true,
  images:{
    domains:['hamtronmedia.com','ipfs.io','lh3.googleusercontent.com']
  },
}

And dependencies are:

  "dependencies": {
    "firebase": "^9.6.2",
    "next": "12.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.2.0"
  }

At this point I tested the git commitint, and pushed to production through vercel just to see it takes the updates, and everythings set up correctly.

A big reason Im doing this is because of styling. I ended up with divs all ovefr the polace, and more styling than I wanted, so it was time to simplify down to 3 main divs.

After many struggles with all the css positions, here is what ended up working for me to have the single page app look:

.layoutDiv {
  background-color: rgb(112, 221, 79);
  /* min-height: 100vh; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* display: flex;
  flex-direction: column; */
}
.menus {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  bottom: 88%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: stretch;
}
.mainDiv {
  background-color: green;
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  bottom: 0;
  /* text-align: center;
    display: flex;
    flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
}
.mainMenu {
  background-color: orange;

  /* left: 0;
  right: 0; */
  /* width: 100%; */

  display: flex;
  align-items: center;
  justify-content: center;
}
.subMenu {
  background-color: yellow;

  display: flex;
  align-items: center;
  justify-content: center;
}

.gameContainer {
  /* z-index: 2; */
  background-color: rgb(221, 87, 181);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 1%;
  /* display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 4px; */
}

.cardRow {
  background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  /* height: 100%; */
  /* position: absolute; */
  /* height: 12%; */
}
.testCard {
  /* position: relative; */
  background-color: beige;
  width: 16%;
  height: 95%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.cardImage {
  /* height: 75px; */
  width: 50%;
}
@media (max-width: 600px) {
  .testCard {
    width: 30%;
  }
}

I just learned what ephemeral memory is.

I thought I would emulate the blockchain part with just a json file hosted on heroku. But, I didnt realize it doesnt persist data!!

So continuing on with Firebase.

And another day spent working on app flow…

And another couple days with troubleshooting…

Was having a really hard time with Dates. Saving them to firestore, it converts the date to a timestamp. And only sometimes do I have to ad toDate() to the return var. Until I know whats going ton, I am using this safe way of checking the date into my custom date reader…

   let c = '';
   
    try {
        if(game.date instanceof Date){
            let y = dateReader(game.date);
            c = y.fullDate;
        }else{
            let x = dateReader(game.date.toDate())
            c = x.fullDate;
        }
    } catch (error) {
        console.log("Date Error: ",error);
    }

To get out git log press: ‘z’ or ‘q’.

And another few days have gone by…

I’ve been continually working on it…I’m at a point where the progress is slower because as the project grows, so does the complexity. It’s all pretty simple under the hood, but I find I have to juggle alot of balls in my head while tracing errors.

No big tech processes to mention, except how grateful I am for learning REDUCERS!! It sure simplifies things when there’s lots of state things happening. But now the app is starting to behave how I want it to…Of course there are some minor errors that correct itself if you logout, refresh and then log back in. So, it sounds like I just havw to re-initialize some states somewhere. I’m going to do a full trace on the state objects somehow. This is maybe a good opportunity to run JS tests… I’ll have to automate an api to calculate all games at midnight PST, but until then, the games calculate once they’re clicked on.

I also started working on the card images a it more. I learned some awesome blender python automation techniques which I will DEFINITELY incorporate to make the Puckface images.

Going to invite 2 testers tomorrow…

After I check how the ties calculate and distribute, I’m calling in 2 buddies to test with. The UI is nowhere near done, but I want to start fixing any inevitable bugs.