<!DOCTYPE html>
<!-- Copyright 2012 United States Government, as represented by the Secretary of Defense, Under -->
<!-- Secretary of Defense (Personnel & Readiness). -->
<!-- -->
<!-- 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>
<!-- The Virtual World Framework client is a collection of scripts and a world specification -->
<!-- passed to an initialization call. In this sample, the world specification is provided -->
<!-- inline for clarity, but it is normally provided by the reflector or may be specified as a -->
<!-- URI and loaded from a network-visible location. -->
<head>
<title>Virtual World Framework</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<script type="text/javascript" src="compatibilitycheck.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<!-- <script type="text/javascript" src="socket.io-sessionid-patch.js"></script> -->
<script src="vwf/view/webrtc/dist/adapter-latest.js"></script>
<script type="text/javascript" src="vwf/view/lib/cell.js"></script>
<script type="text/javascript" src="vwf/view/lib/he.js"></script>
<script type="text/javascript" src="vwf/view/lib/draggabilly.pkgd.js"></script>
<script type="text/javascript" src="js/screenfull.min.js"></script>
<!-- <script type="text/javascript" src="vwf/view/lib/polyglot/polyglot.min.js"></script> -->
<link rel="stylesheet" href="vwf/view/lib/mdc/dist/material-components-web.css">
<script src="vwf/view/lib/mdc/dist/material-components-web.js"></script>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="async.js"></script>
<script type="text/javascript" src="crypto.js"></script>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="alea.js"></script>
<script type="text/javascript" src="mash.js"></script>
<script type="text/javascript" src="Class.create.js"></script>
<script type="text/javascript" src="rAF.js"></script>
<script type="text/javascript" src="performance.now-polyfill.js"></script>
<!-- This is the main client library. vwf.js creates a framework manager and attaches it to -->
<!-- the global window object as window.vwf. All access to the framework is through that -->
<!-- reference, and no other objects are globally visible. -->
<script type="text/javascript" src="vwf.js"></script>
<!-- The core framework manages the simulation and synchronizes it across worlds shared by -->
<!-- multiple users. But, the manner in which the simulation is expressed is controlled by -->
<!-- extension modules. There are two flavors. Models directly control the simulation but -->
<!-- cannot accept external input. The model configuration is identical for all participants -->
<!-- in a shared world. Views may accept external input -such as pointer and key events or -->
<!-- directives from a connection to an outside engine that is not visible to all users- but -->
<!-- may only affect the simulation indirectly through the synchronization server. -->
<script type="text/javascript">
// Users can specify which libraries the application will load by adding parameters to the URL.
// Model libraries are specified as a query parameter and view libraries as a hash fragment.
var userLibraries = { model: {}, view: {} };
var application;
vwf.loadConfiguration(application, userLibraries, compatibilityCheck);
</script>
<!-- This is the common view implementation and an example view that summarizes the -->
<!-- simulation state in HTML on the main page. -->
<link rel="stylesheet" type="text/css" href="index.css" />
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11815598-9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments) };
gtag('js', new Date());
gtag('config', 'UA-11815598-9');
</script>
</head>
<body class="mdc-typography">
<!-- Generic clients may have nearly empty pages, but pages for custom clients may be laid -->
<!-- out in any manner desired. Any view and models that render to the page should be -->
<!-- instructed where to attach their content. -->
<!-- The main content renders to "#vwf-root", the item with the id "vwf-root". -->
<!-- The loading spinner -->
<div id="vwf-loading-spinner" class="pace pace-active">
<div class="pace-activity"></div>
</div>
<div id="incompatibleBrowser">
<div>
<span style="color:#3090C7;">
<br/>
<br/>Your browser does not support Virtual World Framework. Please review our
<a href='https://virtual.wf/requirements.html'>requirements</a> for supported browser versions.</span>
</div>
</div>
<div id="vwf-root"></div>
<div id="ui-controls" class="guiwindow">
<i id="hideui" class="mdc-icon-toggle material-icons" role="button" aria-pressed="true" aria-label="Hide Toollbar" tabindex="0"
data-toggle-on='{"label": "Hide", "content": "grid_on"}' data-toggle-off='{"label": "Show", "content": "grid_off"}'>
grid_on
</i>
<i id="fullscreenui" class="mdc-icon-toggle material-icons" role="button" aria-pressed="true" aria-label="Hide Toollbar" tabindex="0"
data-toggle-on='{"label": "Hide", "content": "fullscreen"}' data-toggle-off='{"label": "Show", "content": "fullscreen_exit"}'>
fullscreen
</i>
</div>
<script>
mdc.autoInit();
window.addEventListener("load", function (event) {
console.log("All resources finished loading!");
});
const iconEl = document.querySelector('#hideui');
iconEl.addEventListener('MDCIconToggle:change', (e) => {
let ui = document.querySelector('.mdc-toolbar');
if (ui) {
let chkAttr = e.detail.isOn;
if (chkAttr) {
ui.style.visibility = 'visible'
} else {
ui.style.visibility = 'hidden'
}
}
});
const fullScreenToggle = document.querySelector('#fullscreenui');
fullScreenToggle.addEventListener('MDCIconToggle:change', (e) => {
if (screenfull.enabled) {
screenfull.toggle();
} else {
// Ignore or do something else
}
});
</script>
</body>
</html>