Blackjack in Email with DML + AMP

ampjack.dml

<dys-block>
  <dys-row>
    <dys-column>
      <dys-html> 
        <div class='modal' id='modal'>
          <div class='modal-content'>
            <dys-img padding='0' padding-top='60px' ratio='200:51' src='https://cdn.assets.dyspatch.io/security=policy:eyJjYWxsIjpbInJlYWQiLCJjb252ZXJ0Il0sImV4cGlyeSI6MjE0NzQ4MzY0NywiaGFuZGxlIjoiSmc4MWFWUllSWjZuMFJibmxXWVAifQ==,signature:5d81e5ea2ca9e035c79363a8d39722bbe62d147535260122cb50f4ff663c36b4/Jg81aVRYRZ6n0RbnlWYP' width='200px' />
            <dys-img id='ampjacklogo' padding='0' src='https://cdn.assets.dyspatch.io/security=policy:eyJjYWxsIjpbInJlYWQiLCJjb252ZXJ0Il0sImV4cGlyeSI6MjE0NzQ4MzY0NywiaGFuZGxlIjoicEQ5bVdhRm9UNzY0eXJhbTkwZFQifQ==,signature:6e814ec4bd377f691eb8a44106bae9bb24eb023d081941ae06e82fd9651ccab8/pD9mWaFoT764yram90dT' width='250px' />
            <button class='myButton' id='startButton' on='tap: modal.toggleClass(class = "modalContentErase", FORCE=true), reset.clear, nameForm.show, stayForm.clear, hitForm.clear, startButton.hide' style='margin-left: 22px;'>
              Start Game
            </button> 
            <dys-form action-xhr='https://amp-jack.herokuapp.com/setName' align='center' hidden id='nameForm' method='POST' on='submit-success: modal.hide'>
              <dys-static></dys-static>  
              <dys-dynamic>
                <dys-text align='center' font-size='16px' padding-top='0'>
                  What is your name?
                </dys-text>
                <div style='display: flex; align-items: center; justify-content: center; flex-direction: column;'>
                  <input name='name' required='' type='text' /><br />
                  <input class='myButton' on='tap: name-form.submit, stayForm.clear, hitForm.clear, reset.submit' role='button' tabindex='0' type='submit' value='Play!' />
                </div>
              </dys-dynamic>
            </dys-form>
          </div>
        </div>
      </dys-html>
    </dys-column>
  </dys-row>
  <dys-row>
    <dys-column padding='0'>
      <dys-list height='180' id='dealersHand' src='https://amp-jack.herokuapp.com/dealerCards' width='600'>
        <dys-dynamic>
          <dys-template>
            <dys-html>
              <div class='player-card-container'>
                <dys-img [hidden]='cardback' padding='0' src='https://cdn.assets.dyspatch.io/security=policy:eyJjYWxsIjpbInJlYWQiLCJjb252ZXJ0Il0sImV4cGlyeSI6MjE0NzQ4MzY0NywiaGFuZGxlIjoiSkRZVU9URmVScWlXSVFlNUZqRkYifQ==,signature:41e03b00f388f24bac0aee920af54f2bf26212c6a989270e3f0597f9f731b4ec/JDYUOTFeRqiWIQe5FjFF' width='125px' />
                {{#dealersHand}}
                  <dys-img padding='0' src='{{img}}' width='125px' />
                {{/dealersHand}}   
              </div>
            </dys-html>
            <dys-text [hidden]='dealerTotal' align='center' color='#FFFFFF' hidden><br />Dealer Total: {{dealerTotal}}</dys-text>
          </dys-template>  
        </dys-dynamic>
        <dys-static>
          <dys-text>You need AMP enabled to view this email</dys-text>
        </dys-static>
      </dys-list>
    </dys-column>
  </dys-row>
  <dys-row padding='0'>
    <dys-column>
      <dys-list height='45' id='gameStatus' src='https://amp-jack.herokuapp.com/gameStatus'>
        <dys-static></dys-static>
        <dys-dynamic>
          <dys-template>
            <dys-text align='center' color='#FFFFFF' font-size='30px' font-weight='bold'>{{gameStatus}}</dys-text>
          </dys-template>
        </dys-dynamic>
      </dys-list>
    </dys-column>
  </dys-row>
  <dys-row padding='0'>
    <dys-column>
      <dys-list height='30' id='playersValue' src='https://amp-jack.herokuapp.com/playerCards'>
        <dys-dynamic>
          <dys-placeholder></dys-placeholder>
          <dys-template>
            <dys-text align='center' color='#FFFFFF'>{{total}}</dys-text>
          </dys-template>
        </dys-dynamic>
        <dys-static>
          <dys-text>You need AMP enabled to view this email</dys-text>
        </dys-static>
      </dys-list>
    </dys-column>
  </dys-row>
  <dys-row>
    <dys-column>
      <dys-list height='150' id='playersHand' src='https://amp-jack.herokuapp.com/playerCards' width='600'>
        <dys-dynamic>
          <dys-placeholder></dys-placeholder>
          <dys-template>
            <dys-html>
              <div class='player-card-container'>
                {{#playersHand}}
                  <dys-img padding='0' src='{{img}}' width='125px' />
                {{/playersHand}}
              </div>
            </dys-html>
          </dys-template>
        </dys-dynamic>
        <dys-static>
          <dys-text>You need AMP enabled to view this email</dys-text>
        </dys-static>
      </dys-list>
    </dys-column>
  </dys-row>
  <dys-row padding-top='0'>
    <dys-column>
      <dys-form action-xhr='https://amp-jack.herokuapp.com/hit' id='hitForm' method='POST' on='submit-success: playersHand.refresh, playersValue.refresh, gameStatus.refresh' padding-left='200px'>
        <dys-dynamic>
          <dys-html>
            <input class='myButton' on='tap: hitForm.submit, hitForm.clear' role='button' tabindex='0' type='submit' value='Hit' />
          </dys-html>
        </dys-dynamic>
        <dys-static></dys-static>
      </dys-form> 
    </dys-column>
    <dys-column>
      <dys-form action-xhr='https://amp-jack.herokuapp.com/stay' id='stayForm' method='POST' on='submit-success: dealersHand.refresh, gameStatus.refresh, playersHand.refresh'>
        <dys-dynamic>
          <dys-html>
            <input class='myButton' on='tap: stayForm.submit, stayForm.clear, AMP.setState({cardback: true, dealerTotal: false})' role='button' tabindex='0' type='submit' value='Stay' />
          </dys-html>
        </dys-dynamic>
        <dys-static></dys-static>
      </dys-form>
    </dys-column>
  </dys-row>
  <dys-row padding-top='0'>
    <dys-column>
      <dys-form action-xhr='https://amp-jack.herokuapp.com/reset' id='reset' method='GET' on='submit-success: dealersHand.refresh, gameStatus.refresh, playersHand.refresh, playersValue.refresh, AMP.setState({dealerTotal: true, cardback: false})' padding-left='235px'>
        <dys-dynamic>
          <dys-html>
            <input class='myButton' on='tap: reset.submit, reset.clear, stayForm.clear, hitForm.clear' role='button' tabindex='0' type='submit' value='New Game' />
          </dys-html>
        </dys-dynamic>
        <dys-static></dys-static>
      </dys-form>
    </dys-column>
  </dys-row>
</dys-block>