canadianveggie / spellie

Spellie - a daily Wordle-like game for young spellers

Spellie

A kid-friendly version of the popular Wordle game

Try it out: Spellie - Wordle for Kids

Differences from classic Wordle:

• Daily puzzles from a curated, kid-friendly list of words
• 3 difficulty levels to challenge spellers of all ages
  • Easy is appropriate for K-2 and has hints and help
  • Medium is appropriate for Grade 3 and has hints
  • Hard mode is challenging enough for adults, but with words that any Grade 4 student can spell
• 600+ emojis that you can collect as rewards for spelling and imagination
• Brighter, more kid friendly colours
• Kid-friendly font with either uppercase or lowercase letters
• Letters can be entered in any order
• Alphabetically ordered keyboard (optional)
• Allows guesses not in the dictionary (optional)

Future enhancements:

• See our Issues backlog

spellie's Issues

Fix styling for older iPhones

Spotted in the wild on an iPhone 7 (safari):

Letter tiles are squished and hard to read.

Nicer Settings Page

Get rid of the ugly radio buttons and use toggles instead.

Cooler emojis

Have more fun with the emojis the user unlocks.

Consider:

• changing where emojis are displayed
• using a 3rd party emoji library (like https://twemoji.twitter.com/ or https://www.joypixels.com/)
• animated emojis

Use Overlays for Secondary Pages

Look into using overlays with an X instead of separate pages with a Back button.

CI Failing

https://github.com/canadianveggie/spellie/actions/runs/3899829967

I think the problem is the version of node we're using. Or maybe something else.

Add deep-linking by puzzle difficulty

Would be nice sometimes to link to /hard, for example

Log Errors to Amplitude

So we have some visibility into client-side errors.

Important details:

• error message
• context
• URL

Error Rendering on Safari 12

Conditional chaining is not supported (and maybe other problems).

Remove bad words from dictionary

I wouldn't go as far as what the NYT has gone, but anything on a bad words filter should probably be removed. I noticed that SHIT and CRAP were in our dictionary and should probably be removed.

https://tech.hindustantimes.com/gaming/news/taboo-new-york-times-removes-some-insensitive-words-from-wordle-71645009066531.html

Center Letters in Bubbles

They're slightly raised right now and it's bothering me.

I think it's because the circle actually extends below the div.

Improve SEO

Ensure spelliegame.com is a top result for searches for:

• "spellie"
• "spelliegame"
• "spellie game"
• "wordle for kids"

Ensure there is a nice preview in Google Search
https://developers.google.com/search/blog/2019/09/more-controls-on-search

Support French

https://canadianveggie.com/2022/02/11/introducing-spellie/#comment-20889

Bravo! We adore this game! Very well done. Could you make a version/tab also for the game in French? We would appreciate it very much.
Many thanks!

As requested by Caroline. We don't have the bandwidth right now but documenting this for future work.

We would need to:

• localize components
• Figure out vocab lists
• Redo the emoji mappings
• Redo the hint system

Multiple colour themes

Especially a high contrast mode for people with colour vision deficiency.
https://wp.me/pYgdk-3B0%23comment-20878

Avoid content-filtering in schools (if possible)

Here in Vancouver, some schools (like my kids' elementary) can't use Spellie — it just won't load.

Likely due to content filtering that detects "game" and decides that's really bad for education.

Not sure how we get around this.

Reset Today

Setting that clears today's game state (easy, medium, and hard).
Useful for classrooms and multiple child families.

Full keyboard navigation

You cannot navigate with the keyboard to many elements on the page.

Better icon

Something better than this

Projector support

Make everything bigger so it renders will when casted or projected in a classroom.

Minor: x-overflow on 6-letter word success on iPhone XR

Slight ballooning off screen when winning a 6-letter puzzle as shown in screen cap

Error in hint system prevents guess submission

alpinejs:5 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at getHint (hint.js:180:31)
at Proxy.prepareHint ((index):811:24)
at Proxy.addLetter ((index):587:20)
at Proxy.keyPressed ((index):708:18)
at be (alpinejs:5:1145)
at alpinejs:5:974
at Ht (alpinejs:1:4690)
at alpinejs:5:33182
at o (alpinejs:5:24268)
at alpinejs:5:24876

Errors rendering in old Safari versions

I don't think we want to fix these necessarily, but I thought we should document them.

Here are the errors I saw in old versions of Safari.

cdn.min.js:5 ReferenceError: Can't find variable: queueMicrotask

spelliegame.com/:857 SyntaxError: Unexpected token '...'. Expected a property name.(anonymous function) @ spelliegame.com/:857
unpkg.com/[email protected]/dist/cdn.min.js:1 SyntaxError: Unexpected token '...'. Expected a property name.(anonymous function) @ unpkg.com/[email protected]/dist/cdn.min.js:1

"check your spelling"

I'm getting this message on a lot of my guesses. Including what my husband confirms is the correct answer. Excited to share this game with my kid if it's working!

Safari v15 Rows Shift with Emojis

Minor bug.

Larger hint text

It's hard to read right now. Especially with the circled letters.

Should we make the text bigger? Or maybe get rid of the circled letters and replace them with bolded letters?

Include more explicit feedback link somewhere

I'm not sure it's clear where to send feedback. Should we highlight twitter or github?

Change Sharing Text to put `spellie-` as part of the level

Instead of:
Spellie
easy-11: 4/6
🍀🕸️🕸️🌻
🍀🍀🕸️🍀
🍀🍀🕸️🍀
🍀🍀🍀🍀
https://spelliegame.com

I'd like to see:
spellie-easy-11: 4/6
🍀🕸️🕸️🌻
🍀🍀🕸️🍀
🍀🍀🕸️🍀
🍀🍀🍀🍀

Not sure if we should drop the url or not. Our SEO for spellie is high enough now that it seems safe.

Reveal/Reset buttons should use key styles

From James:
"Should probably use the white background, black stroke scheme of "active" items for them"

Losing background colours on scroll

When scrolling down we lose the background colours.

Scale to All Screen Resolutions

The UI doesn't do a great job scaling to odd screen resolutions.

Some examples:

• 412x975 (Galaxy S20)
• 667x375 (iPhone in landscape)
• 820x1180 (iPad Air)
• 912x1368 (Surface Pro)
• 1200x500

Related to #36

Wide emojis circles on collection page

CSP Error in Safari

Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy.

It is making the site unusable in Safari. I get it after navigating between tabs.

Caused by #85

No duplicate hints

When you're down to the final letter, we may repeat the hint "it's not X, Y or Z", which isn't very satisfying.

Add share button to bottom of completed puzzles

It's a little hidden in the header.

Add eslint

For consistency, but also to help us avoid writing code depending on newer browser features

About/Help Page

Create a page with:

• rules
• why Spellie is different
• where to send feedback (https://twitter.com/SpellieGame or https://github.com/canadianveggie/spellie/issues)

Archive - Ability to play old puzzles

I’ve been playing with my students & they just love it! Some have asked for more. Is there a way to play the previous puzzles that we may have missed out on? THANK YOU!
https://twitter.com/ImaSpeechie2/status/1511496887639199756

Better End Game Experience

Combine the end game animation with the end game buttons (visible when you leave and come back to the game).

This would make the "share" button visible at the end of the game.

I'd also like to explore not showing the answer for failed games. This would allow the user to "reset" and try again.

Twemojis are failing to load

we're falling back to standard emojis, but will be a problem on older OS's.

Example this is failing right now: https://twemoji.maxcdn.com/v/13.1.0/svg/1f344.svg

Looks like we need to change how we're loading these.
twitter/twemoji#580