<script>
const inputs = document.querySelectorAll('.digit-input');
const modal = document.getElementById('result-modal');
const body = document.getElementById('body');
const title = document.getElementById('modal-title');
const message = document.getElementById('modal-message');
const matchDates = document.getElementById('match-dates');
inputs.forEach((input, i) => {
input.addEventListener('input', () => {
if (input.value && i < inputs.length - 1) inputs[i + 1].focus();
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && !input.value && i > 0) {
inputs[i - 1].focus();
inputs[i - 1].value = '';
}
});
});
document.getElementById('search').addEventListener('click', async () => {
const digits = Array.from(inputs).map(input => input.value);
if (digits.some(d => d.length !== 1 || isNaN(d))) {
alert("Please enter one digit in each field.");
return;
}
const userInput = digits;
let highestMatch = 0;
let allMatches = [];
try {
const res = await fetch('https://www.theforceslottery.co.uk//rss/for_simple_rss.xml');
if (!res.ok) throw new Error('Failed to fetch feed');
const xmlText = await res.text();
const parser = new DOMParser();
const xml = parser.parseFromString(xmlText, 'text/html');
const draws = xml.querySelectorAll('div.draw');
draws.forEach((draw) => {
const date = draw.querySelector('div.draw_date')?.textContent.trim() || 'Unknown Date';
const winners = draw.querySelectorAll('winner');
winners.forEach((winner) => {
const sequenceDigits = ['one', 'two', 'three', 'four', 'five', 'six'].map((tag) => {
const el = winner.querySelector(tag);
return el ? el.textContent.trim() : '';
});
let match = 0;
let resultDisplay = '';
for (let i = 0; i < 6; i++) {
if (userInput[i] === sequenceDigits[i]) {
match++;
resultDisplay += `<strong>${sequenceDigits[i]}</strong>`;
} else {
resultDisplay += sequenceDigits[i];
}
}
if (match >= 3) {
let prize = '';
let className = '';
switch (match) {
case 6:
prize = '£10,000';
className = 'prizeSixMatched';
break;
case 5:
prize = '£500';
className = 'prizeFiveMatched';
break;
case 4:
prize = '£20';
className = 'prizeFourMatched';
break;
case 3:
prize = '£5';
className = 'prizeThreeMatched';
break;
}
allMatches.push({ date, match, sequence: resultDisplay, prize, className });
if (match > highestMatch) highestMatch = match;
}
});
});
} catch (error) {
alert('There was a problem loading the lottery feed.');
console.error(error);
return;
}
const messages = {
6: [
'This number could be a £10,000 winner!',
'Winners are sent their prizes automatically. Keep a look out for a cheque arriving in the post if this is your number!'
],
5: [
'This number could be a £500 winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
4: [
'This number could be a £20 winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
3: [
'This number could be a £5 winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
2: [
'Better luck next time!',
'This number has matched 2 digits. You must match a minimum of 3 digits to win a prize.'
],
1: [
'Better luck next time!',
'This number has matched 1 digit. You must match a minimum of 3 digits to win a prize.'
],
0: [
'No win this time',
"This number hasn't matched enough digits in any of the available draws to win a prize."
]
};
[title.textContent, message.textContent] = messages[highestMatch];
if (allMatches.length > 0) {
matchDates.innerHTML =
'<h3>Matches:</h3><div class="matchedDraws">' +
allMatches
.map((m) => `<div class="matchedDraw ${m.className}">
<span class="date"><h3>Draw date: <strong>${m.date}</strong></h3></span>
<span class="prize"><h4>Prize: <strong>${m.prize}!*</strong></h4></span>
<span class="matches"><h5>with ${m.match} digits matched (<div class="digitsMatched">${m.sequence}</div>)</h5></span>
</div>`)
.join('') +
'</div><p><small>* To be eligible to win the prize, your game number must meet the criteria specified in point 5.4 of the the game rules.</small></p>';
} else {
matchDates.innerHTML = '';
}
modal.style.display = 'flex';
body.style.overflow = 'hidden';
});
document.getElementById('close-modal').addEventListener('click', () => {
modal.style.display = 'none';
body.style.overflow = '';
});
</script>