Spaces:
Running
Running
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <title>Snowball Fight Beta</title> | |
| <link rel="shortcut icon" href="TemplateData/favicon.ico"> | |
| <link rel="stylesheet" href="TemplateData/style.css"> | |
| <style> | |
| div#discordButton button{ | |
| position: absolute; | |
| left: 0px; | |
| } | |
| </style> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| </head> | |
| </head> | |
| <body class="dark"> | |
| <!-- Modal --> | |
| <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <img class="modal-title" id="exampleModalLabel" src="./TemplateData/Logo_beta.png" alt="Logo Beta" style="max-height:200px" class="img-fluid"/> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <h3> Welcome to the SnowballFight Beta ☃️</h3> | |
| <p> Snowball Fight is a game made by 🤗 using Unity ML-Agents where you play against a Deep Reinforcement Learning agent. For more info, <a href="https://huggingface.co/blog/snowball-fight">check our blogpost</a></p> | |
| <p> If you like the game, don't forget to click on the like 💖 button.</p> | |
| <p> If you have any feedback you can write them <a href="https://forms.gle/1xhD5JBjKiEPddKR7">here.</a></p> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-success" data-dismiss="modal">Let me play!</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="discordButton"> | |
| <a href="https://discord.gg/6EbMcWJHdb"> | |
| <button class="btn btn-primary"> Join our Discord </button> | |
| </a> | |
| </div> | |
| <div id="unity-container" class="unity-desktop"> | |
| <canvas id="unity-canvas"></canvas> | |
| </div> | |
| <div id="loading-cover" style="display:none;"> | |
| <div id="unity-loading-bar"> | |
| <div id="unity-logo"><img src="TemplateData/logo_.png"></div> | |
| <div id="unity-progress-bar-empty" style="display: none;"> | |
| <div id="unity-progress-bar-full"></div> | |
| </div> | |
| <div class="spinner"></div> | |
| </div> | |
| </div> | |
| <div id="unity-fullscreen-button" style="display: none;"></div> | |
| <script> | |
| const hideFullScreenButton = ""; | |
| const buildUrl = "Build"; | |
| const loaderUrl = buildUrl + "/SnowballFight.loader.js"; | |
| const config = { | |
| dataUrl: buildUrl + "/SnowballFight.data.unityweb", | |
| frameworkUrl: buildUrl + "/SnowballFight.framework.js.unityweb", | |
| codeUrl: buildUrl + "/SnowballFight.wasm.unityweb", | |
| streamingAssetsUrl: "StreamingAssets", | |
| companyName: "Hugging Face", | |
| productName: "Snowball Fight Beta", | |
| productVersion: "0.1", | |
| }; | |
| const container = document.querySelector("#unity-container"); | |
| const canvas = document.querySelector("#unity-canvas"); | |
| const loadingCover = document.querySelector("#loading-cover"); | |
| const progressBarEmpty = document.querySelector("#unity-progress-bar-empty"); | |
| const progressBarFull = document.querySelector("#unity-progress-bar-full"); | |
| const fullscreenButton = document.querySelector("#unity-fullscreen-button"); | |
| const spinner = document.querySelector('.spinner'); | |
| const canFullscreen = (function() { | |
| for (const key of [ | |
| 'exitFullscreen', | |
| 'webkitExitFullscreen', | |
| 'webkitCancelFullScreen', | |
| 'mozCancelFullScreen', | |
| 'msExitFullscreen', | |
| ]) { | |
| if (key in document) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| }()); | |
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | |
| container.className = "unity-mobile"; | |
| config.devicePixelRatio = 1; | |
| } | |
| loadingCover.style.display = ""; | |
| const script = document.createElement("script"); | |
| script.src = loaderUrl; | |
| script.onload = () => { | |
| createUnityInstance(canvas, config, (progress) => { | |
| spinner.style.display = "none"; | |
| progressBarEmpty.style.display = ""; | |
| progressBarFull.style.width = `${100 * progress}%`; | |
| }).then((unityInstance) => { | |
| loadingCover.style.display = "none"; | |
| if (canFullscreen) { | |
| if (!hideFullScreenButton) { | |
| fullscreenButton.style.display = ""; | |
| } | |
| fullscreenButton.onclick = () => { | |
| unityInstance.SetFullscreen(1); | |
| }; | |
| } | |
| }).catch((message) => { | |
| alert(message); | |
| }); | |
| }; | |
| document.body.appendChild(script); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $("#infoModal").modal('show'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |