KET WEB APP

This is a single-page Ket playing app that you can install on you phone as a Single-page application (SPA).

Play it here:

https://storage.googleapis.com/ket-visualizer-app/hexgrid.html

SETUP

Install Google Cloud SDK

curl -O https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-cli-linux-x86_64.tar.gz tar -xf google-cloud-cli-linux-x86_64.tar.gz ./google-cloud-sdk/install.sh

Login and set project

gcloud auth login gcloud projects list gcloud config set project gcp-personal-360619

Create bucket and deploy

gsutil mb -l europe-west8 gs://ket-visualizer-app gsutil cp hexgrid.html gs://ket-visualizer-app/ gsutil iam ch allUsers:objectViewer gs://ket-visualizer-app

With no caching:

gsutil -h "Cache-Control:no-cache, no-store, must-revalidate" cp /home/new_user/my_stuff/coding/ket-visualizer/hexgrid.html gs://ket-visualizer-app/ gsutil -h "Cache-Control:no-cache, no-store, must-revalidate" cp icon.png gs://ket-visualizer-app/

Public URL

https://storage.googleapis.com/ket-visualizer-app/hexgrid.html

Firebase:

Firebase Free hosting potentially provides a nicer URL: Suggested these commands: npm install -g firebase-tools firebase login firebase init hosting firebase deploy

DEBUGGING:

https://storage.googleapis.com/ket-visualizer-app/hexgrid.html?v=20240101a

gsutil cp hexgrid.html gs://ket-visualizer-app/hexgrid-latest.html https://storage.googleapis.com/ket-visualizer-app/hexgrid-latest.html

INSTALL AS SPA:

Great! Here's how to install it as a PWA (Progressive Web App) on your iPhone:

Open Safari on your iPhone and go to: https://storage.googleapis.com/ket-visualizer-app/hexgrid.html

Tap the Share button (the square with an arrow pointing up) at the bottom of the screen

Scroll down and tap "Add to Home Screen"

You'll see a preview with the app name "Ket" and icon. Tap "Add" in the top right

The app will now appear on your home screen like a native app!

When you open it from the home screen:

It will launch in full-screen mode (no Safari UI) It will work offline (once loaded) It behaves just like a native app The app already has all the necessary PWA features configured:

apple-mobile-web-app-capable for full-screen mode apple-mobile-web-app-title for the app name Custom icon Proper viewport settings for iOS Enjoy your Ket game! 🎮