Giter Site home page Giter Site logo

edayaxin / cookie-detective-game-nodejs Goto Github PK

View Code? Open in Web Editor NEW

This project forked from actions-on-google-labs/cookie-detective-game-nodejs

0.0 1.0 0.0 8.22 MB

License: Apache License 2.0

JavaScript 44.38% HTML 0.26% SCSS 11.30% Vue 9.41% TypeScript 34.65%

cookie-detective-game-nodejs's Introduction

Actions on Google: Cookie Detective Game

NOTE

This is an experimental project and will receive minimal maintenance. Only bugs for security issues will be accepted. No feature requests will be accepted. Pull requests will be acknowledged and reviewed as soon as possible. There is no associated SLAs.

Some of the projects in this experimental org might mature to a more stable state and move into the main Actions on Google GitHub org.


Cookie Detective

This is the full source code for the Google Assistant game, Cookie Detective.

Have your kids become kitchen sleuths as they locate their cookie friend under 10 guesses. Make sure the mouse doesn't get to the cookie first!

After cracking the case, do the celebratory cookie dance before journeying to harder levels in space and under the sea.

This game supports both single and multiplayer modes.

This game has been designed for Nest Hub and Nest Hub Max smart displays and implemented using Interactive Canvas.

Prerequisites

  1. Yarn
    • Make sure yarn is installed on your system
  2. Install the Firebase CLI
    • We recommend using MAJOR version 8 with 8.3.0 or above, npm install -g firebase-tools@^8.3.0
    • Run firebase login with your Google account
  3. Install gsutil
    • Run gcloud init and log in
  4. For Windows developers, the projects scripts rely on Unix-like scripts, so we recommend installing Ubuntu on Windows Subsystem for Linux.

Installing dependencies

  1. Download the following GSAP plugins and place their .js files in the /view/src/vendor/gsap directory:
    • CustomBounce
    • CustomEase
    • CustomWiggle
    • DrawSVGPlugin
    • GSDevTools
    • MorphSVGPlugin
    • Physics2DPlugin
    • PhysicsPropsPlugin
    • ScrambleTextPlugin
    • SplitText
    • ThrowPropsPlugin

Setup

Actions Console

  1. From the Actions on Google Console, New project > Create project > Game > Blank Project for Smart Display
  2. Enable the For Families option under Deploy > Directory information > Additional information and save the information.

Configuration

  1. Run Yarn from the project root directory and the agent/ and view/ directories: yarn && cd agent/ && yarn && cd ../view/ && yarn && cd ../.
  2. Run firebase use --add {PROJECT_ID} in the project root directory.
  3. Edit PROJECT_ID file and and replace {PROJECT_ID} with your project ID.

Google Cloud setup

The game TTS is generated using the Google Cloud TTS service and the generated audio files is persisted in Google Storage. The Canvas web app is also hosted in Cloud Storage.

  • Enable the Text-to-Speech service for your project
  • Create a service account for the TTS service, without any roles
  • Generate a JSON key file for the TTS service account and put it in /agent/config/tts.json
  • Generate an API key for the TTS service and put it in /view/src/config/config.js (environments.variables[VariableNames.TTS_API_KEY].development)
  • Create a Storage Bucket with the same name as the project ID and enable public access
  • Create a service account with the role "Storage Object Admin"
  • Generate a JSON key file for the Storage bucket service account and put it in /agent/config/storage.json

Actions CLI

  1. Install the Actions CLI
  2. Navigate to agent/action/settings/settings.yaml, and replace {PROJECT_ID} with your project ID.
  3. Navigate to agent/action/settings/en/settings.yaml, and replace {Game Name} your own name.
  4. Navigate to agent/action/webhook/AssistantStudioFulfillment.yaml, and replace {PROJECT_ID} with your project ID
  5. Navigate to the agent/ directory by running cd agent from the root directory of this project.
  6. Run gactions login to login to your account.
  7. Run yarn push to push the whole project.

Build and deploy

First time deployment

  • Enable CORS on your bucket: cd view/ && yarn cors
  • Deploy the view: cd view/ && yarn build && yarn deploy
  • Obtain the public URL of the view's index.html file from the Cloud Console and put the public URL in /agent/config/config.json (default.viewUrl).
  • Deploy the agent config & webhook: cd agent/ && yarn build && yarn deploy
  • Put the public URL to the webhook endpoint in /agent/config/config.json (default.webhookUrl) and replace the version number in the path with {VERSION}
  • Put the public URL to the TTS cache endpoint in /view/src/config/config.js (environments.variables[VariableNames.TTS_URL].production)
  • Re-deploy the view: cd view/ && yarn build && yarn deploy

Future deployments

  • From the project root: yarn build && yarn deploy (this will bump the minor version automatically)

Running this Sample

  • You can test your Action on any Google Assistant-enabled device on which the Assistant is signed into the same account used to create this project. Just say or type, “OK Google, talk to my test app”.
  • You can also use the Actions on Google Console simulator to test most features and preview on-device behavior.

References & Issues

Contributing

Please read and follow the steps in the CONTRIBUTING.md.

License

See LICENSE.

cookie-detective-game-nodejs's People

Contributors

keyboardsurfer avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.