<commit_before><link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
<link rel="import" href="../../src/boardgame-deck-defaults.html">
<link rel="import" href="../../src/boardgame-base-game-renderer.html">
<link rel="import" href="../../src/boardgame-card.html">
<link rel="import" href="../../src/boardgame-component-stack.html">
<link rel="import" href="../../src/boardgame-fading-text.html">
<link rel="import" href="../../src/boardgame-token.html">

<dom-module id="boardgame-render-game-debuganimations">
  <template>
    <style>

      .slow {
        --animation-length: 5s;
      }

      #shortstacks {
        @apply --layout-horizontal;
      }

      #draw {
        @apply --layout-horizontal;
      }

      #shortstacks boardgame-card > div {
        @apply --layout-horizontal;
        @apply --layout-center;
        @apply --layout-center-justified;
      }

      #fan {
        @apply --layout-horizontal;
      }

      #fan boardgame-component-stack:first-child {
        --component-scale:1.2;
      }

      .flex {
        @apply --layout-flex;
      }

      .controls {
        @apply --layout-vertical;
      }

      #hidden {
        @apply --layout-horizontal;
      }

      #controls {
        @apply --layout-horizontal;
      }

      #token {
        @apply --layout-horizontal;
      }

      #tokens {
        @apply --layout-horizontal;
      }

      #tokens-sanitized {
        @apply --layout-horizontal;
      }

    </style>
    <boardgame-deck-defaults>
      <template deck="cards">
        <boardgame-card>
          <div tall>
            {{item.Values.Type}}
          </div>
        </boardgame-card>
      </template>
      <template deck="tokens">
        <boardgame-token></boardgame-token>
      </template>
    </boardgame-deck-defaults>
    <div id="container" class$="{{_classes(slowAnimations)}}">
      <div id="controls">
        <paper-toggle-button checked="{{fromStackRotated}}">From Rotated</paper-toggle-button>
        <paper-toggle-button checked="{{toStackRotated}}">To Rotated</paper-toggle-button>
        <paper-toggle-button checked="{{messy}}">Messy</paper-toggle-button>
        <paper-toggle-button checked="{{slowAnimations}}">Slow Animation</paper-toggle-button>
        From scale:<paper-slider min="0.5" max="2.0" value="{{fromCardScale}}" pin step=".05"></paper-slider>
        To Scale: <paper-slider min="0.5" max="2.0" value="{{toCardScale}}" pin step=".05"></paper-slider>
      </div>
      <div id='shortstacks'>
        <boardgame-component-stack layout='stack' stack="{{state.Game.FirstShortStack}}" messy="{{messy}}">
          <template is='dom-repeat'>
            <boardgame-card item="{{item}}" index="{{index}}" propose-move="Move Card Between Short Stacks">
            </boardgame-card>
          </template>
        </boardgame-component-stack>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.SecondShortStack}}">
          <template is='dom-repeat'>
            <boardgame-card item="{{item}}" index="{{index}}">
            </boardgame-card>
          </template>
        </boardgame-component-stack>
        <paper-button propose-move="Move Card Between Short Stacks">Swap</paper-button>
      </div>

      <div id='draw'>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.DrawStack}}" component-rotated="{{messy}}" component-index-attributes="my-index,other-index">
        </boardgame-component-stack>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.DiscardStack}}">
        </boardgame-component-stack>
        <paper-button propose-move="Move Card Between Draw and Discard Stacks">Draw</paper-button>
        <boardgame-fading-text trigger="{{state.Game.DrawStack.Components.length}}" auto-message="diff"></boardgame-fading-text>
      </div>

      <div id='draw'>
        <boardgame-component-stack layout='stack' messy="{{messy}}" primary-stack="{{state.Game.HiddenCard}}" secondary-stack="{{state.Game.RevealedCard}}"> 
        </boardgame-component-stack>
        <paper-button propose-move="Flip Card Between Hidden and Revealed">Flip</paper-button>
      </div>

      <div id="fan">
        <boardgame-component-stack layout='{{fromStackLayout}}' messy="{{messy}}" stack="{{state.Game.FanStack}}" style$="--component-scale:{{fromCardScale}}" component-rotated="{{fromStackRotated}}">
        </boardgame-component-stack>
        <div class="flex"></div>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.FanDiscard}}" style$="--component-scale:{{toCardScale}}" component-rotated="{{toStackRotated}}">
        </boardgame-component-stack>
        <div class="controls">
          <paper-button propose-move="Move Fan Card">Draw</paper-button>
          <paper-button propose-move="Visible Shuffle">Public Shuffle</paper-button>
          <paper-button propose-move="Shuffle">Shuffle</paper-button><commit_msg>Oops, debuganimations shortstacks still used the old machinery, which was leading to weird spacer behavior. Part of #476.<commit_after><link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
<link rel="import" href="../../src/boardgame-deck-defaults.html">
<link rel="import" href="../../src/boardgame-base-game-renderer.html">
<link rel="import" href="../../src/boardgame-card.html">
<link rel="import" href="../../src/boardgame-component-stack.html">
<link rel="import" href="../../src/boardgame-fading-text.html">
<link rel="import" href="../../src/boardgame-token.html">

<dom-module id="boardgame-render-game-debuganimations">
  <template>
    <style>

      .slow {
        --animation-length: 5s;
      }

      #shortstacks {
        @apply --layout-horizontal;
      }

      #draw {
        @apply --layout-horizontal;
      }

      #shortstacks boardgame-card > div {
        @apply --layout-horizontal;
        @apply --layout-center;
        @apply --layout-center-justified;
      }

      #fan {
        @apply --layout-horizontal;
      }

      #fan boardgame-component-stack:first-child {
        --component-scale:1.2;
      }

      .flex {
        @apply --layout-flex;
      }

      .controls {
        @apply --layout-vertical;
      }

      #hidden {
        @apply --layout-horizontal;
      }

      #controls {
        @apply --layout-horizontal;
      }

      #token {
        @apply --layout-horizontal;
      }

      #tokens {
        @apply --layout-horizontal;
      }

      #tokens-sanitized {
        @apply --layout-horizontal;
      }

    </style>
    <boardgame-deck-defaults>
      <template deck="cards">
        <boardgame-card>
          <div tall>
            {{item.Values.Type}}
          </div>
        </boardgame-card>
      </template>
      <template deck="tokens">
        <boardgame-token></boardgame-token>
      </template>
    </boardgame-deck-defaults>
    <div id="container" class$="{{_classes(slowAnimations)}}">
      <div id="controls">
        <paper-toggle-button checked="{{fromStackRotated}}">From Rotated</paper-toggle-button>
        <paper-toggle-button checked="{{toStackRotated}}">To Rotated</paper-toggle-button>
        <paper-toggle-button checked="{{messy}}">Messy</paper-toggle-button>
        <paper-toggle-button checked="{{slowAnimations}}">Slow Animation</paper-toggle-button>
        From scale:<paper-slider min="0.5" max="2.0" value="{{fromCardScale}}" pin step=".05"></paper-slider>
        To Scale: <paper-slider min="0.5" max="2.0" value="{{toCardScale}}" pin step=".05"></paper-slider>
      </div>
      <div id='shortstacks'>
        <boardgame-component-stack layout='stack' stack="{{state.Game.FirstShortStack}}" messy="{{messy}}" component-propose-move="Move Card Between Short Stacks">
        </boardgame-component-stack>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.SecondShortStack}}">
        </boardgame-component-stack>
        <paper-button propose-move="Move Card Between Short Stacks">Swap</paper-button>
      </div>

      <div id='draw'>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.DrawStack}}" component-rotated="{{messy}}" component-index-attributes="my-index,other-index">
        </boardgame-component-stack>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.DiscardStack}}">
        </boardgame-component-stack>
        <paper-button propose-move="Move Card Between Draw and Discard Stacks">Draw</paper-button>
        <boardgame-fading-text trigger="{{state.Game.DrawStack.Components.length}}" auto-message="diff"></boardgame-fading-text>
      </div>

      <div id='draw'>
        <boardgame-component-stack layout='stack' messy="{{messy}}" primary-stack="{{state.Game.HiddenCard}}" secondary-stack="{{state.Game.RevealedCard}}"> 
        </boardgame-component-stack>
        <paper-button propose-move="Flip Card Between Hidden and Revealed">Flip</paper-button>
      </div>

      <div id="fan">
        <boardgame-component-stack layout='{{fromStackLayout}}' messy="{{messy}}" stack="{{state.Game.FanStack}}" style$="--component-scale:{{fromCardScale}}" component-rotated="{{fromStackRotated}}">
        </boardgame-component-stack>
        <div class="flex"></div>
        <boardgame-component-stack layout='stack' messy="{{messy}}" stack="{{state.Game.FanDiscard}}" style$="--component-scale:{{toCardScale}}" component-rotated="{{toStackRotated}}">
        </boardgame-component-stack>
        <div class="controls">
          <paper-button propose-move="Move Fan Card">Draw</paper-button>
          <paper-button propose-move="Visible Shuffle">Public Shuffle</paper-button>
          <paper-button propose-move="Shuffle">Shuffle</paper-button>
{'fraction_non_alphanumeric': 0.18813650169733787, 'fraction_numerical': 0.002948007861354297, 'mean_word_length': 3.005366726296959, 'pattern_counts': {'":': 0, '<': 179, '<?xml version=': 0, '>': 181, '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': '263911', 'n_tokens_mistral': 3384, 'n_tokens_neox': 3272, 'n_words': 506}