Bundled for Web

The build folder contains two web builds for use in browsers where the window global object exists:

  • simpleqbn.bundle.js: Contains the original State-based classes (State, Card, Deck, Expression, QualitySet)
  • reactive-simpleqbn.bundle.js: Contains the reactive architecture classes (ReactiveState, ReactiveCard, etc.)

Both builds expose their classes under the window.SimpleQBN namespace for browser usage.

Using the Original Architecture Build

For testing purposes, GitCDN.link can be used to pull the original build from GitHub like in the following example:

<html>
    <head>
        <title>SimpleQBN Testing</title>
        <script src="https://gitcdn.link/repo/videlais/simple-qbn/v1.5.0/build/simpleqbn.bundle.js"></script>
    </head>
    <body>
        <div id="log">(Draw a card!)</div>
        <button id="loadCard">Draw a random card!</button>
        <script>
            // Create a new Deck using the SimpleQBN namespace
            const d = new SimpleQBN.Deck();

            // Create 52 new cards
            for(let i = 0; i < 52; i++) {
                // Add a new card
                // (For its content convert the index to a String.)
                d.addCard( i.toString() );
            }

            // Find the (only) button element
            const button = document.querySelector('button');

            // Add an event listener to the click event
            button.addEventListener('click', function() {
                // Shuffle cards
                d.shuffle();

                // Get an array of 1 cards
                const hand = d.draw(1);

                // Find the element with the 
                const el = document.querySelector('#log');

                // Change its innerHTML
                el.innerHTML = `Card: ${hand[0].content} `;
            });
        </script>
    </body>
</html>

Using the Reactive Architecture Build

The reactive build provides automatic updates and event-driven state management. Here's the same example using reactive classes:

<html>
    <head>
        <title>SimpleQBN Reactive Testing</title>
        <script src="https://gitcdn.link/repo/videlais/simple-qbn/v1.5.0/build/reactive-simpleqbn.bundle.js"></script>
    </head>
    <body>
        <div id="log">(Draw a card!)</div>
        <button id="loadCard">Draw a random card!</button>
        <script>
            // Create a reactive state and deck
            const gameState = new SimpleQBN.ReactiveState();
            const d = new SimpleQBN.ReactiveDeck([], gameState);

            // Create 52 new cards
            for(let i = 0; i < 52; i++) {
                // Add a new card with no conditions (always available)
                // (For its content convert the index to a String.)
                const card = new SimpleQBN.ReactiveCard(i.toString(), []);
                d.addCard(card);
            }

            // Subscribe to deck changes for automatic updates
            d.subscribe((availableCards) => {
                console.log(`${availableCards.length} cards available`);
            });

            // Find the (only) button element
            const button = document.querySelector('button');

            // Add an event listener to the click event
            button.addEventListener('click', function() {
                // Shuffle cards (automatically notifies subscribers)
                d.shuffle();

                // Draw a random available card
                const drawnCard = d.draw();

                // Find the element with the 
                const el = document.querySelector('#log');

                // Change its innerHTML
                if (drawnCard) {
                    el.innerHTML = `Card: ${drawnCard.content}`;
                } else {
                    el.innerHTML = 'No cards available!';
                }
            });
        </script>
    </body>
</html>

Build Compatibility

Important: The two builds are incompatible with each other. Do not mix original State-based classes with reactive classes in the same project. Choose one architecture based on your needs:

  • Original Build: Use when you need simple, direct control and don't require automatic updates
  • Reactive Build: Use when you want automatic state synchronization and event-driven updates

results matching ""

    No results matching ""