@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
93 lines (84 loc) • 5.96 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test league-matches-recent</title>
</head>
<body>
<h1>Test: <league-matches-recent></h1>
<league-matches-recent id="test-league-matches-recent" data='{"_id":"league1","name":"Spring Bowls League","settings":{"pointsForWin":2,"pointsForDraw":1,"pointsForLoss":0,"promotionPositions":1,"relegationPositions":1,"timesTeamsPlayOther":2,"rinkPoints":{"pointsPerRinkWin":1,"pointsPerRinkDraw":0.5,"defaultRinks":4,"enabled":true}},"teams":[{"value":"Team A","label":"Team A"},{"value":"Team B","label":"Team B"},{"value":"Team C","label":"Team C"}],"matches":[{"key":"m1","homeTeam":{"_id":"Team A","name":"Team A"},"awayTeam":{"_id":"Team B","name":"Team B"},"date":"2025-05-15","result":{"homeScore":2,"awayScore":1}},{"key":"m2","homeTeam":{"_id":"Team B","name":"Team B"},"awayTeam":{"_id":"Team C","name":"Team C"},"date":"2025-05-22","result":null},{"key":"m3","homeTeam":{"_id":"Team C","name":"Team C"},"awayTeam":{"_id":"Team A","name":"Team A"},"date":"2025-05-29","result":null}],"table":{"leagueData":[{"teamName":"Team A"},{"teamName":"Team B"},{"teamName":"Team C"}],"metaData":{"promotionPlaces":1,"relegationPlaces":1}},"createdAt":"2025-01-01T12:00:00Z","updatedAt":"2025-05-01T12:00:00Z"}'></league-matches-recent>
<div id="event-log" style="margin-top:2em; background:#f9f9f9; padding:1em; border:1px solid #ccc; word-wrap: break-word;"><b>Event Log:</b><br></div>
<script type="module">
import './LeagueMatchesRecent.js';
const el = document.getElementById('test-league-matches-recent');
// Set is-mobile attribute based on device detection
const userAgentIsMobile_init_rec = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const windowIsNarrow_init_rec = window.innerWidth <= 768;
const calculatedIsMobile_init_rec = userAgentIsMobile_init_rec || windowIsNarrow_init_rec;
console.log('[Test Harness - league-matches-recent] Initial Load - navigator.userAgent:', navigator.userAgent);
console.log('[Test Harness - league-matches-recent] Initial Load - userAgentIsMobile:', userAgentIsMobile_init_rec);
console.log('[Test Harness - league-matches-recent] Initial Load - window.innerWidth:', window.innerWidth);
console.log('[Test Harness - league-matches-recent] Initial Load - windowIsNarrow:', windowIsNarrow_init_rec);
console.log('[Test Harness - league-matches-recent] Initial Load - Calculated isMobile for attribute logic:', calculatedIsMobile_init_rec);
if (calculatedIsMobile_init_rec) {
el.setAttribute('is-mobile', 'true');
console.log('[Test Harness - league-matches-recent] Initial Load - el.setAttribute("is-mobile", "true")');
} else {
el.removeAttribute('is-mobile');
console.log('[Test Harness - league-matches-recent] Initial Load - el.removeAttribute("is-mobile")');
}
console.log('[Test Harness - league-matches-recent] Initial Load - el.hasAttribute("is-mobile") after logic:', el.hasAttribute('is-mobile'));
console.log('[Test Harness - league-matches-recent] Initial Load - el.getAttribute("is-mobile") after logic:', el.getAttribute('is-mobile'));
// Set team mapping for display names
const teamMapping = [
{ value: "Team A", label: "Team A Display" },
{ value: "Team B", label: "Team B Display" },
{ value: "Team C", label: "Team C Display" }
];
el.setAttribute('team-mapping', JSON.stringify(teamMapping));
// Create a proxy to intercept all events
const eventProxy = new Proxy(el, {
get: function(target, prop) {
if (prop === 'addEventListener') {
return function(eventName, handler) {
const originalHandler = handler;
const loggingHandler = function(e) {
const log = document.getElementById('event-log');
log.innerHTML += `<div>Event: ${e.type} - ${JSON.stringify(e.detail)}</div>`;
return originalHandler.call(this, e);
};
return target.addEventListener(eventName, loggingHandler);
};
}
return target[prop];
}
});
eventProxy.addEventListener('league-event', e => {
// Original handler logic here
});
// Update is-mobile on window resize
window.addEventListener('resize', () => {
console.log('[Test Harness - league-matches-recent] Resize event triggered.');
const userAgentIsMobile_resize_rec = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const windowIsNarrow_resize_rec = window.innerWidth <= 768;
const calculatedIsMobile_resize_rec = userAgentIsMobile_resize_rec || windowIsNarrow_resize_rec;
console.log('[Test Harness - league-matches-recent] Resize - window.innerWidth:', window.innerWidth);
console.log('[Test Harness - league-matches-recent] Resize - windowIsNarrow:', windowIsNarrow_resize_rec);
console.log('[Test Harness - league-matches-recent] Resize - Calculated isMobile for attribute logic:', calculatedIsMobile_resize_rec);
if (calculatedIsMobile_resize_rec) {
if (el.getAttribute('is-mobile') !== 'true') {
el.setAttribute('is-mobile', 'true');
console.log('[Test Harness - league-matches-recent] Resize - el.setAttribute("is-mobile", "true")');
}
} else {
if (el.hasAttribute('is-mobile')) {
el.removeAttribute('is-mobile');
console.log('[Test Harness - league-matches-recent] Resize - el.removeAttribute("is-mobile")');
}
}
console.log('[Test Harness - league-matches-recent] Resize - el.hasAttribute("is-mobile") after resize logic:', el.hasAttribute('is-mobile'));
console.log('[Test Harness - league-matches-recent] Resize - el.getAttribute("is-mobile") after resize logic:', el.getAttribute('is-mobile'));
});
</script>
</body>
</html>