0xcaff / wordsearch

A thoughtfully designed, interactive word search solver.

The Wordsearch Solver

A wordsearch solver with quick image input and an interactive viewer.

Live Site | Launch Blog Post

Solving a wordsearch is basically two dimensional string search. This wordsearch solver makes it easy to input wordsearches, solve them and view the results interactively.

How it Works

There are two ways to enter a puzzle into this solver.

1. Using a text input. The puzzle and words are entered into text boxes. DraftJS is used for the puzzle text box to ensure that the area around each letter is a square instead of a rectangle for easier input.

   

2. Using an image selector. After an image is selected, it is sent to the google cloud vision api which returns a list of letters in the image and their bounding boxes. The user is prompted to select the region of the puzzle and the regions of each of the words in the image. The selected letters from the puzzle are arranged into a grid of letters using a kernel density estimator to find the rows and columns making up the puzzle, then finding the letters nearest to grid intersections.

   

Now that the puzzle and the words to find have been imported we have enough information to send to the wordsearch solver algorithm.

The wordsearch solver algorithm takes in a puzzle along with a list of words and returns a list of matches (word -> list of nodes making up a word).

The result is displayed in an interactive viewer.

wordsearch's Issues

Upgrade `wordsearch-algo` Version

The interface has changed. It is way faster now too.

Google Result Empty

When googling this page, nothing comes up in the text area of the search result.

The cached view is also blank. It seems to be caused by react router.

ViewPuzzle Show Lines Around Matches

Given a blob of nodes which are a part of a match, it is difficult to tell which directions the words go. Up and down? Left and right? Diagonally?

Add Touch Events

iOS doesn't seem to emulate mouse enter and leave.

Image Selection Sizing

Capped at 100vmin.

Upgrade to React 16

It's stable now!

Flash of Unstyled Content Regression

A regression was introduced in 4a5edc7. A flash of unstyled content appears on page load.

Use TypeScript

Not using typescript is making this really stressfull.

Add Go Back

Make sure there is a way to go back from ViewPuzzle to TextInput in all cases:

1. ImageInput -> TextInput -> ViewPuzzle -> TextInput
2. TextInput -> ViewPuzzle -> TextInput
3. InputSelection (demo puzzle) -> ViewPuzzle -> TextInput

onMouseLeave Fallback

onMouseLeave isn't run sometimes when exiting a node. This causes the highlight to remain until another selection is made.

Fix Indentation

There is lots of mixed indentation.

Default Word Lists

Include a default list of words so people can try to solve wordsearches which don't come with word lists. Some performance testing should be done with the algorithm to check whether this is feasible.

Persistent Wordsearches

Allow people to create, share and modify (copy on write) wordsearches. No editing. No user management. This can be implemented easily with Firebase firestore (free tier). It must support the following:

• View A Stored Wordsearch By ID
• Browse Stored Wordsearches
• Add Wordsearches (Puzzle, Source Image, Tags, Title)

Image Input Hidden Actions

In the image input, some things are hard to see:

• List Of Words
• Actions at Bottom of Page
• Prompt for What to Do

Switch To Circle CI

Travis CI's webhook is broken.

Default Word Lists

Allow for throwing a dictionary with 1000s of words at the solver. This would make it possible for solving mystry wordsearches which don't come with a list.

Search Results

Currently, when searching google for wordsearch solvers the website doesn't come up. Something needs to be done about search engine optimization.

Add Pointer Events Polyfill

Safari Wonky Grid

Something is wrong with the way the grid is rendered in Safari. The cells aren't all squares perfectly.

Fix Image Selection

It is broken for some reason. :(

Strange Image Selection Issue

The selection doesn't seem to work with certain images: tree.search returns an empty array.

Here's an example image:

It seems to be a problem in rbush.

Solve Wordsearch In WebWorker

This will allow for the large default word lists. Also, a loading animation and progress bars can be displayed.

Split Wordsearch Solving Into Own Package

Image Input Mark Already Selected Nodes

After selecting a bounding box for either a puzzle or a word, it isn't immediately obvious that the bounding box was already used as part of a word or puzzle.

Better ViewPuzzle Layout for Mobile

• Move Word List to Slide Out Pannel or Below Puzzle
• Make Puzzle Scrollable When Overflowing
• Disable Jump to Focused on Small Screens

Improve Image Handling

Currently, the image handling works for most cases but not in some (high resolution images).

• Test Pipeline
• Improve

Some ideas for improve are to use quartiles to find outliers instead of variance.

Get The Word Out

Post in the following places:

• /r/reactjs/
• /r/javascript/
• /r/puzzles
• /r/programming
• Medium Wordsearch Wednesday (https://medium.com/@Medium/wordsearchwednesday-a519722b5afd)
• https://www.reddit.com/r/pics/comments/5iwxs5/hardest_word_search_ive_ever_seen/
• https://www.reddit.com/r/funny/comments/44sj9o/a_very_carefully_compiled_wordsearch/
• https://www.reddit.com/r/puzzles/comments/6yay2s/another_one_word_search_for_you/
• https://www.reddit.com/r/smashbros/comments/2fn8ai/dont_know_why_but_i_made_a_word_search_of_all_the/
• https://www.reddit.com/r/funny/comments/18c6no/one_of_my_friends_asked_me_to_make_them_a_word/
• https://www.reddit.com/r/adventuretime/comments/67kmbf/captain_tastys_word_search_is_too_hard/
• https://www.reddit.com/r/adventuretime/comments/67kmbf/captain_tastys_word_search_is_too_hard/
• https://www.reddit.com/r/Terraria/comments/1a8pzc/terrarias_facebook_posted_a_crossword_puzzle_of/
• https://www.reddit.com/r/teflteachers/comments/2p1vwr/word_search_problems_do_they_have_any_educational/
• https://www.reddit.com/r/mildlyinfuriating/comments/56gxle/cnns_impossible_snapchat_word_search/
• http://www.dorkly.com/post/69790/the-most-painful-word-search-ever

Text Entry Selection Bug

Clicking on the text entry is hard. Something is wrong with the placeholder.

Prevent Navigation When Input Dirty

Accessibility

Add keyboard shortcuts to the List and the ImageInput.

List:

• Allow Focusing by Tabbing to Element (3336708)

ImageInput:

• Continue To Next Step by Pressing Enter

User Testing on ImageInput

• Is is intuitive?
• Should the currently selected puzzle be shown?
• Is a tooltip useful?

Remove Puzzles from Worker Bundle

It isn't used and shouldn't be bundled. There are two ways to fix this:

• Investigate why the tree shaking isn't removing it and make tree shaking remove it.
• Move the puzzles into their own module and don't import them in wordsearch-algo or the web worker.

Colors

Some people thing the design is bland and boring. Consider adding colors.

Desaturate Background Image When Making Selections

See TODO removed in a3e156c.

Add Demo Images

Allow people to experience the ease of solving a wordsearch even if they don't have a wordsearch to solve.

Wordsearch Algorithm Performance

The complexity is high. It could be much lower.

TextInput Buggy in Chrome

It works fine in firefox. Chrome doesn't account for the letter-spacing in the line width. Might want to switch to something which uses content editable.

Improve Page Load Time

Most of the content can be compiled into static pages. This will allow the pages to be cached and speed up load time.

ImageInput Mobile Friendly

Currently, the regions can't be selected on mobile.

• Selection (07a5b10)
• Inverting Selection (Ctrl Selection) (Toggle Selection on Tap or on Double Tap Drag) (6ae7b2701f052b5a4622e9a1a2b7923b727f48c8)
• Scale Image to Parent Width (https://konvajs.github.io/docs/sandbox/Responsive_Canvas.html) (7d064d6)

Better Perfomance Testing

TODO:

• Stop Using Babel Node (might require splitting the wordsearch solving code into its own package)
• Add Data With More Variety
• Report Aggregate Results

ViewPuzzle Fill Available Space

When a puzzle is small and the screen is large, the puzzle should take up more space.

Add CSS Paint Polyfill

Highlight Broken

Mousing over a word in the puzzle doesn't trigger a highlight.

Write Readme and Make Demo Video

The Demo Video Should:
Show how easy solving a Wordsearch is:

• by the image flow

• by the text flow

• display the interactiveness of the ui

• show mobile friendless

• talk about some of the challenges faced when building (fast ui, wordsearch algorithm, point extraction)

• Favicon

Remove Mobile Support

Doesn't make sense and adds tons of complexity.

Analytics

• Differentiate the version with analytics from the version without analytics.
• Decide which analytics platform to use.
• Setup Analytics

I need an analytics solution which does the following:

• Number of Users Visiting Site
• Which Flows People are Using
• Doesn't track wordsearches and images input.
• Tracks whether or not the wordsearch is an example.

My options are:

• Google Analytics (Tried, True and Legacy Feeling)
• Cloudflare Analytics (Easy, Fast, Server-Side, not enough data)
• Segment
• Amplitude Analytics
• Parsely
• Mixpannel
• Keen.IO (looks like lots of work to analyze data)

CSS Structure

Figure out the correct way to do CSS.

Here is the css which needs to be migrated:

• ./components/Annotations.css (6a45181)
• ./components/TextEntry.css (9790854)
• ./components/List.css (99f0e79)
• ./components/clickable.css (3562308)
• ./components/Button.css (96a73ec)
• ./components/grid/GridSelection.css (9a9546b)
• ./components/grid/Node.css (9a9546b)
• ./components/Loading.css (412853a)
• ./components/grid/Grid.css (9a9546b)
• ./App.css (5395dc9)
• ./index.css (3562308)
• ./routes/ViewPuzzle.css (ce6b24a)
• ./routes/TextInput.css (d97fd73)
• ./routes/InputSelection.css (e9e5aa2)
• ./routes/ImageInput.css (62c5ca3)

Add Back Image Handling

Supercedes #5, #28, #33, #34, #56, #48

Coerce Output from Image Input

Maybe capitalize? Convert everything to letters?

Structured Source Code

Everything is in a big directory. It could be split into a few more directories to improve readability.

• routes (contains the root component at each route)
• components (contains all other component, TextEntry)
• components/grid (contains stuff for grid)
• processing (contains code for processing images and utils.js).