420 lines
13 KiB
PHP
420 lines
13 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
@ini_set('display_errors', '1');
|
|
@error_reporting(E_ALL);
|
|
@date_default_timezone_set('UTC');
|
|
|
|
require_once __DIR__ . '/includes/db.php'; // Include the database helper
|
|
|
|
$phpVersion = PHP_VERSION;
|
|
$now = date('Y-m-d H:i:s');
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Gamepad Haptic Simulator</title>
|
|
<?php
|
|
// Read project preview data from environment
|
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<?php if ($projectDescription): ?>
|
|
<!-- Meta description -->
|
|
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
|
<!-- Open Graph meta tags -->
|
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<!-- Twitter meta tags -->
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<?php endif; ?>
|
|
<?php if ($projectImageUrl): ?>
|
|
<!-- Open Graph image -->
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<!-- Twitter image -->
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-color: #0F1115;
|
|
--surface-color: #1C1F26;
|
|
--accent-color: #00D1FF; /* Cyan */
|
|
--text-color: #E4E7EB;
|
|
--border-color: #2D333D;
|
|
--border-radius: 4px;
|
|
--spacing: 16px;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 14px;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start; /* Align to top */
|
|
min-height: 100vh;
|
|
padding: var(--spacing);
|
|
box-sizing: border-box;
|
|
}
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing);
|
|
max-width: 800px;
|
|
width: 100%;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
.card {
|
|
background-color: var(--surface-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h1 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing);
|
|
color: var(--accent-color);
|
|
}
|
|
h2 {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin-top: 0;
|
|
margin-bottom: calc(var(--spacing) / 2);
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: var(--text-color);
|
|
}
|
|
select, input[type="range"], button {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
margin-bottom: var(--spacing);
|
|
background-color: var(--bg-color);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
border-radius: var(--border-radius);
|
|
box-sizing: border-box;
|
|
}
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
height: 4px;
|
|
padding: 0;
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--accent-color);
|
|
cursor: pointer;
|
|
margin-top: -6px;
|
|
}
|
|
button {
|
|
background-color: var(--accent-color);
|
|
color: var(--bg-color);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
button:hover:not(:disabled) {
|
|
background-color: #00aacc; /* Darker cyan */
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
#gamepadStatus {
|
|
color: #FFD700; /* Gold for warnings/info */
|
|
}
|
|
.status-connected {
|
|
color: #00FF00; /* Green */
|
|
}
|
|
.status-disconnected {
|
|
color: #FF0000; /* Red */
|
|
}
|
|
.flex-group {
|
|
display: flex;
|
|
gap: var(--spacing);
|
|
align-items: center;
|
|
margin-bottom: var(--spacing);
|
|
}
|
|
.flex-group > div {
|
|
flex: 1;
|
|
}
|
|
footer {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: var(--spacing);
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="card full-width">
|
|
<h1>Gamepad Haptic Simulator</h1>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Connection Status</h2>
|
|
<p>Gamepad: <span id="gamepadStatus">Disconnected</span></p>
|
|
<p id="gamepadIdDisplay"></p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Massage Configurator</h2>
|
|
<label for="patternSelect">Pattern:</label>
|
|
<select id="patternSelect">
|
|
<option value="knead">Knead</option>
|
|
<option value="tap">Tap</option>
|
|
<option value="wave">Wave</option>
|
|
<option value="sports_recovery">Sports Recovery</option>
|
|
</select>
|
|
|
|
<div class="flex-group">
|
|
<div>
|
|
<label for="intensityRange">Intensity:</label>
|
|
<input type="range" id="intensityRange" min="0" max="1" step="0.05" value="0.5">
|
|
<span id="intensityValue">0.5</span>
|
|
</div>
|
|
<div>
|
|
<label for="speedRange">Speed:</label>
|
|
<input type="range" id="speedRange" min="0.1" max="2" step="0.1" value="1">
|
|
<span id="speedValue">1x</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card full-width">
|
|
<h2>Active Session Controller</h2>
|
|
<button id="startButton" disabled>Start Massage</button>
|
|
<button id="stopButton" disabled>Stop Massage</button>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
|
<p>Page updated: <?= htmlspecialchars($now) ?> (UTC)</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const gamepadStatus = document.getElementById('gamepadStatus');
|
|
const gamepadIdDisplay = document.getElementById('gamepadIdDisplay');
|
|
const patternSelect = document.getElementById('patternSelect');
|
|
const intensityRange = document.getElementById('intensityRange');
|
|
const intensityValue = document.getElementById('intensityValue');
|
|
const speedRange = document.getElementById('speedRange');
|
|
const speedValue = document.getElementById('speedValue');
|
|
const startButton = document.getElementById('startButton');
|
|
const stopButton = document.getElementById('stopButton');
|
|
|
|
|
|
let gamepad = null;
|
|
let vibrationInterval = null;
|
|
|
|
let currentPattern = '';
|
|
|
|
// Gamepad API
|
|
window.addEventListener('gamepadconnected', (e) => {
|
|
console.log('Gamepad connected at index %d: %s. %d buttons, %d axes.',
|
|
e.gamepad.index, e.gamepad.id,
|
|
e.gamepad.buttons.length, e.gamepad.axes.length);
|
|
gamepad = e.gamepad;
|
|
updateGamepadStatus();
|
|
});
|
|
|
|
window.addEventListener('gamepaddisconnected', (e) => {
|
|
console.log('Gamepad disconnected from index %d: %s',
|
|
e.gamepad.index, e.gamepad.id);
|
|
if (gamepad && gamepad.index === e.gamepad.index) {
|
|
gamepad = null;
|
|
}
|
|
updateGamepadStatus();
|
|
stopMassage();
|
|
});
|
|
|
|
// Polling for gamepads (required for some browsers/situations)
|
|
setInterval(() => {
|
|
const gamepads = navigator.getGamepads();
|
|
let found = false;
|
|
for (let i = 0; i < gamepads.length; i++) {
|
|
if (gamepads[i]) {
|
|
if (!gamepad) {
|
|
gamepad = gamepads[i];
|
|
updateGamepadStatus();
|
|
}
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!found && gamepad) {
|
|
gamepad = null;
|
|
updateGamepadStatus();
|
|
}
|
|
}, 1000);
|
|
|
|
function updateGamepadStatus() {
|
|
if (gamepad) {
|
|
gamepadStatus.textContent = 'Connected';
|
|
gamepadStatus.className = 'status-connected';
|
|
gamepadIdDisplay.textContent = `ID: ${gamepad.id}`;
|
|
startButton.disabled = false;
|
|
} else {
|
|
gamepadStatus.textContent = 'Disconnected (Press a button!)';
|
|
gamepadStatus.className = 'status-disconnected';
|
|
gamepadIdDisplay.textContent = 'Ensure your controller is plugged in and press any button to activate.';
|
|
startButton.disabled = true;
|
|
}
|
|
}
|
|
|
|
// Haptic Patterns
|
|
const patterns = {
|
|
knead: (intensity, speed) => [
|
|
{ duration: 200 * speed, weakMagnitude: intensity * 0.5, strongMagnitude: intensity },
|
|
{ duration: 200 * speed, weakMagnitude: intensity, strongMagnitude: intensity * 0.5 }
|
|
],
|
|
tap: (intensity, speed) => [
|
|
{ duration: 100 * speed, weakMagnitude: intensity, strongMagnitude: intensity },
|
|
{ duration: 100 * speed, weakMagnitude: 0, strongMagnitude: 0 }
|
|
],
|
|
wave: (intensity, speed) => [
|
|
{ duration: 400 * speed, weakMagnitude: intensity * 0.2, strongMagnitude: intensity },
|
|
{ duration: 400 * speed, weakMagnitude: intensity, strongMagnitude: intensity * 0.2 }
|
|
],
|
|
sports_recovery: (intensity, speed) => [
|
|
{ duration: 150 * speed, weakMagnitude: intensity, strongMagnitude: intensity },
|
|
{ duration: 50 * speed, weakMagnitude: 0, strongMagnitude: 0 },
|
|
{ duration: 150 * speed, weakMagnitude: intensity, strongMagnitude: intensity },
|
|
{ duration: 150 * speed, weakMagnitude: 0.2, strongMagnitude: 0.2 }
|
|
]
|
|
};
|
|
|
|
let patternStep = 0;
|
|
|
|
function playHapticPattern() {
|
|
// Re-fetch gamepad to get the most up-to-date object
|
|
const gamepads = navigator.getGamepads();
|
|
const gp = gamepads[gamepad?.index];
|
|
|
|
if (gp && gp.vibrationActuator) {
|
|
const selectedPattern = patternSelect.value;
|
|
const intensity = parseFloat(intensityRange.value);
|
|
const speed = parseFloat(speedRange.value);
|
|
|
|
const steps = patterns[selectedPattern](intensity, speed);
|
|
const step = steps[patternStep % steps.length];
|
|
|
|
gp.vibrationActuator.playEffect('dual-rumble', {
|
|
startDelay: 0,
|
|
duration: step.duration,
|
|
weakMagnitude: step.weakMagnitude,
|
|
strongMagnitude: step.strongMagnitude
|
|
});
|
|
|
|
patternStep++;
|
|
|
|
// Schedule next step
|
|
vibrationInterval = setTimeout(playHapticPattern, step.duration);
|
|
}
|
|
}
|
|
|
|
function startMassage() {
|
|
if (!gamepad) {
|
|
// Try to get gamepad from navigator if not detected by event
|
|
const gamepads = navigator.getGamepads();
|
|
gamepad = Array.from(gamepads).find(g => g !== null);
|
|
if (!gamepad) {
|
|
alert('Please connect a gamepad first and press any button!');
|
|
return;
|
|
}
|
|
}
|
|
|
|
startButton.disabled = true;
|
|
stopButton.disabled = false;
|
|
patternSelect.disabled = true;
|
|
intensityRange.disabled = true;
|
|
speedRange.disabled = true;
|
|
|
|
patternStep = 0;
|
|
|
|
// Start the haptic pattern loop
|
|
playHapticPattern();
|
|
|
|
logSession(patternSelect.value, parseFloat(intensityRange.value), 0); // Log with 0 duration for manual sessions
|
|
}
|
|
|
|
function stopMassage() {
|
|
if (vibrationInterval) {
|
|
clearTimeout(vibrationInterval);
|
|
vibrationInterval = null;
|
|
}
|
|
// Stop vibration
|
|
const gamepads = navigator.getGamepads();
|
|
const gp = gamepads[gamepad?.index];
|
|
if (gp && gp.vibrationActuator) {
|
|
gp.vibrationActuator.reset();
|
|
}
|
|
|
|
startButton.disabled = false;
|
|
stopButton.disabled = true;
|
|
patternSelect.disabled = false;
|
|
intensityRange.disabled = false;
|
|
speedRange.disabled = false;
|
|
}
|
|
|
|
|
|
|
|
// Event Listeners
|
|
startButton.addEventListener('click', startMassage);
|
|
stopButton.addEventListener('click', stopMassage);
|
|
|
|
intensityRange.addEventListener('input', () => {
|
|
intensityValue.textContent = parseFloat(intensityRange.value).toFixed(2);
|
|
});
|
|
|
|
speedRange.addEventListener('input', () => {
|
|
speedValue.textContent = parseFloat(speedRange.value).toFixed(1) + 'x';
|
|
});
|
|
|
|
// Log session to the database
|
|
async function logSession(patternName, intensity, durationSeconds) {
|
|
try {
|
|
const response = await fetch('api/log_session.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ pattern_name: patternName, intensity: intensity, duration_seconds: durationSeconds }),
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
console.log('Session logged successfully:', result.message);
|
|
} else {
|
|
console.error('Failed to log session:', result.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error logging session:', error);
|
|
}
|
|
}
|
|
|
|
updateGamepadStatus(); // Initial status check
|
|
</script>
|
|
</body>
|
|
</html>
|