Add bloons, optimize the flash initialization
This commit is contained in:
wearrrrr
parent
213c729a70
commit
04952867ef
9 changed files with 1994 additions and 1960 deletions
3715
pnpm-lock.yaml
generated
3715
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,26 +1,32 @@
|
|||
const id = window.location.pathname.split("/").pop();
|
||||
id && RufflePlayer ? window.addEventListener("load", ()=>{
|
||||
const e = RufflePlayer.newest().createPlayer();
|
||||
e.config = {
|
||||
preloader: !1,
|
||||
splashScreen: !1,
|
||||
if (id && RufflePlayer) {
|
||||
window.addEventListener("load", loadRuffle);
|
||||
} else {
|
||||
document.querySelector("#loader").classList.add("hidden");
|
||||
document.querySelector("#error").classList.remove("hidden");
|
||||
}
|
||||
|
||||
function loadRuffle() {
|
||||
const ruffle = RufflePlayer.newest().createPlayer();
|
||||
ruffle.config = {
|
||||
splashScreen: false,
|
||||
unmuteOverlay: "hidden",
|
||||
autoplay: "on",
|
||||
contextMenu: !1,
|
||||
showSwfDownload: !1
|
||||
},
|
||||
e.style.width = "100%",
|
||||
e.style.height = "100%";
|
||||
const a = document.querySelector("#gameContainer");
|
||||
a == null || a.appendChild(e),
|
||||
e.load(`/games/flash/${id}.swf`).then(()=>{
|
||||
document.querySelector("#loader").classList.add("hidden"),
|
||||
document.querySelector("#gameContainer").classList.remove("hidden")
|
||||
contextMenu: "on",
|
||||
showSwfDownload: false
|
||||
};
|
||||
ruffle.style.width = "100%";
|
||||
ruffle.style.height = "100%";
|
||||
const gameContainer = document.querySelector("#gameContainer");
|
||||
if (gameContainer != null) {
|
||||
gameContainer.appendChild(ruffle);
|
||||
}
|
||||
).catch(o=>{
|
||||
console.log(o)
|
||||
}
|
||||
)
|
||||
ruffle.load(`/games/flash/${id}.swf`).then(() => {
|
||||
let loader = document.querySelector("#loader");
|
||||
loader.classList.remove("loading");
|
||||
loader.classList.add("hidden");
|
||||
document.querySelector("#gameContainer").classList.remove("hidden");
|
||||
});
|
||||
// Stop the event listener, saves miniscule amount of memory
|
||||
window.removeEventListener("load", loadRuffle);
|
||||
}
|
||||
) : (document.querySelector("#loader").classList.add("hidden"),
|
||||
document.querySelector("#error").classList.remove("hidden"));
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit 98c48fe6bf57706348442ac5b963055fa0e3599f
|
||||
Subproject commit e3170261ecfbd6073322b3cfa500729936b5fa2e
|
||||
29
src/components/LoadingSpinner.astro
Normal file
29
src/components/LoadingSpinner.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<img src="/favicon.svg" class="load-img" />
|
||||
<svg class="loading-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="full-circle" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="indicator" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.load-img {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.full-circle {
|
||||
opacity: 25%;
|
||||
}
|
||||
.indicator {
|
||||
opacity: 75%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,6 +51,12 @@
|
|||
"slug": "bloons-tower-defense-4",
|
||||
"flash": true
|
||||
},
|
||||
"bloons": {
|
||||
"name": "Bloons",
|
||||
"image": "/games/flash/img/bloons.webp",
|
||||
"slug": "bloons",
|
||||
"flash": true
|
||||
},
|
||||
"cannon-basketball-4": {
|
||||
"name": "Cannon Basketball 4",
|
||||
"image": "/games/cannon-basketball-4/logo.png",
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ const { title, optionalPreloads } = Astro.props;
|
|||
return <link rel="preload" href={item.href} as={item.as} />;
|
||||
})
|
||||
}
|
||||
<script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" type="text/partytown" is:inline></script>
|
||||
<script type="text/partytown" is:inline>
|
||||
<script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" is:inline></script>
|
||||
<script is:inline>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
window.dataLayer.push(arguments);
|
||||
|
|
|
|||
|
|
@ -31,8 +31,9 @@ if (!gameData) {
|
|||
<iframe scrolling="no" src={`/game/unity/${gameData.slug}`} title={gameData.name} id="game-frame" />
|
||||
) : gameData.flash ? (
|
||||
<iframe scrolling="no" src={`/game/flash/${gameData.slug}`} title={gameData.name} id="game-frame" />
|
||||
) : <iframe scrolling="no" src={`/games/${gameData.slug}`} title={gameData.name} id="game-frame" />
|
||||
|
||||
) : (
|
||||
<iframe scrolling="no" src={`/games/${gameData.slug}`} title={gameData.name} id="game-frame" />
|
||||
)
|
||||
}
|
||||
<div class="game-info">
|
||||
<div class="game-info-top">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
---
|
||||
import LoadingSpinner from "@components/LoadingSpinner.astro";
|
||||
|
||||
export const prerender = false;
|
||||
---
|
||||
|
||||
|
|
@ -9,49 +11,42 @@ export const prerender = false;
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Radon Games</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@ruffle-rs/ruffle@0.1.0-nightly.2024.7.23/ruffle.min.js" is:inline></script>
|
||||
|
||||
<script type="module" src="/flash/instantiateFlash.js" is:inline defer></script>
|
||||
<link rel="stylesheet" href="/unity/index.css">
|
||||
<link rel="stylesheet" href="/unity/index.css" />
|
||||
</head>
|
||||
<body class="w-full h-full bg-slate-800 text-slate-200">
|
||||
<div
|
||||
id="loader"
|
||||
class="w-full h-full flex items-center justify-center flex-col gap-5"
|
||||
>
|
||||
<img src="/favicon.svg" class="w-10" />
|
||||
<svg
|
||||
class="animate-spin h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
<body>
|
||||
<div id="loader" class="loading">
|
||||
<LoadingSpinner/>
|
||||
</div>
|
||||
<div class="h-full w-full hidden" id="error">
|
||||
<div
|
||||
class="w-full h-full flex items-center justify-center flex-col gap-5"
|
||||
>
|
||||
<img src="logo.png" class="w-10" />
|
||||
<p>An error occurred.</p>
|
||||
<p class="underline cursor-pointer" onclick="location.reload()">
|
||||
Refresh
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="gameContainer" class="w-full h-full hidden bg-white"></div>
|
||||
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8a78f4d95f1f61cf","version":"2024.7.0","r":1,"token":"cf313dfff389483fae99876f60faccea","serverTiming":{"name":{"cfL4":true}}}' crossorigin="anonymous"></script>
|
||||
</body>
|
||||
<div id="gameContainer" class="game hidden"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #1f2937;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.game {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue