The Booster shot put me down

It’s 3:20 am. After tossing and turning for about 3 hours, I got up to do two things: write this, and drink some water – let’s help my kidneys get rid of any wastes that’s contributing to how bad I was feeling.
So I have an early day today. Around 9pm yesterday, I broke a 10mg melatonin tablet into two, downed one half, put the other half in the pills bottle, changed my mind, got the remaining half out of the bottle and sent it down the hatch with some water as well.
Then I went to bed around 11pm. Read part of a book I borrowed from the Libby app on my iPhone courtesy of the Lehi public library. Finally turned in around 11:30pm. I like some white noise so I had one of those 10-hour rain video on YouTube playing on the TV.
First thing I noticed was I was shivering like crazy. So I doubled up on the blanket (one on top of another on top of me). Didn’t do a lot. I finally fell asleep.
At some point I dreamt about what it would be like to have powers like the Greek gods of old. I am sure this is due to the book. I was on book 3 of the “Olympus Bound” trilogy by author Jordanna Max Brodsky. (Book 3 of the series).
All this while, I believe I was partially awake because I knew I was feverish and tossing and turning and rubbing my legs together – good thing I sleep alone, but not so good in the sense of “bros, at your age, you are still single?”.
Just before I got up I started “dancing” (in my mind) to the song Essence by Wizkid (and no I didn’t remember who sang it or the title at the time). Which triggered an idea for something I have been thinking of, and putting off for a couple of years. I even have an alarm on my phone to go off at 3pm weekdays with the message “Do the video”. Each of the video clips will go on my YouTube channel and possibly TikTok, Instagram, and Snapchat. It will consist of me dancing to a popular song cutting across culture, country, currency, and genres (got tired of looking for that fourth “C” word 🙂 ). Anyway I will be dressed all in black, with a white plastic face mask, the official video of the song will be playing on the TV behind me. Near the one minute mark a voice in Yoruba will say something like “bros, oya, let’s come and be going” to which I stop, cuff my hand behind my ear like I was listening, waive then walk out of the video frame.
I knew I had a thermometer around here somewhere but it took a minute to find it. I got it off eBay so not sure how accurate it is. It read 35.5C when I put it on, rinsed it, stuck it under my tongue, pulled it out when it started beeping. It read 37.9C.
Time to drink that water, get back in bed and try to sleep. I get up at 6:50am and it’s 3:37am now. First COVID shot, the effect was really mild, with the second shot I had a mild fever throughout the next day. But this booster shot put me down: wiped the floor with me.

Still awake at 4:30am
PS: I should have taken paracetamol to lessen the fever but it didn’t cross my mind 5:30am. So I definitely take some of the blame for how shitty I felt.

Porting Replit (Phaser) game to IONIC/ANGULAR

I mentored three D-Tech high school student over two weeks that came up with the game  https://blank-game.lorenzoharrold.repl.co/

Source code available at https://replit.com/@LorenzoHarrold/blank-game#index.html (requires invitation)

I decided to investigate how to port it to a locally hosted environment as well as the possibility of generating an Android/IOS from the code.

(Phaser is a JavaScript game development library)

– Setup the game development environment on CentOS/OEL 8.x or Mac OSX

[opc@phaser ~]$ sudo firewall-cmd –add-port=8000-8199/tcp
[opc@phaser ~]$ sudo firewall-cmd –add-port=8000-8199/tcp –permanent
[opc@phaser ~]$ wget https://download-ib01.fedoraproject.org/pub/epel/8/Everything/x86_64/Packages/s/screen-4.6.2-12.el8.x86_64.rpm
[opc@phaser ~]$ sudo yum localinstall -y screen-4.6.2-12.el8.x86_64.rpm
[opc@phaser ~]$ sudo setenforce 0
[opc@phaser ~]$ sudo yum install -y curl wget git

– You can download the MAC OSX installer or zip file from https://nodejs.org/ (e.g., node-v16.13.0-darwin-x64.tar.gz)

[opc@phaser ~]$ wget -O node-v16.13.0-linux-x64.tar.xz “https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz
[opc@phaser ~]$ VERSION=v16.13.0
[opc@phaser ~]$ DISTRO=linux-x64
[opc@phaser ~]$ sudo mkdir -p /usr/local/lib/nodejs
[opc@phaser ~]$ sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs
[opc@phaser ~]$ sudo chown -R opc:opc /usr/local/lib/nodejs
[opc@phaser ~]$ cp .bash_profile .bash_profile.org
[opc@phaser ~]$ cat >> .bash_profile <<EOF
# Nodejs
VERSION=v16.13.0
DISTRO=linux-x64
export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH
CAPACITOR_ANDROID_STUDIO_PATH=/home/opc/android-studio/bin/studio.sh
export LANG=en_US.UTF-8
EOF
[opc@phaser ~]$ 

– NOTE: on Mac OSX, the default shell is zsh, so the profile file is .zprofile and not .bash_profile

[opc@phaser ~]$ . ~/.bash_profile
[opc@phaser ~]$ rm -rf .npm-global
[opc@phaser ~]$ npm –version
8.1.0
[opc@phaser ~]$ npm i -g @ionic/cli
[opc@phaser ~]$ /usr/local/lib/nodejs/node-v16.13.0-linux-x64/bin/ionic –version
6.18.1
[opc@phaser ~]$ npm remove -g  formidable@1.2.6
[opc@phaser ~]$ npm i -g formidable@v3


--- Install Angular globally. Alternatively, you can install it per project
aitayemi@aitayemi-mac ~ % npm install -g @angular/cli
aitayemi@aitayemi-mac ~ % npm install -g @angular/core

—- List globally installed packages (“npm ls”  in the top level directory of a project will list only packages installed in that project)

aitayemi@aitayemi-mac ~ % npm ls -g
/usr/local/lib/nodejs/node-v16.13.0-darwin-x64/lib
\__ @angular/cli@13.0.3
\__ @angular/core@13.0.2
\__ @ionic/cli@6.18.1
\__ corepack@0.10.0
\__ formidable@3.1.3
\__ npm@8.1.4

——————- PORTING THE EXISTING SCAVENGER GAME FROM REPLIT —————-

—– create a blank Ionic project

aitayemi@aitayemi-mac ~ % ionic start scavenger blank –type=angular
aitayemi@aitayemi-mac ~ % cd scavenger
aitayemi@aitayemi-mac scavenger % npm audit fix 
aitayemi@aitayemi-mac scavenger % 

—– INSTALL phaser into the project, then update index.html to use a local copy (alternative to downloading the phaser from the repl.co as configured in the index.html)
aitayemi@aitayemi-mac scavenger % npm install -D phaser
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % cp node_modules/phaser/dist/phaser.min.js src/assets

———- COPY the replit game files from replit to the assets sub-folder ————————–
– index.html goes in the src folder, while all other files go in the src/assets folder 

aitayemi@aitayemi-mac scavenger % ls
angular.json            e2e                     karma.conf.js           package-lock.json       src                     tsconfig.json
capacitor.config.ts     ionic.config.json       node_modules            package.json            tsconfig.app.json       tsconfig.spec.json
aitayemi@aitayemi-mac scavenger % ls src
app             assets          environments    global.scss     index.html      main.ts         polyfills.ts    test.ts         theme           zone-flags.ts
aitayemi@aitayemi-mac scavenger % ls src/assets
GridLayout.js           addons.js               endPage.jpg             firespritesheet.json    inhouse2.jpg            phaser.min.js           sounds                  wall-e.jpg
Scene1.js               brick.png               finalBook.png           firespritesheet.png     main.js                 robot01.png             spritesheet.json        well.png
Scene2.js               broken_robot.png        fire_spritesheet.json   helper.js               open-book.png           robot_sprite.png        spritesheet.png
SimpleScene.js          dude.png                fireezgif.png           icon                    openbook.png            seedPack.png            tilesets
aitayemi@aitayemi-mac scavenger % ls src/assets/tilesets
door.png        floor.png       green.png       hazard.png      mario.png       purple.png      stair.png
aitayemi@aitayemi-mac scavenger % ls src/assets/sounds
terminator2b.mp3
aitayemi@aitayemi-mac scavenger %

————- remove dependency on Replit by downloading the various Javascript files referenced in index.html to the src/assets folder and updating the index.html to reference the local files instead

aitayemi@aitayemi-mac scavenger % curl -o src/assets/phaser.js https://game-lib.leonyoung.repl.co/phaser.js   (optional since we will use the installed phaser.min.js file)
aitayemi@aitayemi-mac scavenger % curl -o src/assets/helper.js https://game-lib.leonyoung.repl.co/helper.js
aitayemi@aitayemi-mac scavenger % curl -o src/assets/addons.js https://game-lib.leonyoung.repl.co/addons.js
aitayemi@aitayemi-mac scavenger % curl -o src/assets/GridLayout.js https://game-lib.leonyoung.repl.co/GridLayout.js
aitayemi@aitayemi-mac scavenger % curl -o src/assets/SimpleScene.js https://game-lib.leonyoung.repl.co/SimpleScene.js

——– EDIT index.html to update the location of relevant files including Scene1.js and Scene2.js scripts:
aitayemi@aitayemi-mac scavenger % grep script src/index.html
    <script src=”https://game-lib.leonyoung.repl.co/phaser.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/helper.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/addons.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/GridLayout.js”></script>
    <script src=”https://game-lib.leonyoung.repl.co/SimpleScene.js”></script>
    <script src=”Scene1.js”></script>
    <script src=”Scene2.js”></script>
    <script src=”main.js”></script>

aitayemi@aitayemi-mac scavenger % vi src/index.html 

aitayemi@aitayemi-mac scavenger % vi src/index.html
aitayemi@aitayemi-mac scavenger % 
aitayemi@aitayemi-mac scavenger % grep script src/index.html
    <script src=”assets/phaser.min.js”></script>
    <script src=”assets/helper.js”></script>
    <script src=”assets/addons.js”></script>
    <script src=”assets/GridLayout.js”></script>
    <script src=”assets/SimpleScene.js”></script>
    <script src=”assets/Scene1.js”></script>
    <script src=”assets/Scene2.js”></script>
    <script src=”assets/main.js”></script>
aitayemi@aitayemi-mac scavenger %

————- ADD  <base href=”/”>  to the index.html so that all the referenced files can be located
aitayemi@aitayemi-mac scavenger % grep -B1 “</head>” src/index.html
    <base href=”/”>
  </head>

aitayemi@aitayemi-mac scavenger %


————- RUN the game with either ionic or ng. (“npm run build” creates the “www” sub-directory).
aitayemi@aitayemi-mac scavenger % ionic serve –external
aitayemi@aitayemi-mac scavenger % npm run build
aitayemi@aitayemi-mac scavenger % ng serve

———— ACCESS the game using a web browser with either the loopback interface or the IP address of the system running the ionic environment e.g., http://<ip-address>:<port>/ )

————————————- END OF GAME PORT ——————————————————

————————————————————————————————————————–

—————– OPTIONAL SECTION BELOW – BUILD GAME FOR ANDROID/IOS ————–

—— Install Android studio: https://vitux.com/how-to-install-android-studio-on-centos/ and https://developer.android.com/studio/install
[opc@phaser ~]$ sudo yum install -y https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
[opc@phaser ~]$ sudo yum install -y java-1.8.0-openjdk

— for Mac OSX, download JAVA from https://java.com/en/download/ (e.g., jre-8u311-macosx-x64.dmg) and install it

—- Download Android Studio from https://developer.android/com/studio (e.g., android-studio-2020.3.1.25-mac.dmg for MAC OSX)
[opc@phaser ~]$ tar xf android-studio-2020.3.1.25-linux.tar.gz
[opc@phaser ~]$ cd android-studio/bin/

—- RUN the Android Studio installer from a X-session such as MobaXterm and follow the prompts in the GUI wizard installer to complete the install:
[opc@phaser android-studio]$ ./studio.sh

—- INSTALL Cocoapods and (full) Xcode Developer Tools (from App Store)  – both are required to add “ios” to the project (one-time installation task for both). You need to accept the Xcode license after installation. Either launch the IDE and accept the license when prompted, or run “sudo xcodebuild -license” from Terminal session).

aitayemi@aitayemi-mac scavenger % sudo gem install cocoapods       (see https://guides.cocoapods.org/using/getting-started.html#installation to install it only for a specific user, instead of “globally”)

aitayemi@aitayemi-mac scavenger % xcode-select install

———– OPTIONALLY ADD Android & iOS application support/code – you need to install the necessary libraries/tools so the iOS support will only work on a MAC —————————-
aitayemi@aitayemi-mac my-game % export CAPACITOR_ANDROID_STUDIO_PATH=/home/opc/android-studio/bin/studio.sh

— installing locally for this project only as opposed to globally or linking the globally-installed packages to this project. Installing locally to the project only ensures that the correct versions of packages this project requires are installed in the project.
aitayemi@aitayemi-mac scavenger % npm install @capacitor/cli @capacitor/core
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % npm install @capacitor/android
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % npm install @capacitor/ios
aitayemi@aitayemi-mac scavenger % npm audit fix
aitayemi@aitayemi-mac scavenger % ionic cap add android
aitayemi@aitayemi-mac scavenger % npx cap add android
aitayemi@aitayemi-mac scavenger % ng build
aitayemi@aitayemi-mac scavenger % ionic cap add ios
aitayemi@aitayemi-mac scavenger % npx cap add ios
aitayemi@aitayemi-mac scavenger % ng build

—- IN ORDER to build the Android version of the game code, you can either:
   (1) launch Android Studio from the MAC OSX Lauchpad, then select “File -> Open” menu in the Android Studio IDE, and select the top-level folder of the project (e.g., my-game), then select the “android” sub-folder, then the “open” button to open the project, OR
   (2) setup the CAPACITOR_ANDROID_STUDIO_PATH to point to the Android Studio executable so that the “ionic cap open android” command can launch the Android Studio IDE. On Linux, execute the “ionic” command from an X-session such as MobaXterm. On MAC OSX, launch the Android Studio IDE from the Launchpad, and then select the menu option “Tools -> Create Command-line Launcher…” to generate a terminal-executable file as /usr/local/bin/studio which you can then set as the value of the CAPACITOR_ANDROID_STUDIO_PATH variable. 
aitayemi@aitayemi-mac scavenger % export CAPACITOR_ANDROID_STUDIO_PATH=/home/opc/android-studio/bin/studio.sh
aitayemi@aitayemi-mac scavenger % export CAPACITOR_ANDROID_STUDIO_PATH=usr/local/bin/studio

NOTE: an alternate setup on an OCI instance (with no physical video card) couldn’t launch the emulator. I see “Starting AVD…” at the bottom right of the IDE but the emulator (device) never shows up. I think this is due to the lack of a video card on the instance.

NOTE: Open “Tools -> SDK Manager” from the Android Studio IDE menu, select/check “Android 11.0 (R)” under the “SDK Platforms’ tab. This line shows 30 under the “API Level” column and and that corresponds to the line “targetSdkVersion = 30” in the my-game/android/variables.gradle file. Android Studio will ask you to confirm the download of the SDK (click OK), then follow the installation wizard prompts to complete the installation (without this step, you will get a “module not specified” error and won’t be able to compile or run the project. You may also see a message concerning failed gradle sync at the bottom of the interface. Without this step, you may not be able to build the project (especially if it depends on the “Android 11.0 (R)” SDK.

— IF you don’t have a real/physical Android device connected, then use the “AVD Manager” (“Tools -> AVD Manager” menu option) to create a suitable emulated (Emulator) device

NOTE: I couldn’t build the native apps successfully in Android Studio or X-code if I use “ionic cap add android/ios” instead of “npx cap add android/ios”

NOTE:  if you are using NPM/NPX as opposed to ionic, see my other note for similar commands: https://confluence.oraclecorp.com/confluence/display/~ayotunde.itayemi@oracle.com/Phaser3+and+IONIC+on+NodeJS%3A+Game+Development

—- IN ORDER to build the iOS version of the game code, either run “npx cap open ios” from the project top-level folder, OR launch Xcode, then  open the project by selecting the App sub-folder  e.g., ~/scavenger/ios/App). Once the project is loaded, click on the top-level “App” in the “tree’ to the left of the IDE, then click on “Signing & Capabilities” tab in the main section of the IDE, you will need to select your team (you have to login to your iCloud account then select an existing team or create a new one – Xcode will popup the wizard), then also update your “Bundle Identifier” accordingly. Mine is “com.itayemi”. The default of “io.ionic.starter” or “org.cocoapods.Capacitor” will cause the project build to fail since it does not exist in your iCloud config by default). 
aitayemi@aitayemi-mac scavenger % export LANG=en_US.UTF-8
aitayemi@aitayemi-mac scavenger % ionic cap open ios
aitayemi@aitayemi-mac scavenger % npx cap open ios

NOTE: enable “Developer Mode” (and then under it, enable “USB Debugging”) on your real/physical Android device (“Settings” -> “About Phone” -> tap 5 times on the “build number” field to enable “Developer Mode”).
If your physical Android device doesn’t automatically appear in the available devices list in the Android Studio IDE after you connect it via your USB cable, you can click the “devices” drop down and select “Troubleshoot Device Connections” which gives you a “Rescan devices” button. My test android device had some issue with its power port so I have to wiggle the cable a little to get Android Studio to detect it)

References:

https://www.cyberithub.com/install-ionic-framework-in-linux-rhel-centos/
https://gamedevacademy.org/creating-mobile-games-with-phaser-3-and-cordova/
https://medium.com/swlh/easy-peasy-setup-of-a-phaser-3-project-with-ionic-fb4f4dc01625
https://www.tomspencer.dev/blog/2017/05/29/a-guide-to-installing-cordova-on-your-mac/
https://cordova.apache.org/docs/en/10.x/guide/platforms/osx/
https://ccoenraets.github.io/cordova-tutorial/create-cordova-project.html
https://ionicframework.com/docs/v1/guide/installation.html
https://github.com/nodejs/help/wiki/Installation
https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e
https://vitux.com/how-to-install-android-studio-on-centos/ and https://developer.android.com/studio/install
https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
https://phaser.io/phaser3/gettingstarted
https://www.joshmorony.com/create-native-html5-games-with-phaser-and-capacitor/
https://github.com/joshuamorony/phaser3-typescript-webpack-capacitor.git
https://guides.cocoapods.org/using/getting-started.html#installation
https://github.com/ourcade/phaser3-ionic-example
https://wpbeaches.com/installing-node-js-on-macos-big-sur-and-earlier-macos-versions/
https://www.knowledgehut.com/blog/web-development/install-angular-on-macos
https://www.zeolearn.com/magazine/setup-angular-mac
https://vuedose.tips/build-a-game-in-vuejs-with-phaser
https://www.freecodecamp.org/news/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-bdc94719135/
https://ionicframework.com/docs/cli/commands/serve