@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
232 lines (198 loc) • 7.83 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>League Element - Simple Usage Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: #3498db;
color: white;
padding: 20px;
text-align: center;
}
.content {
padding: 20px;
}
.controls {
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 5px;
}
.controls label {
display: inline-block;
margin-right: 15px;
font-weight: bold;
}
.controls input, .controls select {
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 3px;
margin-right: 15px;
}
.controls button {
padding: 8px 16px;
background: #3498db;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
margin-right: 10px;
}
.controls button:hover {
background: #2980b9;
}
.controls button:disabled {
background: #bdc3c7;
cursor: not-allowed;
}
.league-container {
min-height: 400px;
border: 1px solid #ddd;
border-radius: 5px;
}
.status {
margin-top: 10px;
padding: 10px;
border-radius: 3px;
font-size: 14px;
}
.status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.status.info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>League Element - Simple Configuration Example</h1>
<p>Demonstrates how to use LeagueElementConfig for easy league hosting</p>
</div>
<div class="content">
<div class="controls">
<label for="leagueId">League ID:</label>
<input type="text" id="leagueId" value="example-league-123" placeholder="Enter league ID">
<label for="isMobile">Mobile Mode:</label>
<select id="isMobile">
<option value="false">Desktop</option>
<option value="true">Mobile</option>
</select>
<label for="fontScale">Font Scale:</label>
<input type="number" id="fontScale" value="1.0" min="0.5" max="2.0" step="0.1">
<button onclick="loadLeague()">Load League</button>
<button onclick="reloadLeague()" id="reloadBtn" disabled>Reload</button>
<button onclick="destroyLeague()" id="destroyBtn" disabled>Destroy</button>
</div>
<div id="status" class="status info">
Ready to load a league. Enter a league ID and click "Load League".
</div>
<div id="leagueContainer" class="league-container">
<!-- League element will be loaded here -->
</div>
</div>
</div>
<!-- Include the league element script -->
<script type="module">
// Import the league element (adjust path as needed)
import './leagueElement.js';
let leagueConfig = null;
// Global functions for the buttons
window.loadLeague = async function() {
const leagueId = document.getElementById('leagueId').value.trim();
const isMobile = document.getElementById('isMobile').value === 'true';
const fontScale = parseFloat(document.getElementById('fontScale').value);
if (!leagueId) {
showStatus('Please enter a league ID', 'error');
return;
}
try {
// Destroy existing config if any
if (leagueConfig) {
leagueConfig.destroy();
}
// Create new config
leagueConfig = new LeagueElementConfig({
leagueId: leagueId,
container: '#leagueContainer',
isMobile: isMobile,
fontScale: fontScale,
onError: (error) => {
showStatus(`Error: ${error.message}`, 'error');
updateButtons(false);
},
onLoad: (element, data) => {
showStatus(`League loaded successfully! Can edit: ${data.canEdit}`, 'success');
updateButtons(true);
// Listen for league events
document.addEventListener('league-config-event', (event) => {
console.log('League event:', event.detail);
if (event.detail.type === 'requestSaveLeague') {
showStatus('League save requested - implement your save logic here', 'info');
}
});
}
});
showStatus('Loading league data...', 'info');
await leagueConfig.load();
} catch (error) {
showStatus(`Configuration error: ${error.message}`, 'error');
}
};
window.reloadLeague = async function() {
if (leagueConfig) {
showStatus('Reloading league data...', 'info');
await leagueConfig.reload();
}
};
window.destroyLeague = function() {
if (leagueConfig) {
leagueConfig.destroy();
leagueConfig = null;
showStatus('League destroyed', 'info');
updateButtons(false);
}
};
function showStatus(message, type) {
const statusEl = document.getElementById('status');
statusEl.textContent = message;
statusEl.className = `status ${type}`;
}
function updateButtons(enabled) {
document.getElementById('reloadBtn').disabled = !enabled;
document.getElementById('destroyBtn').disabled = !enabled;
}
// Auto-load example on page load
window.addEventListener('load', () => {
// Uncomment the line below to auto-load an example league
// loadLeague();
});
</script>
</body>
</html>