santa tracker web
Holly
Repositori ini berisi kode untuk Google Santa Tracker, tradisi pendidikan dan menghibur untuk periode liburan Desember.
Kami harap Anda menemukan kode sumber ini menarik. Secara umum, kami tidak menerima kontribusi eksternal dari publik. Anda dapat mengajukan laporan bug atau permintaan fitur, atau menghubungi lead rekayasa Jez Swanson.
(Teks ini digandakan di Contributing.md)
Santa Tracker mendukung versi Evergreen Chrome, Firefox dan Safari. Ini juga mendukung browser berbasis kromium lainnya (Edge, Opera dll).
Kami juga menyajikan "mode fallback" untuk browser yang lebih lama, seperti IE11, yang memungkinkan pengguna untuk memainkan sejumlah kecil game bersejarah.
Santa Tracker terpecah menjadi adegan yang berbeda. Setiap halaman di Santa Tracker sesuai dengan satu adegan, termasuk halaman desa utama, Modvil. Adegan ada di statis/ adegan/ direktori. Setiap adegan dimuat sebagai iframe, dan relatif mandiri.
Bagian host dari situs ini menangani pemuatan setiap adegan, serta musik dan UI umum, seperti skor permainan atau tutorial. Ada API antara host dan adegan, yang memungkinkan host untuk memberi tahu adegan ketika peristiwa seperti pemuatan adegan terjadi, dan memungkinkan adegan untuk memberi tahu host untuk melakukan hal -hal seperti memainkan lagu atau memperbarui skor.
Anda akan membutuhkan yarn atau npm . Anda mungkin juga memerlukan Java jika Anda membangun di Windows, karena versi biner dari Closure Compiler tidak didukung pada platform itu.
Klon dan jalankan yarn atau npm install untuk menginstal DEP, dan jalankan ./serve.js untuk menjalankan server pengembangan. URL pengembangan akan disalin ke clipboard Anda.
Script yang melayani ./serve.js akan mendengarkan di kedua port 8000 dan 8080 secara default. Port 8000 melayani bagian host dari situs (ini sesuai dengan domain produksi https://santatracker.google.com), dan port 8080 melayani konten statis, termasuk adegan.
Untuk memuat adegan tertentu, buka misalnya, http: // localhost: 8000/boatload.html. Setelah situs dimuat, Anda juga dapat menjalankan santaApp.route = 'sceneName' di konsol untuk beralih adegan secara terprogram.
Jika Anda ingin memuat adegan dari domain statis - tanpa kode "host" - Anda dapat memuatnya di misalnya, http://127.0.0.1:8080/st/scenes/elfmaker/. Ini sengaja tidak sama dengan "localhost" sehingga prod dan static run cross-domain. "Host" memberikan skor, audio dan beberapa UI, jadi tidak semua perilaku tersedia dalam mode ini.
Pada tahun 2020, pengembangan membutuhkan browser berbasis krom atau kromium. Ini karena cara kami mengidentifikasi permintaan impor ESM, di mana Chromium menentukan header tambahan. (Ini bug, bukan fitur.)
Adegan pada dasarnya hanya halaman yang dimuat dalam <iframe> . Anda dapat menulisnya dengan cara apa pun yang Anda suka, tetapi pastikan untuk memanggil "host" untuk bermain audio, melaporkan skor, atau meminta hal -hal lain seperti tampilan tutorial.
Untuk menambahkan adegan baru, Anda harus:
Buat folder static/scenes/sceneName , tambahkan index.html , yang hanya menjalankan kode dalam modul ES:
<script type="module"> yang mengimpor src/scene/api.js , yang mengatur koneksi ke prod "host".api.ready(() => { ... }) yang dipicu saat adegan akan ditukar./:closure.js jika Anda menulis kode gaya penutupan-ini akan menyusun semuanya di bawah js/Tambahkan PNG terkait:
static/img/scenes/sceneName_2x.png (950x564) dan sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)Sebutkan adegan di dalam string.
Jika adegan Anda tidak boleh dirilis ke produksi, nonaktifkan di dalam rilis.js.
Sistem build menyediakan sistem file virtual yang secara otomatis mengkompilasi berbagai jenis sumber yang berguna untuk pengembangan dan menyediakan sejumlah pembantu. Ini termasuk:
.css dihasilkan untuk .scss yang sesuai.json dihasilkan untuk .json5 yang sesuaistatic/scenes/sceneName/:closure.js dapat dibaca untuk menyusun js/ folder adegan yang lebih lama dengan kompiler penutupan, menyediakan modul JS dengan ekspor default. File -file ini sebenarnya tidak ada, tetapi secara otomatis dibuat saat digunakan. Misalnya, jika ada foo.scss , Anda dapat memuat foo.css untuk mengkompilasinya secara otomatis.
Saat menulis SCSS, helper _rel(path.png) menghasilkan url() yang menunjuk ke file relatif terhadap file sumber .scss saat ini - bahkan impor.
Ini berfungsi terlepas dari bagaimana SCSS akhirnya digunakan, apakah <link href="..." /> atau sebagai bagian dari komponen web.
File Sumber static/src/magic.js menyediakan berbagai pembantu tag templat yang, sementara fungsi nyata, diinline pada waktu rilis. Ini termasuk:
_msg`msgid_here` menghasilkan string i18n yang sesuai_static`path_name` menghasilkan referensi absolut ke file dalam static Juga, Santa Tracker dibangun menggunakan modul JS dan akan menulis ulang impor non-relatif untuk node_modules . Misalnya, jika Anda import {LitElement} from 'lit-element'; , ini akan ditulis ulang ke jalur penuh untuk pengembangan atau rilis.
Selain JavaScript sendiri, lingkungan pengembangan Santa Tracker memungkinkan impor jenis modul di masa depan: CSS, JSON dan HTML.
Bila memungkinkan, Sentuhan Dukungan, Keyboard, dan Input Gamepad. Perhatikan bahwa dukungan GamePad dasar ditawarkan melalui acara keyboard sintetis di Keys.js.
Santa Tracker menggunakan perpustakaan audio yang diketahui yang ada di prod "host" saja, tetapi dapat dipicu oleh panggilan API dalam adegan. Ini sebagian besar tidak berdokumen dan disediakan oleh vendor eksternal. Jika Anda tertarik pada file sumber audio, mereka berada di repo di bawah static/audio (dan dilisensikan, seperti yang disebutkan di bawah ini, sebagai cc-by).
Perpustakaan audio memainkan pemicu audio yang memainkan suara sementara (misalnya, klik tombol) atau loop (trek audio). Adegan dapat dikonfigurasi dengan pemicu audio untuk memulai (via api.config({sound: [...]}) ) yang akan menyebabkan semua audio sebelumnya berhenti, bagus untuk mematikan game sebelumnya.
Santa Tracker berisi terjemahan untuk berbagai bahasa yang berbeda. Terjemahan ini bersumber dari alat terjemahan internal Google.
Jika Anda menambahkan string untuk pengembangan, silakan modifikasi en_src_messages.json dan minta karyawan Google untuk meminta terjemahan menjalankan. Jika Anda akan membangun Santa Tracker untuk produksi, Anda akan membutuhkan string untuk diterjemahkan dan output akhir yang terkandung dalam lang/ .
Sementara kode sumber menyertakan skrip rilis, itu tidak dimaksudkan untuk pengguna akhir untuk dijalankan dan digunakan oleh Googlers untuk menggunakan situs tersebut.
Versi Santa Tracker sebelumnya, yang digunakan hingga 2018, tersedia di cabang Archive-2018.
Semua file gambar dan audio (termasuk *.png, *.jpg, *.svg, *.mp3, *.wav dan *.ogg) dilisensikan di bawah lisensi CC-by. Semua file lain dilisensikan di bawah lisensi Apache 2. Lihat file lisensi untuk detailnya.
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.
