static/scenes/modvil/index.html

<!DOCTYPE html>
<!--
 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.
-->

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lobster|Google+Sans:400,500,700" />
  <link rel="stylesheet" href="index.css" />
</head>
<body>

<script type="module">
import api from '../../src/scene/api.js';
import '../../src/polyfill/css.js';
import {scenesWithColor} from '../../src/elements/santa-card.js';
import * as helpers from './helpers.js';
import {loadAnimation} from '../../src/deps/lottie.js';
import {animationSoundTriggers} from './animationSoundTriggers.js'
import {DestinationsCache} from './elements/maputils.js';
import './elements/modvil-arrow.js';
import './elements/modvil-module.js';
import './elements/modvil-village.js';
import './elements/modvil-tracker.js';
import {_static, _msg} from '../../src/magic.js';
import scenes from '../../src/strings/scenes.js';

const villageLoadSounds = helpers.mobileAndTabletCheck() ? 'village_load_mobile_sounds' : 'village_load_sounds';
api.preload.sounds(villageLoadSounds);
api.preload.sounds('generic_load_sounds');

api.config({
  scroll: true,
  subscribe: true,  // subscribe to remote config
  sound: ['music_start_village', 'village_start'],
});

api.preload.images(
  'img/family-icon.png',
  'img/ornament.svg',
  'img/village/1.svg',
  'img/village/2.svg',
  'img/village/3.svg',
  'img/village/4.svg',
  'img/village/divider.svg',
);

const villageElement = document.getElementById('village');
const androidModuleTemplate = /** @type {!HTMLTemplateElement} */ (document.getElementById('android-module'));
const insertAndroidCards = () => {
  if (androidModuleTemplate.parentNode) {
    const node = androidModuleTemplate.content.cloneNode(true);
    androidModuleTemplate.remove();
    const main = document.querySelector('main');
    main.insertBefore(node, villageElement.nextElementSibling);  // insert after village itself
  }
};

let featuredRoute = '';
let playRoute = '';

const mainElement = document.querySelector('main');
const trackerElement = document.createElement('modvil-tracker');
const loudCardElement = document.querySelector('santa-card.loud');

const destinationsCache = new DestinationsCache((destinations) => {
  trackerElement.destinations = destinations;
});

// nb. Always show tracker in dev.
if (window.top == window) {
  mainElement.prepend(trackerElement);
}

const featuredAssets = 'boatload buildandbolt codeboogie codelab elfmaker elfski holidayslopes glider gumball jamband jetpack mercator penguindash presentbounce santascanvas santaselfie seasonofgiving snowball snowbox snowflake traditions translations wrapbattle'.split(/\s+/g);
const fallbackFeaturedImageSrc = featuredImage.src;

api.addEventListener('data', (ev) => {
  const payload = ev.detail;
  const {showTracker, trackerFlags, trackerOffset} = payload;

  // The 'showTracker' value from the state overrides the trackerFlags and
  // is only used for debugging outside of production.
  if (showTracker || (showTracker !== false && trackerFlags.showTracker)) {
    if (trackerElement.parentNode !== mainElement) {
      mainElement.prepend(trackerElement);
      api.preload.wait(trackerElement.updateComplete);
    }
  } else {
    trackerElement.remove();
  }
  trackerElement.routeJitter = trackerFlags.routeJitter;
  trackerElement.trackerOffset = trackerOffset || 0;

  loudCardElement.hidden = !payload.loudCard;
  loudCardElement.scene = payload.loudCard || null;

  destinationsCache.routeUrl = trackerFlags.routeUrl;

  if (payload.android) {
    insertAndroidCards();
  }

  // Optionally display a featured game.
  const featured = payload.featured;
  if (featured in scenes) {
    featuredButton.disabled = false;
    featuredButton.style.background = scenesWithColor[featured] || null;
    featuredRoute = featured;
    featuredLabel.textContent = scenes[featured];

    if (featuredAssets.indexOf(featured) !== -1) {
      featuredImage.src = _static`img/featured/` + featured + '.svg';
    } else {
      featuredImage.src = fallbackFeaturedImageSrc;
    }
  } else {
    featuredButton.disabled = true;
    featuredRoute = '';
  }

  playRoute = payload.play || '';

  Array.from(document.querySelectorAll('santa-card')).forEach((card) => {
    const detail = payload.routes[card.id] || {video: false, locked: undefined};
    card.locked = detail.locked;
  });
});


/**
 * Finds the ratio of scrolling that this element should display at.
 */
function ratioForElement(el) {
  const se = document.scrollingElement;
  const topScroll = se.scrollTop;

  // The start of this element is effectively min window height (can't scroll above this point).
  const effectiveStart = Math.max(0, el.offsetTop - window.innerHeight);
  const effectiveEnd = Math.min(se.offsetHeight - window.innerHeight, el.offsetTop + el.offsetHeight);

  const ratio = (topScroll - effectiveStart) / (effectiveEnd - effectiveStart);

  if (ratio <= 0.0) {
    return 0.0;
  } else if (ratio >= 1.0) {
    return 1.0;
  }
  // This creates more of a cubic-bezier style transform (although it's quite subtle).
  return (Math.sin((ratio - 0.5) * Math.PI) + 1) * 0.5;
}


/**
 * @param {string} id to play for
 * @param {?number} ratio to play at
 */
const updateModuleSoundRatio = (function() {
  const previous = {};

  return (id, ratio) => {
  // TODO(samthor): Should we prevent lots of repeat events here?
  // prevent sending lots of repeat events for [0,1]
  // Klang's config seems to do nothing in this case anyway; the speed would be Infinity
    ratio = ratio || 0;

    if ((previous[id] || 0) === ratio) {
      return;  // already set
    }

    previous[id] = ratio;
    api.play('village_scroll', id, ratio);
  };
}());


async function prepareModules() {
  const main = document.querySelector('main');

  helpers.installAdjustHandler((resized) => {
    let mode = '';
    if (window.innerWidth <= 414) {
      mode = 'mobile';
    } else if (window.innerWidth <= 768) {
      mode = 'small';
    }

    let visible = undefined;  // undefined=at top, true=visible, false=after visible

    const rootMargin = 24;  // include extra space and load early

    const se = document.scrollingElement;
    const windowRangeLow = se.scrollTop - rootMargin;
    const windowRangeHigh = se.scrollTop + window.innerHeight + rootMargin;

    // No scroll sounds on mobile and tablet.
    const isMobileOrTablet = helpers.mobileAndTabletCheck();

    const topRatio = ratioForElement(villageElement);
    if (!isMobileOrTablet) {
      // Top isn't a module, but it has audio cues.
      updateModuleSoundRatio('top', topRatio);
    }
    villageElement.active = topRatio < 1;  // don't render weather if not needed

    const modules = Array.from(main.children).filter((m) => m.localName === 'modvil-module');
    modules.forEach((m) => {
      if (visible !== false) {
        if (m.offsetTop >= windowRangeHigh) {
          visible = false;
        }
      }
      if (visible === undefined) {
        if (m.offsetTop + m.offsetHeight >= windowRangeLow) {
          visible = true;
        }
      }

      // Configure the CE. Ratio of null hints that the scene is invisible.
      const ratio = visible ? ratioForElement(m) : null;
      if (ratio === null) {
        m.ratio = null;
      } else if (!mode) {
        m.ratio = ratio;
      } else {
        m.ratio = 0.5;  // don't animate scroll in small mode
      }
      m.mode = mode;

      const effectiveVisible = visible || false;
      if (m.load !== effectiveVisible) {
        m.resize();  // just resize in case Lottie got stuck and didn't render us
        m.load = effectiveVisible;
      } else {
        resized && m.resize();
      }

      if (!isMobileOrTablet) {
        // Configure ratio of sound.
        updateModuleSoundRatio(m.id, ratio);
      }
    });
  });

  if (!helpers.mobileAndTabletCheck()) {
    main.addEventListener('anim', (e) => {
      const scene = e.target.id;
      const {index, currentTime} = e.detail;
      checkAndPlaySound(scene, index, currentTime);
    });
  }
}

function checkAndPlaySound(scene, index, time) {
  if (animationSoundTriggers[scene] && animationSoundTriggers[scene][index]) {
    const sounds = animationSoundTriggers[scene][index];

    for (let i = 0; i < sounds.length; i++) {
      if (time > sounds[i].time && time < (sounds[i].time + 5) && (performance.now() - sounds[i].played) > 1000) {
        api.play(sounds[i].sound, time);
        sounds[i].played = performance.now();
      }
    }
  }
}

api.preload.wait(prepareModules());

const configureActionButton = (button, callback) => {
  button.addEventListener('click', (ev) => {
    button.classList.add('active');
    callback();
  });
  button.addEventListener('mousedown', () => {
    api.play('generic_button_click');
  });
  button.addEventListener('mouseenter', () => {
    api.play('generic_button_over');
  });
  button.addEventListener('touchdown', () => {
    api.play('generic_button_click');
  });
};

configureActionButton(document.getElementById('play'), () => {
  gtag('event', 'village', {action: 'click', label: 'play-round'});
  api.go(playRoute);
});

configureActionButton(document.getElementById('featuredButton'), () => {
  gtag('event', 'village', {action: 'click', label: 'featured'});
  api.go(featuredRoute);
});

configureActionButton(document.getElementById('familyguide'), () => {
  gtag('event', 'village', {action: 'click', label: 'familyguide'});
  api.go('familyguide');
});


api.ready(async () => {
  // jump to target hash (position is often incorrect due to lazy-load)
  function scrollToHash() {
    const hash = window.location.hash;
    if (hash) {
      const el = document.getElementById(hash.substr(1));
      el && el.scrollIntoView({block: 'center', behavior: 'auto'});
    }
  }
  window.addEventListener('hashchange', scrollToHash);
  scrollToHash();

  // force lazy-load
  window.dispatchEvent(new CustomEvent('resize'));

  // force focus
  trackerElement.focusOnSanta();

  // Set the default page focus on the menu button.
  api.focusOnMenu();
});

</script>

<template id="android-module">
  <modvil-module id="android" color="#9b643d" parts="static-png,loop,static-png,loop" class="android" mode="android">
    <santa-card id="@cityquiz"></santa-card>
    <santa-card id="@rocketsleigh"></santa-card>
    <santa-card id="@dasherdancer"></santa-card>
    <santa-card id="@snowballrun"></santa-card>
    <santa-card id="@presenttoss"></santa-card>
    <santa-card id="@penguinswim"></santa-card>
  </modvil-module>
</template>

<div id="top"></div>

<div id="modules">
  <div class="sidebar left"></div>
  <main>
<modvil-village id="village">

<div class="sticky-container">
  <div class="sticky">
<button id="familyguide" class="uibutton">
  <img src="img/family-icon.png" width="32" height="32" />
  <span msgid="scene_family"></span>
</button>
<button id="featuredButton" class="featured-button uibutton" disabled>
  <div class="info" msgid="featured"></div>
  <img id="featuredImage" src="../../img/featured/_video.svg" width="32" height="32" />
  <span id="featuredLabel"></span>
</button>
  </div>
</div>

  <!-- Regular header content -->
  <svg class="google"><path d="M7.74363885 18.01859504v2.03305785h4.98714095c-.1526676 1.14049591-.5428181 1.97520661-1.1365254 2.56198351-.7294117.7107438-1.86593703 1.4876033-3.85061555 1.4876033-3.07031464 0-5.47058823-2.4132232-5.47058823-5.40495871 0-2.99173554 2.40027359-5.40495868 5.47058823-5.40495868 1.65389877 0 2.86675785.63636364 3.75731875 1.45454546l1.4673051-1.42975207C11.729959 12.14256198 10.0675787 11.25 7.74363885 11.25 3.53679891 11.25 0 14.58884298 0 18.68801653c0 4.09917357 3.53679891 7.43801657 7.74363885 7.43801657 2.27305065 0 3.98632015-.7272728 5.32640215-2.0826447 1.3740082-1.3388429 1.8065664-3.2314049 1.8065664-4.75206609 0-.47107438-.0339261-.90909091-.1102599-1.27272727H7.74363885zm13.36689465-1.65289256c-2.7225718 0-4.9447332 2.01652892-4.9447332 4.80165292 0 2.7603306 2.2221614 4.8016529 4.9447332 4.8016529s4.9447333-2.0330579 4.9447333-4.8016529c0-2.785124-2.2221615-4.80165292-4.9447333-4.80165292zm0 7.71074382c-1.4927496 0-2.7819425-1.1983471-2.7819425-2.9090909 0-1.72727276 1.2891929-2.90909094 2.7819425-2.90909094 1.4927497 0 2.7819426 1.18181818 2.7819426 2.90909094 0 1.7107438-1.2891929 2.9090909-2.7819426 2.9090909zm24.2402189-6.63636366h-.0763338c-.4834473-.56198347-1.4164159-1.07438016-2.5953488-1.07438016-2.4596444 0-4.605472 2.09090909-4.605472 4.80165292 0 2.6942148 2.1458276 4.8016529 4.605472 4.8016529 1.1789329 0 2.1119015-.5123967 2.5953488-1.0909091h.0763338v.6694215c0 1.8347107-1.0093023 2.8181818-2.629275 2.8181818-1.323119 0-2.1458276-.9256199-2.4850889-1.7107438l-1.8829001.7603306c.542818 1.2727272 1.976197 2.8347107 4.367989 2.8347107 2.5359781 0 4.6818058-1.4545455 4.6818058-5v-8.63636364h-2.0525308v.82644628zm-2.4850889 6.63636366c-1.4927497 0-2.629275-1.2396694-2.629275-2.9090909 0-1.6942149 1.1365253-2.90909094 2.629275-2.90909094 1.4757866 0 2.6292749 1.23966942 2.6292749 2.92561984.0084816 1.6776859-1.1534883 2.892562-2.6292749 2.892562zm-10.7291382-7.71074382c-2.7225718 0-4.9447332 2.01652892-4.9447332 4.80165292 0 2.7603306 2.2221614 4.8016529 4.9447332 4.8016529s4.9447332-2.0330579 4.9447332-4.8016529c0-2.785124-2.2221614-4.80165292-4.9447332-4.80165292zm0 7.71074382c-1.4927497 0-2.7819425-1.1983471-2.7819425-2.9090909 0-1.72727276 1.2891928-2.90909094 2.7819425-2.90909094s2.7819426 1.18181818 2.7819426 2.90909094c0 1.7107438-1.2891929 2.9090909-2.7819426 2.9090909zm16.9630643-12.6280992h2.1288646v14.5206612h-2.1288646V11.4483471zm8.702052 12.6280992c-1.1025992 0-1.8829001-.4876033-2.3917921-1.4545455L62 19.96900826l-.2205198-.54545454c-.4071136-1.07438017-1.6623803-3.05785124-4.2153215-3.05785124-2.5359781 0-4.6478796 1.94214876-4.6478796 4.80165292 0 2.6942148 2.0864569 4.8016529 4.8853625 4.8016529 2.2560875 0 3.5622435-1.3471075 4.1050615-2.123967l-1.6793433-1.0909091c-.5597811.7933885-1.323119 1.3223141-2.4257182 1.3223141zm-.1526676-5.90909093c.8735978 0 1.6199726.43801653 1.8659371 1.05785124L55.0621067 21.018595c0-2.01652888 1.4673051-2.85123963 2.5868673-2.85123963z"/></svg>
  <h1 msgid="santatracker"></h1>
  <p msgid="village_explore"></p>
  <santa-card class="loud" hidden></santa-card>
  <button id="play"><span msgid="play"></span></button>

</modvil-village>
<modvil-module id="movies" color="#6900ff" parts="static-png,cards,loop" mode="movies">
  <santa-card id="likealight"></santa-card>
  <santa-card id="yulelog"></santa-card>
  <santa-card id="penguinproof"></santa-card>
</modvil-module>
<modvil-module id="transithub" color="#d4f1fe" parts="static-png,cards,loop,scroll">
  <santa-card id="santaselfie" style="--x: 18.5%; --y: 50%"></santa-card>
  <santa-card id="elfmaker" style="--x: 50%; --y: 36%"></santa-card>
  <santa-card id="storybook" style="--x: 81.5%; --y: 22%"></santa-card>
</modvil-module>
<modvil-module id="sciencelab" color="#3499ff" parts="static-svg,loop,scroll,cards">
  <santa-card id="codelab" style="--x: 17%; --y: 15%"></santa-card>
  <santa-card id="gumball" style="--x: 38%; --y: 75%"></santa-card>
  <santa-card id="railroad" style="--x: 81%; --y: 31%"></santa-card>
</modvil-module>
<modvil-module id="toymaking" color="#00c1f2" parts="static-png,static-png,scroll,cards,static-png">
  <santa-card id="presentbounce" style="--x: 28%; --y: 17%"></santa-card>
  <santa-card id="buildandbolt" style="--x: 18%; --y: 47.5%"></santa-card>
  <santa-card id="snowball" style="--x: 81%; --y: 27%"></santa-card>
</modvil-module>
<modvil-module id="kitchen" color="#fdb0ca" parts="static-png,loop,static-png,cards,static-png">
  <santa-card id="traditions" style="--x: 19.4%; --y: 17.7%"></santa-card>
  <santa-card id="translations" style="--x: 35.6%; --y: 60.8%"></santa-card>
  <santa-card id="presentdrop" style="--x: 74.3%; --y: 23.7%"></santa-card>
</modvil-module>
<modvil-module id="nursery" color="#6bb4fd" parts="static-png,loop,cards,scroll">
  <santa-card id="speedsketch" style="--x: 26.4%; --y: 42.1%"></santa-card>
  <santa-card id="santascanvas" style="--x: 72.9%; --y: 23.1%"></santa-card>
  <santa-card id="snowbox" style="--x: 62.5%; --y: 63.8%"></santa-card>
</modvil-module>
<modvil-module id="greenhouse" color="#94dae4" parts="static-png,loop,scroll,static-png,cards">
  <santa-card id="jetpack" style="--x: 19.2%; --y: 58.9%"></santa-card>
  <santa-card id="santasearch" style="--x: 78.7%; --y: 23.5%"></santa-card>
  <santa-card id="penguindash" style="--x: 78.7%; --y: 81.5%"></santa-card>
</modvil-module>
<modvil-module id="wrapping" color="#5203c0" parts="static-svg,loop,scroll,static-svg,cards">
  <santa-card id="elfski" style="--x: 19.4%; --y: 18.4%"></santa-card>
  <santa-card id="seasonofgiving" style="--x: 34.3%; --y: 82.5%"></santa-card>
  <santa-card id="racer" style="--x: 77.6%; --y: 41.9%"></santa-card>
</modvil-module>
<modvil-module id="disco" color="#e5e5e5" parts="static-png,loop,scroll,cards">
  <santa-card id="codeboogie" style="--x: 18%; --y: 17%"></santa-card>
  <santa-card id="jamband" style="--x: 26%; --y: 80%"></santa-card>
  <santa-card id="wrapbattle" style="--x: 82%; --y: 50%"></santa-card>
</modvil-module>
<modvil-module id="gym" color="#e5e5e5" parts="static-png,loop,loop,cards">
  <santa-card id="mercator" style="--x: 21.5%; --y: 25%"></santa-card>
  <santa-card id="glider" style="--x: 22.5%; --y: 83%"></santa-card>
  <santa-card id="runner" style="--x: 82%; --y: 50%"></santa-card>
</modvil-module>

<modvil-module id="footer" color="#8ab8d4" parts="static-svg,cards" no-divider>
</modvil-module>
  </main>
  <div class="sidebar right"></div>
</div>

<footer>
  <modvil-arrow dir="up" target="top"></modvil-arrow>
</footer>

</body>
</html>