Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

created flashing number + status of flash + result checker #42

Merged
merged 5 commits into from
Feb 12, 2025
Merged

created flashing number + status of flash + result checker #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b61730
finished flash part
Feb 11, 2025
4064fb2
Update flash.astro
ATOMiNATiON Feb 11, 2025
0af6d6e
Update add.astro
ATOMiNATiON Feb 11, 2025
36b9ed6
Update add.astro
rik102 Feb 12, 2025
d7287ce
Update add.astro
ATOMiNATiON Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 74 additions & 70 deletions src/pages/add.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,98 +4,102 @@ import Button from '../components/Button.astro';
import '../styles/styles.css';
---

<div class="form-container">
<h1 id="title">Add/Sub</h1>
<head>
<title>Add/Sub Setup</title>
</head>

<div class="input-row">
<span class="input-label"># of digits</span>
<number-input>
<NumberInput

<body>
<div class="form-container">
<h1 id="title">Add/Sub</h1>

<div class="input-row">
<span class="input-label"># of digits</span>
<NumberInput
id="digitsInput"
placeholder="Enter numbers only"
placeholder="Enter a number from 1-6"
size="lg"
allowDecimals={false}
minValue={1}
maxValue={6}
allowDecimals={false}
/>
</number-input>
</div>
</div>

<div class="input-row">
<span class="input-label"># of numbers</span>
<number-input>
<NumberInput
<div class="input-row">
<span class="input-label"># of numbers</span>
<NumberInput
id="numbersInput"
placeholder="Enter numbers only"
placeholder="Enter a number from 1-15"
size="lg"
minValue={1}
maxValue={6}
maxValue={15}
/>
</number-input>
</div>
</div>

<div class="input-row">
<span class="input-label">Speed (S)</span>
<number-input>
<NumberInput
<div class="input-row">
<span class="input-label">Speed (sec)</span>
<NumberInput
id="speedInput"
placeholder="Enter numbers only"
placeholder="Enter a number from 0.2-3"
size="lg"
minValue={0.02}
maxValue={3}
allowDecimals={true}
/>
</number-input>
</div>
</div>
</div>

<Button
id="backButton"
size="lg"
backgroundColor="#4ea7f5"
textColor=white
borderColor="transparent"
href="/"
>
Back
</Button>
<Button
id="backButton"
size="lg"
backgroundColor="#4ea7f5"
textColor="white"
borderColor="transparent"
href="/"
>
Back
</Button>

<!-- We'll handle client-side navigation for Next -->
<Button
id="nextButton"
size="lg"
backgroundColor="#4ea7f5"
textColor="white"
borderColor="transparent"
>
Next
</Button>
</div>

<Button
id="nextButton"
size="lg"
backgroundColor="#4ea7f5"
textColor=white
borderColor="transparent"
>
Next
</Button>
<script type="module">
const nextBtn = document.querySelector('#nextButton');
const digitsInput = document.querySelector('#digitsInput');
const numbersInput = document.querySelector('#numbersInput');
const speedInput = document.querySelector('#speedInput');

<script>
import { ProblemGenerator } from '../lib/ProblemGenerator';
const digitsInput = document.querySelector('#digitsInput') as HTMLInputElement;
const numbersInput = document.querySelector('#numbersInput') as HTMLInputElement;
const speedInput = document.querySelector('#speedInput') as HTMLInputElement;
const nextButton = document.querySelector('#nextButton');
nextBtn?.addEventListener('click', () => {
if (!digitsInput || !numbersInput || !speedInput) {
alert('Inputs not found in the DOM.');
return;
}

nextButton?.addEventListener('click', () => {
const digits = digitsInput?.value || '';
const numbers = numbersInput?.value || '';
const speed = speedInput?.value || '';
const digitsVal = digitsInput.value;
const numbersVal = numbersInput.value;
const speedVal = speedInput.value;

if (!digits || !numbers || !speed) {
alert('Please fill in all fields');
return;
}
if (!digitsVal || !numbersVal || !speedVal) {
alert('Please fill in all fields.');
return;
}

const gameConfig = {
digits: Number(digits),
numbers: Number(numbers),
speed: Number(speed)
};
// Build the URL to /flash with query params
const url = new URL('/flash', window.location.origin);
url.searchParams.set('digits', digitsVal);
url.searchParams.set('numbers', numbersVal);
url.searchParams.set('speed', speedVal);

console.log('Starting game with config:', gameConfig);
const problemGen = new ProblemGenerator();
const problems = problemGen.addSubtract(gameConfig.numbers, gameConfig.digits);
console.log('The problem is:', problems)
});
</script>
// Navigate
window.location.href = url.toString();
});
</script>
</body>
191 changes: 191 additions & 0 deletions src/pages/flash.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
---
import '../styles/styles.css';
import Button from '../components/Button.astro';
---

<head>
<title>Flashing Numbers</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-image: url('/mathArenaBkg.jpg');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need to make a PR down the line moving all this stuff into a common stylesheet. Out of scope for this PR

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 95%;
}

.flash-container {
text-align: center;
font-size: 3rem;
}

.currently-flashing {
color: green;
font-weight: bold;
margin-bottom: 10px;
visibility: hidden; /* Initially hidden */
}

.flash-number {
font-size: 10rem;
margin-bottom: 20px;
}

.result-input {
font-size: 4.5rem;
padding: 0.5rem;
width: 350px;
margin-top: 30px;
margin-bottom: 20px;
display: none; /* Initially hide the input */
}

#backButton {
position: fixed;
bottom: 20px;
left: 20px;
display: none; /* Initially hide the back button */
}

#submitButton {
display: none; /* Initially hide the submit button */
margin: 20px auto; /* Center the button */
}
</style>
</head>

<body>
<div class="flash-container">
<div id="currentlyFlashing" class="currently-flashing">
<!--Currently Flashing_-->
</div>
<div id="flashContainer" class="flash-number">
<!-- Initial loading text -->
Loading...
</div>

<!-- Input area for final result -->
<input id="resultInput" class="result-input" type="text" placeholder="Enter result">

<!-- Submit button -->
<Button
id="submitButton"
size="lg"
backgroundColor="#4ea7f5"
textColor="white"
borderColor="transparent"
>
Submit Answer
</Button>

<!-- Back button styled using Button.astro component -->
<Button
id="backButton"
size="lg"
backgroundColor="#4ea7f5"
textColor="white"
borderColor="transparent"
href="/"
>
Back
</Button>
</div>

<script>
import { ProblemGenerator } from '../lib/ProblemGenerator';
import '../components/Button.astro';

const params = new URLSearchParams(window.location.search);
const digits = parseInt(params.get('digits') || '0');
const numbers = parseInt(params.get('numbers') || '0');
const speed = parseFloat(params.get('speed') || '0');

// Instantiate ProblemGenerator
const problemGen = new ProblemGenerator();
const { entries, result } = problemGen.addSubtract(numbers, digits);

function flashNumbers(numbersArr: number[], speedSeconds: number, finalResult: number) {
const currentlyFlashing = document.getElementById('currentlyFlashing') as HTMLDivElement;
const flashContainer = document.getElementById('flashContainer') as HTMLDivElement;
const resultInput = document.getElementById('resultInput') as HTMLInputElement;
const backButton = document.getElementById('backButton') as HTMLButtonElement;
const submitButton = document.getElementById('submitButton') as HTMLButtonElement;
if (!currentlyFlashing || !flashContainer || !resultInput || !backButton || !submitButton) return;

let index = 0;
const showTime = speedSeconds * 1000;

function showNextNumber() {
if (index >= numbersArr.length) {
flashContainer.textContent = ''; // Clear flashContainer
currentlyFlashing.style.visibility = 'hidden'; // Hide "Currently Flashing"
setTimeout(() => {
flashContainer.textContent = 'Answer'; // Display "Answer" message
resultInput.style.display = 'inline-block'; // Show the input field
backButton.style.display = 'block'; // Show the back button
submitButton.style.display = 'block'; // Show the submit button
}, 1000); // 1 second delay before showing "Answer"
return;
}

currentlyFlashing.style.visibility = 'visible'; // Ensure "Currently Flashing" is visible
flashContainer.textContent = numbersArr[index].toString();
index++;

setTimeout(() => {
flashContainer.textContent = '';
setTimeout(showNextNumber, showTime);
}, showTime);
}

showNextNumber();
}

flashNumbers(entries, speed, result);

// Function to handle back button click
const backButton = document.getElementById('backButton');
if (backButton) {
backButton.addEventListener('click', () => {
window.history.back(); // Go back to the previous page
});
}

// Function to check the answer
function checkAnswer() {
const resultInput = document.getElementById('resultInput') as HTMLInputElement;
if (resultInput) {
const userInput = resultInput.value.trim();
if (userInput === result.toString()) {
// Handle correct input behavior
alert('Correct input!'); // Replace with your logic
} else {
// Handle incorrect input behavior
alert('Incorrect input!'); // Replace with your logic
}
}
}

// Function to handle submit button click
const submitButton = document.getElementById('submitButton');
if (submitButton) {
submitButton.addEventListener('click', checkAnswer);
}

// Add enter key support for submission
const resultInput = document.getElementById('resultInput');
if (resultInput) {
resultInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
checkAnswer();
}
});
}
</script>
</body>