Merge pull request #6 from oracle-devrel/UIDebug

UI debug

Author: WSPluta

README.md

@@ -2,28 +2,48 @@
 
 [![License: UPL](https://img.shields.io/badge/license-UPL-green)](https://img.shields.io/badge/license-UPL-green) [![Quality gate](https://sonarcloud.io/api/project_badges/quality_gate?project=oracle-devrel_save-the-wildlife)](https://sonarcloud.io/dashboard?id=oracle-devrel_save-the-wildlife)
 
-## THIS IS A NEW, BLANK REPO THAT IS NOT READY FOR USE YET.  PLEASE CHECK BACK SOON!
+## The power of Cloud Native on Oracle Cloud
 
-## Introduction
-MISSING
+In this workshop, you will learn how to deploy a simple multiplayer [Three.js](https://threejs.org/) application to the cloud, then iterate through the modernization process to enhance the application and ultimately deploy it to [Kubernetes](https://kubernetes.io/) with CI/CD, Terraform, Kustomize, Coherence and Redis as a base line backend to run applications that require in-memory concurrency management. In our case we are using
+
+![Save The Wildlife Banner](images/screenshot.png)
 
 ## Getting Started
-MISSING
+
+This workshop leverages a broad array of OCI services to illustrate how to deploy, migrate, and modernize applications in the cloud. 
+
+You can start with app modernization journey and follow a stet by step guide on VM deployment via Terraform, then containerize the application and move to OCI Container Instances. 
+In the final phase, the application design is enhanced to provide scalability while being deployed to Oracle Container Engine for Kubernetes (OKE). The best part is, you get to play a really cool 3D "Save the Wildlife" game when you finish the deployment.
+
+Or you can dive (pun intended) into the ocean of DevOPS CI/CD and release our [Three.js](https://threejs.org/) minigame as many times as you like.
 
 ### Prerequisites
-MISSING
+
+- Understanding of cloud and database terms is helpful
+- Familiarity with Oracle Cloud Infrastructure (OCI) is helpful
+- Familiarity with the OCI console
+- Basic familiarity with app containerization
+- Basic familiarity with OCI Container Instances
+- Basic familiarity with OKE
 
 ## Notes/Issues
-MISSING
 
 ## URLs
-* Nothing at this time
+
+- [Three.js](https://threejs.org/)
+- [Oracle Devops](https://www.oracle.com/uk/devops/devops-service/)
+- [Oracle Container Engine Kubernetes](https://www.oracle.com/uk/cloud/cloud-native/container-engine-kubernetes/)
+- [Redis](https://redis.com/)
+- [Kubernetes](https://kubernetes.io/)
+- [Oracle Coherence](https://www.oracle.com/uk/java/coherence/)
 
 ## Contributing
+
 This project is open source.  Please submit your contributions by forking this repository and submitting a pull request!  Oracle appreciates any contributions that are made by the open source community.
 
 ## License
-Copyright (c) 2022 Oracle and/or its affiliates.
+
+Copyright (c) 2023 Oracle and/or its affiliates.
 
 Licensed under the Universal Permissive License (UPL), Version 1.0.
 

web/src/index.html

@@ -39,7 +39,7 @@ <h1>Top Scores</h1>
         </p>
         <ul>
           <li>
-            Collect <span style="color: red">trash</span>, avoid
+            Collect <span style="color: brown">trash</span>, avoid
             <span style="color: green">animals</span>
           </li>
           <li><br /></li>

web/src/script.js

@@ -125,13 +125,13 @@ async function init() {
   // console.log("init: ",waternormals);
 
   const geometries = [
+    new THREE.SphereGeometry(), // Cube geometry for trash
     new THREE.BoxGeometry(), // Cube geometry for wildlife
-    boxModel.geometry, // Box GLTF for trash
   ];
 
   const materials = [
-    new THREE.MeshPhongMaterial({ color: 0x000000 }), // Green material for wildlife
-    new THREE.MeshPhongMaterial({ color: 0x654321 }), // material for trash
+    new THREE.MeshPhongMaterial({ color: 0x90EE90 }), // green material for wildlife
+    new THREE.MeshPhongMaterial({ color: 0xBB8E51 }), // brown material for trash
   ];
 
   //add music loader