Welcome back! So far, you’ve learned how to score word guesses using semantic similarity and set up a leaderboard. Now, it’s time to connect all these features together so your game can interact with players through the web.
In this lesson, you’ll learn how to create the main routes (or endpoints) in Flask that allow your frontend to communicate with your backend. These routes will let players get the daily prompt, submit their guesses, and see the leaderboard. By the end of this lesson, you’ll understand how each route works and how they power your word prediction game.
Before we dive in, let’s quickly remind ourselves about Flask blueprints and how they help organize your project.
A blueprint in Flask is a way to organize your routes and related code into reusable components. In our project, we use a blueprint to keep all the game-related routes together. This makes the code easier to manage, especially as your app grows.
For example, in your project, you might see something like this:
This creates a blueprint called routes
. All the routes for your game will be registered under this blueprint, keeping things tidy and modular.
Let’s start by creating the route that sends the daily game data to the frontend. This is the /game
route.
First, we define a new route using our blueprint. We want this route to respond to GET requests.
Here, @routes.route("/game", methods=["GET"])
tells Flask to call the game_data
function whenever someone visits /game
with a GET request.
Inside the function, we need to get today’s prompt. This is usually a dictionary with the system prompt, user question, and the LLM model to use.
The get_daily_prompt()
function (defined elsewhere in your project) returns the prompt for today’s game.
Next, we want to get the list of words that the LLM (Large Language Model) would generate in response to the prompt.
Here, get_llm_response_words
takes the system prompt, user question, and model name, and returns a list of words generated by the LLM.
Finally, we return all this information as a JSON response. This allows the frontend to use the data to build the game interface.
jsonify
converts the Python dictionary into a JSON response.- The response includes the prompt, the list of words, and any breakpoints (special markers for the game).
Example Output:
This output gives the frontend everything it needs to display the game for today.
Now, let’s create the route that lets players submit their guesses and get a score.
We want this route to accept POST requests, since the player is sending data to the server.
Inside the function, we get the data sent by the player. This is usually in JSON format.
request.json
gets the JSON data sent in the request.- We extract the player’s guess and the correct word.
Now, we use the score_guess
function to compare the guess to the correct word and calculate a similarity score.
This function returns a score (for example, between 0 and 100) based on how close the guess is to the correct answer.
Finally, we return the score as a JSON response.
Example Request:
Example Response:
This allows the frontend to show the player how close their guess was.
Let’s finish by looking at how players submit their total score and how the leaderboard is displayed.
Players send their name and score to the server using the /submit_score
route.
- The function checks that both
name
andscore
are provided. - If either is missing, it returns an error.
- Otherwise, it saves the score using the
submit_score
function and returns a success message.
Example Request:
Example Response:
The /leaderboard
route lets anyone see the top scores for today.
- This function calls
get_leaderboard()
to get the list of top scores. - It returns the scores as a JSON response.
Example Output:
This allows the frontend to display the current leaderboard to all players.
In this lesson, you learned how to create the main routes that connect your Flask backend to the game’s frontend. You saw how to:
- Send the daily prompt and LLM-generated words to the frontend with
/game
- Receive and score player guesses with
/submit_guess
- Submit player scores and display the leaderboard with
/submit_score
and/leaderboard
These routes are the backbone of your word prediction game, allowing players to interact with your app in real time. Up next, you’ll get hands-on practice building and testing these routes yourself. This will help you solidify your understanding and prepare you to add even more features to your game. Good luck!
