santa tracker web
Holly
Este repositório contém o código para o Google Santa Tracker, uma tradição educacional e divertida para o período de férias de dezembro.
Esperamos que você ache esse código -fonte interessante. Em geral, não aceitamos contribuições externas do público. Você pode arquivar relatórios de bug ou solicitações de recursos ou entrar em contato com o líder de engenharia Jez Swanson.
(Este texto duplicado em contribuindo.md)
O Santa Tracker suporta versões sempre -verdes do Chrome, Firefox e Safari. Ele também suporta outros navegadores baseados em cromo (Edge, Opera etc).
Também apresentamos um "modo de fallback" para navegadores mais antigos, como o IE11, que permitem aos usuários jogar um pequeno número de jogos históricos.
Santa Tracker está dividido em cenas diferentes. Cada página no Santa Tracker corresponde a uma cena, incluindo a página principal da vila, Modvil. As cenas estão no estático/ cenas/ diretório. Cada cena é carregada como um iframe e é relativamente independente.
A parte anfitriã do site lida com o carregamento de cada cena, bem como a música e a interface do usuário comum, como a pontuação ou o tutorial do jogo. Há uma API entre o host e as cenas, que permite ao host notificar as cenas quando eventos como o carregamento da cena acontecem, e permite que as cenas digam ao host para fazer coisas como tocar uma música ou atualizar a pontuação.
Você precisará yarn ou npm . Você também pode precisar de Java se estiver construindo no Windows, pois a versão binária do compilador de fechamento não é suportada nessa plataforma.
Clone e execute yarn ou npm install para instalar os DEPS e executar ./serve.js para executar um servidor de desenvolvimento. O URL de desenvolvimento será copiado para a sua área de transferência.
O script de porção ./serve.js ouvirá nas portas 8000 e 8080 por padrão. A porta 8000 serve a parte do host do site (isso corresponde à produção https://santatracker.google.com) e a porta 8080 serve o conteúdo estático, incluindo as cenas.
Para carregar uma cena específica, aberto, por exemplo, http: // localhost: 8000/boatload.html. Depois que o site é carregado, você também pode executar santaApp.route = 'sceneName' no console para alternar as cenas programaticamente.
Se você quiser carregar uma cena do domínio estático - sem o código "host" - você pode carregá -lo em por exemplo, http://127.0.0.1:8080/st/scenes/elfmaker/. Isso não é intencionalmente igual a "localhost", de modo que o DOM e estático de execução estática. O "host" fornece pontuações, áudio e alguma interface do usuário, então nem todo comportamento está disponível neste modo.
A partir de 2020, o desenvolvimento requer cromo ou navegador à base de cromo. Isso se deve à maneira como identificamos solicitações de importação do ESM, onde o Chromium especifica cabeçalhos adicionais. (Este é um bug, não um recurso.)
As cenas são fundamentalmente apenas páginas carregadas em um <iframe> . Você pode escrevê -los da maneira que quiser, mas não deixe de chamar o "host" para reproduzir áudio, relatar pontuações ou solicitar outras coisas como a exibição de tutoriais.
Para adicionar uma nova cena, você precisará:
Crie a pasta static/scenes/sceneName , adicionando index.html , que executa o código apenas nos módulos ES:
<script type="module"> que importa src/scene/api.js , que configura a conexão com o produtor "host".api.ready(() => { ... }) que é acionado quando a cena deve ser trocada em./:closure.js Se você estiver escrevendo código no estilo de fechamento-isso compilará tudo sob js/Adicione PNGs associados:
static/img/scenes/sceneName_2x.png (950x564) e sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)Nomeie a cena dentro de cordas.
Se sua cena não for lançada para a produção, desative -a dentro do release.js.
O sistema Build fornece um sistema de arquivos virtual que compila automaticamente vários tipos de origem útil para o desenvolvimento e fornece vários ajudantes. Isso inclui:
.css são gerados para seus .scss correspondentes.json é gerado para o seu .json5 correspondentestatic/scenes/sceneName/:closure.js pode ser lido para compilar a pasta js/ de uma cena mais antiga com o compilador de fechamento, fornecendo um módulo JS com exportação padrão. Na verdade, esses arquivos não existem, mas são criados automaticamente no uso. Por exemplo, se existir foo.scss , você poderá simplesmente carregar foo.css para compilá -lo automaticamente.
Ao escrever SCSS, o ajudante _rel(path.png) gera um url() que aponta para um arquivo em relação ao arquivo de origem .scss atual - mesmo importações.
Isso funciona independentemente de como o SCSS é finalmente usado, seja <link href="..." /> ou como parte de um componente da Web.
O arquivo de origem static/src/magic.js fornece vários ajudantes de tags de modelo que, embora funções reais, estão inlinados no horário de lançamento. Estes incluem:
_msg`msgid_here` gera a string i18n correspondente_static`path_name` gera uma referência absoluta a um arquivo dentro static Além disso, o Santa Tracker é construído usando módulos JS e reescreverá importações não relativas para node_modules . Por exemplo, se você import {LitElement} from 'lit-element'; , isso será reescrito ao seu caminho completo para desenvolvimento ou lançamento.
Além do próprio JavaScript, o ambiente de desenvolvimento do Santa Tracker permite a importação de futuros tipos de módulos: CSS, JSON e HTML.
Quando possível, suportar touch, teclado e entrada de gamepad. Observe que o suporte básico ao gamepad é oferecido por meio de eventos sintéticos de teclado em keys.js.
O Santa Tracker usa uma biblioteca de áudio conhecida que existe apenas no Prod "Host", mas pode ser acionado por chamadas de API nas cenas. Isso é amplamente indocumentado e fornecido por um fornecedor externo. Se você estiver interessado nos arquivos de origem de áudio, eles estão no repositório sob static/audio (e são licenciados, como mencionado abaixo, como CC-BY).
A biblioteca de áudio toca gatilhos de áudio que reproduzem sons temporários (por exemplo, um clique de botão) ou loops (faixas de áudio). As cenas podem ser configuradas com gatilhos de áudio para começar (via api.config({sound: [...]}) ) que fará com que todo o áudio anterior pare, bom para fechar os jogos anteriores.
Santa Tracker contém traduções para uma variedade de idiomas diferentes. Essas traduções são provenientes da ferramenta de tradução interna do Google.
Se você estiver adicionando uma string para desenvolvimento, modifique en_src_messages.json e peça a um funcionário do Google que solicite uma execução de tradução. Se você estiver construindo o Papai Noel para produção, precisará da string a ser traduzida e a saída final contida no lang/ .
Embora o código-fonte inclua um script de liberação, ele não se destina a executar os usuários finais e é usado pelos Googlers para implantar o site.
A versão anterior do Santa Tracker, usada até 2018, está disponível na filial Archive-2018.
Todos os arquivos de imagem e áudio (incluindo *.png, *.jpg, *.svg, *.mp3, *.wav e *.ogg) são licenciados sob a licença CC-by. Todos os outros arquivos são licenciados sob a licença Apache 2. Consulte o arquivo de licença para obter detalhes.
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.
