Design updates and fresh export prep
This commit is contained in:
Dan
parent
021f5fc304
commit
96936a302a
18 changed files with 292 additions and 1740 deletions
158
assets/js/pages/games/whittler.js
Normal file
158
assets/js/pages/games/whittler.js
Normal file
|
|
@ -0,0 +1,158 @@
|
||||||
|
/**
|
||||||
|
* Whittler Game High Scores
|
||||||
|
* Fetches and displays high scores from the ritual.sh high score API
|
||||||
|
*/
|
||||||
|
|
||||||
|
class WhittlerHighScores {
|
||||||
|
constructor() {
|
||||||
|
this.apiUrl = "https://api.ritual.sh/highscore";
|
||||||
|
this.gameId = "whittling-clicker";
|
||||||
|
this.container = document.getElementById("whittler-highscores");
|
||||||
|
this.maxScores = 10;
|
||||||
|
|
||||||
|
if (this.container) {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async init() {
|
||||||
|
await this.loadHighScores();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch high scores from the API
|
||||||
|
*/
|
||||||
|
async loadHighScores() {
|
||||||
|
try {
|
||||||
|
this.showLoading();
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`${this.apiUrl}/leaderboard?game_id=${this.gameId}&limit=${this.maxScores}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.success && data.scores) {
|
||||||
|
this.renderScores(data.scores);
|
||||||
|
} else {
|
||||||
|
throw new Error(data.error || "Failed to load high scores");
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading high scores:", error);
|
||||||
|
this.showError();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render high scores to the DOM
|
||||||
|
*/
|
||||||
|
renderScores(scores) {
|
||||||
|
if (!scores || scores.length === 0) {
|
||||||
|
this.container.innerHTML = `
|
||||||
|
<div class="no-scores">
|
||||||
|
<p>No high scores yet. Be the first!</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const scoresHTML = `
|
||||||
|
<ol class="highscore-list">
|
||||||
|
${scores
|
||||||
|
.map(
|
||||||
|
(score, index) => `
|
||||||
|
<li class="highscore-entry ${index === 0 ? "top-score" : ""}">
|
||||||
|
<span class="rank">#${index + 1}</span>
|
||||||
|
<span class="player-name">${this.escapeHtml(this.truncateName(score.playerName || "Anonymous"))}</span>
|
||||||
|
<span class="completion-time">${this.formatTime(score.formattedTime)}</span>
|
||||||
|
</li>
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
|
</ol>
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.container.innerHTML = scoresHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show loading state
|
||||||
|
*/
|
||||||
|
showLoading() {
|
||||||
|
this.container.innerHTML = `
|
||||||
|
<div class="loading-scores">
|
||||||
|
<p>Loading high scores...</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show error state
|
||||||
|
*/
|
||||||
|
showError() {
|
||||||
|
this.container.innerHTML = `
|
||||||
|
<div class="error-scores">
|
||||||
|
<p>Failed to load high scores.</p>
|
||||||
|
<button onclick="window.whittlerHighScores.loadHighScores()">Retry</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format completion time (seconds) to readable format
|
||||||
|
* Expects completionTime in seconds or HH:MM:SS format
|
||||||
|
*/
|
||||||
|
formatTime(time) {
|
||||||
|
if (typeof time === "string" && time.includes(":")) {
|
||||||
|
// Already formatted
|
||||||
|
return time;
|
||||||
|
}
|
||||||
|
|
||||||
|
const seconds = parseInt(time);
|
||||||
|
if (isNaN(seconds)) return "Unknown";
|
||||||
|
|
||||||
|
const hours = Math.floor(seconds / 3600);
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
const secs = seconds % 60;
|
||||||
|
|
||||||
|
if (hours > 0) {
|
||||||
|
return `${hours}h ${minutes}m ${secs}s`;
|
||||||
|
} else if (minutes > 0) {
|
||||||
|
return `${minutes}m ${secs}s`;
|
||||||
|
} else {
|
||||||
|
return `${secs}s`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Truncate player name to max length
|
||||||
|
*/
|
||||||
|
truncateName(name, maxLength = 15) {
|
||||||
|
if (name.length <= maxLength) {
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
return name.substring(0, maxLength) + "...";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Escape HTML to prevent XSS
|
||||||
|
*/
|
||||||
|
escapeHtml(text) {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize high scores when DOM is ready
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
window.whittlerHighScores = new WhittlerHighScores();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.whittlerHighScores = new WhittlerHighScores();
|
||||||
|
}
|
||||||
|
|
@ -157,5 +157,80 @@ body.games.whittler {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.game-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
|
||||||
|
@include media-up(md) {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
flex: 1;
|
||||||
|
border-image: url("/images/games/whittler/panelInset_brown.png") 10 10 /
|
||||||
|
10px 10px / 1px round round;
|
||||||
|
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #563c23;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding: 1em;
|
||||||
|
background-color: #97714a;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.game-highscores {
|
||||||
|
ol {
|
||||||
|
text-align: left;
|
||||||
|
list-style: none;
|
||||||
|
li.highscore-entry {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
gap: 1rem;
|
||||||
|
color: #563c23;
|
||||||
|
font-size: 1.5em;
|
||||||
|
border-bottom: 1px dotted #563c23;
|
||||||
|
padding: 0.5em;
|
||||||
|
&.top-score {
|
||||||
|
color: #f6e6c4;
|
||||||
|
border: 1px dashed #563c23;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.game-details {
|
||||||
|
p {
|
||||||
|
text-align: left;
|
||||||
|
color: #563c23;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
text-align: left;
|
||||||
|
color: #563c23;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
list-style: "🪵 ";
|
||||||
|
list-style-position: outside;
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
strong {
|
||||||
|
color: #f6e6c4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,65 @@
|
||||||
<iframe src="http://localhost:1313/games/clicker/index.html"></iframe>
|
<iframe src="http://localhost:1313/games/clicker/index.html"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="game-info">
|
||||||
|
<div class="game-highscores">
|
||||||
|
<div>
|
||||||
|
<h2>High Scores</h2>
|
||||||
|
<div id="whittler-highscores"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="game-details">
|
||||||
|
<div>
|
||||||
|
<h2>How to Play</h2>
|
||||||
|
<p>
|
||||||
|
<strong
|
||||||
|
>Click the log pile, automatically whittle stuff, buy
|
||||||
|
unlocks.</strong
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
A game should take approximately 20 minutes. Many of the unlocks
|
||||||
|
synergise with each other, see which combinations work best early
|
||||||
|
and late game!
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Market Charm</strong> - Flat increase to sale price.
|
||||||
|
</li>
|
||||||
|
<li><strong>Sharper Blades</strong> - More wood per click.</li>
|
||||||
|
<li><strong>Trade Winds</strong> - More sales per tick.</li>
|
||||||
|
<li><strong>Whittler's Focus</strong> - More whittles per tick.</li>
|
||||||
|
<li>
|
||||||
|
<strong>Guild Contract</strong> - Sell excess whittles in lots of
|
||||||
|
100 at 20% reduced income.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Forest Friends</strong> - Animals start whittling for you,
|
||||||
|
for some reason.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Beaver Brigade</strong> - Automatically generate wood
|
||||||
|
every tick.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Artisan's Touch</strong> - A percentage increase in sale
|
||||||
|
price.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Legendary Crafter</strong> - Simps just give you cash
|
||||||
|
every tick.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
<strong>Note:</strong> This is a very early version of Whittler, it
|
||||||
|
will be buggy and the balance will suck. There will be more
|
||||||
|
releases. If you have feedback, bug reports, or suggestions of new
|
||||||
|
modifiers or features just drop me an
|
||||||
|
<a href="mailto:dan@ritual.sh">email!</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
|
|
@ -1,66 +0,0 @@
|
||||||
/**************************************************************************/
|
|
||||||
/* godot.audio.position.worklet.js */
|
|
||||||
/**************************************************************************/
|
|
||||||
/* This file is part of: */
|
|
||||||
/* GODOT ENGINE */
|
|
||||||
/* https://godotengine.org */
|
|
||||||
/**************************************************************************/
|
|
||||||
/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
|
|
||||||
/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur. */
|
|
||||||
/* */
|
|
||||||
/* Permission is hereby granted, free of charge, to any person obtaining */
|
|
||||||
/* a copy of this software and associated documentation files (the */
|
|
||||||
/* "Software"), to deal in the Software without restriction, including */
|
|
||||||
/* without limitation the rights to use, copy, modify, merge, publish, */
|
|
||||||
/* distribute, sublicense, and/or sell copies of the Software, and to */
|
|
||||||
/* permit persons to whom the Software is furnished to do so, subject to */
|
|
||||||
/* the following conditions: */
|
|
||||||
/* */
|
|
||||||
/* The above copyright notice and this permission notice shall be */
|
|
||||||
/* included in all copies or substantial portions of the Software. */
|
|
||||||
/* */
|
|
||||||
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, */
|
|
||||||
/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF */
|
|
||||||
/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
|
|
||||||
/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY */
|
|
||||||
/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, */
|
|
||||||
/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE */
|
|
||||||
/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
|
|
||||||
/**************************************************************************/
|
|
||||||
|
|
||||||
class GodotPositionReportingProcessor extends AudioWorkletProcessor {
|
|
||||||
static get parameterDescriptors() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
name: 'reset',
|
|
||||||
defaultValue: 0,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 1,
|
|
||||||
automationRate: 'k-rate',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(...args) {
|
|
||||||
super(...args);
|
|
||||||
this.position = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
process(inputs, _outputs, parameters) {
|
|
||||||
if (parameters['reset'][0] > 0) {
|
|
||||||
this.position = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inputs.length > 0) {
|
|
||||||
const input = inputs[0];
|
|
||||||
if (input.length > 0) {
|
|
||||||
this.position += input[0].length;
|
|
||||||
this.port.postMessage({ type: 'position', data: this.position });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
registerProcessor('godot-position-reporting-processor', GodotPositionReportingProcessor);
|
|
||||||
|
|
@ -1,213 +0,0 @@
|
||||||
/**************************************************************************/
|
|
||||||
/* audio.worklet.js */
|
|
||||||
/**************************************************************************/
|
|
||||||
/* This file is part of: */
|
|
||||||
/* GODOT ENGINE */
|
|
||||||
/* https://godotengine.org */
|
|
||||||
/**************************************************************************/
|
|
||||||
/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
|
|
||||||
/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur. */
|
|
||||||
/* */
|
|
||||||
/* Permission is hereby granted, free of charge, to any person obtaining */
|
|
||||||
/* a copy of this software and associated documentation files (the */
|
|
||||||
/* "Software"), to deal in the Software without restriction, including */
|
|
||||||
/* without limitation the rights to use, copy, modify, merge, publish, */
|
|
||||||
/* distribute, sublicense, and/or sell copies of the Software, and to */
|
|
||||||
/* permit persons to whom the Software is furnished to do so, subject to */
|
|
||||||
/* the following conditions: */
|
|
||||||
/* */
|
|
||||||
/* The above copyright notice and this permission notice shall be */
|
|
||||||
/* included in all copies or substantial portions of the Software. */
|
|
||||||
/* */
|
|
||||||
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, */
|
|
||||||
/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF */
|
|
||||||
/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
|
|
||||||
/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY */
|
|
||||||
/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, */
|
|
||||||
/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE */
|
|
||||||
/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
|
|
||||||
/**************************************************************************/
|
|
||||||
|
|
||||||
class RingBuffer {
|
|
||||||
constructor(p_buffer, p_state, p_threads) {
|
|
||||||
this.buffer = p_buffer;
|
|
||||||
this.avail = p_state;
|
|
||||||
this.threads = p_threads;
|
|
||||||
this.rpos = 0;
|
|
||||||
this.wpos = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
data_left() {
|
|
||||||
return this.threads ? Atomics.load(this.avail, 0) : this.avail;
|
|
||||||
}
|
|
||||||
|
|
||||||
space_left() {
|
|
||||||
return this.buffer.length - this.data_left();
|
|
||||||
}
|
|
||||||
|
|
||||||
read(output) {
|
|
||||||
const size = this.buffer.length;
|
|
||||||
let from = 0;
|
|
||||||
let to_write = output.length;
|
|
||||||
if (this.rpos + to_write > size) {
|
|
||||||
const high = size - this.rpos;
|
|
||||||
output.set(this.buffer.subarray(this.rpos, size));
|
|
||||||
from = high;
|
|
||||||
to_write -= high;
|
|
||||||
this.rpos = 0;
|
|
||||||
}
|
|
||||||
if (to_write) {
|
|
||||||
output.set(this.buffer.subarray(this.rpos, this.rpos + to_write), from);
|
|
||||||
}
|
|
||||||
this.rpos += to_write;
|
|
||||||
if (this.threads) {
|
|
||||||
Atomics.add(this.avail, 0, -output.length);
|
|
||||||
Atomics.notify(this.avail, 0);
|
|
||||||
} else {
|
|
||||||
this.avail -= output.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
write(p_buffer) {
|
|
||||||
const to_write = p_buffer.length;
|
|
||||||
const mw = this.buffer.length - this.wpos;
|
|
||||||
if (mw >= to_write) {
|
|
||||||
this.buffer.set(p_buffer, this.wpos);
|
|
||||||
this.wpos += to_write;
|
|
||||||
if (mw === to_write) {
|
|
||||||
this.wpos = 0;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const high = p_buffer.subarray(0, mw);
|
|
||||||
const low = p_buffer.subarray(mw);
|
|
||||||
this.buffer.set(high, this.wpos);
|
|
||||||
this.buffer.set(low);
|
|
||||||
this.wpos = low.length;
|
|
||||||
}
|
|
||||||
if (this.threads) {
|
|
||||||
Atomics.add(this.avail, 0, to_write);
|
|
||||||
Atomics.notify(this.avail, 0);
|
|
||||||
} else {
|
|
||||||
this.avail += to_write;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class GodotProcessor extends AudioWorkletProcessor {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.threads = false;
|
|
||||||
this.running = true;
|
|
||||||
this.lock = null;
|
|
||||||
this.notifier = null;
|
|
||||||
this.output = null;
|
|
||||||
this.output_buffer = new Float32Array();
|
|
||||||
this.input = null;
|
|
||||||
this.input_buffer = new Float32Array();
|
|
||||||
this.port.onmessage = (event) => {
|
|
||||||
const cmd = event.data['cmd'];
|
|
||||||
const data = event.data['data'];
|
|
||||||
this.parse_message(cmd, data);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
process_notify() {
|
|
||||||
if (this.notifier) {
|
|
||||||
Atomics.add(this.notifier, 0, 1);
|
|
||||||
Atomics.notify(this.notifier, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
parse_message(p_cmd, p_data) {
|
|
||||||
if (p_cmd === 'start' && p_data) {
|
|
||||||
const state = p_data[0];
|
|
||||||
let idx = 0;
|
|
||||||
this.threads = true;
|
|
||||||
this.lock = state.subarray(idx, ++idx);
|
|
||||||
this.notifier = state.subarray(idx, ++idx);
|
|
||||||
const avail_in = state.subarray(idx, ++idx);
|
|
||||||
const avail_out = state.subarray(idx, ++idx);
|
|
||||||
this.input = new RingBuffer(p_data[1], avail_in, true);
|
|
||||||
this.output = new RingBuffer(p_data[2], avail_out, true);
|
|
||||||
} else if (p_cmd === 'stop') {
|
|
||||||
this.running = false;
|
|
||||||
this.output = null;
|
|
||||||
this.input = null;
|
|
||||||
this.lock = null;
|
|
||||||
this.notifier = null;
|
|
||||||
} else if (p_cmd === 'start_nothreads') {
|
|
||||||
this.output = new RingBuffer(p_data[0], p_data[0].length, false);
|
|
||||||
} else if (p_cmd === 'chunk') {
|
|
||||||
this.output.write(p_data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static array_has_data(arr) {
|
|
||||||
return arr.length && arr[0].length && arr[0][0].length;
|
|
||||||
}
|
|
||||||
|
|
||||||
process(inputs, outputs, parameters) {
|
|
||||||
if (!this.running) {
|
|
||||||
return false; // Stop processing.
|
|
||||||
}
|
|
||||||
if (this.output === null) {
|
|
||||||
return true; // Not ready yet, keep processing.
|
|
||||||
}
|
|
||||||
const process_input = GodotProcessor.array_has_data(inputs);
|
|
||||||
if (process_input) {
|
|
||||||
const input = inputs[0];
|
|
||||||
const chunk = input[0].length * input.length;
|
|
||||||
if (this.input_buffer.length !== chunk) {
|
|
||||||
this.input_buffer = new Float32Array(chunk);
|
|
||||||
}
|
|
||||||
if (!this.threads) {
|
|
||||||
GodotProcessor.write_input(this.input_buffer, input);
|
|
||||||
this.port.postMessage({ 'cmd': 'input', 'data': this.input_buffer });
|
|
||||||
} else if (this.input.space_left() >= chunk) {
|
|
||||||
GodotProcessor.write_input(this.input_buffer, input);
|
|
||||||
this.input.write(this.input_buffer);
|
|
||||||
} else {
|
|
||||||
// this.port.postMessage('Input buffer is full! Skipping input frame.'); // Uncomment this line to debug input buffer.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const process_output = GodotProcessor.array_has_data(outputs);
|
|
||||||
if (process_output) {
|
|
||||||
const output = outputs[0];
|
|
||||||
const chunk = output[0].length * output.length;
|
|
||||||
if (this.output_buffer.length !== chunk) {
|
|
||||||
this.output_buffer = new Float32Array(chunk);
|
|
||||||
}
|
|
||||||
if (this.output.data_left() >= chunk) {
|
|
||||||
this.output.read(this.output_buffer);
|
|
||||||
GodotProcessor.write_output(output, this.output_buffer);
|
|
||||||
if (!this.threads) {
|
|
||||||
this.port.postMessage({ 'cmd': 'read', 'data': chunk });
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// this.port.postMessage('Output buffer has not enough frames! Skipping output frame.'); // Uncomment this line to debug output buffer.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.process_notify();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
static write_output(dest, source) {
|
|
||||||
const channels = dest.length;
|
|
||||||
for (let ch = 0; ch < channels; ch++) {
|
|
||||||
for (let sample = 0; sample < dest[ch].length; sample++) {
|
|
||||||
dest[ch][sample] = source[sample * channels + ch];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static write_input(dest, source) {
|
|
||||||
const channels = source.length;
|
|
||||||
for (let ch = 0; ch < channels; ch++) {
|
|
||||||
for (let sample = 0; sample < source[ch].length; sample++) {
|
|
||||||
dest[sample * channels + ch] = source[ch][sample];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
registerProcessor('godot-processor', GodotProcessor);
|
|
||||||
|
|
@ -1,344 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0"
|
|
||||||
/>
|
|
||||||
<title>Clicker</title>
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#canvas {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: white;
|
|
||||||
background-color: black;
|
|
||||||
overflow: hidden;
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvas {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvas:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status,
|
|
||||||
#status-splash,
|
|
||||||
#status-progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status,
|
|
||||||
#status-splash {
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status {
|
|
||||||
background-color: #97714a;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-splash {
|
|
||||||
max-height: 250px;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-splash.show-image--false {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-splash.fullsize--true {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-splash.use-filter--false {
|
|
||||||
image-rendering: pixelated;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-progress,
|
|
||||||
#status-notice {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-progress {
|
|
||||||
bottom: 10%;
|
|
||||||
width: 50%;
|
|
||||||
margin: 0 auto;
|
|
||||||
accent-color: #3d2815;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status-notice {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
border: 1px solid #9b3943;
|
|
||||||
color: #000;
|
|
||||||
font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;
|
|
||||||
line-height: 1.3;
|
|
||||||
margin: 0 2rem;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<link id="-gd-engine-icon" rel="icon" type="image/png" href="index.icon.png" />
|
|
||||||
<link rel="apple-touch-icon" href="index.apple-touch-icon.png"/>
|
|
||||||
<link rel="manifest" href="index.manifest.json">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas id="canvas"> Your browser does not support the canvas tag. </canvas>
|
|
||||||
|
|
||||||
<noscript> Your browser does not support JavaScript. </noscript>
|
|
||||||
|
|
||||||
<div id="status">
|
|
||||||
<img
|
|
||||||
id="status-splash"
|
|
||||||
class="show-image--true fullsize--true use-filter--true"
|
|
||||||
src="index.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<progress id="status-progress"></progress>
|
|
||||||
<div id="status-notice"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="index.js"></script>
|
|
||||||
<script>
|
|
||||||
const GODOT_CONFIG = {"args":[],"canvasResizePolicy":1,"emscriptenPoolSize":8,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":14467852,"index.wasm":37686550},"focusCanvas":true,"gdextensionLibs":[],"godotPoolSize":4,"serviceWorker":"index.service.worker.js"};
|
|
||||||
const GODOT_THREADS_ENABLED = false;
|
|
||||||
const engine = new Engine(GODOT_CONFIG);
|
|
||||||
|
|
||||||
// High Score API Bridge
|
|
||||||
const godotBridge = {
|
|
||||||
// Configuration - Update these with your actual API endpoints
|
|
||||||
API_BASE_URL: "https://api.ritual.sh/highscore",
|
|
||||||
|
|
||||||
// Request a nonce from the API
|
|
||||||
requestNonce: async function () {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${this.API_BASE_URL}/nonce`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
// Store nonce for Godot to poll
|
|
||||||
window.godotNonce = data.nonce;
|
|
||||||
|
|
||||||
return data.nonce;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error requesting nonce:", error);
|
|
||||||
|
|
||||||
// Store error for Godot to poll
|
|
||||||
window.godotNonce = "";
|
|
||||||
window.godotNonceError = error.message;
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Submit the high score with pre-encoded payload from Godot
|
|
||||||
// encodedPayload should be passed as an object: {data: "...", nonce: "..."}
|
|
||||||
submitScore: async function (encodedPayload, nonce) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${this.API_BASE_URL}/submit-score`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
data: encodedPayload,
|
|
||||||
nonce: nonce,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
// Store result for Godot to poll
|
|
||||||
window.godotSubmissionResult = {
|
|
||||||
completed: true,
|
|
||||||
success: true,
|
|
||||||
message: result.message || "Score submitted successfully!",
|
|
||||||
rank: result.rank || 0,
|
|
||||||
leaderboardUrl: result.leaderboardUrl || "",
|
|
||||||
};
|
|
||||||
|
|
||||||
return result;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error submitting score:", error);
|
|
||||||
|
|
||||||
// Store error result for Godot to poll
|
|
||||||
window.godotSubmissionResult = {
|
|
||||||
completed: true,
|
|
||||||
success: false,
|
|
||||||
message: error.message || "Failed to submit score",
|
|
||||||
rank: 0,
|
|
||||||
leaderboardUrl: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Test ping function
|
|
||||||
ping: function () {
|
|
||||||
return "pong";
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// Store reference for Godot to access
|
|
||||||
window.godotBridge = godotBridge;
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
const statusOverlay = document.getElementById("status");
|
|
||||||
const statusProgress = document.getElementById("status-progress");
|
|
||||||
const statusNotice = document.getElementById("status-notice");
|
|
||||||
|
|
||||||
let initializing = true;
|
|
||||||
let statusMode = "";
|
|
||||||
|
|
||||||
function setStatusMode(mode) {
|
|
||||||
if (statusMode === mode || !initializing) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (mode === "hidden") {
|
|
||||||
statusOverlay.remove();
|
|
||||||
initializing = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
statusOverlay.style.visibility = "visible";
|
|
||||||
statusProgress.style.display = mode === "progress" ? "block" : "none";
|
|
||||||
statusNotice.style.display = mode === "notice" ? "block" : "none";
|
|
||||||
statusMode = mode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setStatusNotice(text) {
|
|
||||||
while (statusNotice.lastChild) {
|
|
||||||
statusNotice.removeChild(statusNotice.lastChild);
|
|
||||||
}
|
|
||||||
const lines = text.split("\n");
|
|
||||||
lines.forEach((line) => {
|
|
||||||
statusNotice.appendChild(document.createTextNode(line));
|
|
||||||
statusNotice.appendChild(document.createElement("br"));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayFailureNotice(err) {
|
|
||||||
console.error(err);
|
|
||||||
if (err instanceof Error) {
|
|
||||||
setStatusNotice(err.message);
|
|
||||||
} else if (typeof err === "string") {
|
|
||||||
setStatusNotice(err);
|
|
||||||
} else {
|
|
||||||
setStatusNotice("An unknown error occurred.");
|
|
||||||
}
|
|
||||||
setStatusMode("notice");
|
|
||||||
initializing = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const missing = Engine.getMissingFeatures({
|
|
||||||
threads: GODOT_THREADS_ENABLED,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (missing.length !== 0) {
|
|
||||||
if (
|
|
||||||
GODOT_CONFIG["serviceWorker"] &&
|
|
||||||
GODOT_CONFIG["ensureCrossOriginIsolationHeaders"] &&
|
|
||||||
"serviceWorker" in navigator
|
|
||||||
) {
|
|
||||||
let serviceWorkerRegistrationPromise;
|
|
||||||
try {
|
|
||||||
serviceWorkerRegistrationPromise =
|
|
||||||
navigator.serviceWorker.getRegistration();
|
|
||||||
} catch (err) {
|
|
||||||
serviceWorkerRegistrationPromise = Promise.reject(
|
|
||||||
new Error("Service worker registration failed."),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// There's a chance that installing the service worker would fix the issue
|
|
||||||
Promise.race([
|
|
||||||
serviceWorkerRegistrationPromise
|
|
||||||
.then((registration) => {
|
|
||||||
if (registration != null) {
|
|
||||||
return Promise.reject(
|
|
||||||
new Error("Service worker already exists."),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return registration;
|
|
||||||
})
|
|
||||||
.then(() => engine.installServiceWorker()),
|
|
||||||
// For some reason, `getRegistration()` can stall
|
|
||||||
new Promise((resolve) => {
|
|
||||||
setTimeout(() => resolve(), 2000);
|
|
||||||
}),
|
|
||||||
])
|
|
||||||
.then(() => {
|
|
||||||
// Reload if there was no error.
|
|
||||||
window.location.reload();
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("Error while registering service worker:", err);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Display the message as usual
|
|
||||||
const missingMsg =
|
|
||||||
"Error\nThe following features required to run Godot projects on the Web are missing:\n";
|
|
||||||
displayFailureNotice(missingMsg + missing.join("\n"));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setStatusMode("progress");
|
|
||||||
engine
|
|
||||||
.startGame({
|
|
||||||
onProgress: function (current, total) {
|
|
||||||
if (current > 0 && total > 0) {
|
|
||||||
statusProgress.value = current;
|
|
||||||
statusProgress.max = total;
|
|
||||||
} else {
|
|
||||||
statusProgress.removeAttribute("value");
|
|
||||||
statusProgress.removeAttribute("max");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
setStatusMode("hidden");
|
|
||||||
// Store Godot instance reference for bridge callbacks
|
|
||||||
window.requestAnimationFrame(() => {
|
|
||||||
window.godotInstance = engine;
|
|
||||||
});
|
|
||||||
}, displayFailureNotice);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
{"background_color":"#d1b77a","display":"standalone","icons":[{"sizes":"144x144","src":"index.144x144.png","type":"image/png"},{"sizes":"180x180","src":"index.180x180.png","type":"image/png"},{"sizes":"512x512","src":"index.512x512.png","type":"image/png"}],"name":"Clicker","orientation":"any","start_url":"./index.html"}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>You are offline</title>
|
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
background-color: #000000;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
margin: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-block: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
display: block;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
margin: 3rem auto 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>You are offline</h1>
|
|
||||||
<p>This application requires an Internet connection to run for the first time.</p>
|
|
||||||
<p>Press the button below to try reloading:</p>
|
|
||||||
<button type="button">Reload</button>
|
|
||||||
<script>
|
|
||||||
document.querySelector('button').addEventListener('click', () => {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 358 KiB |
|
|
@ -1,166 +0,0 @@
|
||||||
// This service worker is required to expose an exported Godot project as a
|
|
||||||
// Progressive Web App. It provides an offline fallback page telling the user
|
|
||||||
// that they need an Internet connection to run the project if desired.
|
|
||||||
// Incrementing CACHE_VERSION will kick off the install event and force
|
|
||||||
// previously cached resources to be updated from the network.
|
|
||||||
/** @type {string} */
|
|
||||||
const CACHE_VERSION = '1769693384|4844716121';
|
|
||||||
/** @type {string} */
|
|
||||||
const CACHE_PREFIX = 'Clicker-sw-cache-';
|
|
||||||
const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
|
|
||||||
/** @type {string} */
|
|
||||||
const OFFLINE_URL = 'index.offline.html';
|
|
||||||
/** @type {boolean} */
|
|
||||||
const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = true;
|
|
||||||
// Files that will be cached on load.
|
|
||||||
/** @type {string[]} */
|
|
||||||
const CACHED_FILES = ["index.html","index.js","index.offline.html","index.icon.png","index.apple-touch-icon.png","index.audio.worklet.js","index.audio.position.worklet.js"];
|
|
||||||
// Files that we might not want the user to preload, and will only be cached on first load.
|
|
||||||
/** @type {string[]} */
|
|
||||||
const CACHEABLE_FILES = ["index.wasm","index.pck"];
|
|
||||||
const FULL_CACHE = CACHED_FILES.concat(CACHEABLE_FILES);
|
|
||||||
|
|
||||||
self.addEventListener('install', (event) => {
|
|
||||||
event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_FILES)));
|
|
||||||
});
|
|
||||||
|
|
||||||
self.addEventListener('activate', (event) => {
|
|
||||||
event.waitUntil(caches.keys().then(
|
|
||||||
function (keys) {
|
|
||||||
// Remove old caches.
|
|
||||||
return Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));
|
|
||||||
}
|
|
||||||
).then(function () {
|
|
||||||
// Enable navigation preload if available.
|
|
||||||
return ('navigationPreload' in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve();
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ensures that the response has the correct COEP/COOP headers
|
|
||||||
* @param {Response} response
|
|
||||||
* @returns {Response}
|
|
||||||
*/
|
|
||||||
function ensureCrossOriginIsolationHeaders(response) {
|
|
||||||
if (response.headers.get('Cross-Origin-Embedder-Policy') === 'require-corp'
|
|
||||||
&& response.headers.get('Cross-Origin-Opener-Policy') === 'same-origin') {
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
const crossOriginIsolatedHeaders = new Headers(response.headers);
|
|
||||||
crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
|
|
||||||
crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
|
|
||||||
const newResponse = new Response(response.body, {
|
|
||||||
status: response.status,
|
|
||||||
statusText: response.statusText,
|
|
||||||
headers: crossOriginIsolatedHeaders,
|
|
||||||
});
|
|
||||||
|
|
||||||
return newResponse;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calls fetch and cache the result if it is cacheable
|
|
||||||
* @param {FetchEvent} event
|
|
||||||
* @param {Cache} cache
|
|
||||||
* @param {boolean} isCacheable
|
|
||||||
* @returns {Response}
|
|
||||||
*/
|
|
||||||
async function fetchAndCache(event, cache, isCacheable) {
|
|
||||||
// Use the preloaded response, if it's there
|
|
||||||
/** @type { Response } */
|
|
||||||
let response = await event.preloadResponse;
|
|
||||||
if (response == null) {
|
|
||||||
// Or, go over network.
|
|
||||||
response = await self.fetch(event.request);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
|
|
||||||
response = ensureCrossOriginIsolationHeaders(response);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isCacheable) {
|
|
||||||
// And update the cache
|
|
||||||
cache.put(event.request, response.clone());
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.addEventListener(
|
|
||||||
'fetch',
|
|
||||||
/**
|
|
||||||
* Triggered on fetch
|
|
||||||
* @param {FetchEvent} event
|
|
||||||
*/
|
|
||||||
(event) => {
|
|
||||||
const isNavigate = event.request.mode === 'navigate';
|
|
||||||
const url = event.request.url || '';
|
|
||||||
const referrer = event.request.referrer || '';
|
|
||||||
const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
|
|
||||||
const local = url.startsWith(base) ? url.replace(base, '') : '';
|
|
||||||
const isCacheable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
|
|
||||||
if (isNavigate || isCacheable) {
|
|
||||||
event.respondWith((async () => {
|
|
||||||
// Try to use cache first
|
|
||||||
const cache = await caches.open(CACHE_NAME);
|
|
||||||
if (isNavigate) {
|
|
||||||
// Check if we have full cache during HTML page request.
|
|
||||||
/** @type {Response[]} */
|
|
||||||
const fullCache = await Promise.all(FULL_CACHE.map((name) => cache.match(name)));
|
|
||||||
const missing = fullCache.some((v) => v === undefined);
|
|
||||||
if (missing) {
|
|
||||||
try {
|
|
||||||
// Try network if some cached file is missing (so we can display offline page in case).
|
|
||||||
const response = await fetchAndCache(event, cache, isCacheable);
|
|
||||||
return response;
|
|
||||||
} catch (e) {
|
|
||||||
// And return the hopefully always cached offline page in case of network failure.
|
|
||||||
console.error('Network error: ', e); // eslint-disable-line no-console
|
|
||||||
return caches.match(OFFLINE_URL);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let cached = await cache.match(event.request);
|
|
||||||
if (cached != null) {
|
|
||||||
if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
|
|
||||||
cached = ensureCrossOriginIsolationHeaders(cached);
|
|
||||||
}
|
|
||||||
return cached;
|
|
||||||
}
|
|
||||||
// Try network if don't have it in cache.
|
|
||||||
const response = await fetchAndCache(event, cache, isCacheable);
|
|
||||||
return response;
|
|
||||||
})());
|
|
||||||
} else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
|
|
||||||
event.respondWith((async () => {
|
|
||||||
let response = await fetch(event.request);
|
|
||||||
response = ensureCrossOriginIsolationHeaders(response);
|
|
||||||
return response;
|
|
||||||
})());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
self.addEventListener('message', (event) => {
|
|
||||||
// No cross origin
|
|
||||||
if (event.origin !== self.origin) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const id = event.source.id || '';
|
|
||||||
const msg = event.data || '';
|
|
||||||
// Ensure it's one of our clients.
|
|
||||||
self.clients.get(id).then(function (client) {
|
|
||||||
if (!client) {
|
|
||||||
return; // Not a valid client.
|
|
||||||
}
|
|
||||||
if (msg === 'claim') {
|
|
||||||
self.skipWaiting().then(() => self.clients.claim());
|
|
||||||
} else if (msg === 'clear') {
|
|
||||||
caches.delete(CACHE_NAME);
|
|
||||||
} else if (msg === 'update') {
|
|
||||||
self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue