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>SaySomething (2D)</title> | |
| <link rel="shortcut icon" href="TemplateData/favicon.ico"> | |
| <link rel="stylesheet" href="TemplateData/style.css"> | |
| <!-- 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> | |
| <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"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <h3> What is Say Something 😲 ? </h3> | |
| <p> Say Something is a game where an <b>AI asks you to write something either nice, mean or informative/interesting.</b> </p> | |
| <p> <b> For a better experience, you should play full screen (click on the bottom right corner button of the screen). </b></p> | |
| <p> The AI can take time to load from time to time, don't hesitate to reload the game if it happens. </p> | |
| <p>If you like the game, don't forget to click on the like 💖 button.</p> | |
| <p> Do you want to learn how to build your own version of the game 🤖? Check 👉 <a href="https://thomassimonini.substack.com/p/creating-an-engaging-ai-powered-game?r=dq5fg&utm_campaign=post&utm_medium=web" target="_blank"> this tutorial</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="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="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 + "/WEBGL.loader.js"; | |
| const config = { | |
| dataUrl: buildUrl + "/WEBGL.data", | |
| frameworkUrl: buildUrl + "/WEBGL.framework.js", | |
| codeUrl: buildUrl + "/WEBGL.wasm", | |
| streamingAssetsUrl: "StreamingAssets", | |
| companyName: "DefaultCompany", | |
| productName: "SaySomething (2D)", | |
| productVersion: "1.0", | |
| }; | |
| 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> | |