santa tracker web

Google Santa Tracker用於網絡

該存儲庫包含Google Santa Tracker的代碼，Google Santa Tracker是12月假期期間的教育和娛樂性傳統。

我們希望您發現此源代碼有趣。通常，我們不接受公眾的外部貢獻。您可以提交錯誤報告或功能請求，或聯繫工程主管Jez Swanson。

（本文在貢獻中復制了）

支持

聖誕老人追踪器支持Chrome，Firefox和Safari的常綠版本。它還支持其他基於鉻的瀏覽器（Edge，Opera等）。

我們還為IE11等舊瀏覽器提供了一種“後備模式”，該瀏覽器允許用戶玩少量的​​歷史遊戲。

站點結構

聖誕老人追踪器分為不同的場景。聖誕老人跟踪器上的每個頁面都對應於一個場景，包括Modvil的主鄉村頁面。場景在靜態/場景/目錄中。每個場景都被加載為iframe，並且相對自我包含。

網站的主機部分處理每個場景的負載以及音樂和常見的UI，例如游戲分數或教程。主機和場景之間有一個API，可以讓主機通知場景加載之類的事件，並允許場景告訴主機做諸如播放歌曲或更新分數之類的事情。

開髮指南

本地運行

您需要yarn或npm 。如果您在Windows上構建，則可能需要Java，因為封閉式編譯器的二進製版本不支持該平台。

克隆並運行yarn或npm install以安裝DEP，然後運行./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.0.1:8080/st/scenes/elfmaker/。這故意不等於“ localhost”，因此產品和靜態運行的跨域。 “主機”提供了分數，音頻和一些UI，因此並非所有行為都可以在此模式下可用。

截至2020年，開發需要鉻或基於鉻的瀏覽器。這是由於我們識別ESM導入請求的方式，鉻指定其他標題。 （這是一個錯誤，而不是功能。）

添加一個新場景

從根本上講，場景只是在<iframe>中加載的頁面。您可以以任何喜歡的方式編寫它們，但請務必召集“主機”播放音頻，報告分數或請求其他內容，例如顯示教程。

要添加一個新場景，您需要：

• 創建static/scenes/sceneName文件夾，添加index.html ，該文件僅在ES模塊中運行代碼：

  1. 確保您包括<script type="module">導入src/scene/api.js script type =“ module”>，該>設置了與產品“主機”的連接。
  2. 可選地收聽API的事件，例如“暫停”，“簡歷”和“重新啟動”；並配置一個api.ready(() => { ... })
  3. 導入魔術URL ./:closure.js如果您正在編寫封閉式代碼，則該編譯在js/
  4. 有關更多信息，請參閱現有場景，例如Boatload或Santaselfie

• 添加相關的PNG：

  • static/img/scenes/sceneName_2x.png （950x564）和sceneName_1x.png （475x282）
  • prod/images/og/sceneName.png （1333x1000）

• 命名字符串中的場景。

• 如果您的場景不應該發佈到生產中，請將其禁用在repares.js中。

環境

構建系統提供了一個虛擬文件系統，該系統會自動編譯對開發有用的各種源類型，並提供許多助手。這包括：

• .css文件是為其相應的.scss生成的
• .json是為他們的相應.json5生成
• static/scenes/sceneName/:closure.js文件可以讀取以編譯帶有閉合編譯器的舊場景的js/文件夾，並提供默認導出的JS模塊。

這些文件實際上並不存在，但會自動使用。例如，如果存在foo.scss ，則可以簡單地加載foo.css即可自動編譯它。

Sass的幫助者

在編寫SCSS時，助手_rel(path.png)會生成一個url() ，該URL（）指向文件相對於當前.scss源文件（甚至導入）。

無論最終如何使用SCSS，無論是<link href="..." />還是作為Web組件的一部分。

JavaScript

源文件static/src/magic.js提供了各種模板標籤助手，儘管實際功能在發行時被內襯。其中包括：

• _msg`msgid_here`​生成相應的i18n字符串
• _static`path_name`​生成對static中文件的絕對引用

此外，Santa Tracker是使用JS模塊構建的，將為node_modules重寫非相關導入。例如，如果您import {LitElement} from 'lit-element'; ，這將被重寫為開發或發行的完整道路。

進口

除JavaScript本身外，Santa Tracker的開發環境還允許進口未來的模塊類型：CSS，JSON和HTML。

輸入

在可能的情況下，觸摸，鍵盤和遊戲手柄輸入。請注意，基本的遊戲板支持是通過keys.js中的合成鍵盤事件提供的。

聲音

Santa Tracker使用的音頻庫已知，該音頻庫僅在“主機”中存在，但可以在場景中觸發API調用。這在很大程度上是沒有證件的，並由外部供應商提供。如果您對音頻源文件感興趣，則它們位於static/audio下的回購中（並如下所述，以CC-BY的價格獲得許可）。

音頻庫會播放播放臨時聲音的音頻觸發器（例如，單擊按鈕）或循環（音頻軌道）。可以使用音頻觸發器配置場景，從（通過api.config({sound: [...]}) ）將導致所有以前的音頻停止，非常適合關閉以前的遊戲。

翻譯

聖誕老人跟踪器包含各種不同語言的翻譯。這些翻譯來自Google的內部翻譯工具。

如果要添加開發字符串，請修改en_src_messages.json ，並要求Google員工請求翻譯運行。如果您要構建用於生產的聖誕老人跟踪器，則需要翻譯字符串，並在lang/中包含最終輸出。

生產

雖然源代碼包含一個發行腳本，但最終用戶並不是要運行的，並且Googles使用了該網站。

歷史版本

直到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.