"Cat or Dog? not a Cow!" is the first online game I made with Nuxt.js

When I showed up at Okinawa Ruby User group meetup at the end of 2018 (for the first time in a long long time), I introduced my 30%-finished little game I was making with Nuxt.js to learn and I, kind of, told everyone I am going to finish this. So. # What I made [Cat or Dog, not a cow! (https://neko-inu.com)](https://neko-inu.com) <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjILTdVqJt8RPyvP2nd_CA1XGkmPUfGjj7j6UcgkTiYWbivzEjlqQksJ3Xlg48SQJxXiL1n0NYNHkKUfm7vGfE1stMsdBeZwAxVTOiFYsxwcIxN_6iNV63P4FF9KAYt4YY6j15o2icFwN0/s640/catordog.png" width="363" height="640" data-original-width="375" data-original-height="662" /> ### Cat or Dog? I picked the name hoping to acquire HUGE AUDIENCE by the combination of super popular keywords! Originally it was "Pizza or Hamburger". I changed my mind when I saw their cute drawings at [irasutoya.com](https://www.irasutoya.com/). ## How to play At first, you should turn SOUND ON. It is good/essential to know when you tapped something by hearing, for a better UX. - Tap or click one of the raccoons (gently). - If the raccoon changed to a Cat or Dog, you get a point. - If the raccoon was a Cow actually, you get a cow head. - When you have too many cow heads, the game will be over. - You can go to a nice flower garden, when you have a new high score. - You go to hell when you failed to get a new high score. - You go to the moon, when you broke World Record. If you find yourself on a plane accidentally landed on Mars when you are playing, you should play this game on your smartphone. ## Tools I used - [nuxt](https://nuxtjs.org/) => To avoid making things from scratch. - [firebase hosting](https://firebase.google.com/docs/hosting/) => To host. - [realtime database](https://firebase.google.com/docs/database/) => Saving World Record. - [vuetify.js](https://vuetifyjs.com) => Layout and icons. - [irasutoya.com](https://www.irasutoya.com/) => Animal images and background. - [garage band](https://www.apple.com/lae/mac/garageband/) => BGM and sound effects. ## The things I wish I had known before start making this (aka what I learnt). ### Software Framework can save you from making things from ground and start quick. However, you should know there are some rules/convention of the framework to follow to receive the benefit. #### Know the scope There were multiple times I had trouble utilizing some data because they are simply not in the data scope from where you are. Importing the data from file A to file B each time is cumbersome and make the whole thing difficult to manage, not a good idea. So I defined some status and variables in Vuex in /store/index.js file. Status like - User had a new high score. Data like - Audio instances. Otherwise you can not play/stop the music from different components. It worked as the way I want it to work but I am not sure if this is how experienced people do. ``` // store/index.js const createStore = () => { return new Vuex.Store({ state: { isNewHighScore: false, bgSong: {} }, mutations: { setIsNewHighScore(state) { state.isNewHighScore = true; }, setBgSong(state) { state.bgSong = new Audio("lucky_game.mp3"); state.bgSong.loop = true; state.bgSong.volume = 0.3; } } } ``` Call the mutation methods from index.vue to initialize the data. ``` // pages/index.vue methods: { init() { this.initSongs(); }, initSongs() { this.$store.commit("setBgSong"); // Other songs and sound etc.. } } ``` The block appears when a user has a new high score. ``` // pages/index.vue <div v-if="$store.state.isNewHighScore"> A NEW HIGH SCORE! </div> ``` Knowing which data is global and which is scoped to a file or a block beforehand, that would help reduce the work for newbies like you (== me). However you can not know the whole picture before you start making things specially if you are a newbie to the stuff you are working on. So always be ready and good at adjusting to newly found condition. THAT will help you more. (By the way, I am wondering anyone can beat my best score 50.) ### SPA is different from regular html websites. - There are 2 places where your code be executed. Server side and Client side. You should be knowing where your code is. - I copied [some example codes](https://firebase.google.com/docs/storage/web/create-reference) from THE google firebase document page and found they never run without error in my app. I didn't know I was trying to run the code on server side until a nice person replied to my SOF question [I am trying to use the Cloud Storage for Firebase client library on a server](https://stackoverflow.com/a/54015966/4952504)」. - GoogleBot basically does not render javascript rendered parts (right?). Which means the pages which is NOT pre-rendered on server side is not showing up on SERP. - ```nuxt-link``` and ```$router.push(path)``` might not load page contents at certain condition. I could not figure out how to move between a page from another programmatically (I googled for 3 days). It always worked in the tutorials I did but not in my app, sadly. I tried a lot of stuff. one of them was "watch" as in this [issue](https://github.com/nuxt/nuxt.js/issues/2737). I still am not sure if my code was not right or you need a kind of data interaction on the next page to load the page contents, etc... I did it without page transition (= modal windows!). ### Browsers act in unexpected ways, sometimes. Specially mobile browsers. - My CSS animation in modal windows did not work on mobile safari and chrome until I delayed its start for 0.5s. The mobile browsers are not good at multi-tasking. - Playing audio in setTimeOut do not work. It starts to play too early or too late. I forgot which. - It takes more time for mobile browsers to load images (right?). You should preload all images, which I haven't implemented yet. You will notice it by seeing background images in modal window show up half sec late. I should have done this with canvas in the first place? Anyway, I can not help admiring mobile developers doing a lot of work to make their app work in mobile browsers! ### firebase hosting is super easy. - Once you [set up](https://www.davidroyer.me/blog/nuxtjs-firebase-auth/) and made sure your app can run without error, you can deploy your app to firebase hosting with these commands. ```npm run build && npm run generate && firebase deploy``` Linking to a domain was easy enough. You will get all the necessary information in the process such as TXT records and IP address. All you have to do is just copy and paste the info to DNS records through your domain management service and wait for an hour or less and tada! [neko-inu.com](https://neko-inu.com) (neko means cat. inu means dog in Japanese.) ### You NEED sound effects - In a game, unless you have elaborated nice visual effects, sound feedback when a button is pushed is crucial for users to know what is going on on the screen. - Plus, having nice music while playing is just nice. I asked someone near me to play MIDI keyboard and I tweaked the data later with garage band. It was fun. ### Good images are good - I am feeling so lucky we have [irasutoya.com](https://www.irasutoya.com/) on this planet. And their generous usage license! <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMFb9koF66qMFnETqx18VK2BxlUChyphenhyphen_trlcO0qYQwMShiGR2bVM-E1XDwFyp1MmwgqLzwpRzJU0Mk-J1HRZiaYwGwQXpHxgorGEV9k2kZikWVodlRWTjvScs30zopa01VLDIcVUvgUIOk/s320/medical_kaibou_uchujin.png" width="320" height="320" data-original-width="800" data-original-height="800" /> ## The things I wish I do after this (aka todo list) - make the app progressive and see what offline app is like. - Notify EVERYONE when someone broke the world record with [Cloud message](https://firebase.google.com/docs/cloud-messaging/). I mean everyone who wanted to be notified. ## Tutorials I tried - [udemy - Nuxt.js - Vue.js on Steroids](https://www.udemy.com/nuxtjs-vuejs-on-steroids/) - [Firebase Web Codelab - Friendly chat](https://codelabs.developers.google.com/codelabs/firebase-web/#0) By the way, if you are happened to be on the island called Okinawa in Japan, you should stop by [Okinawa.rb Users Group meetup](https://okinawarb.doorkeeper.jp/events/upcoming). They are always welcoming new people. I am so grateful they treat me like a programmer! See what I can do!