design.md

Table of contents

• Diagrams

  1. Flow diagram
  2. Sequence diagram

• Mockups

• Future ideas

Diagrams

Flow diagram

Main flow of the page per each day word:

  flowchart LR
  A(Start) --> B{Attempts is 0?}
  B ------> |Yes| E(Defeat)
  B --> |No| D[Try a word]
  D --> F{Same length as answer?}
  F --> |Yes| H{Is the answer?}
  H ----> |yes| I(Win)
  H --> |No| J[Give feedback]
  J --> |Attempts--|B
  F --> |No| G[Invalid word]
  G --> D

Loading

Sequence diagram

Main sequence of the page, including layers interaction (browser, endpoints, db):

sequenceDiagram

    Client->> LVServer: Get / 

    loop Schedule every day
        LVServer->> Words: get_todays_word/0
        activate Words
        Words-->> LVServer: {ok, %{word, clue, description}}
        deactivate Words
    end

    LVServer -->> Client: /

    loop Attempts > 0  
        Client->> LVServer: Submit guess  
        LVServer ->> Wordle: feedback(guess, word)
        activate Wordle
        Wordle -->> LVServer: feedback
        deactivate Wordle
        LVServer -->> Client: Guess feedback  
    end

Loading

Mockups

For the MVP feature like setting the language, color-blind model, keyboard feedback, only valid words and dark theme, are not necessary.

Frontend Screenshots (responsive)

Table displaying wallaby screenshots with 640px width:

To examine additional widths, please refer to the screenshots folder.

Wallaby is used for end-to-end testing and for taking these screenshots (with Chrome drivers).

To produce the screenshots and evaluate client-server cross-functional behaviors comprehensively:

mix test --only wallaby

Future ideas

Take into account ...

• Words considered valid are extracted using regex from a specific version of the Elixir repository, specified in the .env file.