Skip to content

Feature/bullet math #116

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

Merged
ajaynegi33 merged 9 commits into from
Sep 7, 2025
Merged

Feature/bullet math #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17ee2d4
Add new brain game: Bullet Math
aleenaharoldpeter Sep 5, 2025
93583dc
Fixed the suggestions given by code review
aleenaharoldpeter Sep 5, 2025
07cc3a4
Fixed the 'different type' error in page.tsx in bullet math
aleenaharoldpeter Sep 5, 2025
490a6d5
Add new brain game: Bullet Math
aleenaharoldpeter Sep 5, 2025
f13cd32
updated the fix for autofocus
aleenaharoldpeter Sep 5, 2025
af4affd
Added missing required game documentation and play again bug fix
aleenaharoldpeter Sep 6, 2025
a4c3915
Fixed above possible issues
aleenaharoldpeter Sep 6, 2025
207873e
Fixed above possible issues and commented duplicate diffculty in rese…
aleenaharoldpeter Sep 6, 2025
885e628
Add new brain game: Bullet Math
aleenaharoldpeter Sep 7, 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
Binary file added public/BulletMath.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
202 changes: 202 additions & 0 deletions src/app/game/bullet-math/page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
}

.controls {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}

.statusBar {
display: flex;
gap: 24px;
font-weight: bold;
margin-top: 10px;
}

.equationBox {
font-size: 36px;
font-weight: 700;
padding: 20px 32px;
border-radius: 12px;
border: 2px solid #ddd;
min-width: 360px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}

/* .buttons {
display: flex;
gap: 16px;
margin-top: 10px;
} */

.btn {
padding: 12px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 18px;
}

.true { background: #16a34a; color: white; }
.false { background: #dc2626; color: white; }
.neutral { background: #334155; color: white; }

.radioGroup {
display: flex;
gap: 8px;
align-items: center;
}

.input {
font-size: 28px;
font-weight: 600;
text-align: center;
padding: 10px 16px;
margin-left: 12px;
width: 120px;
border: 2px solid #aaa;
border-radius: 10px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.input:focus {
border-color: #2563eb;
box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}
Comment on lines +61 to +77

@coderabbitai coderabbitai Bot Sep 7, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick (assertive)

Avoid removing native focus without an accessible replacement.

You style input focus nicely—great. For consistency, add a visible focus style to .input using :focus-visible, like you did for buttons.

Apply:

+.input:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

Also applies to: 187-187

🤖 Prompt for AI Agents 
In src/app/game/bullet-math/page.module.css around lines 61 to 77 (also applies
at line 187), the current CSS uses .input:focus which can indiscriminately
remove native focus styles; add a matching .input:focus-visible rule that
provides a clear visible focus indicator for keyboard users (same visual
treatment as :focus but scoped to :focus-visible), ensuring accessible focus
styling is preserved while keeping :focus for other interactions.


.wrong {
color: #dc2626;
border-color: #dc2626;
}

.menuButton {
margin-top: 12px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border: none;
padding: 12px 24px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.menuButton:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
transform: translateY(-2px);
}
Comment on lines +84 to +101

@coderabbitai coderabbitai Bot Sep 7, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick (assertive)

Respect reduced-motion preferences.

Transitions and hover animations are great, but consider disabling them for users who prefer reduced motion.

Apply:

+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}

Also applies to: 127-141

🤖 Prompt for AI Agents 
In src/app/game/bullet-math/page.module.css around lines 84 to 101 (and also
apply same change to lines 127 to 141), the .menuButton transition and hover
transform ignore users' reduced-motion preference; update the CSS to wrap the
transition and transform rules inside a prefers-reduced-motion: reduce media
query so that when users prefer reduced motion the transition is removed and
hover transform is disabled, while keeping the existing styles for other users.


.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
}

.completionMessage {
background: white;
padding: 30px;
border-radius: 16px;
text-align: center;
max-width: 400px;
width: 90%;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.finalStats {
margin: 20px 0;
font-size: 1.2rem;
}

.resetButton {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
margin-bottom: 12px;
}

.resetButton:hover {
background: linear-gradient(135deg, #16a34a, #15803d);
}

@media (max-width: 400px) {
.equationBox {
min-width: auto;
font-size: 24px;
padding: 12px 16px;
}

.input {
width: 80px;
font-size: 20px;
}

.btn {
font-size: 16px;
padding: 10px 14px;
}
}

.hintBox {
margin-top: 20px;
padding: 16px;
border: 2px dashed #f59e0b;
border-radius: 12px;
background: #fffbea;
font-size: 16px;
max-width: 500px;
text-align: left;
line-height: 1.6;
}

.hintBox h3 {
margin-bottom: 10px;
color: #b45309;
}

.hintBox pre {
background: #fef3c7;
padding: 8px 12px;
border-radius: 8px;
font-family: monospace;
font-size: 14px;
overflow-x: auto;
}

.btn:focus-visible, .menuButton:focus-visible, .resetButton:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

.infoBox {
margin-top: 30px;
padding: 20px;
border-radius: 12px;
background: #f9fafb;
text-align: left;
line-height: 1.6;
font-size: 15px;
}

.infoBox h2 {
margin-top: 20px;
color: #1e40af;
}
Loading