PyPI - kaggle-environments - Versions diffs - 0.2.1__py3-none-any.whl → 1.20.0__py3-none-any.whl - Mend - Supply Chain Defender

kaggle-environments 0.2.1py3-none-any.whl → 1.20.0py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of kaggle-environments might be problematic. Click here for more details.

Files changed (215) hide show

kaggle_environments/static/player.html CHANGED Viewed

@@ -13,7 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>Kaggle Simulation Player</title>
@@ -28,6 +28,7 @@
       body {
         height: 100%;
         font-family: sans-serif;
+        margin: 0px;
       }
       canvas {
         /* image-rendering: -moz-crisp-edges;
@@ -39,6 +40,7 @@
     <script src="https://unpkg.com/preact@10.0.1/dist/preact.umd.js"></script>
     <script src="https://unpkg.com/preact@10.0.1/hooks/dist/hooks.umd.js"></script>
     <script src="https://unpkg.com/htm@2.2.1/dist/htm.umd.js"></script>
+    <script src="https://unpkg.com/chess.js@0.12.0/chess.js"></script>
     <script>
       // Polyfill for Styled Components
       window.React = {
@@ -94,7 +96,7 @@
             </g>
           </svg>
         </a>
-      `
+      `,
       )`
         display: inline-flex;
       `;
@@ -104,6 +106,7 @@
         return h`<div className=${props.className} >
           <${Logo} />
+          <span><b>Left / Right Arrow:</b> Increase / Decrease Step</span><span><b>0-9 Row Keys:</b> Playback Speed</span><span><b>Space:</b> Pause / Play</span>
           ${environment.title}
         </div>`;
       })`
@@ -121,44 +124,84 @@
       const Renderer = styled((props) => {
         const context = useContext(Context);
-        const { animate, debug, playing, renderer, speed } = context;
-        const ref = preact.createRef();
+        const { animate, debug, playing, renderer, speed, step } = context;
-        useEffect(async () => {
-          if (!ref.current) return;
+        const ref = useRef(null);
+        const animationFrameId = useRef();
-          const renderFrame = async (start, step, lastFrame) => {
-            if (step !== context.step) return;
-            if (lastFrame === 1) {
-              if (!animate) return;
+        useEffect(() => {
+          const element = ref.current;
+          if (!element) return;
+          // A single function to render a static frame (for resizes and step changes)
+          const renderStaticFrame = async () => {
+            if (!ref.current) return;
+            try {
+              // Pass a frame of 1 to indicate a final/static state
+              await renderer({
+                ...context,
+                frame: 1,
+                height: ref.current.clientHeight,
+                width: ref.current.clientWidth,
+                hooks: preactHooks,
+                parent: ref.current,
+                preact,
+                styled,
+              });
+            } catch (error) {
+              if (debug) console.error("Static render failed:", error);
+            }
+          };
+          // --- Resize Handling ---
+          const observer = new ResizeObserver(() => {
+            renderStaticFrame();
+          });
+          observer.observe(element);
+          // --- Animation Loop ---
+          let start = Date.now();
+          const renderAnimation = async () => {
+            // Stop the loop if the component unmounts or if animate is turned off
+            if (!ref.current || !animate) return;
+            const frame = Math.min((Date.now() - start) / speed, 1);
+            if (frame === 1) {
               start = Date.now();
             }
-            const frame =
-              playing || animate
-                ? Math.min((Date.now() - start) / speed, 1)
-                : 1;
             try {
-              if (debug) console.time("render");
               await renderer({
                 ...context,
                 frame,
                 height: ref.current.clientHeight,
+                width: ref.current.clientWidth,
                 hooks: preactHooks,
                 parent: ref.current,
                 preact,
                 styled,
-                width: ref.current.clientWidth,
               });
             } catch (error) {
-              if (debug) console.error(error);
-              console.log({ ...context, frame, error });
-            } finally {
-              if (debug) console.timeEnd("render");
+              if (debug) console.error("Animation render failed:", error);
             }
-            window.requestAnimationFrame(() => renderFrame(start, step, frame));
+            animationFrameId.current = requestAnimationFrame(renderAnimation);
           };
-          await renderFrame(Date.now(), context.step);
+          // --- Initial Action ---
+          if (animate) {
+            // If animate is on, start the animation loop
+            renderAnimation();
+          } else {
+            // Otherwise, just render a single static frame for the current step
+            renderStaticFrame();
+          }
+          // --- Cleanup ---
+          return () => {
+            observer.disconnect();
+            cancelAnimationFrame(animationFrameId.current);
+          };
         }, [ref.current, context.step, context.renderer]);
         return h`<div className=${props.className} ref=${ref} />`;
@@ -196,12 +239,7 @@
           ${processing && h`<${Processing} />`}
         </div>`;
       })`
-        background-color: #000b2a;
-        background-image: radial-gradient(
-          circle closest-side,
-          #000b49,
-          #000b2a
-        );
+        background-color: #1c1d20;
         display: flex;
         flex: 1;
         overflow: hidden;
@@ -209,27 +247,46 @@
         width: 100%;
       `;
+      // Partitions the elements of arr into subarrays of max length num.
+      const groupIntoSets = (arr, num) => {
+        const sets = [];
+        arr.forEach((a) => {
+          if (sets.length === 0 || sets[sets.length - 1].length === num) {
+            sets.push([]);
+          }
+          sets[sets.length - 1].push(a);
+        });
+        return sets;
+      };
+      // Expects `width` input prop to set proper max-width for agent name span.
       const Legend = styled((props) => {
         const { agents, legend } = useContext(Context);
+        const agentPairs = groupIntoSets(
+          agents.sort((a, b) => a.index - b.index),
+          2,
+        );
         return h`<div className=${props.className}>
-          <ul>
-            ${agents
-              .sort((a, b) => a.index - b.index)
-              .map(
-                (a) =>
-                  h`<li key=${a.id} title="id: ${a.id}" style="color:${
-                    a.color || "#FFF"
-                  }">${a.image && h`<img src=${a.image} />`}<span>${
-                    a.name
-                  }</span></li>`
-              )}
-          </ul>
+          ${agentPairs.map(
+            (agentList) =>
+              h`<ul>
+                ${agentList.map(
+                  (a) =>
+                    h`<li key=${a.id} title="id: ${a.id}" style="color:${a.color || "#FFF"}">
+                      ${a.image && h`<img src=${a.image} />`}
+                      <span>${a.name}</span>
+                    </li>`,
+                )}
+              </ul>`,
+          )}
         </div>`;
       })`
-        background-color: #000b2a;
+        background-color: #1c1d20;
         font-family: sans-serif;
         font-size: 14px;
+        height: 48px;
         width: 100%;
         ul {
@@ -242,12 +299,11 @@
         li {
           align-items: center;
           display: inline-flex;
-          padding: 8px;
           transition: color 1s;
         }
         span {
-          max-width: 100px;
+          max-width: ${(p) => (p.width || 400) * 0.5 - 36}px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -255,6 +311,7 @@
         img {
           height: 24px;
+          margin-left: 4px;
           margin-right: 4px;
           width: 24px;
         }
@@ -332,9 +389,8 @@
       `;
       const Controls = styled((props) => {
-        const { environment, pause, play, playing, setStep, step } = useContext(
-          Context
-        );
+        const { environment, pause, play, playing, setStep, step } =
+          useContext(Context);
         const value = step + 1;
         const onClick = () => (playing ? pause() : play());
         const onInput = (e) => {
@@ -345,13 +401,11 @@
         return h`
           <div className=${props.className}>
             <${PlayButton} onClick=${onClick}><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">${
-          playing
-            ? h`<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/>`
-            : h`<path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/>`
-        }</svg><//>
-            <${StepInput} min="1" max=${
-          environment.steps.length
-        } value="${value}" onInput=${onInput} />
+              playing
+                ? h`<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/>`
+                : h`<path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/>`
+            }</svg><//>
+            <${StepInput} min="1" max=${environment.steps.length} value="${value}" onInput=${onInput} />
             <${StepCount}>${value} / ${environment.steps.length}<//>
           </div>
         `;
@@ -390,9 +444,8 @@
       `;
       const Settings = styled((props) => {
-        const { environment, pause, play, playing, setStep, step } = useContext(
-          Context
-        );
+        const { environment, pause, play, playing, setStep, step } =
+          useContext(Context);
         return h`
           <div className=${props.className}>
@@ -413,20 +466,20 @@
       const Player = styled((props) => {
         const context = useContext(Context);
-        const { agents, controls, header, legend, loading, settings } = context;
+        const { agents, controls, header, legend, loading, settings, width } =
+          context;
         return h`
           <div className=${props.className}>
             ${loading && h`<${Loading} />`}
             ${!loading && header && h`<${Header} />`}
             ${!loading && h`<${Viewer} />`}
-            ${!loading && agents.length > 0 && legend && h`<${Legend} />`}
+            ${!loading && legend && agents?.length > 0 && h`<${Legend} width=${width}/>`}
             ${!loading && controls && h`<${Controls} />`}
             ${!loading && settings && h`<${Settings} />`}
           </div>`;
       })`
         align-items: center;
         background: #212121;
-        border: 4px solid #212121;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
@@ -434,20 +487,37 @@
         justify-content: center;
         position: relative;
         width: 100%;
+        &:not(.no-border) {
+          border: 4px solid #212121;
+        }
       `;
       const App = () => {
         const renderCountRef = useRef(0);
         const [_, setRenderCount] = useState(0);
+        // These are bindings to the 0-9 keys and are milliseconds of timeout per step
+        const speeds = [
+          0,
+          3000,
+          1000,
+          500,
+          333, // Default
+          200,
+          100,
+          50,
+          25,
+          10,
+        ];
         const contextRef = useRef({
           animate: false,
           agents: [],
-          autoplay: false,
           controls: false,
           debug: false,
-          environment: { steps: [] },
+          environment: { steps: [], info: {} },
           header: window.innerHeight >= 600,
+          height: window.innerHeight,
           interactive: false,
           legend: true,
           loading: false,
@@ -455,8 +525,9 @@
           processing: false,
           renderer: () => "DNE",
           settings: false,
-          speed: 500,
+          speed: speeds[4],
           step: 0,
+          width: window.innerWidth,
         });
         // Context helpers.
@@ -505,9 +576,6 @@
             environment: { ...context.environment, ...(o.environment || {}) },
           });
           rerender();
-          // If autoplay, toggle to playing.
-          if (context.autoplay) play();
         };
         // First time setup.
@@ -516,6 +584,11 @@
           setTimeout(() => {
             // Initialize context with window.kaggle.
             updateContext(window.kaggle || {});
+            if (window.kaggle?.playing) {
+              play(true);
+            }
             // Listen for messages received to update the context.
             window.addEventListener(
               "message",
@@ -523,14 +596,66 @@
                 // Ensure the environment names match before updating.
                 try {
                   if (
-                    event.data.environment.name ==
-                    contextRef.current.environment.name
+                    event.data.environment?.name ==
+                      contextRef.current.environment.name ||
+                    (event.data.environment?.name &&
+                      !contextRef.current.environment.name) ||
+                    event.data.environment?.loading !==
+                      contextRef.current.environment.loading
+                  ) {
+                    const nextContext = {
+                      ...event.data,
+                      environment: {
+                        ...event.data.environment,
+                        steps: event.data.environment?.steps ?? [],
+                      },
+                    };
+                    if (
+                      !nextContext.renderer ||
+                      typeof nextContext.renderer !== "function"
+                    ) {
+                      nextContext.renderer = contextRef.current.renderer;
+                    }
+                    window.kaggle = nextContext;
+                    updateContext(nextContext);
+                  }
+                  if (event.data.setSteps) {
+                    const nextContext = {
+                      ...(window.kaggle ?? {}),
+                      environment: {
+                        ...(window.kaggle?.environment ?? {}),
+                        steps: event.data.setSteps,
+                      },
+                    };
+                    if (
+                      !nextContext.renderer ||
+                      typeof nextContext.renderer !== "function"
+                    ) {
+                      nextContext.renderer = contextRef.current.renderer;
+                    }
+                    window.kaggle = nextContext;
+                    updateContext(nextContext);
+                  }
+                  // Side load the renderer script if it is specified by the post message event and not already loaded.
+                  const renderScriptId = "rendererScript";
+                  if (
+                    event.data.environment?.rendererUrl &&
+                    !document.querySelector(`#${renderScriptId}`)
                   ) {
-                    updateContext(event.data);
+                    window.rendererUrl = event.data.environment?.rendererUrl;
+                    const script = document.createElement("script");
+                    script.id = renderScriptId;
+                    script.onload = () => {
+                      window.kaggle.renderer = window.renderer;
+                    };
+                    script.src = window.rendererUrl;
+                    document.body.appendChild(script);
                   }
                 } catch {}
               },
-              false
+              false,
             );
             // Listen for keyboard commands.
             window.addEventListener(
@@ -544,28 +669,35 @@
                   environment,
                 } = contextRef.current;
                 const key = event.keyCode;
+                const zero_key = 48;
+                const nine_key = 57;
                 if (
                   interactive ||
                   isInteractive() ||
-                  (key !== 32 && key !== 37 && key !== 39)
+                  (key !== 32 &&
+                    key !== 37 &&
+                    key !== 39 &&
+                    !(key >= zero_key && key <= nine_key))
                 )
                   return;
                 if (key === 32) {
                   playing ? pause() : play();
-                } else if (event.keyCode === 39) {
+                } else if (key === 39) {
                   contextRef.current.playing = false;
                   if (step < environment.steps.length - 1) setStep(step + 1);
                   rerender();
-                } else if (event.keyCode === 37) {
+                } else if (key === 37) {
                   contextRef.current.playing = false;
                   if (step > 0) setStep(step - 1);
                   rerender();
+                } else if (key >= zero_key && key <= nine_key) {
+                  contextRef.current.speed = speeds[key - zero_key];
                 }
                 event.preventDefault();
                 return false;
               },
-              false
+              false,
             );
           }, 1);
         }, []);
@@ -637,7 +769,7 @@
         return h`
           <${Context.Provider} value=${contextRef.current}>
-            <${Player} />
+            <${Player} className="${contextRef.current.environment.viewer ? "no-border" : ""}" />
           <//>`;
       };