KaiSD/Test-rep
1
0
Fork 0
Code Pull Requests Releases Wiki Activity

Изменить 'wbld/orbits.html'

Browse Source
This commit is contained in:
KaiSD
2025-02-26 10:53:45 +01:00
parent c3458bc4d8
commit 8ef8e46d42
1 changed files with 251 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
wbld/orbits.html
View File

@@ -7,14 +7,53 @@
<style> <style>
body { margin: 0; overflow: hidden; } body { margin: 0; overflow: hidden; }
canvas { display: block; } canvas { display: block; }
/* Style for the control panel */
#controlPanel {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 5px;
font-family: Arial, sans-serif;
color: white;
}
#controlPanel button, #controlPanel select {
margin: 5px;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
background-color: #eee;
color: black;
cursor: pointer;
}
#controlPanel button:hover {
background-color: #ddd;
}
#controlPanel select:hover {
background-color: #ddd;
}
</style> </style>
</head> </head>
<body> <body>
<div id="controlPanel">
<button id="playPauseButton">Play</button>
<button id="rewindButton">Rewind</button>
<select id="speedSelect">
<option value="1">x1</option>
<option value="2">x2</option>
<option value="5" selected>x5</option>
<option value="10">x10</option>
<option value="100">x100</option>
<option value="1000">x1000</option>
<option value="10000">x10000</option>
<option value="100000">x100000</option>
<option value="1000000">x1000000</option>
</select>
</div>
<script> <script>
// Function to calculate the current Senthara date from simulationTime (in days) // Function to calculate the current Senthara date from simulationTime (in days)
// We add an offset so that simulationTime = 0 corresponds to "Autumn 36"
// With a 396-day year divided evenly into 4 seasons, an offset of 134 ensures:
// floor(134) mod 99 = 35 so that dayOfSeason becomes 35+1 = 36 and seasonIndex = 1 (Autumn).
function getSentharaDate(simDays) { function getSentharaDate(simDays) {
const offset = 134; const offset = 134;
const X = Math.floor(simDays + offset); const X = Math.floor(simDays + offset);
@@ -47,7 +86,10 @@
let globalGraphics; let globalGraphics;
let dateText; let dateText;
let simulationTime = 0; // in days (simulation time) let simulationTime = 0; // in days (simulation time)
const simulationSpeed = 5; // speed multiplier let simulationSpeed = 5; // speed multiplier
let isPlaying = false; // Start paused
let isRewinding = false; // Control forward/backward
// Orbital periods (in days) // Orbital periods (in days)
const planetPeriod = 396; // Senthara's orbital year const planetPeriod = 396; // Senthara's orbital year
@@ -112,6 +154,30 @@
recalcOrbitRadii(); recalcOrbitRadii();
dateText.setPosition(10, gameSize.height - 30); dateText.setPosition(10, gameSize.height - 30);
}); });
// --- UI Control Event Handlers ---
const playPauseButton = document.getElementById("playPauseButton");
const rewindButton = document.getElementById("rewindButton");
const speedSelect = document.getElementById("speedSelect");
playPauseButton.addEventListener("click", () => {
isPlaying = !isPlaying;
playPauseButton.textContent = isPlaying ? "Pause" : "Play";
if (isPlaying) isRewinding = false; // Stop rewinding when playing
});
rewindButton.addEventListener("click", () => {
isRewinding = !isRewinding;
rewindButton.textContent = isRewinding ? "Forward" : "Rewind";
if(isRewinding) isPlaying = false; // Pause when rewinding
playPauseButton.textContent = "Play"; // Reset play/pause button
});
speedSelect.addEventListener("change", () => {
simulationSpeed = parseFloat(speedSelect.value);
});
} }
// Helper function to create a moon container with a circular body and a marker. // Helper function to create a moon container with a circular body and a marker.
@@ -140,8 +206,13 @@
} }
function update(time, delta) { function update(time, delta) {
// Advance simulation time. // Advance or rewind simulation time based on state.
if (isPlaying) {
simulationTime += (delta * simulationSpeed) / 1000; simulationTime += (delta * simulationSpeed) / 1000;
} else if (isRewinding) {
simulationTime -= (delta * simulationSpeed) / 1000;
}
// Get center of the screen (position of the star). // Get center of the screen (position of the star).
const centerX = game.scale.width / 2; const centerX = game.scale.width / 2;