Merge branch 'main' into main

This commit is contained in:
Hannah Park 2022-01-20 19:49:17 -05:00 committed by GitHub
commit d8dfee1e80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 290 additions and 3 deletions

7
Dockerfile Normal file
View file

@ -0,0 +1,7 @@
FROM node
COPY . .
RUN npm install
EXPOSE 3000
CMD npm run start

View file

@ -28,5 +28,12 @@ $ npm install
$ npm run start
```
_To build/run docker container:_
```bash
$ docker build -t notwordle .
$ docker run -d -p 3000:3000 notwordle
```
open http://localhost:3000 in browser.
### I'm looking for a junior developer role
Please feel free to contact me on [linkedin](https://www.linkedin.com/in/hannahpark1000/) and learn more about me [here](https://www.hannahmariepark.com/)

View file

@ -1,4 +1,5 @@
import { InformationCircleIcon } from '@heroicons/react/outline'
import { ChartBarIcon } from '@heroicons/react/outline'
import { useState, useEffect } from 'react'
import { Alert } from './components/alerts/Alert'
import { Grid } from './components/grid/Grid'
@ -6,7 +7,9 @@ import { Keyboard } from './components/keyboard/Keyboard'
import { AboutModal } from './components/modals/AboutModal'
import { InfoModal } from './components/modals/InfoModal'
import { WinModal } from './components/modals/WinModal'
import { StatsModal } from './components/modals/StatsModal'
import { isWordInWordList, isWinningWord, solution } from './lib/words'
import { addEvent, loadStats } from './lib/stats'
import {
loadGameStateFromLocalStorage,
saveGameStateToLocalStorage,
@ -19,6 +22,7 @@ function App() {
const [isInfoModalOpen, setIsInfoModalOpen] = useState(false)
const [isAboutModalOpen, setIsAboutModalOpen] = useState(false)
const [isNotEnoughLetters, setIsNotEnoughLetters] = useState(false)
const [isStatsModalOpen, setIsStatsModalOpen] = useState(false)
const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false)
const [isGameLost, setIsGameLost] = useState(false)
const [shareComplete, setShareComplete] = useState(false)
@ -33,6 +37,11 @@ function App() {
return loaded.guesses
})
const [stats, setStats] = useState<number[]>(() => {
const loaded = loadStats()
return loaded
})
useEffect(() => {
saveGameStateToLocalStorage({ guesses, solution })
}, [guesses])
@ -75,10 +84,12 @@ function App() {
setCurrentGuess('')
if (winningWord) {
setStats(addEvent(stats, guesses.length))
return setIsGameWon(true)
}
if (guesses.length === 5) {
setStats(addEvent(stats, guesses.length + 1))
setIsGameLost(true)
return setTimeout(() => {
setIsGameLost(false)
@ -106,6 +117,10 @@ function App() {
className="h-6 w-6 cursor-pointer"
onClick={() => setIsInfoModalOpen(true)}
/>
<ChartBarIcon
className="h-6 w-6 cursor-pointer"
onClick={() => setIsStatsModalOpen(true)}
/>
</div>
<Grid guesses={guesses} currentGuess={currentGuess} />
<Keyboard
@ -130,6 +145,11 @@ function App() {
isOpen={isInfoModalOpen}
handleClose={() => setIsInfoModalOpen(false)}
/>
<StatsModal
isOpen={isStatsModalOpen}
handleClose={() => setIsStatsModalOpen(false)}
stats={stats}
/>
<AboutModal
isOpen={isAboutModalOpen}
handleClose={() => setIsAboutModalOpen(false)}

View file

@ -0,0 +1,19 @@
import {Progress} from './progress'
type Props = {
data: number[]
}
export const Histogram = ({ data }: Props) => {
const min = 10
const max = Math.ceil(Math.max.apply(null, data)*1.2)
return(
<div className="columns-1 justify-left m-2 text-sm">
{ data.map(( value, i ) => (
<Progress key={i} index={i} size={min+100*value/max}
label={String(value)} />
))
}
</div>
)
}

View file

@ -0,0 +1,23 @@
type Props = {
index: number,
size: number,
label: string
}
export const Progress = ( {index, size, label}: Props ) => {
return(
<div className="flex justify-left m-1">
<div className="items-center justify-center w-10%">{index+1}</div>
<div className="bg-gray-200 rounded-full w-full ml-2">
<div
style={{ width: `${size}%`}}
className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5
rounded-l-full">{label}
</div>
</div>
</div>
)
}

View file

@ -1,5 +1,6 @@
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { XCircleIcon } from '@heroicons/react/outline'
type Props = {
isOpen: boolean
@ -44,6 +45,12 @@ export const AboutModal = ({ isOpen, handleClose }: Props) => {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
<div className="absolute right-4 top-4">
<XCircleIcon
className="h-6 w-6 cursor-pointer"
onClick={() => handleClose()}
/>
</div>
<div>
<div className="text-center">
<Dialog.Title

View file

@ -1,6 +1,7 @@
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Cell } from '../grid/Cell'
import { XCircleIcon } from '@heroicons/react/outline'
type Props = {
isOpen: boolean
@ -45,6 +46,12 @@ export const InfoModal = ({ isOpen, handleClose }: Props) => {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
<div className="absolute right-4 top-4">
<XCircleIcon
className="h-6 w-6 cursor-pointer"
onClick={() => handleClose()}
/>
</div>
<div>
<div className="text-center">
<Dialog.Title

View file

@ -0,0 +1,88 @@
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { XCircleIcon } from '@heroicons/react/outline'
import { trys, successRate, currentStreak, bestStreak } from '../../lib/stats'
import { Histogram } from '../histogram/histogram'
import { StatLine } from '../statline/statline'
type Props = {
isOpen: boolean
handleClose: () => void
stats: number[]
}
export const StatsModal = ({ isOpen, handleClose, stats }: Props) => {
const labels = ["Total trys", "Success rate",
"Current streak", "Best streak"]
const values = [String(trys(stats)), String(successRate(stats))+'%',
String(currentStreak(stats)), String(bestStreak(stats))]
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
className="fixed z-10 inset-0 overflow-y-auto"
onClose={handleClose}
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4
pt-5 pb-4 text-left overflow-hidden shadow-xl transform
transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
<div className="absolute right-4 top-4">
<XCircleIcon
className="h-6 w-6 cursor-pointer"
onClick={() => handleClose()}
/>
</div>
<div>
<div className="text-center">
<Dialog.Title
as="h3"
className="text-lg leading-6 font-medium text-gray-900"
>
Statistics
</Dialog.Title>
<StatLine labels={labels} values={values} />
<Dialog.Title
as="h3"
className="text-lg leading-6 font-medium text-gray-900"
>
Guess Distribution
</Dialog.Title>
<Histogram data={stats.slice(0,6)} />
</div>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
)
}

View file

@ -3,6 +3,7 @@ import { Dialog, Transition } from '@headlessui/react'
import { CheckIcon } from '@heroicons/react/outline'
import { MiniGrid } from '../mini-grid/MiniGrid'
import { shareStatus } from '../../lib/share'
import { XCircleIcon } from '@heroicons/react/outline'
type Props = {
isOpen: boolean
@ -54,6 +55,12 @@ export const WinModal = ({
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
<div className="absolute right-4 top-4">
<XCircleIcon
className="h-6 w-6 cursor-pointer"
onClick={() => handleClose()}
/>
</div>
<div>
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
<CheckIcon

View file

@ -0,0 +1,19 @@
type Props = {
labels: string[]
values: string[]
}
export const StatLine = ({labels, values}: Props) => {
return (
<div className="flex justify-center m-1">
{values.map((value,i ) => (
<div key={i} className="items-center justify-center m-1 w-1/4">
<div className="text-3xl font-bold">{value} </div>
<div className="text-sm">{labels[i]}</div>
</div>
))}
</div>
)
}

View file

@ -11,6 +11,22 @@ export const saveGameStateToLocalStorage = (gameState: StoredGameState) => {
export const loadGameStateFromLocalStorage = () => {
const state = localStorage.getItem(gameStateKey)
return state ? (JSON.parse(state) as StoredGameState) : null
}
const gameStatKey = 'gameStats'
type StoredGameStats = {
distribution: number[]
current: number
best: number
}
export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => {
localStorage.setItem(gameStatKey, JSON.stringify(gameStats))
}
export const loadStatsFromLocalStorage = () => {
const stats = localStorage.getItem(gameStatKey)
return stats ? (JSON.parse(stats) as StoredGameStats) : null
}

67
src/lib/stats.ts Normal file
View file

@ -0,0 +1,67 @@
/**
** An attempt at a statistics object and its interface
**/
import {
loadStatsFromLocalStorage,
saveStatsToLocalStorage
} from './localStorage'
// In stats array elements 0-5 are successes in 1-6 trys
// stats[6] is the number of failures
// stats[7] is the currentStreak
// stats[8] is the bestStreak
export const failures = (stats: number[] ) => { return stats[6] }
export const currentStreak = (stats: number[] ) => { return stats[7] }
export const bestStreak = (stats: number[] ) => { return stats[8] }
export const addEvent = (stats: number[], count: number) => {
// Count is number of incorrect guesses before end.
if(count < 0) { count = 0 } // Should not really need this
if( count > 5 ){ // A fail situation
stats[7] = 0 // End current streak
stats[6] += 1 // Increase number of fails
} else {
stats[count] += 1 // Increase counters
stats[7] += 1
if( bestStreak(stats) < currentStreak(stats) ){
stats[8] = currentStreak(stats)
}
}
saveStats(stats)
return stats
}
export const resetStats = () => {
return [0,0,0,0,0,0,0,0,0]
}
export const saveStats = (stats: number[]) => {
const distribution = stats.slice(0,7)
const current = currentStreak(stats)
const best = bestStreak(stats)
saveStatsToLocalStorage({ distribution , current, best })
}
export const loadStats = () => {
const loaded = loadStatsFromLocalStorage()
var stats = resetStats()
if( loaded ){
stats = loaded.distribution
stats[7] = loaded.current
stats[8] = loaded.best
}
return ( stats )
}
export const trys = (stats: number[] ) => {
return(stats.slice(0,7).reduce((a,b) => a+b , 0 ))
}
export const successRate = (stats: number[] ) => {
return(Math.round((100*(trys(stats) - failures(stats)))/Math.max(trys(stats),1)))
}