artifact 1


game screenshot

TSQL.APP Word Scramble with Claude 3.7

Word Scramble Game in TSQL.APP

Game Overview

The Word Scramble Game is an interactive word-unscrambling challenge built entirely with TSQL.APP technology. In this game:

  1. Players are presented with scrambled SQL-related terms
  2. They have 30 seconds to correctly unscramble each word
  3. Points are awarded based on speed (remaining time × 10)
  4. Players progress through 5 rounds of increasing challenge
  5. At the end, players receive feedback based on their total score

The game features colorful emojis, SQL jokes, and responsive feedback that creates an engaging user experience. It implements a complete game loop with distinct states: start screen, gameplay rounds, result screens, time's up notifications, and a final score summary.

TSQL.APP State Management Technology in the Word Scramble Game

The Word Scramble Game implements a robust state management architecture using TSQL.APP's framework capabilities. This solution demonstrates several advanced techniques for maintaining consistent application state in a database-driven application.

JSON-Based State Persistence

The core of the state management approach leverages JSON serialization to maintain consistent state across modal interactions:

SET @JsonValues = (
    SELECT [@GameState]=@GameState, [@Score]=@Score, 
           [@RoundNumber]=@RoundNumber, [@TimeLeft]=@TimeLeft,
           [@CurrentWord]=@CurrentWord, [@ScrambledWord]=@ScrambledWord,
           [@PlayerAnswer]=@PlayerAnswer, [@IsCorrect]=@IsCorrect
    FOR JSON PATH, WITHOUT_ARRAY_WRAPPER
);

This technique:

  1. Serializes all game variables into a structured JSON object
  2. Uses SQL Server's native JSON capabilities via FOR JSON PATH
  3. Maintains atomic state updates with the WITHOUT_ARRAY_WRAPPER option

Complete State Model Pattern

Rather than storing partial state or relying on database variables, the implementation follows a "Complete State Model" pattern where:

  1. All application variables are serialized to JSON
  2. The full state is transferred between modal interactions
  3. State is synchronized at key transition points
  4. Business logic operates on synchronized state

This approach eliminates race conditions and ensures data consistency throughout the application lifecycle.

Modal Variable Synchronization

The implementation uses TSQL.APP's modal synchronization capabilities to maintain bi-directional state flow:

SET @p_name = N'@GameState';
EXEC sp_api_modal_get_value @name=@p_name, @value=@GameState OUT;

This synchronizes variables between:

  • Database (T-SQL variables)
  • Modal interface (user-visible components)
  • JSON state (persistence layer)

State Transition Management

The game implements a formal state machine with well-defined transitions:

  1. Immediate State Update Pattern After any state-changing operation, the application immediately updates the JSON state:

    -- After selecting a new word:
    SET @JsonValues = (...);
    SET @p_values = @JsonValues;
    EXEC sp_api_modal_restart @values=@p_values;
    RETURN;
    
  2. Silent State Tracking For transitions that shouldn't restart the modal (like timer updates), the state is silently updated:

    SET @p_name = N'@state';
    SET @p_value = @JsonValues;
    EXEC sp_api_modal_value @name=@p_name, @value=@p_value;
    

Strategic Modal Restart Pattern

The implementation uses the sp_api_modal_restart procedure strategically to ensure state consistency:

EXEC sp_api_modal_restart @values=@p_values;
RETURN;

This pattern:

  1. Passes complete JSON state to the modal
  2. Immediately terminates the current procedure execution
  3. Restarts the modal with fresh, consistent state
  4. Eliminates any processing that might invalidate the state

Hidden State Storage

The architecture maintains a hidden state variable (@state) that isn't displayed to users but preserves the full game context:

SET @p_name = N'@state';
EXEC sp_api_modal_get_value @name=@p_name, @value=@JsonValues OUT;

This creates a complete state snapshot that persists across user interactions, ensuring that critical game elements (like the word pair) stay synchronized.

Race Condition Prevention

By implementing atomic state transitions and complete state serialization, the application prevents race conditions where:

  • Visual elements (scrambled word displayed to user)
  • Validation data (original word used for checking)
  • Application logic (scoring, feedback)

Could become out of sync with each other.

Business Application Implications

This state management approach demonstrates how TSQL.APP can support complex interactive applications while maintaining database-level consistency. The techniques shown in this game are directly applicable to business scenarios like:

  • Multi-step approval workflows
  • Time-sensitive data entry forms
  • Interactive data analysis dashboards
  • User preference and configuration management

The pattern showcases TSQL.APP's ability to bridge the gap between database management and interactive user experiences using nothing but T-SQL code, eliminating the traditional divide between frontend and backend development.