santa tracker web
Holly
이 저장소에는 12 월 휴가 기간 동안의 교육 및 재미있는 전통 인 Google Santa Tracker에 대한 코드가 포함되어 있습니다.
이 소스 코드가 흥미 로워지기를 바랍니다. 일반적으로, 우리는 대중의 외부 기여를 받아들이지 않습니다. 버그 보고서 또는 기능 요청을 제출하거나 엔지니어링 리드 Jez Swanson에 문의하십시오.
(이 텍스트는 Contributing.md에 복제되었습니다)
산타 추적기는 크롬, 파이어 폭스 및 사파리의 상록수 버전을 지원합니다. 또한 다른 크롬 기반 브라우저 (에지, 오페라 등)도 지원합니다.
또한 IE11과 같은 이전 브라우저에 대한 "폴백 모드"를 제시하여 사용자가 소수의 역사적인 게임을 할 수 있습니다.
산타 추적기는 다른 장면으로 나뉩니다. 산타 추적기의 각 페이지는 메인 빌리지 페이지 인 Modvil을 포함한 한 장면에 해당합니다. 장면은 정적/ 장면/ 디렉토리에 있습니다. 각 장면은 IFRAME로로드되며 상대적으로 자체적으로 포함되어 있습니다.
사이트의 호스트 부분은 게임 스코어 또는 튜토리얼과 같은 음악 및 공통 UI뿐만 아니라 각 장면의로드를 처리합니다. 호스트와 장면 사이에 API가있어서 호스트가 장면로드와 같은 이벤트가 발생할 때 장면에 알릴 수 있으며 장면에서 호스트에게 노래를 재생하거나 점수를 업데이트하도록 지시 할 수 있습니다.
yarn 또는 npm 필요합니다. 바이너리 버전의 Closure Compiler가 해당 플랫폼에 지원되지 않으므로 Windows에 빌드하는 경우 Java가 필요할 수도 있습니다.
Deps를 설치하려면 yarn 또는 npm install 복제하고 실행하고 ./serve.js 실행하여 개발 서버를 실행하십시오. 개발 URL이 클립 보드에 복사됩니다.
서빙 스크립트 ./serve.js 는 기본적으로 포트 8000과 8080에서 모두 듣습니다. 포트 8000은 사이트의 호스트 부분 (이는 프로덕션 https://santatracker.google.com 도메인에 해당)을 제공하며 포트 8080은 장면을 포함하여 정적 컨텐츠를 제공합니다.
특정 장면을로드하려면 eG, http : // localhost : 8000/boatload.html을 열어줍니다. 사이트가로드되면 콘솔에서 santaApp.route = 'sceneName' 실행하여 프로그래밍 방식으로 장면을 전환 할 수도 있습니다.
"호스트"코드가없는 상태에서 정적 도메인에서 장면을로드하려면 http://127.0.1:8080/st/scenes/elfmaker/에로드 할 수 있습니다. 이것은 의도적으로 "LocalHost"와 같지 않으므로 Prod와 정적이 크로스 도메인을 실행합니다. "호스트"는 점수, 오디오 및 일부 UI를 제공 하므로이 모드에서 모든 동작을 사용할 수있는 것은 아닙니다.
2020 년 현재 개발에는 크롬 또는 크롬 기반 브라우저가 필요합니다. 이는 Chromium이 추가 헤더를 지정하는 ESM 가져 오기 요청을 식별하는 방식 때문입니다. (이것은 기능이 아닌 버그입니다.)
장면은 근본적으로 <iframe> 에로드 된 페이지 만 있습니다. 원하는 방식으로 글을 쓸 수는 있지만 "호스트"로 전화하여 오디오를 재생하거나, 점수를보고하거나, 튜토리얼 디스플레이와 같은 다른 것들을 요청하십시오.
새 장면을 추가하려면 다음을 위해 필요합니다.
ES 모듈에서만 코드를 실행하는 index.html 추가하여 static/scenes/sceneName 폴더를 만듭니다.
<script type="module"> src/scene/api.jsapi.ready(() => { ... }) 콜백을 구성합니다.js/ Magic URL을 가져옵니다 ./:closure.js관련 PNG 추가 :
static/img/scenes/sceneName_2x.png (950x564) 및 sceneName_1x.png (475x282)prod/images/og/sceneName.png (1333x1000)문자열 내부의 장면을 지정하십시오.
장면이 프로덕션에 해제되지 않아야하는 경우 release.js 내부에서 비활성화하십시오.
빌드 시스템은 개발에 유용한 다양한 소스 유형을 자동으로 컴파일하고 많은 도우미를 제공하는 가상 파일 시스템을 제공합니다. 여기에는 다음이 포함됩니다.
.css 파일은 해당 .scss 에 대해 생성됩니다.json 해당 .json5 에 대해 생성됩니다static/scenes/sceneName/:closure.js 파일을 읽고 Closure Compiler를 사용하여 이전 장면의 js/ 폴더를 컴파일하여 기본 내보내기가있는 JS 모듈을 제공 할 수 있습니다. 이 파일은 실제로 존재하지 않지만 사용시 자동으로 생성됩니다. 예를 들어, foo.scss 있으면 foo.css 로드하여 자동으로 컴파일 할 수 있습니다.
SCSS를 작성할 때 Helper _rel(path.png) 현재 .scss 소스 파일에 비해 파일을 가리키는 url() 을 생성합니다.
이것은 <link href="..." /> 또는 웹 구성 요소의 일부로 SCSS가 최종적으로 사용되는 방식에 관계없이 작동합니다.
소스 파일 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는 Prod "Host"에만 존재하는 알려진 오디오 라이브러리를 사용하지만 장면에서 API 호출에 의해 트리거 될 수 있습니다. 이것은 대부분 외부 공급 업체가 문서화하지 않고 제공합니다. 오디오 소스 파일에 관심이있는 경우 static/audio 아래의 리포지토리에 있습니다 (아래에 언급 된대로 CC-BY).
오디오 라이브러리는 임시 사운드 (예 : 버튼 클릭) 또는 루프 (오디오 트랙)를 재생하는 오디오 트리거를 재생합니다. 장면은 api.config({sound: [...]}) )를 통해 시작하기 위해 오디오 트리거로 구성 할 수 있으며, 이는 이전의 모든 오디오를 중지하고 이전 게임을 종료하는 데 좋습니다.
산타 추적기에는 다양한 언어에 대한 번역이 포함되어 있습니다. 이 번역은 Google의 내부 번역 도구에서 제공됩니다.
개발을 위해 문자열을 추가하는 경우 en_src_messages.json 수정하고 Google 직원에게 번역 실행을 요청하도록 요청하십시오. 생산을 위해 산타 추적기를 구축하려면 문자열을 번역하고 lang/ 내에 포함 된 최종 출력이 필요합니다.
소스 코드에는 릴리스 스크립트가 포함되어 있지만 최종 사용자가 실행할 의도는 아니며 Googlers가 사이트를 배포하기 위해 사용합니다.
2018 년까지 사용 된 Santa Tracker의 이전 버전은 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.
