{"id":48,"date":"2022-02-14T10:06:50","date_gmt":"2022-02-14T10:06:50","guid":{"rendered":"https:\/\/hamtronmedia.com\/dan\/?p=48"},"modified":"2022-02-14T10:06:50","modified_gmt":"2022-02-14T10:06:50","slug":"puckface-dev-journey","status":"publish","type":"post","link":"https:\/\/djnh.xyz\/dan\/puckface-dev-journey\/","title":{"rendered":"PUCKFACE DEV JOURNEY"},"content":{"rendered":"\n<p>I&#8217;m starting this blog to document my process of creating Puckface. <\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>This time, I&#8217;m going to smash my way through until it works, and then tweak from there.<\/p>\n\n\n\n<p>I first started by creating a blank Next.js App through Vercel \/ Github, then cloning to my CPU from there.<\/p>\n\n\n\n<p>The first 2 issues come up with this process.  You have to own the directory before you can do anything with it. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo chown -R username project name<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/51674627\/insufficient-permissions-in-vscode\">https:\/\/stackoverflow.com\/questions\/51674627\/insufficient-permissions-in-vscode<\/a><\/p>\n\n\n\n<p>Then you can finally run <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n\n\n\n<p>Then you have to run  npm install, to install packages, Next being one of them. <\/p>\n\n\n\n<p>Don&#8217;t forget to add this to next.config.js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  reactStrictMode: true,\n  images:{\n    domains:&#91;'hamtronmedia.com','ipfs.io','lh3.googleusercontent.com']\n  },\n}\n<\/code><\/pre>\n\n\n\n<p>And dependencies are:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"dependencies\": {\n    \"firebase\": \"^9.6.2\",\n    \"next\": \"12.0.1\",\n    \"react\": \"17.0.2\",\n    \"react-dom\": \"17.0.2\",\n    \"react-hot-toast\": \"^2.2.0\"\n  }<\/code><\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>After many struggles with all the css positions, here is what ended up working for me to have the single page app look:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.layoutDiv {\n  background-color: rgb(112, 221, 79);\n  \/* min-height: 100vh; *\/\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \/* display: flex;\n  flex-direction: column; *\/\n}\n.menus {\n  background-color: red;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  bottom: 88%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: stretch;\n}\n.mainDiv {\n  background-color: green;\n  position: absolute;\n  top: 12%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \/* text-align: center;\n    display: flex;\n    flex-direction: column; *\/\n  \/* align-items: center; *\/\n  \/* justify-content: center; *\/\n}\n.mainMenu {\n  background-color: orange;\n\n  \/* left: 0;\n  right: 0; *\/\n  \/* width: 100%; *\/\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.subMenu {\n  background-color: yellow;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.gameContainer {\n  \/* z-index: 2; *\/\n  background-color: rgb(221, 87, 181);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \/* height: 100%; *\/\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  padding: 1%;\n  \/* display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: repeat(6, 1fr);\n  grid-column-gap: 0px;\n  grid-row-gap: 4px; *\/\n}\n\n.cardRow {\n  background-color: aqua;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n  \/* height: 100%; *\/\n  \/* position: absolute; *\/\n  \/* height: 12%; *\/\n}\n.testCard {\n  \/* position: relative; *\/\n  background-color: beige;\n  width: 16%;\n  height: 95%;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n}\n\n.cardImage {\n  \/* height: 75px; *\/\n  width: 50%;\n}\n@media (max-width: 600px) {\n  .testCard {\n    width: 30%;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">I just learned what ephemeral memory is. <\/h2>\n\n\n\n<p>I thought I would emulate the blockchain part with just a json file hosted on heroku. But, I didnt realize it<a href=\"https:\/\/devcenter.heroku.com\/articles\/active-storage-on-heroku\"> doesnt persist <\/a>data!!<\/p>\n\n\n\n<p>So continuing on with Firebase.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">And another day spent working on app flow&#8230;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">And another couple days with troubleshooting&#8230;<\/h3>\n\n\n\n<p>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&#8230;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   let c = '';\n   \n    try {\n        if(game.date instanceof Date){\n            let y = dateReader(game.date);\n            c = y.fullDate;\n        }else{\n            let x = dateReader(game.date.toDate())\n            c = x.fullDate;\n        }\n    } catch (error) {\n        console.log(\"Date Error: \",error);\n    }\n <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">To get out git log press: &#8216;z&#8217; or &#8216;q&#8217;.<\/h3>\n\n\n\n<h2 class=\"wp-block-heading\">And another few days have gone by&#8230;<\/h2>\n\n\n\n<p>I&#8217;ve been continually working on it&#8230;I&#8217;m at a point where the progress is slower because as the project grows, so does the complexity.  It&#8217;s all pretty simple under the hood, but I find I have to juggle alot of balls in my head while tracing errors.<\/p>\n\n\n\n<p>No big tech processes to mention, except how grateful I am for learning REDUCERS!! It sure simplifies things when there&#8217;s lots of state things happening.  But now the app is starting to behave how I want it to&#8230;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&#8217;m going to do a full trace on the state objects somehow. This is maybe a good opportunity to run JS tests&#8230; I&#8217;ll have to automate an api to calculate all games at midnight PST, but until then, the games calculate once they&#8217;re clicked on.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Going to invite 2 testers tomorrow&#8230;<\/h2>\n\n\n\n<p>After I check how the ties calculate and distribute, I&#8217;m calling in 2 buddies to test with. The UI is nowhere near done, but I want to start fixing any inevitable bugs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The timeline is to have all my FB friends test for the playoffs, then launch proper for next season.<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;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&#8217;m going to smash my way through until it [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":0,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"wp:attachment":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}