histogram width divide by mode, not total #2
5 changed files with 50 additions and 37 deletions
31
src/App.tsx
31
src/App.tsx
|
@ -15,7 +15,7 @@ import {
|
|||
saveGameStateToLocalStorage,
|
||||
} from './lib/localStorage'
|
||||
|
||||
const ALERT_TIME_MS = 2000;
|
||||
const ALERT_TIME_MS = 2000
|
||||
|
||||
function App() {
|
||||
const [currentGuess, setCurrentGuess] = useState('')
|
||||
|
@ -50,16 +50,18 @@ function App() {
|
|||
|
||||
useEffect(() => {
|
||||
if (isGameWon) {
|
||||
setSuccessAlert(WIN_MESSAGES[Math.floor(Math.random()*WIN_MESSAGES.length)]);
|
||||
setSuccessAlert(
|
||||
WIN_MESSAGES[Math.floor(Math.random() * WIN_MESSAGES.length)]
|
||||
)
|
||||
setTimeout(() => {
|
||||
setSuccessAlert('');
|
||||
setIsStatsModalOpen(true);
|
||||
}, ALERT_TIME_MS);
|
||||
setSuccessAlert('')
|
||||
setIsStatsModalOpen(true)
|
||||
}, ALERT_TIME_MS)
|
||||
}
|
||||
if (isGameLost) {
|
||||
setTimeout(() => {
|
||||
setIsStatsModalOpen(true);
|
||||
}, ALERT_TIME_MS);
|
||||
setIsStatsModalOpen(true)
|
||||
}, ALERT_TIME_MS)
|
||||
}
|
||||
}, [isGameWon, isGameLost])
|
||||
|
||||
|
@ -74,7 +76,9 @@ function App() {
|
|||
}
|
||||
|
||||
const onEnter = () => {
|
||||
if (isGameWon || isGameLost) { return; }
|
||||
if (isGameWon || isGameLost) {
|
||||
return
|
||||
}
|
||||
if (!(currentGuess.length === 5)) {
|
||||
setIsNotEnoughLetters(true)
|
||||
return setTimeout(() => {
|
||||
|
@ -139,8 +143,8 @@ function App() {
|
|||
isGameLost={isGameLost}
|
||||
isGameWon={isGameWon}
|
||||
handleShare={() => {
|
||||
setSuccessAlert("Game copied to clipboard");
|
||||
return setTimeout(() => setSuccessAlert(''), ALERT_TIME_MS);
|
||||
setSuccessAlert('Game copied to clipboard')
|
||||
return setTimeout(() => setSuccessAlert(''), ALERT_TIME_MS)
|
||||
}}
|
||||
/>
|
||||
<AboutModal
|
||||
|
@ -158,13 +162,10 @@ function App() {
|
|||
|
||||
<Alert message="Not enough letters" isOpen={isNotEnoughLetters} />
|
||||
<Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
|
||||
<Alert
|
||||
message={`The word was ${solution}`}
|
||||
isOpen={isGameLost}
|
||||
/>
|
||||
<Alert message={`The word was ${solution}`} isOpen={isGameLost} />
|
||||
<Alert
|
||||
message={successAlert}
|
||||
isOpen={successAlert!==''}
|
||||
isOpen={successAlert !== ''}
|
||||
variant="success"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import Countdown from "react-countdown"
|
||||
import Countdown from 'react-countdown'
|
||||
import { StatBar } from '../stats/StatBar'
|
||||
import { Histogram } from '../stats/Histogram'
|
||||
import { GameStats } from '../../lib/localStorage'
|
||||
|
@ -16,7 +16,15 @@ type Props = {
|
|||
handleShare: () => void
|
||||
}
|
||||
|
||||
export const StatsModal = ({ isOpen, handleClose, guesses, gameStats, isGameLost, isGameWon, handleShare }: Props) => {
|
||||
export const StatsModal = ({
|
||||
isOpen,
|
||||
handleClose,
|
||||
guesses,
|
||||
gameStats,
|
||||
isGameLost,
|
||||
isGameWon,
|
||||
handleShare,
|
||||
}: Props) => {
|
||||
if (gameStats.totalGames <= 0) {
|
||||
return (
|
||||
<BaseModal title="Statistics" isOpen={isOpen} handleClose={handleClose}>
|
||||
|
@ -31,11 +39,15 @@ export const StatsModal = ({ isOpen, handleClose, guesses, gameStats, isGameLost
|
|||
Guess Distribution
|
||||
</h4>
|
||||
<Histogram gameStats={gameStats} />
|
||||
{(isGameLost || isGameWon) &&
|
||||
{(isGameLost || isGameWon) && (
|
||||
<div className="mt-5 sm:mt-6 columns-2">
|
||||
<div>
|
||||
<h5>New word in</h5>
|
||||
<Countdown className="text-lg font-medium text-gray-900" date={tomorrow} daysInHours={true} />
|
||||
<Countdown
|
||||
className="text-lg font-medium text-gray-900"
|
||||
date={tomorrow}
|
||||
daysInHours={true}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
|
@ -48,7 +60,7 @@ export const StatsModal = ({ isOpen, handleClose, guesses, gameStats, isGameLost
|
|||
Share
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</BaseModal>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1 +1 @@
|
|||
export const WIN_MESSAGES = ["Great Job!", "Awesome", "Well done!"];
|
||||
export const WIN_MESSAGES = ['Great Job!', 'Awesome', 'Well done!']
|
||||
|
|
|
@ -3,7 +3,7 @@ import { solutionIndex } from './words'
|
|||
|
||||
export const shareStatus = (guesses: string[], lost: boolean) => {
|
||||
navigator.clipboard.writeText(
|
||||
`Not Wordle ${solutionIndex} ${lost?"X":guesses.length}/6\n\n` +
|
||||
`Not Wordle ${solutionIndex} ${lost ? 'X' : guesses.length}/6\n\n` +
|
||||
generateEmojiGrid(guesses)
|
||||
)
|
||||
}
|
||||
|
|
|
@ -18,7 +18,7 @@ export const getWordOfDay = () => {
|
|||
const now = Date.now()
|
||||
const msInDay = 86400000
|
||||
const index = Math.floor((now - epochMs) / msInDay)
|
||||
const nextday = (index+1)*msInDay + epochMs;
|
||||
const nextday = (index + 1) * msInDay + epochMs
|
||||
|
||||
return {
|
||||
solution: WORDS[index].toUpperCase(),
|
||||
|
|
Loading…
Add table
Reference in a new issue