<commit_before>import React from "react";
import { autorun, observable, createTransformer, extendObservable } from "mobx";
import { Observer } from "mobx-react";
import KeyMap from "./KeyMap";
import State from "./State";
import LevelView from "./LevelView";

import { createMenuStore } from "../stores";

class DirectionMapper extends React.Component {
  static defaultProps = {
    onResize: o => o
  };

  saveMe = c => this.me = c;

  calculateMap = () => {
    if (this.calculating) {
      return;
    }

    this.calculating = true;

    requestAnimationFrame(() => {
      const firstKid = this.me.children[0];
      const xUnit = firstKid.offsetWidth;
      const yUnit = firstKid.offsetHeight;
      const xOrigin = firstKid.offsetLeft;
      const yOrigin = firstKid.offsetTop;

      //console.log(this.props.children);

      let positions = [];
      const kids = this.me.children;
      for (let i in kids) {
        i = Number(i);
        const kid = kids[i];

        if (!kid) {
          continue;
        }

        positions.push({
          x: (kid.offsetLeft - xOrigin) / xUnit,
          y: (kid.offsetTop - yOrigin) / yUnit,
          key: this.props.children[i].key
        });
      }
      this.props.onResize(positions);
      console.log(JSON.stringify(positions));
      this.calculating = false;
    });
  };

  componentDidMount() {
    this.calculateMap();
    this.listener = window.addEventListener("resize", this.calculateMap);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.calculateMap);
  }

  render() {
    const { children, onResize, ...other } = this.props;
    return (
      <div ref={this.saveMe} {...other}>
        {children}
      </div>
    );
  }
}

const LevelMenuItem = ({ level = [], highlighted, onSelect = o => o }) => (
  <div
    onClick={onSelect}
    style={{
      width: 200,
      height: 200,
      background: highlighted && "pink"
    }}
  >
    <LevelView entities={level} scale={20} />
  </div>
);

const LevelMenu = (
  { levelRecords = [], highlightedLevelId, bindSelect = o => o }
) => (
  <State
    init={me => {
      me.state = { positions: [] };
      me.handleResize = ps => me.setState({ positions: ps });
    }}
  >
    {me => (
      <div>
        Menu {levelRecords.length}

        <KeyMap
          keyMap={{
            ArrowLeft: console.log,
            ArrowDown: console.log,
            ArrowUp: console.log,
            ArrowRight() {
              if (highlightedLevelId === -1) {
                bindSelect(levelRecords[0].id)();
              } else {
                const { positions } = me.state;
                const highlightedPos = positions.find(
                  p => console.log(p.key) || p.key == highlightedLevelId
                );
                const rightPos = positions.find(
                  p => p.y === highlightedPos.y && p.x === highlightedPos.x + 1
                );
                bindSelect(rightPos.key)();
              }
            },
            e: console.log,
            s: console.log,
            d: console.log,
            f: console.log,
            u: console.log,
            " ": console.log,
            Escape: console.log
          }}
        />

        <DirectionMapper
          style={{ display: "flex", flexWrap: "wrap" }}
          onResize={me.handleResize}
        >
          {levelRecords.map(rec => (
            <LevelMenuItem
              key={rec.id}
              level={rec.level}
              highlighted={rec.id == highlightedLevelId}
              onSelect={bindSelect(rec.id)}
            /><commit_msg>chore: remove log<commit_after>import React from "react";
import { autorun, observable, createTransformer, extendObservable } from "mobx";
import { Observer } from "mobx-react";
import KeyMap from "./KeyMap";
import State from "./State";
import LevelView from "./LevelView";

import { createMenuStore } from "../stores";

class DirectionMapper extends React.Component {
  static defaultProps = {
    onResize: o => o
  };

  saveMe = c => this.me = c;

  calculateMap = () => {
    if (this.calculating) {
      return;
    }

    this.calculating = true;

    requestAnimationFrame(() => {
      const firstKid = this.me.children[0];
      const xUnit = firstKid.offsetWidth;
      const yUnit = firstKid.offsetHeight;
      const xOrigin = firstKid.offsetLeft;
      const yOrigin = firstKid.offsetTop;

      //console.log(this.props.children);

      let positions = [];
      const kids = this.me.children;
      for (let i in kids) {
        i = Number(i);
        const kid = kids[i];

        if (!kid) {
          continue;
        }

        positions.push({
          x: (kid.offsetLeft - xOrigin) / xUnit,
          y: (kid.offsetTop - yOrigin) / yUnit,
          key: this.props.children[i].key
        });
      }
      this.props.onResize(positions);
      console.log(JSON.stringify(positions));
      this.calculating = false;
    });
  };

  componentDidMount() {
    this.calculateMap();
    this.listener = window.addEventListener("resize", this.calculateMap);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.calculateMap);
  }

  render() {
    const { children, onResize, ...other } = this.props;
    return (
      <div ref={this.saveMe} {...other}>
        {children}
      </div>
    );
  }
}

const LevelMenuItem = ({ level = [], highlighted, onSelect = o => o }) => (
  <div
    onClick={onSelect}
    style={{
      width: 200,
      height: 200,
      background: highlighted && "pink"
    }}
  >
    <LevelView entities={level} scale={20} />
  </div>
);

const LevelMenu = (
  { levelRecords = [], highlightedLevelId, bindSelect = o => o }
) => (
  <State
    init={me => {
      me.state = { positions: [] };
      me.handleResize = ps => me.setState({ positions: ps });
    }}
  >
    {me => (
      <div>
        Menu {levelRecords.length}

        <KeyMap
          keyMap={{
            ArrowLeft: console.log,
            ArrowDown: console.log,
            ArrowUp: console.log,
            ArrowRight() {
              if (highlightedLevelId === -1) {
                bindSelect(levelRecords[0].id)();
              } else {
                const { positions } = me.state;
                const highlightedPos = positions.find(
                  p => p.key == highlightedLevelId
                );
                const rightPos = positions.find(
                  p => p.y === highlightedPos.y && p.x === highlightedPos.x + 1
                );
                bindSelect(rightPos.key)();
              }
            },
            e: console.log,
            s: console.log,
            d: console.log,
            f: console.log,
            u: console.log,
            " ": console.log,
            Escape: console.log
          }}
        />

        <DirectionMapper
          style={{ display: "flex", flexWrap: "wrap" }}
          onResize={me.handleResize}
        >
          {levelRecords.map(rec => (
            <LevelMenuItem
              key={rec.id}
              level={rec.level}
              highlighted={rec.id == highlightedLevelId}
              onSelect={bindSelect(rec.id)}
            />
{'fraction_non_alphanumeric': 0.13826232247284878, 'fraction_numerical': 0.003341687552213868, 'mean_word_length': 1.7595082597003457, 'pattern_counts': {'":': 2, '<': 23, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3063367', 'n_tokens_mistral': 2146, 'n_tokens_neox': 2087, 'n_words': 445}