santa tracker web
Holly
Este repositorio contiene el código a Google Santa Tracker, una tradición educativa y entretenida para el período de vacaciones de diciembre.
Esperamos que encuentre este código fuente interesante. En general, no aceptamos contribuciones externas del público. Puede presentar informes de errores o solicitudes de funciones, o comunicarse con el líder de ingeniería Jez Swanson.
(Este texto duplicó en contribuir.md)
Santa Tracker admite versiones de hoja perenne de Chrome, Firefox y Safari. También admite otros navegadores basados en cromo (Edge, Opera, etc.).
También presentamos un "modo respaldo" para navegadores más antiguos, como IE11, que permiten a los usuarios jugar un pequeño número de juegos históricos.
Santa Tracker se divide en diferentes escenas. Cada página del rastreador de Santa corresponde a una escena, incluida la página principal del pueblo, Modvil. Las escenas están en el directorio estático/ escenas/. Cada escena está cargada como un iframe, y está relativamente autónomo.
La parte anfitriona del sitio maneja la carga de cada escena, así como la música y la interfaz de usuario común, como la partitura o el tutorial del juego. Hay una API entre el anfitrión y las escenas, que permite al anfitrión notificar las escenas cuando ocurren eventos como la carga de la escena, y permite que las escenas le digan al anfitrión que haga cosas como tocar una canción o actualizar la partitura.
Necesitarás yarn o npm . También es posible que necesite Java si está construyendo en Windows, ya que la versión binaria del compilador de cierre no está respaldada en esa plataforma.
Clon y ejecute yarn o npm install para instalar DEPS, y ejecute ./serve.js para ejecutar un servidor de desarrollo. La URL de desarrollo se copiará en su portapapeles.
El script de servicio ./serve.js escuchará en ambos puertos 8000 y 8080 de forma predeterminada. El puerto 8000 sirve a la parte host del sitio (esto corresponde a la producción https://santatracker.google.com dominio), y el puerto 8080 sirve al contenido estático, incluidas las escenas.
Para cargar una escena específica, abrir, por ejemplo, http: // localhost: 8000/boatload.html. Una vez que se carga el sitio, también puede ejecutar santaApp.route = 'sceneName' en la consola para cambiar las escenas mediante programación.
Si desea cargar una escena del dominio estático, sin el código "host", puede cargarla en EG, http://127.0.0.1:8080/st/scenes/elfmaker/. Esto no es intencionalmente igual al "localhost" para que Prod y Static corran el dominio cruzado. El "host" proporciona puntajes, audio y algo de interfaz de usuario, por lo que no todo el comportamiento está disponible en este modo.
A partir de 2020, el desarrollo requiere cromo o un navegador basado en cromo. Esto se debe a la forma en que identificamos las solicitudes de importación de ESM, donde el cromo especifica encabezados adicionales. (Este es un error, no una característica).
Las escenas son fundamentalmente solo páginas cargadas en un <iframe> . Puede escribirlos de la manera que desee, pero asegúrese de llamar al "host" para reproducir audio, informar puntajes o solicitar otras cosas como la visualización de tutoriales.
Para agregar una nueva escena, necesitarás:
Cree la carpeta static/scenes/sceneName , agregando index.html , que solo ejecuta código en módulos ES:
<script type="module"> que importa src/scene/api.js , que establece la conexión al "host" Prod.api.ready(() => { ... }) que se activa cuando la escena se va a cambiar en./:closure.js Si está escribiendo código de estilo de cierre, esto compilará todo lo que está bajo js/Agregar PNG asociados:
static/img/scenes/sceneName_2x.png (950x564) y sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)Nombra la escena dentro de las cuerdas.
Si su escena no debe ser lanzada a la producción, desactíquela dentro de la versión. JS.
El sistema de compilación proporciona un sistema de archivos virtual que compila automáticamente varios tipos de origen útiles para el desarrollo y proporciona una serie de ayudantes. Esto incluye:
.css se generan para su correspondiente .scss.json se genera para su correspondiente .json5static/scenes/sceneName/:closure.js se puede leer para compilar la carpeta js/ de una escena anterior con el compilador de cierre, proporcionando un módulo JS con exportación predeterminada. Estos archivos en realidad no existen, pero se crean automáticamente en el uso. Por ejemplo, si existe foo.scss , simplemente puede cargar foo.css para compilarlo automáticamente.
Al escribir SCSS, el ayudante _rel(path.png) genera una url() que apunta a un archivo en relación con el archivo fuente .scss , incluso las importaciones.
Esto funciona independientemente de cómo se use finalmente el SCSS, ya sea <link href="..." /> o como parte de un componente web.
El archivo fuente static/src/magic.js proporciona varios ayudantes de etiquetas de plantilla que, aunque funciones reales, se ingresan en el tiempo de lanzamiento. Estos incluyen:
_msg`msgid_here` genera la cadena I18N correspondiente_static`path_name` genera una referencia absoluta a un archivo dentro de static Además, Santa Tracker se construye con módulos JS y reescribirá las importaciones no relativas para node_modules . Por ejemplo, si import {LitElement} from 'lit-element'; , esto se reescribirá en su camino completo para el desarrollo o la liberación.
Además de JavaScript, el entorno de desarrollo de Santa Tracker permite importaciones de tipos de módulos futuros: CSS, JSON y HTML.
Cuando sea posible, soporte el tacto, el teclado y la entrada de Gamepad. Tenga en cuenta que el soporte básico de gamepad se ofrece a través de eventos de teclado sintético en teclas.js.
Santa Tracker usa una biblioteca de audio conocida que existe solo en el "anfitrión" de Prod, pero puede ser activado por llamadas API en escenas. Esto es en gran medida indocumentado y proporcionado por un proveedor externo. Si está interesado en los archivos de origen de audio, están en el repositorio en static/audio (y tienen licencia, como se menciona a continuación, como cc-by).
La biblioteca de audio reproduce disparadores de audio que reproducen sonidos temporales (por ejemplo, un clic de botón) o bucles (pistas de audio). Las escenas se pueden configurar con desencadenantes de audio para comenzar (a través de api.config({sound: [...]}) ) que hará que todo el audio anterior se detenga, bueno para cerrar los juegos anteriores.
Santa Tracker contiene traducciones para una variedad de idiomas diferentes. Estas traducciones se obtienen de la herramienta de traducción interna de Google.
Si está agregando una cadena para el desarrollo, modifique en_src_messages.json y solicite a un empleado de Google que solicite una ejecución de traducción. Si construye Santa Tracker para su producción, necesitará que se traduzca la cadena y la salida final contenida dentro de lang/ .
Si bien el código fuente incluye un script de lanzamiento, no está destinado a los usuarios finales que los googlers lo utilicen para implementar el sitio.
La versión anterior de Santa Tracker, utilizada hasta 2018, está disponible en la rama Archive-2018.
Todos los archivos de imagen y audio (incluyendo *.png, *.jpg, *.svg, *.mp3, *.wav y *.ogg) tienen licencia bajo la licencia CC-by. Todos los demás archivos tienen licencia bajo la licencia Apache 2. Consulte el archivo de licencia para obtener más detalles.
Copyright 2020 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.
