santa tracker web
Holly
Ce référentiel contient le code de Google Santa Tracker, une tradition éducative et divertissante pour la période de vacances de décembre.
Nous espérons que vous trouverez ce code source intéressant. En général, nous n'acceptons pas les contributions externes du public. Vous pouvez déposer des rapports de bogues ou des demandes de fonctionnalités, ou contacter le lead d'ingénierie Jez Swanson.
(Ce texte dupliqué dans contribution.md)
Santa Tracker prend en charge les versions à feuilles persistantes de Chrome, Firefox et Safari. Il prend également en charge d'autres navigateurs à base de chrome (bord, opéra, etc.).
Nous présentons également un "mode de secours" pour les navigateurs plus anciens, tels que IE11, qui permettent aux utilisateurs de jouer un petit nombre de jeux historiques.
Santa Tracker est divisé en différentes scènes. Chaque page du Santa Tracker correspond à une scène, y compris la page principale du village, Modvil. Les scènes sont dans les scènes statiques / / répertoires. Chaque scène est chargée comme un iframe et est relativement autonome.
La partie hôte du site gère le chargement de chaque scène, ainsi que la musique et l'interface utilisateur commune, comme le score du jeu ou le tutoriel. Il y a une API entre l'hôte et les scènes, ce qui permet à l'hôte d'informer les scènes lorsque des événements comme le chargement de scène se produisent, et permet aux scènes de dire à l'hôte de faire des choses comme jouer une chanson ou de mettre à jour la partition.
Vous aurez besoin yarn ou npm . Vous pouvez également avoir besoin de Java si vous construisez sur Windows, car la version binaire du compilateur de fermeture n'est pas étayée sur cette plate-forme.
Clone et exécuter yarn ou npm install pour installer les DEP, et exécutez ./serve.js pour exécuter un serveur de développement. L'URL de développement sera copiée dans votre presse-papiers.
Le script de service ./serve.js écoutera sur les deux ports 8000 et 8080 par défaut. Le port 8000 sert la partie hôte du site (cela correspond à la production https://santatracker.google.com), et le port 8080 sert le contenu statique, y compris les scènes.
Pour charger une scène spécifique, ouvrez par exemple, http: // localhost: 8000 / Bootload.html. Une fois le site chargé, vous pouvez également exécuter santaApp.route = 'sceneName' dans la console pour changer de scènes par programme.
Si vous souhaitez charger une scène à partir du domaine statique - sans le code "hôte" - vous pouvez le charger en par exemple, http://127.0.0.1:8080/st/scenes/elfmaker/. Ceci n'est pas intentionnellement égal à "localhost", de sorte que le prod et le domaine transversal statique et statique. L'hôte "fournit des scores, l'audio et une interface utilisateur, donc tous les comportements ne sont pas disponibles dans ce mode.
Depuis 2020, le développement nécessite du chrome ou un navigateur à base de chrome. Cela est dû à la façon dont nous identifions les demandes d'importation ESM, où le chrome spécifie des en-têtes supplémentaires. (C'est un bug, pas une fonctionnalité.)
Les scènes ne sont fondamentalement que des pages chargées dans un <iframe> . Vous pouvez les écrire comme vous le souhaitez, mais assurez-vous d'appeler "l'hôte" pour lire l'audio, signaler les scores ou demander d'autres choses comme l'affichage des tutoriels.
Pour ajouter une nouvelle scène, vous devrez:
Créez le dossier static/scenes/sceneName , ajoutant index.html , qui exécute le code dans les modules ES uniquement:
<script type="module"> qui importe src/scene/api.js , qui met en place la connexion avec le prod "Host".api.ready(() => { ... }) qui est déclenché lorsque la scène doit être échangée dans./:closure.js Si vous écrivez le code de style fermeture - cela compilera tout sous js/Ajouter des PNG associés:
static/img/scenes/sceneName_2x.png (950x564) et sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)Nommez la scène à l'intérieur des cordes.
Si votre scène ne doit pas être publiée en production, désactivez-la à l'intérieur de la version.js.
Le système de construction fournit un système de fichiers virtuel qui compile automatiquement divers types de sources utiles pour le développement et fournit un certain nombre d'aides. Cela comprend:
.css sont générés pour leurs .scss correspondants.json est généré pour leur .json5 correspondantstatic/scenes/sceneName/:closure.js peut être lu pour compiler le dossier js/ un compilateur JS d'une scène plus ancienne avec un module JS avec une exportation par défaut. Ces fichiers n'existent pas réellement, mais sont automatiquement créés lors de l'utilisation. Par exemple, si foo.scss existe, vous pouvez simplement charger foo.css pour le compiler automatiquement.
Lors de l'écriture de SCSS, l'assistance _rel(path.png) génère une url() qui pointe vers un fichier par rapport au fichier source .scss actuel, même les importations.
Cela fonctionne quelle que soit la façon dont le SCSS est finalement utilisé, que ce soit <link href="..." /> ou dans le cadre d'un composant Web.
Le fichier source static/src/magic.js fournit divers aides de balise de modèle qui, bien que réelles, sont inclinées au moment de la libération. Ceux-ci incluent:
_msg`msgid_here` génère la chaîne i18n correspondante_static`path_name` génère une référence absolue à un fichier dans static De plus, Santa Tracker est construit à l'aide de modules JS et réécrira les importations non relatives pour node_modules . Par exemple, si vous import {LitElement} from 'lit-element'; , cela sera réécrit sur tout son chemin pour le développement ou la libération.
En plus de JavaScript lui-même, l'environnement de développement de Santa Tracker permet les importations de futurs types de modules: CSS, JSON et HTML.
Lorsqu'il est possible de prendre en charge, le clavier, le clavier et l'entrée de la manche de jeu. Notez que le support de base de GamePad est proposé via des événements de clavier synthétiques dans Keys.js.
Santa Tracker utilise une bibliothèque audio connue qui existe dans le prod "hôte" uniquement, mais peut être déclenchée par des appels API dans des scènes. Ceci est largement sans papiers et fourni par un fournisseur externe. Si vous êtes intéressé par les fichiers source audio, ils sont dans le dépôt sous static/audio (et sont sous licence, comme mentionné ci-dessous, comme CC-BY).
La bibliothèque audio joue des déclencheurs audio qui jouent des sons temporaires (par exemple, un clic de bouton) ou des boucles (pistes audio). Les scènes peuvent être configurées avec des déclencheurs audio pour commencer (via api.config({sound: [...]}) ) qui entraînera l'arrêt de tous les audio précédents, bon pour arrêter les jeux précédents.
Santa Tracker contient des traductions pour une variété de langues différentes. Ces traductions proviennent de l'outil de traduction interne de Google.
Si vous ajoutez une chaîne pour le développement, veuillez modifier en_src_messages.json et demander à un employé de Google de demander une exécution de traduction. Si vous construisez Santa Tracker pour la production, vous aurez besoin que la chaîne soit traduite et la sortie finale contenue dans lang/ .
Bien que le code source comprenne un script de publication, il n'est pas destiné aux utilisateurs finaux et est utilisé par Googler pour déployer le site.
La version précédente de Santa Tracker, utilisée jusqu'en 2018, est disponible dans la succursale Archive 2018.
Tous les fichiers d'image et audio (y compris * .png, * .jpg, * .svg, * .mp3, * .wav et * .ogg) sont sous licence CC-BY. Tous les autres fichiers sont concédés sous licence Apache 2. Voir le fichier de licence pour plus de détails.
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.
