santa tracker web
Holly
Этот репозиторий содержит код для Google Santa Tracker, образовательную и развлекательную традицию в декабрьском праздничном периоде.
Мы надеемся, что вы найдете этот исходный код интересным. В целом, мы не принимаем внешние взносы от общественности. Вы можете подать отчеты об ошибках или запросы на функции или связаться с инженерным лидером Jez Swanson.
(Этот текст дублируется в anpoing.md)
Санта -трекер поддерживает вечнозеленые версии Chrome, Firefox и Safari. Он также поддерживает другие браузеры на основе хрома (Edge, Opera и т. Д.).
Мы также представляем «режим отступления» для старых браузеров, таких как IE11, который позволяет пользователям играть в небольшое количество исторических игр.
Санта -трекер разделен на разные сцены. Каждая страница на Санта -Трекер соответствует одной сцене, включая главную страницу деревни, Modvil. Сцены в статических/ сценах/ каталоге. Каждая сцена загружается как iframe и относительно самостоятельно сдерживается.
Хозяева часть сайта обрабатывает загрузку каждой сцены, а также с музыкой и обычным пользовательским интерфейсом, например, игрой или учебным пособием. Существует API между хостом и сценами, который позволяет хосту уведомлять сцены, когда случаются такие события, как сцена, и позволяет сцены сказать хосту делать такие вещи, как воспроизводить песню или обновить счет.
Вам понадобится yarn или npm . Вам также может понадобиться Java, если вы строите на Windows, так как бинарная версия компилятора закрытия не поддерживается на этой платформе.
Клонируйте и запустите yarn или npm install для установки DEPS, и запустите ./serve.js для запуска сервера разработки. URL -адрес разработки будет скопирован в ваш буфер обмена.
Скрипт сервировки ./serve.js будет слушать по умолчанию оба порта 8000 и 8080. Порт 8000 обслуживает хост -часть сайта (это соответствует домену производства https://santatracker.google.com домена), а порт 8080 обслуживает статический контент, включая сцены.
Чтобы загрузить конкретную сцену, откройте EG, http: // localhost: 8000/boatload.html. Как только сайт загружен, вы также можете запустить santaApp.route = 'sceneName' в консоли для программного переключения сцен.
Если вы хотите загрузить сцену из статического домена - без кода «хост» - вы можете загрузить ее по адресу eg, http://127.0.0.1:8080/st/scenes/elfmaker/. Это намеренно не равно «локальному хосту», так что Prod и статический пробег перекрестного домена. «Хост» предоставляет оценки, аудио и некоторый пользовательский интерфейс, поэтому в этом режиме доступно не все поведение.
По состоянию на 2020 год развитие требует хрома или браузера на основе хрома. Это связано с тем, как мы идентифицируем запросы на импорт ESM, где Chromium указывает дополнительные заголовки. (Это ошибка, а не функция.)
Сцены в основном просто страницы, загруженные в <iframe> . Вы можете написать их любым способом, но обязательно вызовите «хост», чтобы воспроизводить звук, отчетность или запросить другие вещи, такие как отображение учебных пособий.
Чтобы добавить новую сцену, вам нужно:
Создайте папку static/scenes/sceneName , добавляя index.html , которая запускает код только в модулях ES:
<script type="module"> , который импортирует src/scene/api.js , который устанавливает соединение с хостом Prod ".api.ready(() => { ... }) обратный вызов, который запускается, когда сцена должна быть заменена в./:closure.js , если вы пишете код в стиле закрытия-это составит все под js/Добавьте связанные PNG:
static/img/scenes/sceneName_2x.png (950x564) и sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)Назовите сцену внутри струн.
Если ваша сцена не будет выпущена для производства, отключите ее inside release.js.
Система сборки предоставляет виртуальную файловую систему, которая автоматически компилирует различные типы источников, полезные для разработки и предоставляет ряд помощников. Это включает в себя:
.css генерируются для их соответствующих .scss.json генерируется для их соответствующего .json5static/scenes/sceneName/:closure.js можно прочитать для компиляции js/ папки старой сцены с компилятором закрытия, предоставляя модуль JS с экспортом по умолчанию. Эти файлы на самом деле не существуют, но автоматически создаются при использовании. Например, если foo.scss существует, вы можете просто загрузить foo.css , чтобы автоматически компилировать его.
При написании SCSS Helper _rel(path.png) генерирует url() , который указывает на файл относительно текущего исходного файла .scss - даже импорт.
Это работает независимо от того, как наконец используется SCSS, будь то <link href="..." /> или как часть веб -компонента.
Source File static/src/magic.js предоставляет различные помощники тегов шаблонов, которые, хотя и в реальных функциях вставлены во время выпуска. К ним относятся:
_msg`msgid_here` генерирует соответствующую строку i18n_static`path_name` генерирует абсолютную ссылку на файл в static Кроме того, Santa Tracker строится с использованием модулей JS и переписывает не относительный импорт для node_modules . Например, если вы import {LitElement} from 'lit-element'; , это будет переписано на полный путь для разработки или выпуска.
Помимо самого JavaScript, среда разработки Санта -Трекер позволяет импортировать будущие типы модулей: CSS, JSON и HTML.
Когда возможно, поддержка, клавиатура и вход геймпада. Обратите внимание, что базовая поддержка Gamepad предлагается с помощью синтетических событий клавиатуры в Keys.js.
Santa Tracker использует известную аудио библиотеку, которая существует только в «хосте» Prod, но может быть вызвана вызовами API в сценах. Это в значительной степени недокументировано и предоставляется внешним поставщиком. Если вы заинтересованы в исходных файлах аудио, они находятся в репо под static/audio (и имеют лицензию, как упомянуто ниже, как CC-By).
Аудио библиотека воспроизводит звуковые триггеры, которые воспроизводят временные звуки (например, нажатие на кнопку) или петли (аудио треки). Сцены могут быть настроены с помощью аудио -триггеров, чтобы начать с (через api.config({sound: [...]}) ), что приведет к остановке всех предыдущих аудио, что хорошо для выключения предыдущих игр.
Санта -трекер содержит переводы для различных языков. Эти переводы получены из инструмента внутреннего перевода Google.
Если вы добавляете строку для разработки, измените en_src_messages.json и попросите сотрудника Google запросить перевод. Если вы создаете Santa Tracker для производства, вам понадобится перевод строки, и конечный результат, содержащийся в lang/ .
Хотя исходный код включает в себя сценарий выпуска, он не предназначен для запуска конечных пользователей и используется Googlers для развертывания сайта.
Предыдущая версия Santa Tracker, используемой до 2018 года, доступна в филиале Archive-2018.
Все изображения и аудиофайлы (включая *.png, *.jpg, *.svg, *.mp3, *.wav и *.ogg) лицензированы по лицензии CC-By. Все остальные файлы лицензированы по лицензии Apache 2. Смотрите файл лицензии для получения подробной информации.
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.
