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;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
</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>
|
||||
|
||||
|
|
|
|||
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