0xD34F

class Game extends React.Component {
  state = {
    panesCurrent: [],
    panesDefault: [ 1, 1, 1, 0, -1, -1, -1 ],
    panesWin: [ -1, -1, -1, 0, 1, 1, 1 ],
  }

  componentDidMount() {
    this.reset();
  }

  componentDidUpdate() {
    if (this.state.panesCurrent.every((n, i) => n === this.state.panesWin[i])) {
      setTimeout(alert, 25, 'WIN');
    }
  }

  onClick(index) {
    const clicked = this.state.panesCurrent[index];
    if (clicked === 0) {
      return;
    }

    for (let i = 1; i <= 2; i++) {
      const t = index + clicked * i;
      if (this.state.panesCurrent[t] === 0) {
        const panes = [...this.state.panesCurrent];
        [ panes[index], panes[t] ] = [ panes[t], panes[index] ];
        this.setState({ panesCurrent: panes });
        break;
      }
    }
  }

  reset = () => {
    this.setState(({ panesDefault }) => ({
      panesCurrent: [...panesDefault],
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.reset}>reset</button>
        <div className="game">
          {this.state.panesCurrent.map((n, i) => (
            <div
              className={'pane ' + [ 'left', '', 'right' ][n + 1]}
              onClick={() => this.onClick(i)}
            ></div>
          ))}
        </div>
      </div>
    )
  }
}

.game {
  font-size: 5px;
}

.pane {
  display: inline-block;
  width: 10em;
  height: 10em;
  margin: 1em;
}

.pane.right::after,
.pane.left::after {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 4em;
}
.pane.right::after {
  content: "-->";
  color: red;
  border: 2px solid red;
}
.pane.left::after {
  content: "<--";
  color: lime;
  border: 2px solid lime;
}

editText(operation, item) {
  item.text = operation.api.origElements.innerHTML;
},

vAxis: {
  direction: -1
}

Можете подсказать что я делаю не так

deleteItem(id) {
  this.setState(({ items }) => ({
    items: items.filter(n => n.id !== id),
  }));
}

class App extends React.Component {
  state = {
    items: [...this.props.items.map((n, i) => ({
      id: i + 1,
      value: n,
    }))],
    newItem: '',
    search: '',
  }

  addItem = () => {
    this.setState(({ items, newItem }) => ({
      items: [ ...items, {
        id: 1 + Math.max(0, ...items.map(n => n.id)),
        value: newItem,
      } ],
      newItem: '',
    }));
  }

  deleteItem(id) {
    this.setState(({ items }) => ({
      items: items.filter(n => n.id !== id),
    }));
  }

  onChange = ({ target: { value, name } }) => {
    this.setState(() => ({
      [name]: value,
    }));
  }

  render() {
    const search = this.state.search.toLowerCase();
    const filteredItems = this.state.items.filter(n => n.value.toLowerCase().includes(search));

    return (
      <div>
        <div>
          <input
            value={this.state.newItem}
            onChange={this.onChange}
            name="newItem"
            placeholder="Add..."
          />
          <button onClick={this.addItem}>Добавить</button>
        </div>
        <div>
          <input
            value={this.state.search}
            onChange={this.onChange}
            name="search"
            placeholder="Search..."
          />
        </div>
        <ul>
          {filteredItems.map(n => (
            <li key={n.id}>
              {n.value}
              <button onClick={() => this.deleteItem(n.id)}>Удалить</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <App
    items={[
      'hello, world!!',
      'fuck the world',
      'fuck everything',
    ]}
  />,
  document.getElementById('app')
);

Здесь собрана модель списка с глубиной 3. На первом уровне все работает как надо, при перетаскивании, элемент имеющий дочерние элементы перетаскивается вместе с ними. Но на 2-й глубине родитель и потомок уже не связаны

moment(str, 'HH:mm DD.MM.YY').format('YYYY-MM-DD HH:mm')

str.replace(/(\S+) (\d+)\.(\d+)\.(\d+)/, '20$4-$3-$2 $1')

$('.login-container a').click(function() {
  $(`form.${this.dataset.targetclass}, form:visible`).animate({
    height: 'toggle',
    opacity: 'toggle',
  }, 'slow');
});

$('<a href="#" class="list-group-item" />').append(year - i).appendTo('.list-group');

Так вот, почему появляется не 10 пунктов, а всего 5!

const [ tbody ] = table.tBodies;
tbody.append(...Array
  .from(tbody.rows, n => [ n, +n.cells[0].textContent ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0].cloneNode(true))
);

[...table.rows]
  .sort((a, b) => a.innerText - b.innerText)
  .forEach(n => table.insertRow().innerHTML = n.innerHTML);

const colors = [ 'green', 'blue', 'red' ];

$('table').on('click', 'td', function() {
  $(this).addClass(colors[$(this).text() - 1]);
})

$('table').find('td').text(() => 1 + Math.random() * 3 | 0);

Как залить ячейку по которой я нажал и ячейки вокруг нее в цвет из масива?

не много не так. нужно залить все 1 цветом