Unlock secret solver via 7 rapid taps on the title
Allows mobile users to access the auto-solver without a keyboard. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
b2cc21a354
commit
d727f6d58a
@ -33,6 +33,8 @@ body {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #343a40;
|
color: #343a40;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-main {
|
.app-main {
|
||||||
|
|||||||
17
src/App.jsx
17
src/App.jsx
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect, useRef } from 'react'
|
||||||
import Board from './components/Board'
|
import Board from './components/Board'
|
||||||
import NumberPad from './components/NumberPad'
|
import NumberPad from './components/NumberPad'
|
||||||
import GameControls from './components/GameControls'
|
import GameControls from './components/GameControls'
|
||||||
@ -36,6 +36,19 @@ function App() {
|
|||||||
const [autoSolving, setAutoSolving] = useState(false)
|
const [autoSolving, setAutoSolving] = useState(false)
|
||||||
const [autoBlinkCell, setAutoBlinkCell] = useState(null)
|
const [autoBlinkCell, setAutoBlinkCell] = useState(null)
|
||||||
const [autoCooldown, setAutoCooldown] = useState(false)
|
const [autoCooldown, setAutoCooldown] = useState(false)
|
||||||
|
const titleTapsRef = useRef({ count: 0, lastTap: 0 })
|
||||||
|
|
||||||
|
function handleTitleTap() {
|
||||||
|
if (solveUnlocked) return
|
||||||
|
const now = Date.now()
|
||||||
|
const ref = titleTapsRef.current
|
||||||
|
ref.count = now - ref.lastTap < 800 ? ref.count + 1 : 1
|
||||||
|
ref.lastTap = now
|
||||||
|
if (ref.count >= 7) {
|
||||||
|
setSolveUnlocked(true)
|
||||||
|
ref.count = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.body.style.background = state.darkMode ? '#1a1a2e' : '#f8f9fa'
|
document.body.style.background = state.darkMode ? '#1a1a2e' : '#f8f9fa'
|
||||||
@ -124,7 +137,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<div className={`app${state.darkMode ? ' dark' : ''}`} style={{ '--hue': hue }}>
|
<div className={`app${state.darkMode ? ' dark' : ''}`} style={{ '--hue': hue }}>
|
||||||
<header className="app-header">
|
<header className="app-header">
|
||||||
<h1>Sudoku</h1>
|
<h1 className="app-title" onClick={handleTitleTap}>Sudoku</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="app-main">
|
<main className="app-main">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user