Introduction: Connecting the Game with Routes

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.

Recall: Flask Blueprints and Project Structure

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.

Building the /game Route

Let’s start by creating the route that sends the daily game data to the frontend. This is the /game route.

Step 1: Defining the 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.

Step 2: Getting the Daily Prompt

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.

Step 3: Getting the LLM Response Words

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.

Step 4: Returning the Data

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.

Handling Player Guesses with /submit_guess

Now, let’s create the route that lets players submit their guesses and get a score.

Step 1: Defining the Route

We want this route to accept POST requests, since the player is sending data to the server.

Step 2: Receiving the Guess

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.
Step 3: Scoring the Guess

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.

Step 4: Returning the Score

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.

Submitting and Retrieving Scores: /submit_score and /leaderboard

Let’s finish by looking at how players submit their total score and how the leaderboard is displayed.

Step 1: Submitting the Score

Players send their name and score to the server using the /submit_score route.

  • The function checks that both name and score 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:

Step 2: Getting the Leaderboard

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.

Summary and What’s Next

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!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal