kaggle-environments 1.16.11__tar.gz → 1.17.3__tar.gz

{kaggle-environments-1.16.11/kaggle_environments.egg-info → kaggle_environments-1.17.3}/PKG-INFO

@@ -1,6 +1,6 @@
-Metadata-Version: 2.1
+Metadata-Version: 2.4
 Name: kaggle-environments
-Version: 1.16.11
+Version: 1.17.3
 Summary: Kaggle Environments
 Home-page: https://github.com/Kaggle/kaggle-environments
 Author: Kaggle
@@ -10,6 +10,29 @@ Keywords: Kaggle
 Requires-Python: >=3.8
 Description-Content-Type: text/markdown
 License-File: LICENSE
+Requires-Dist: jsonschema>=3.0.1
+Requires-Dist: Flask>=1.1.2
+Requires-Dist: numpy>=1.19.5
+Requires-Dist: requests>=2.25.1
+Requires-Dist: pettingzoo==1.24.0
+Requires-Dist: gymnasium==0.29.0
+Requires-Dist: stable-baselines3==2.1.0
+Requires-Dist: transformers>=4.33.1
+Requires-Dist: scipy>=1.11.2
+Requires-Dist: shimmy>=1.2.1
+Requires-Dist: Chessnut>=0.4.1
+Requires-Dist: open_spiel>=1.5.0
+Dynamic: author
+Dynamic: author-email
+Dynamic: description
+Dynamic: description-content-type
+Dynamic: home-page
+Dynamic: keywords
+Dynamic: license
+Dynamic: license-file
+Dynamic: requires-dist
+Dynamic: requires-python
+Dynamic: summary
 
 # [<img src="https://kaggle.com/static/images/site-logo.png" height="50" style="margin-bottom:-15px" />](https://kaggle.com) Environments
 

{kaggle-environments-1.16.11 → kaggle_environments-1.17.3}/kaggle_environments/__init__.py

@@ -20,7 +20,7 @@ from .core import *
 from .main import http_request
 from . import errors
 
-__version__ = "1.16.11"
+__version__ = "1.17.3"
 
 __all__ = ["Agent", "environments", "errors", "evaluate", "http_request",
            "make", "register", "utils", "__version__",
@@ -31,13 +31,23 @@ __all__ = ["Agent", "environments", "errors", "evaluate", "http_request",
 for name in listdir(utils.envs_path):
     try:
         env = import_module(f".envs.{name}.{name}", __name__)
-        register(name, {
-            "agents": getattr(env, "agents", []),
-            "html_renderer": getattr(env, "html_renderer", None),
-            "interpreter": getattr(env, "interpreter"),
-            "renderer": getattr(env, "renderer"),
-            "specification": getattr(env, "specification"),
-        })
+        if name == "open_spiel":
+            for env_name, env_dict in env.registered_open_spiel_envs.items():
+                register(env_name, {
+                    "agents": env_dict.get("agents"),
+                    "html_renderer": env_dict.get("html_renderer"),
+                    "interpreter": env_dict.get("interpreter"),
+                    "renderer": env_dict.get("renderer"),
+                    "specification": env_dict.get("specification"),
+                })
+        else:
+          register(name, {
+              "agents": getattr(env, "agents", []),
+              "html_renderer": getattr(env, "html_renderer", None),
+              "interpreter": getattr(env, "interpreter"),
+              "renderer": getattr(env, "renderer"),
+              "specification": getattr(env, "specification"),
+          })
     except Exception as e:
         if "football" not in name:
             print("Loading environment %s failed: %s" % (name, e))

{kaggle-environments-1.16.11 → kaggle_environments-1.17.3}/kaggle_environments/envs/lux_ai_s3/luxai_s3/env.py

@@ -148,6 +148,11 @@ class LuxAIS3Env(environment.Environment):
                     i : max_sensor_range * 2 + 1 - i,
                     i : max_sensor_range * 2 + 1 - i,
                 ].set(val)
+            # vision of position at center of update has an extra 10
+            update = update.at[
+                max_sensor_range,
+                max_sensor_range,
+            ].add(10)
             vision_power_map = jax.lax.dynamic_update_slice(
                 vision_power_map,
                 update=update + existing_vision_power,
@@ -227,6 +232,10 @@ class LuxAIS3Env(environment.Environment):
         state = state.replace(
             units_mask=(state.units.energy[..., 0] >= 0) & state.units_mask
         )
+        
+        """spawn relic nodes based on schedule"""
+        relic_nodes_mask = (state.steps >= state.relic_spawn_schedule) & (state.relic_spawn_schedule != -1)
+        state = state.replace(relic_nodes_mask=relic_nodes_mask)
 
         """ process unit movement """
         # 0 is do nothing, 1 is move up, 2 is move right, 3 is move down, 4 is move left, 5 is sap
@@ -646,11 +655,10 @@ class LuxAIS3Env(environment.Environment):
             axis=(0, 1),
         )
         new_tile_types_map = jnp.where(
-            state.steps * params.nebula_tile_drift_speed % 1 == 0,
+            (state.steps - 1) * abs(params.nebula_tile_drift_speed) % 1 > state.steps * abs(params.nebula_tile_drift_speed) % 1,
             new_tile_types_map,
             state.map_features.tile_type,
         )
-        # new_energy_nodes = state.energy_nodes + jnp.array([1 * jnp.sign(params.energy_node_drift_speed), -1 * jnp.sign(params.energy_node_drift_speed)])
 
         energy_node_deltas = jnp.round(
             jax.random.uniform(
@@ -663,8 +671,6 @@ class LuxAIS3Env(environment.Environment):
         energy_node_deltas_symmetric = jnp.stack(
             [-energy_node_deltas[:, 1], -energy_node_deltas[:, 0]], axis=-1
         )
-        # TODO symmetric movement
-        # energy_node_deltas = jnp.round(jax.random.uniform(key=key, shape=(params.max_energy_nodes // 2, 2), minval=-params.energy_node_drift_magnitude, maxval=params.energy_node_drift_magnitude)).astype(jnp.int16)
         energy_node_deltas = jnp.concatenate(
             (energy_node_deltas, energy_node_deltas_symmetric)
         )
@@ -677,7 +683,7 @@ class LuxAIS3Env(environment.Environment):
             ),
         )
         new_energy_nodes = jnp.where(
-            state.steps * params.energy_node_drift_speed % 1 == 0,
+            (state.steps - 1) * abs(params.energy_node_drift_speed) % 1 > state.steps * abs(params.energy_node_drift_speed) % 1,
             new_energy_nodes,
             state.energy_nodes,
         )
@@ -688,7 +694,9 @@ class LuxAIS3Env(environment.Environment):
 
         # Compute relic scores
         def team_relic_score(unit_counts_map):
-            scores = (unit_counts_map > 0) & (state.relic_nodes_map_weights > 0)
+            # not all relic nodes are spawned in yet, but relic nodes map ids are precomputed for all to be spawned relic nodes
+            # for efficiency. So we check if the relic node (by id) is spawned in yet. relic nodes mask is always increasing so we can do a simple trick below
+            scores = (unit_counts_map > 0) & (state.relic_nodes_map_weights <= state.relic_nodes_mask.sum() // 2) & (state.relic_nodes_map_weights > 0)
             return jnp.sum(scores, dtype=jnp.int32)
 
         # note we need to recompue unit counts since units can get removed due to collisions
@@ -771,7 +779,6 @@ class LuxAIS3Env(environment.Environment):
         )
         state = self.compute_energy_features(state, params)
         state = self.compute_sensor_masks(state, params)
-
         return self.get_obs(state, params=params, key=key), state
 
     @functools.partial(jax.jit, static_argnums=(0,))

{kaggle-environments-1.16.11 → kaggle_environments-1.17.3}/kaggle_environments/envs/lux_ai_s3/luxai_s3/params.py

@@ -46,6 +46,7 @@ class EnvParams:
     min_energy_per_tile: int = -20
 
     max_relic_nodes: int = 6
+    """max relic nodes in the entire map. This number should be tuned carefully as relic node spawning code is hardcoded against this number 6"""
     relic_config_size: int = 5
     fog_of_war: bool = True
     """
@@ -87,15 +88,15 @@ class EnvParams:
 env_params_ranges = dict(
     # map_type=[1],
     unit_move_cost=list(range(1, 6)),
-    unit_sensor_range=list(range(2, 5)),
-    nebula_tile_vision_reduction=list(range(0, 4)),
-    nebula_tile_energy_reduction=[0, 0, 10, 25],
+    unit_sensor_range=[1, 2, 3, 4],
+    nebula_tile_vision_reduction=list(range(0, 8)),
+    nebula_tile_energy_reduction=[0, 1, 2, 3, 5, 25],
     unit_sap_cost=list(range(30, 51)),
     unit_sap_range=list(range(3, 8)),
     unit_sap_dropoff_factor=[0.25, 0.5, 1],
     unit_energy_void_factor=[0.0625, 0.125, 0.25, 0.375],
     # map randomizations
-    nebula_tile_drift_speed=[-0.05, -0.025, 0.025, 0.05],
+    nebula_tile_drift_speed=[-0.15, -0.1, -0.05, -0.025, 0.025, 0.05, 0.1, 0.15],
     energy_node_drift_speed=[0.01, 0.02, 0.03, 0.04, 0.05],
     energy_node_drift_magnitude=list(range(3, 6)),
 )

{kaggle-environments-1.16.11 → kaggle_environments-1.17.3}/kaggle_environments/envs/lux_ai_s3/luxai_s3/state.py

@@ -66,7 +66,10 @@ class EnvState:
     relic_nodes_mask: chex.Array
     """Mask of relic nodes in the environment with shape (N, ) for N max relic nodes"""
     relic_nodes_map_weights: chex.Array
-    """Map of relic nodes in the environment with shape (H, W) for H height, W width. True if a relic node is present, False otherwise. This is generated from other state"""
+    """Map of relic nodes in the environment with shape (H, W) for H height, W width. Each element is equal to the 1-indexed id of the relic node. This is generated from other state"""
+    
+    relic_spawn_schedule: chex.Array
+    """Relic spawn schedule in the environment with shape (N, ) for N max relic nodes. Elements are the game timestep at which the relic node spawns"""
 
     map_features: MapTile
     """Map features in the environment with shape (W, H, 2) for W width, H height
@@ -121,7 +124,7 @@ class EnvObs:
 
 def serialize_env_states(env_states: list[EnvState]):
     def serialize_array(root: EnvState, arr, key_path: str = ""):
-        if key_path in ["sensor_mask", "relic_nodes_mask", "energy_nodes_mask", "energy_node_fns", "relic_nodes_map_weights"]:
+        if key_path in ["sensor_mask", "relic_nodes_mask", "energy_nodes_mask", "energy_node_fns", "relic_nodes_map_weights", "relic_spawn_schedule"]:
             return None
         if key_path == "relic_nodes":
             return root.relic_nodes[root.relic_nodes_mask].tolist()
@@ -186,9 +189,10 @@ def gen_state(key: chex.PRNGKey, env_params: EnvParams, max_units: int, num_team
 
     # TODO (this could be optimized better)
     def update_relic_node(relic_nodes_map_weights, relic_data):
-        relic_node, relic_node_config, mask = relic_data
+        relic_node, relic_node_config, mask, relic_node_id = relic_data
         start_y = relic_node[1] - relic_config_size // 2
         start_x = relic_node[0] - relic_config_size // 2
+        
         for dy in range(relic_config_size):
             for dx in range(relic_config_size):
                 y, x = start_y + dy, start_x + dx
@@ -196,14 +200,20 @@ def gen_state(key: chex.PRNGKey, env_params: EnvParams, max_units: int, num_team
                     jnp.logical_and(y >= 0, x >= 0),
                     jnp.logical_and(y < map_height, x < map_width),
                 )
+                # ensure we don't override previous spawns
+                has_points = jnp.logical_and(
+                    relic_nodes_map_weights > 0,
+                    relic_nodes_map_weights <= relic_node_id + 1
+                )
                 relic_nodes_map_weights = jnp.where(
-                    valid_pos & mask,
-                    relic_nodes_map_weights.at[x, y].add(relic_node_config[dx, dy].astype(jnp.int16)),
+                    valid_pos & mask & jnp.logical_not(has_points) & relic_node_config[dx, dy],
+                    relic_nodes_map_weights.at[x, y].set(relic_node_config[dx, dy].astype(jnp.int16) * (relic_node_id + 1)),
                     relic_nodes_map_weights,
                 )
         return relic_nodes_map_weights, None
 
     # this is really slow...
+    
     relic_nodes_map_weights, _ = jax.lax.scan(
         update_relic_node,
         relic_nodes_map_weights,
@@ -211,8 +221,10 @@ def gen_state(key: chex.PRNGKey, env_params: EnvParams, max_units: int, num_team
             generated["relic_nodes"],
             generated["relic_node_configs"],
             generated["relic_nodes_mask"],
+            jnp.arange(max_relic_nodes, dtype=jnp.int16) % (max_relic_nodes // 2),
         ),
     )
+    
     state = EnvState(
         units=UnitState(position=jnp.zeros(shape=(num_teams, max_units, 2), dtype=jnp.int16), energy=jnp.zeros(shape=(num_teams, max_units, 1), dtype=jnp.int16)),
         units_mask=jnp.zeros(
@@ -225,9 +237,10 @@ def gen_state(key: chex.PRNGKey, env_params: EnvParams, max_units: int, num_team
         energy_nodes_mask=generated["energy_nodes_mask"],
         # energy_field=jnp.zeros(shape=(params.map_height, params.map_width), dtype=jnp.int16),
         relic_nodes=generated["relic_nodes"],
-        relic_nodes_mask=generated["relic_nodes_mask"],
+        relic_nodes_mask=jnp.zeros(shape=(max_relic_nodes), dtype=jnp.bool), # as relic nodes are spawn in, we start with them all invisible.
         relic_node_configs=generated["relic_node_configs"],
         relic_nodes_map_weights=relic_nodes_map_weights,
+        relic_spawn_schedule=generated["relic_spawn_schedule"],
         sensor_mask=jnp.zeros(
             shape=(num_teams, map_height, map_width),
             dtype=jnp.bool,
@@ -276,7 +289,7 @@ def gen_map(key: chex.PRNGKey, params: EnvParams, map_type: int, map_height: int
         flat_indices = jnp.argsort(noise.ravel())[-max_relic_nodes // 2:]  # Get indices of two highest values
         highest_positions = jnp.column_stack(jnp.unravel_index(flat_indices, noise.shape))
 
-        # relic nodes have a fixed density of 25% nearby tiles can yield points
+        # relic nodes have a fixed density of 20% nearby tiles can yield points
         relic_node_configs = (
             jax.random.randint(
                 key,
@@ -291,18 +304,15 @@ def gen_map(key: chex.PRNGKey, params: EnvParams, map_type: int, map_height: int
             >= 7.5
         )
         highest_positions = highest_positions.astype(jnp.int16)
-        relic_nodes_mask = relic_nodes_mask.at[0].set(True)
-        relic_nodes_mask = relic_nodes_mask.at[1].set(True)
         mirrored_positions = jnp.stack([map_width - highest_positions[:, 1] - 1, map_height - highest_positions[:, 0] - 1], dtype=jnp.int16, axis=-1)
         relic_nodes = jnp.concat([highest_positions, mirrored_positions], axis=0)
         
         key, subkey = jax.random.split(key)
-        relic_nodes_mask_half = jax.random.randint(key, (max_relic_nodes // 2, ), minval=0, maxval=2).astype(jnp.bool)
-        relic_nodes_mask_half = relic_nodes_mask_half.at[0].set(True)
-        relic_nodes_mask = relic_nodes_mask.at[:max_relic_nodes // 2].set(relic_nodes_mask_half)
-        relic_nodes_mask = relic_nodes_mask.at[max_relic_nodes // 2:].set(relic_nodes_mask_half)
-        # import ipdb;ipdb.set_trace()
+        num_spawned_relic_nodes = jax.random.randint(key, (1, ), minval=1, maxval=(max_relic_nodes // 2) + 1)
+        relic_nodes_mask_half = jnp.arange(max_relic_nodes // 2) < num_spawned_relic_nodes
+        relic_nodes_mask = jnp.concat([relic_nodes_mask_half, relic_nodes_mask_half], axis=0)
         relic_node_configs = relic_node_configs.at[max_relic_nodes // 2:].set(relic_node_configs[:max_relic_nodes // 2].transpose(0, 2, 1)[:, ::-1, ::-1])
+        # note that relic nodes mask is always increasing.
         
         ### Generate energy nodes ###
         key, subkey = jax.random.split(key)
@@ -318,7 +328,6 @@ def gen_map(key: chex.PRNGKey, params: EnvParams, map_type: int, map_height: int
         energy_nodes_mask = energy_nodes_mask.at[:max_energy_nodes // 2].set(energy_nodes_mask_half)
         energy_nodes_mask = energy_nodes_mask.at[max_energy_nodes // 2:].set(energy_nodes_mask_half)
         
-        # TODO (stao): provide more randomization options for energy node functions.
         energy_node_fns = jnp.array(
             [
                 [0, 1.2, 1, 4],
@@ -331,8 +340,14 @@ def gen_map(key: chex.PRNGKey, params: EnvParams, map_type: int, map_height: int
                 # [1, 4, 0, 0]
             ]
         )
-        # import ipdb; ipdb.set_trace()
-        # energy_node_fns = jnp.concat([energy_node_fns, jnp.zeros((params.max_energy_nodes - 2, 4), dtype=jnp.float32)], axis=0)
+        
+        # generate a random relic spawn schedule
+        # if number is -1, then relic node is never spawned, otherwise spawn at that game timestep
+        assert max_relic_nodes == 6, "random map generation is hardcoded to use 6 relic nodes at most per map"
+        key, subkey = jax.random.split(key)
+        relic_spawn_schedule_half = jax.random.randint(key, (max_relic_nodes //2, ), minval=0, maxval=params.max_steps_in_match // 2) + jnp.arange(3) * (params.max_steps_in_match + 1)
+        relic_spawn_schedule = jnp.concat([relic_spawn_schedule_half, relic_spawn_schedule_half], axis=0)
+        relic_spawn_schedule = jnp.where(relic_nodes_mask, relic_spawn_schedule, -1)
         
         
     return dict(
@@ -343,6 +358,7 @@ def gen_map(key: chex.PRNGKey, params: EnvParams, map_type: int, map_height: int
         energy_nodes_mask=energy_nodes_mask,
         relic_nodes_mask=relic_nodes_mask,
         relic_node_configs=relic_node_configs,
+        relic_spawn_schedule=relic_spawn_schedule,
     )
 def interpolant(t):
     return t*t*t*(t*(t*6 - 15) + 10)

kaggle_environments-1.17.3/kaggle_environments/envs/open_spiel/games/connect_four/connect_four.js

@@ -0,0 +1,296 @@
+function renderer(options) {
+    const { environment, step, parent, interactive, isInteractive } = options;
+
+    const DEFAULT_NUM_ROWS = 6;
+    const DEFAULT_NUM_COLS = 7;
+    const PLAYER_SYMBOLS = ['O', 'X']; // O: Player 0 (Yellow), X: Player 1 (Red)
+    const PLAYER_COLORS = ['#facc15', '#ef4444']; // Yellow for 'O', Red for 'X'
+    const EMPTY_CELL_COLOR = '#e5e7eb'; 
+    const BOARD_COLOR = '#3b82f6';      
+
+    const SVG_NS = "http://www.w3.org/2000/svg";
+    const CELL_UNIT_SIZE = 100; 
+    const CIRCLE_RADIUS = CELL_UNIT_SIZE * 0.42; 
+    const SVG_VIEWBOX_WIDTH = DEFAULT_NUM_COLS * CELL_UNIT_SIZE;
+    const SVG_VIEWBOX_HEIGHT = DEFAULT_NUM_ROWS * CELL_UNIT_SIZE;
+
+    let currentBoardSvgElement = null; 
+    let currentStatusTextElement = null;
+    let currentWinnerTextElement = null;
+    let currentMessageBoxElement = typeof document !== 'undefined' ? document.getElementById('messageBox') : null;
+    let currentRendererContainer = null;
+    let currentTitleElement = null;
+
+    function _showMessage(message, type = 'info', duration = 3000) {
+        if (typeof document === 'undefined' || !document.body) return;
+        if (!currentMessageBoxElement) {
+            currentMessageBoxElement = document.createElement('div');
+            currentMessageBoxElement.id = 'messageBox';
+            currentMessageBoxElement.style.position = 'fixed';
+            currentMessageBoxElement.style.top = '10px';
+            currentMessageBoxElement.style.left = '50%';
+            currentMessageBoxElement.style.transform = 'translateX(-50%)';
+            currentMessageBoxElement.style.padding = '0.75rem 1rem';
+            currentMessageBoxElement.style.borderRadius = '0.375rem';
+            currentMessageBoxElement.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+            currentMessageBoxElement.style.zIndex = '1000';
+            currentMessageBoxElement.style.opacity = '0';
+            currentMessageBoxElement.style.transition = 'opacity 0.3s ease-in-out, background-color 0.3s';
+            currentMessageBoxElement.style.fontSize = '0.875rem';
+            currentMessageBoxElement.style.fontFamily = "'Inter', sans-serif";
+            document.body.appendChild(currentMessageBoxElement);
+        }
+        currentMessageBoxElement.textContent = message;
+        currentMessageBoxElement.style.backgroundColor = type === 'error' ? '#ef4444' : '#10b981';
+        currentMessageBoxElement.style.color = 'white';
+        currentMessageBoxElement.style.opacity = '1';
+        setTimeout(() => { if (currentMessageBoxElement) currentMessageBoxElement.style.opacity = '0'; }, duration);
+    }
+
+    function _ensureRendererElements(parentElementToClear, rows, cols) {
+        if (!parentElementToClear) return false;
+        parentElementToClear.innerHTML = ''; 
+
+        currentRendererContainer = document.createElement('div');
+        currentRendererContainer.style.display = 'flex';
+        currentRendererContainer.style.flexDirection = 'column';
+        currentRendererContainer.style.alignItems = 'center';
+        currentRendererContainer.style.padding = '20px';
+        currentRendererContainer.style.boxSizing = 'border-box';
+        currentRendererContainer.style.width = '100%';
+        currentRendererContainer.style.height = '100%';
+        currentRendererContainer.style.fontFamily = "'Inter', sans-serif";
+
+        currentTitleElement = document.createElement('h1');
+        currentTitleElement.textContent = 'Connect Four';
+        currentTitleElement.style.fontSize = '1.875rem';
+        currentTitleElement.style.fontWeight = 'bold';
+        currentTitleElement.style.marginBottom = '1rem';
+        currentTitleElement.style.textAlign = 'center';
+        currentTitleElement.style.color = '#2563eb';
+        currentRendererContainer.appendChild(currentTitleElement);
+
+        currentBoardSvgElement = document.createElementNS(SVG_NS, "svg");
+        currentBoardSvgElement.setAttribute("viewBox", `0 0 ${SVG_VIEWBOX_WIDTH} ${SVG_VIEWBOX_HEIGHT}`);
+        currentBoardSvgElement.setAttribute("preserveAspectRatio", "xMidYMid meet");
+        currentBoardSvgElement.style.width = "auto"; 
+        currentBoardSvgElement.style.maxWidth = "500px"; 
+        currentBoardSvgElement.style.maxHeight = `calc(100vh - 200px)`; 
+        currentBoardSvgElement.style.aspectRatio = `${cols} / ${rows}`;
+        currentBoardSvgElement.style.display = "block"; 
+        currentBoardSvgElement.style.margin = "0 auto 20px auto"; 
+
+        const boardBgRect = document.createElementNS(SVG_NS, "rect");
+        boardBgRect.setAttribute("x", "0");
+        boardBgRect.setAttribute("y", "0");
+        boardBgRect.setAttribute("width", SVG_VIEWBOX_WIDTH.toString());
+        boardBgRect.setAttribute("height", SVG_VIEWBOX_HEIGHT.toString());
+        boardBgRect.setAttribute("fill", BOARD_COLOR);
+        boardBgRect.setAttribute("rx", (CELL_UNIT_SIZE * 0.1).toString()); 
+        currentBoardSvgElement.appendChild(boardBgRect);
+
+        // SVG Circles are created with (0,0) being top-left visual circle
+        for (let r_visual = 0; r_visual < rows; r_visual++) {
+            for (let c_visual = 0; c_visual < cols; c_visual++) {
+                const circle = document.createElementNS(SVG_NS, "circle");
+                const cx = c_visual * CELL_UNIT_SIZE + CELL_UNIT_SIZE / 2;
+                const cy = r_visual * CELL_UNIT_SIZE + CELL_UNIT_SIZE / 2;
+                circle.setAttribute("id", `cell-${r_visual}-${c_visual}`);
+                circle.setAttribute("cx", cx.toString());
+                circle.setAttribute("cy", cy.toString());
+                circle.setAttribute("r", CIRCLE_RADIUS.toString());
+                circle.setAttribute("fill", EMPTY_CELL_COLOR);
+                currentBoardSvgElement.appendChild(circle);
+            }
+        }
+        currentRendererContainer.appendChild(currentBoardSvgElement);
+
+        const statusContainer = document.createElement('div');
+        statusContainer.style.padding = '10px 15px';
+        statusContainer.style.backgroundColor = 'white';
+        statusContainer.style.borderRadius = '8px';
+        statusContainer.style.boxShadow = '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)';
+        statusContainer.style.textAlign = 'center';
+        statusContainer.style.width = 'auto';
+        statusContainer.style.minWidth = '200px'; 
+        statusContainer.style.maxWidth = '90vw';
+        currentRendererContainer.appendChild(statusContainer);
+
+        currentStatusTextElement = document.createElement('p');
+        currentStatusTextElement.style.fontSize = '1.1rem';
+        currentStatusTextElement.style.fontWeight = '600';
+        currentStatusTextElement.style.margin = '0 0 5px 0';
+        statusContainer.appendChild(currentStatusTextElement);
+        
+        currentWinnerTextElement = document.createElement('p');
+        currentWinnerTextElement.style.fontSize = '1.25rem';
+        currentWinnerTextElement.style.fontWeight = '700';
+        currentWinnerTextElement.style.margin = '5px 0 0 0';
+        statusContainer.appendChild(currentWinnerTextElement);
+        
+        parentElementToClear.appendChild(currentRendererContainer);
+        
+        if (typeof document !== 'undefined' && !document.body.hasAttribute('data-renderer-initialized')) {
+             document.body.setAttribute('data-renderer-initialized', 'true');
+        }
+        return true;
+    }
+
+    function _renderBoardDisplay_svg(gameStateToDisplay, displayRows, displayCols) {
+        if (!currentBoardSvgElement || !currentStatusTextElement || !currentWinnerTextElement) return;
+
+        if (!gameStateToDisplay || typeof gameStateToDisplay.board !== 'object' || !Array.isArray(gameStateToDisplay.board) || gameStateToDisplay.board.length === 0) {
+            currentStatusTextElement.textContent = "Waiting for game data...";
+            currentWinnerTextElement.textContent = "";
+            for (let r_visual = 0; r_visual < displayRows; r_visual++) {
+                for (let c_visual = 0; c_visual < displayCols; c_visual++) {
+                    const circleElement = currentBoardSvgElement.querySelector(`#cell-${r_visual}-${c_visual}`);
+                    if (circleElement) {
+                        circleElement.setAttribute("fill", EMPTY_CELL_COLOR);
+                    }
+                }
+            }
+            return;
+        }
+
+        const { board, current_player, is_terminal, winner } = gameStateToDisplay;
+
+        for (let r_data = 0; r_data < displayRows; r_data++) {
+            const dataRow = board[r_data]; 
+            if (!dataRow || !Array.isArray(dataRow) || dataRow.length !== displayCols) {
+                // Error handling for malformed row
+                for (let c_fill = 0; c_fill < displayCols; c_fill++) {
+                    // Determine visual row for error display. If r_data=0 is top data,
+                    // and we want to flip, then this error is for visual row (displayRows-1)-0.
+                    const visual_row_for_error = (displayRows - 1) - r_data;
+                    const circleElement = currentBoardSvgElement.querySelector(`#cell-${visual_row_for_error}-${c_fill}`);
+                    if (circleElement) circleElement.setAttribute("fill", '#FF00FF'); // Magenta for error
+                }
+                continue;
+            }
+
+            const visual_svg_row_index = (displayRows - 1) - r_data;
+
+            for (let c_data = 0; c_data < displayCols; c_data++) { // c_data iterates through columns of `board[r_data]`
+                const originalCellValue = dataRow[c_data];
+                const cellValueForComparison = String(originalCellValue).trim().toLowerCase();
+                
+                // The column index for SVG is the same as c_data
+                const visual_svg_col_index = c_data;
+                const circleElement = currentBoardSvgElement.querySelector(`#cell-${visual_svg_row_index}-${visual_svg_col_index}`);
+                
+                if (!circleElement) continue;
+                
+                let fillColor = EMPTY_CELL_COLOR;
+                if (cellValueForComparison === "o") { 
+                    fillColor = PLAYER_COLORS[0]; // Yellow
+                } else if (cellValueForComparison === "x") { 
+                    fillColor = PLAYER_COLORS[1]; // Red
+                }
+                circleElement.setAttribute("fill", fillColor);
+            }
+        }
+
+        currentStatusTextElement.innerHTML = '';
+        currentWinnerTextElement.innerHTML = '';
+        if (is_terminal) {
+            currentStatusTextElement.textContent = "Game Over!";
+            if (winner !== null && winner !== undefined) {
+                if (String(winner).toLowerCase() === 'draw') {
+                    currentWinnerTextElement.textContent = "It's a Draw!";
+                } else {
+                    let winnerSymbolDisplay, winnerColorDisplay;
+                    if (String(winner).toLowerCase() === "o") {
+                        winnerSymbolDisplay = PLAYER_SYMBOLS[0]; 
+                        winnerColorDisplay = PLAYER_COLORS[0];   
+                    } else if (String(winner).toLowerCase() === "x") {
+                        winnerSymbolDisplay = PLAYER_SYMBOLS[1]; 
+                        winnerColorDisplay = PLAYER_COLORS[1];   
+                    }
+                    if (winnerSymbolDisplay) {
+                         currentWinnerTextElement.innerHTML = `Player <span style="color: ${winnerColorDisplay}; font-weight: bold;">${winnerSymbolDisplay}</span> Wins!`;
+                    } else {
+                        currentWinnerTextElement.textContent = `Winner: ${String(winner).toUpperCase()}`; 
+                    }
+                }
+            } else { currentWinnerTextElement.textContent = "Game ended."; }
+        } else { 
+            let playerSymbolToDisplay, playerColorToDisplay;
+            if (String(current_player).toLowerCase() === "o") {
+                playerSymbolToDisplay = PLAYER_SYMBOLS[0]; 
+                playerColorToDisplay = PLAYER_COLORS[0];   
+            } else if (String(current_player).toLowerCase() === "x") {
+                playerSymbolToDisplay = PLAYER_SYMBOLS[1]; 
+                playerColorToDisplay = PLAYER_COLORS[1];   
+            }
+            if (playerSymbolToDisplay) {
+                currentStatusTextElement.innerHTML = `Current Player: <span style="color: ${playerColorToDisplay}; font-weight: bold;">${playerSymbolToDisplay}</span>`;
+            } else {
+                currentStatusTextElement.textContent = "Waiting for player...";
+            }
+        }
+    }
+
+    // --- Main execution logic ---
+    if (!_ensureRendererElements(parent, DEFAULT_NUM_ROWS, DEFAULT_NUM_COLS)) {
+        if (parent && typeof parent.innerHTML !== 'undefined') {
+            parent.innerHTML = "<p style='color:red; font-family: sans-serif;'>Critical Error: Renderer element setup failed.</p>";
+        }
+        return;
+    }
+    
+    if (!environment || !environment.steps || !environment.steps[step]) {
+        _renderBoardDisplay_svg(null, DEFAULT_NUM_ROWS, DEFAULT_NUM_COLS); 
+        if(currentStatusTextElement) currentStatusTextElement.textContent = "Initializing environment...";
+        return;
+    }
+
+    const currentStepAgents = environment.steps[step];
+    if (!currentStepAgents || !Array.isArray(currentStepAgents) || currentStepAgents.length === 0) {
+        _renderBoardDisplay_svg(null, DEFAULT_NUM_ROWS, DEFAULT_NUM_COLS);
+        if(currentStatusTextElement) currentStatusTextElement.textContent = "Waiting for agent data...";
+        return;
+    }
+    
+    const gameMasterAgentIndex = currentStepAgents.length - 1;
+    const gameMasterAgent = currentStepAgents[gameMasterAgentIndex];
+
+    if (!gameMasterAgent || typeof gameMasterAgent.observation === 'undefined') {
+        _renderBoardDisplay_svg(null, DEFAULT_NUM_ROWS, DEFAULT_NUM_COLS);
+        if(currentStatusTextElement) currentStatusTextElement.textContent = "Waiting for observation data...";
+        return;
+    }
+    const observationForRenderer = gameMasterAgent.observation;
+
+    let gameSpecificState = null;
+
+    if (observationForRenderer && typeof observationForRenderer.observation_string === 'string' && observationForRenderer.observation_string.trim() !== '') {
+        try {
+            gameSpecificState = JSON.parse(observationForRenderer.observation_string);
+        } catch (e) {
+            _showMessage("Error: Corrupted game state (obs_string).", 'error');
+        }
+    }
+    
+    if (!gameSpecificState && observationForRenderer && typeof observationForRenderer.json === 'string' && observationForRenderer.json.trim() !== '') {
+        try {
+            gameSpecificState = JSON.parse(observationForRenderer.json);
+        } catch (e) {
+            _showMessage("Error: Corrupted game state (json).", 'error');
+        }
+    }
+    
+    if (!gameSpecificState && observationForRenderer && 
+        Array.isArray(observationForRenderer.board) && 
+        typeof observationForRenderer.current_player !== 'undefined'
+       ) {
+        if( (observationForRenderer.board.length === DEFAULT_NUM_ROWS &&
+             (observationForRenderer.board.length === 0 || 
+              (Array.isArray(observationForRenderer.board[0]) && observationForRenderer.board[0].length === DEFAULT_NUM_COLS)))
+          ){
+            gameSpecificState = observationForRenderer;
+        }
+    }
+    
+    _renderBoardDisplay_svg(gameSpecificState, DEFAULT_NUM_ROWS, DEFAULT_NUM_COLS);
+}