santa tracker web
Holly
Dieses Repository enthält den Code an Google Santa Tracker, eine lehrreiche und unterhaltsame Tradition für die Ferienzeit im Dezember.
Wir hoffen, dass Sie diesen Quellcode interessant finden. Im Allgemeinen akzeptieren wir keine externen Beiträge der Öffentlichkeit. Sie können Fehlerberichte oder Feature -Anfragen einreichen oder sich an den technischen Lead JEZ Swanson wenden.
(Dieser Text doppelt in beitragen.md)
Santa Tracker unterstützt immergrüne Versionen von Chrome, Firefox und Safari. Es unterstützt auch andere Browser auf Chrombasis (Rand, Oper usw.).
Wir präsentieren auch einen "Fallback -Modus" für ältere Browser wie IE11, mit dem Benutzer eine kleine Anzahl historischer Spiele spielen können.
Santa Tracker ist in verschiedene Szenen aufgeteilt. Jede Seite auf dem Santa Tracker entspricht einer Szene, einschließlich der Hauptdorfseite Modvil. Die Szenen befinden sich im statischen/ Szenen/ Verzeichnis. Jede Szene ist als Iframe geladen und relativ selbst inhaltlich.
Der Host -Teil der Site übernimmt das Laden jeder Szene sowie die Musik und die gemeinsame Benutzeroberfläche wie die Spiele oder das Tutorial. Es gibt eine API zwischen dem Host und den Szenen, mit der der Host die Szenen benachrichtigt, wenn Ereignisse wie das Laden der Szene stattfinden, und den Szenen den Host mitzuteilen, dass sie Dinge wie das Spielen eines Songs oder die Aktualisierung der Partitur tun können.
Sie benötigen yarn oder npm . Möglicherweise benötigen Sie auch Java, wenn Sie unter Windows bauen, da die binäre Version des Closeure -Compilers auf dieser Plattform nicht unterstützt wird.
Klonen und führen Sie yarn oder npm install um DEPs zu installieren, und führen Sie ./serve.js aus, um einen Entwicklungsserver auszuführen. Die Entwicklungs -URL wird in Ihre Zwischenablage kopiert.
Das servierende Skript ./serve.js wird standardmäßig auf beiden Ports 8000 und 8080 anhören. Port 8000 dient dem Host -Teil der Website (dies entspricht der Produktion https://santatracker.google.com Domain) und Port 8080 dient den statischen Inhalten, einschließlich der Szenen.
So laden Sie eine bestimmte Szene, z. Sobald die Website geladen ist, können Sie auch santaApp.route = 'sceneName' in der Konsole ausführen, um die Szenen programmatisch zu wechseln.
Wenn Sie eine Szene aus der statischen Domäne laden möchten - ohne den Code "Host" - können Sie ihn unter EG laden, http://127.0.0.1:8080/st/scenes/elfmaker/. Dies ist absichtlich nicht gleich "localhost", so dass Prod- und statische Run Cross-Domain. Der "Host" bietet Bewertungen, Audio und etwas Benutzeroberfläche, sodass nicht das gesamte Verhalten in diesem Modus verfügbar ist.
Ab 2020 erfordert die Entwicklung Chrom oder einen Browser auf Chrombasis. Dies liegt an der Art und Weise, wie wir ESM -Importanfragen identifizieren, bei denen Chrom zusätzliche Header angibt. (Dies ist ein Fehler, keine Funktion.)
Szenen sind grundsätzlich nur Seiten in einem <iframe> geladen. Sie können sie so schreiben, wie Sie möchten, aber rufen Sie unbedingt zum "Host" an, um Audio zu spielen, Bewertungen zu melden oder andere Dinge wie die Anzeige von Tutorials anzufordern.
Um eine neue Szene hinzuzufügen, müssen Sie:
Erstellen Sie den Ordner static/scenes/sceneName und index.html hinzu, wodurch nur Code in ES -Modulen ausgeführt wird:
<script type="module"> einschließen, das src/scene/api.js importiert, das die Verbindung zum Produkt "Host" festlegt.api.ready(() => { ... }) Rückruf, der ausgelöst wird, wenn die Szene eingegeben werden soll./:closure.js js/Fügen Sie zugehörige PNGs hinzu:
static/img/scenes/sceneName_2x.png (950x564) und sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)Nennen Sie die Szene in Saiten.
Wenn Ihre Szene nicht in die Produktion veröffentlicht werden sollte, deaktivieren Sie sie in Release.js.
Das Build -System bietet ein virtuelles Dateisystem, das automatisch verschiedene Quelltypen kompiliert, die für die Entwicklung nützlich sind, und bietet eine Reihe von Helfern. Dies beinhaltet:
.css -Dateien werden für ihre entsprechenden .scss generiert.json wird für ihre entsprechenden .json5 erzeugtstatic/scenes/sceneName/:closure.js -Datei kann gelesen werden, um den js/ -ordner einer älteren Szene mit dem CloSeure -Compiler zu kompilieren, wodurch ein JS -Modul mit einem Standard -Export bereitgestellt wird. Diese Dateien existieren eigentlich nicht, werden aber automatisch bei der Verwendung erstellt. Wenn foo.scss beispielsweise vorhanden ist, können Sie einfach foo.css laden, um es automatisch zu kompilieren.
Beim Schreiben von SCSS generiert der Helfer _rel(path.png) eine url() , die auf eine Datei in Bezug auf die aktuelle .scss -Quelldatei - selbst importiert, auf eine Datei hinweist.
Dies funktioniert unabhängig davon, wie das SCSS endlich verwendet wird, ob <link href="..." /> oder als Teil einer Webkomponente.
Die Quelldatei static/src/magic.js bietet verschiedene Vorlagen -Tag -Helper, die zwar reale Funktionen zur Veröffentlichungszeit eingebaut sind. Dazu gehören:
_msg`msgid_here` generiert die entsprechende i18n -Zeichenfolge_static`path_name` generiert eine absolute Referenz auf eine Datei in static Außerdem wird Santa Tracker unter Verwendung von JS-Modulen erstellt und wird nicht-relative Importe für node_modules umschreiben. Zum Beispiel, wenn Sie import {LitElement} from 'lit-element'; Dies wird auf den vollen Weg zur Entwicklung oder Freigabe umgeschrieben.
Neben JavaScript selbst ermöglicht die Entwicklungsumgebung von Santa Tracker Importe zukünftiger Modultypen: CSS, JSON und HTML.
Wenn möglich, unterstützen Sie Berührung, Tastatur und Gamepad -Eingabe. Beachten Sie, dass die grundlegende Support für Gamepad über synthetische Tastaturereignisse in Keys.js. angeboten wird.
Santa Tracker verwendet eine Audiobibliothek, die bekannt ist, die nur im "Host" von "Host" vorhanden ist, kann jedoch durch API -Aufrufe in Szenen ausgelöst werden. Dies ist weitgehend undokumentiert und von einem externen Anbieter bereitgestellt. Wenn Sie an den Audio-Quelldateien interessiert sind, befinden sie sich im Repo unter static/audio (und sind, wie unten erwähnt, wie CC-by).
Die Audiobibliothek spielt Audio -Trigger, die temporäre Sounds (z. B. eine Schaltfläche Klick) oder Loops (Audio -Tracks) abspielen. Szenen können mit Audio -Triggern konfiguriert werden, um mit api.config({sound: [...]}) ) zu beginnen, was dazu führt, dass alle vorherigen Audioen anhalten, gut für die Schließung früherer Spiele.
Santa Tracker enthält Übersetzungen für eine Vielzahl verschiedener Sprachen. Diese Übersetzungen stammen aus dem internen Übersetzungstool von Google.
Wenn Sie eine Zeichenfolge für die Entwicklung hinzufügen, ändern Sie bitte en_src_messages.json und bitten Sie einen Google -Mitarbeiter, einen Übersetzungslauf anzufordern. Wenn Sie Santa Tracker für die Produktion bauen würden, müssen Sie die Zeichenfolge übersetzen und die endgültige Ausgabe in lang/ enthalten.
Während der Quellcode ein Release-Skript enthält, ist er nicht für Endbenutzer vorgesehen und wird von Googler verwendet, um die Site bereitzustellen.
Die bis 2018 verwendete vorherige Version von Santa Tracker ist in der Archive-2018-Niederlassung erhältlich.
Alle Bild- und Audio-Dateien (einschließlich *.png, *.jpg, *.svg, *.mp3, *.wav und *.ogg) werden unter der CC-by-Lizenz lizenziert. Alle anderen Dateien sind unter der Apache 2 -Lizenz lizenziert. Weitere Informationen finden Sie in der Lizenzdatei.
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.
