Merge pull request #151 from GoogleCloudPlatform/refactor/cloud-train…

…-app-updates

refactor: updates to web app + train logic

other/train-to-cloud-city/README.md

@@ -5,7 +5,7 @@
 "Train to Cloud City" demo project is designed to physically represent mixing and matching [Google Cloud Platform](https://console.cloud.google.com/)
 resources that resolve common development use cases (patterns) in a kinesthetically whimsical fashion.
 
-The challenge is putting together physical components (train cars/blocks) that match control statements (coinciding GCP resources), 
+The challenge is putting together physical components (train cars/blocks) that match control statements (coinciding GCP resources),
 which will validate if the pattern fits. For every validated component, the train will move forward to the next stop till it makes the entire way around the circle track.
 
 ## Getting Started
@@ -17,10 +17,10 @@ which will validate if the pattern fits. For every validated component, the trai
 
 ## Technologies & hardware
 
-* [Google Cloud Platform](https://console.cloud.google.com/)
-* [Cloud Firestore](https://cloud.google.com/firestore/docs/)
-* [Firebase](https://firebase.google.com/)
-* [Terraform](https://cloud.google.com/docs/terraform)
+- [Google Cloud Platform](https://console.cloud.google.com/)
+- [Cloud Firestore](https://cloud.google.com/firestore/docs/)
+- [Firebase](https://firebase.google.com/)
+- [Terraform](https://cloud.google.com/docs/terraform)
 
 * [City Freight Lego Train](https://www.lego.com/en-us/product/freight-train-60336)
 * [Sparkfun RFID readers](https://www.sparkfun.com/products/9963)
@@ -33,5 +33,5 @@ Check out our [CONTRIBUTOR](../../CONTRIBUTING.md) guide!
 
 ## Disclaimer
 
-This is not an official Google project. "Train to Cloud City" demo project is 
+This is not an official Google project. "Train to Cloud City" demo project is
 designed particularly for in-person learning experiences at Google Cloud Next'24.

other/train-to-cloud-city/app/client/Dockerfile

@@ -0,0 +1,29 @@
+# Copyright 2024 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM node:18.16.0-alpine3.17
+
+WORKDIR /app
+
+ENV PATH /app/node_modules/.bin:$PATH
+
+COPY package.json ./
+
+COPY package-lock.json ./
+
+RUN npm install --silent
+
+COPY . ./
+
+CMD ["npm", "start"]

other/train-to-cloud-city/app/client/README.md

@@ -24,8 +24,9 @@ REACT_APP_FIREBASE_MEASUREMENT_ID=<firebase-measurement-id>
 3. Install npm dependencies and start up the client app.
 
 ```bash
-npm install 
+npm install
 npm run build
 npm start
 ```
+
 Your browser should open up to `localhost:3000`.

other/train-to-cloud-city/app/client/public/index.html

@@ -19,12 +19,15 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Next '24 Physical Demo site"
+    <meta name="description" content="Next '24 Physical Demo site" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚂</text></svg>"
     />
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚂</text></svg>">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&display=swap");
+    </style>
     <title>[Next '24] Train to Cloud City</title>
   </head>
   <body>

other/train-to-cloud-city/app/client/src/App.css

@@ -15,17 +15,35 @@
  */
 
 :root {
+  --font: "Pixelify Sans";
   --melanzane: #211e20;
   --smoky: #555568;
   --lemonGrass: #a0a08b;
   --lilyWhite: #e9efec;
   --darkOrange: #ff8100;
+  --cinnabar: #e94434;
+  --dodgerblue: #4286f5;
+  --selectiveyellow: #fbbb06;
+  --eucalyptus: #34a752;
+  --font: "Pixelify Sans", sans-serif;
+}
 
+button {
+  padding: 10px;
+  margin: 5px;
+  font-family: var(--font);
+  font-size: larger;
+  background: var(--selectiveyellow);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
 }
 
 body {
-  background-color: var(--melanzane);
-  color: var(--lilyWhite);
-  font-family: monospace;
+  background-color: var(--lilyWhite);
+  color: var(--melanzane);
+  font-family: "Pixelify Sans", sans-serif;
+  font-optical-sizing: auto;
   margin: 0;
 }