Dev Diary - Random Stuff

Wanted to release this app since it's been too long. So here's a bunch of things that's changed.

Copy

User Story: As a person hosting a game Wavelength game online, I want to be able to paste in the target value to the guesser without needing to peak at the value.

I did this by implementing copy-to-clipboard, and copying the target value to the clipboard when clicking the Reset or Peak button, and then pasting the value to the guesser in chat. But the copy feature was causing issues on touch devices. It kept trying to copy the value over and over again. Luckily, I know when an event is a Mouse event vs a Touch event, and only copy accordingly.

Responsive

Took the effort to make everything responsive to mobile devices. This was a little tricky with the Gauge component, but luckily since I named all the variable names to based the math off of, I was able to figure out how to calculate the percentages.

Style Guide

Originally I had a folder structure like this:

📁 src/components
 |-📁 gauge
     -📄 Gauge.tsx
     -📄 Gauge.stories.tsx
     -📄 gauge-range.png
     -📄 pointer.png
     -📄 target.png
 |-📁 wavelength
     -📄 Wavelength.tsx
     -📄 Wavelength.reducer.ts & Wavelength.reducer.spec.ts
     -📄 Wavelength.stories.tsx
     -📄 antonyms.ts

But I didn't like it for some reason. Especially when I was ready to add a new component. Then I read Airbnb React/JSX Style Guide and was convinced with how to name and import files. So with that I capitalized the component Folder name, and remove it so all the files are generic, i.e. index.tsx, reducer.tsx, stories.tsx.

📁 src/components
 |-📁 Gauge
    |-📁 resources
         -📄 gauge-range.png
         -📄 pointer.png
         -📄 target.png
     -📄 index.tsx
     -📄 stories.tsx
 |-📁 HeaderNav
     -📄 index.tsx
     -📄 stories.tsx
 |-📁 Wavelength
    |-📁 resources
         -📄 antonyms.ts
     -📄 index.tsx
     -📄 reducer.ts & reducer.spec.ts
     -📄 stories.tsx

Material Icon

Using some Icons with my navigation. Random aside, I get network timeout issues trying to get Material Icons on Windows. So either you gotta

yarn add @material-ui/icons --network-timeout 100000

or cmder. p.s. checkout Seamless VS Code Integration

Deploying App and Storybook to GitHub Pages

Deploying the CRA with the instructions from https://create-react-app.dev/docs/deployment/#github-pages.

Now Storybook is a little tricker. I tried following the instructions at https://github.com/storybookjs/storybook-deployer, but it ended up deploying to the root of GitHub Pages, and therefore overwriting the original app. Not what I was looking for. After messing around with a bunch of things, what I found works is if I build Storybook in the build/docs directory before deploying to GitHub Pages will deploy everything I want.

Update the package.json with the following:

...
"scripts": {
-  "predeploy": "npm run build",
+  "predeploy": "npm run build && npm run build-storybook",
  "deploy": "gh-pages -d build",
  ...
-  "build-storybook": "build-storybook -s public"
+  "build-storybook": "build-storybook --static-dir public --output-dir build/docs",
}

I like to write out the parameter names in package so I know what it's doing when I revisit

Everything Else

I'm sort of too lazy to keep up with this blog. So I'm now keeping track of things I wanna do on the project site. https://github.com/davidhorm/wavelength/projects/1

Break

Taking a break from this project because I have another game I want to implement. We'll see if this blog was useful.