GithubHelp home page GithubHelp logo

bbeck / puzzles-with-chat Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 3.03 MB

Web frontend and Twitch bot for solving puzzles collaboratively with chat

License: Apache License 2.0

CSS 2.14% JavaScript 10.93% HTML 0.03% Dockerfile 0.57% Makefile 0.16% Go 86.17%

puzzles-with-chat's People

Contributors

bbeck avatar dependabot[bot] avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

puzzles-with-chat's Issues

Support applying answers to the state

Answers may be provided in two different ways.

  1. A clue's answer could be filled (allowing . for omitted letters).
  2. A range of cell numbers could be filled (also allowing . for omitted letters).

Add spellingbee mode to show a slot for each answer

Similar to how Words on Stream does things it could be helpful for spelling bee to have a mode where a slot for every answer is shown in alphabetical order and the answers that haven't yet been given are missing. This at least helps people to know which letter to focus on for the start of an answer when it gets down to the last few words remaining. It could also be interesting if a placeholder for each letter were present so that people would know how long the words were as well. Maybe a subsetting.

Header can become crowded

If the title or author of a puzzle is long, parts of the header can be truncated in a way that doesn't allow the prefix of the cutoff strings to be read. One potential fix for this could be to drop the author field when it overflows its div. This would still leave a really long title truncated, but visually it would look better than what we currently have.

Example from the 2020-05-20 crossword of The New York Times:
image

Implement update puzzle route

Should support selecting a date for an acrostic to solve. When the puzzle is selected it should emit a state event with the puzzle contents.

Handle really long full quote entries.

There are some puzzles that have ridiculously long fullQuote entries. These overflow the overlay that is shown after the puzzle is solved.

The 10 longest are:

05-14-2017 1105
02-18-2018 1037
12-24-2017  848
04-28-2019  675
08-18-2019  616
01-06-2019  602
03-19-2017  574
10-15-2017  567
01-07-2018  544
03-17-2019  539

Implement events route

Should support allowing a client to connect using a websocket connection that receives events corresponding to updates to the puzzle.

Implement answer routes

Should have 2 routes. One that allows a clue to be answered and one that allows a range of cell values to be specified.

Clue letters have an inconsistent width

For example on the 2020-06-07 acrostic we can see:

image

This doesn't seem to be a function of the clue text because on the same puzzle clue W also demonstrates the same issue.

Provide backup for when fullQuote field is missing.

A lot of the older acrostic puzzles don't have a fullQuote field in the JSON. When the puzzle is solved this makes the overlay look bad. In these cases we should use the quote or answerKey fields to provide the value of the quote instead. quote is preferable as it contains indicators of omitted words and is in mixed case.

Create basic page layout for acrostics

  • Acrostics entry in puzzle chooser
  • Acrostic page with navbar (settings/puzzle menus can be empty)
  • Placeholder for puzzle area
  • Placeholder for author/title area
  • Placeholder for clues area

Show full acrostic quote when the puzzle is solved

The fullQuote element of the payload contains the quote with HTML tags, and the quote field contains the author name and title as well as an abbreviated version of the quote that maps to the grid nearly exactly.

Part of the author's name and the title can be derived from first letter of each clue, but it's not clear where the author name ends and the title begins. Maybe some string processing can be done using the quote filed and substring checks to extract the author and title. Also in the quote field the author and title seem to always be at the beginning and in capital letters.

Render acrostic clues

Clues should be rendered with both the text of the clue as well as a set of boxes/underlines containing the cell number each particular letter of a clue will get put into.

Implement settings route

Should support updating a setting to its new value and emitting a settings event.

When transitioning to only allowing correct answers it should update the state removing any incorrect cell values. When the state is updated it should also emit a state event.

Handle hyphens in cells in acrostics

2001-10-07 has a cell that should be rendered with a hyphen in it and cannot be filled in. Currently this is not handled properly and the app doesn't know when the puzzle is complete.

Genius animation is failing to play when deployed to production.

I suspect it might have something to do with how the CSS is optimized by webpack.

@-webkit-keyframes banner {
    0% {
        background-image: radial-gradient(#000,transparent,transparent);
        opacity: 1%;  /* <-- should be 100% */
        -webkit-transform: scale(0);
        transform: scale(0)
    }

Implement toggle status route

Should support transition a puzzle from a selected -> solving state, solving -> paused state, and paused -> solving state.

Render acrostic grid

Like the other puzzle types the grid should be rendered using SVG. All non-black cells should contain both the cell number and clue letter that it corresponds to.

Allow an acrostic puzzle to be selected

The puzzle menu should list the available dates for all acrostic puzzles in a calendar and allow one to be selected in order to change the puzzle that's being worked on.

Support a hidden player view that includes a chat widget.

Right now the player view is hidden with no direct links to it. When rendered the player view will embed a twitch chat widget connected to the channel of the streamer. This allows players to input commands straight from the puzzles with chat page.

Disambiguate between shaded cells and cells with circles

Now that crosswords are rendered with SVG it should be possible to draw a circle in cells instead of just shading them in. There are some crosswords that have both circles and shaded cells (2016-05-09), so disambiguating and supporting both would be beneficial.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.