Dev Diary 2020.04.21 – Misc - davidhorm/wavelength GitHub Wiki
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.