Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              .topBar Freecell
  span 00:00
  //- span 00000
.guard
  div
    h2 暫停中...
.playInfo(onclick="playInfo('none');")
  div
    h2 玩法介紹
    p 1. 右上角四個空位可隨意放入一張卡作為暫放。
    p 2. 左上角四個空位需和底圖同花色並由小至大放入,放入後就不可再移動。
    p 3. 在移動時需遵守由大至小並且是不同的顏色向下排列。
    p 4. 只能移動最底端的紙牌。
    p 5. 可暫停休息一下再回來玩。
    p 6. 無回復選項、請謹慎移動!!
.warp
  .sideBar
    button(onclick="playInfo('block');")  玩法
    button(onclick="load_cards()") 新局
    button(onclick="clearInterval(timer);guard('block');") 暫停
    button(onclick="timer = setInterval(time,1000);guard('none');") 繼續
  ul.holdBox
    li.holdBox__Seat(data-seat="1")
    li.holdBox__Seat(data-seat="3")
    li.holdBox__Seat(data-seat="5")
    li.holdBox__Seat(data-seat="7")
  ul.suitBox
    li.suitBox__Seat(data-img="♠" data-nth="0")
      div
    li.suitBox__Seat(data-img="♥" data-nth="0")
      div
    li.suitBox__Seat(data-img="♦" data-nth="0")
      div
    li.suitBox__Seat(data-img="♣" data-nth="0")
      div
  #cardBox
            
          
!

CSS

            
              @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

@mixin cardSize($width: 95px, $height: 150px) {
  width: $width;
  height: $height;
}
@mixin card_suit {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
}

[class^="cardBox__List"] {
  display: inline-block;
  float: left;
  width: 97px;
  height: 500px;
  margin-top: -10px;  
  padding-inline-start: 0;
  padding: 0 15px;
  & > li:last-child {
    &[data-suit]::after {
      @include card_suit
    }
  }
}
[data-color="red"] {
  color: red;
  &::before, &::after {
    color: red;
  }
}
[data-suit]::after {
  content: attr(data-suit);
  position: absolute;
  top: -5px;
  right: 10px;
  font-size: 32px;
  transform: scale(1, .8);
}
[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 26px;
}
button {
  display: block;
  width: 65px;
  height: 35px;
  border-radius: 10px;
  margin-bottom: 15px;
  line-height: 30px;
  text-align: center;
  color: #155B25;
  font-size: 16px;
  font-weight: 900;
}

body {
  background-color: #155B25;
  &:before{
    background: url("data:image/svg+xml;utf8,<svg enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m256 75c-99.804 0-181 81.196-181 181s81.196 181 181 181 181-81.196 181-181-81.196-181-181-181zm71.462 64.718c4.99-6.612 14.396-7.927 21.009-2.938 5.018 3.787 9.83 7.974 14.302 12.447 4.473 4.472 8.66 9.284 12.447 14.302 4.99 6.613 3.675 16.019-2.938 21.009-2.705 2.042-5.878 3.028-9.024 3.028-4.545 0-9.036-2.058-11.984-5.965-2.952-3.912-6.22-7.667-9.713-11.16s-7.248-6.761-11.16-9.713c-6.614-4.992-7.929-14.397-2.939-21.01zm-90.376-33.406c12.453-1.741 25.375-1.741 37.828 0 8.205 1.147 13.925 8.728 12.778 16.933-1.048 7.5-7.474 12.925-14.836 12.925-.692 0-1.392-.048-2.096-.146-9.71-1.357-19.81-1.357-29.52 0-8.205 1.151-15.786-4.573-16.933-12.778-1.146-8.206 4.574-15.787 12.779-16.934zm-113.841 181.38c-.704.099-1.405.146-2.096.146-7.363 0-13.788-5.424-14.836-12.925-.872-6.225-1.313-12.589-1.313-18.913s.441-12.688 1.312-18.914c1.147-8.205 8.728-13.925 16.933-12.778s13.925 8.728 12.778 16.933c-.679 4.854-1.023 9.82-1.023 14.759s.344 9.905 1.023 14.76c1.147 8.204-4.574 15.785-12.778 16.932zm61.293 84.59c-2.949 3.907-7.439 5.965-11.984 5.965-3.147 0-6.319-.986-9.024-3.028-5.018-3.787-9.83-7.974-14.302-12.447-4.473-4.472-8.66-9.284-12.447-14.302-4.99-6.613-3.675-16.019 2.938-21.009 6.613-4.991 16.019-3.675 21.009 2.938 2.952 3.912 6.22 7.667 9.713 11.16s7.248 6.761 11.16 9.713c6.612 4.992 7.927 14.397 2.937 21.01zm-2.938-211.555c-3.912 2.952-7.667 6.22-11.16 9.713s-6.761 7.248-9.713 11.16c-2.949 3.907-7.439 5.965-11.984 5.965-3.147 0-6.319-.986-9.024-3.028-6.613-4.99-7.928-14.396-2.938-21.009 3.787-5.018 7.974-9.83 12.447-14.302 4.472-4.473 9.284-8.66 14.302-12.447 6.613-4.991 16.02-3.675 21.009 2.938 4.989 6.614 3.674 16.019-2.939 21.01zm93.314 244.961c-6.226.871-12.59 1.312-18.914 1.312s-12.688-.441-18.914-1.312c-8.205-1.147-13.925-8.728-12.778-16.933 1.146-8.205 8.728-13.926 16.933-12.778 9.71 1.357 19.81 1.357 29.52 0 8.204-1.15 15.785 4.573 16.933 12.778 1.145 8.205-4.575 15.786-12.78 16.933zm8.383-91.622c-3.677 2.597-7.85 4.566-12.297 5.899v5.19c0 8.284-6.716 15-15 15s-15-6.716-15-15v-5.517c-2.087-.654-4.14-1.427-6.131-2.354-9.702-4.518-16.776-12.122-20.458-21.989-2.896-7.761 1.047-16.401 8.809-19.298 7.761-2.896 16.401 1.046 19.298 8.809.933 2.5 2.433 4.08 5.016 5.283 5.885 2.74 14.165 2.504 18.456-.525 3.019-2.133 4.255-6.537 2.755-9.817-1.954-4.271-11.867-7.813-17.79-9.928-.007-.003-.014-.005-.021-.008-11.055-3.949-27.744-9.92-34.959-25.695-7.45-16.291-1.978-36.41 12.729-46.798 3.675-2.595 7.853-4.543 12.297-5.875v-4.596c0-8.284 6.716-15 15-15s15 6.716 15 15v4.883c2.088.654 4.138 1.443 6.13 2.371 9.7 4.516 16.775 12.12 20.458 21.987 2.897 7.761-1.046 16.402-8.807 19.299-7.76 2.9-16.401-1.045-19.299-8.807-.934-2.501-2.434-4.081-5.016-5.283-5.887-2.741-14.166-2.505-18.457.524-3.019 2.132-4.255 6.537-2.755 9.817 1.951 4.266 11.844 7.804 17.77 9.921.006.002.014.004.02.007 11.055 3.949 27.76 9.917 34.98 25.704 7.451 16.29 1.979 36.408-12.728 46.796zm91.923 34.405c-3.787 5.018-7.974 9.83-12.447 14.302-4.472 4.473-9.284 8.66-14.302 12.447-2.705 2.042-5.878 3.028-9.024 3.028-4.545 0-9.036-2.058-11.984-5.965-4.99-6.613-3.675-16.019 2.938-21.009 3.912-2.952 7.667-6.22 11.16-9.713s6.761-7.248 9.713-11.16c4.99-6.612 14.396-7.927 21.009-2.938 6.612 4.99 7.927 14.395 2.937 21.008zm30.468-111.385c.871 6.227 1.312 12.59 1.312 18.914s-.441 12.688-1.312 18.914c-1.049 7.5-7.474 12.925-14.836 12.925-.692 0-1.392-.048-2.096-.146-8.205-1.147-13.925-8.728-12.778-16.933.679-4.855 1.023-9.821 1.023-14.76s-.344-9.905-1.023-14.76c-1.147-8.205 4.574-15.786 12.778-16.933 8.201-1.148 15.785 4.574 16.932 12.779z'/><path d='m45 256c0-13.669 1.322-27.033 3.817-39.985l-43.618-11.688c-3.43 16.822-5.199 34.111-5.199 51.673s1.769 34.851 5.199 51.673l43.618-11.687c-2.495-12.953-3.817-26.317-3.817-39.986z'/><path d='m256 467c-13.669 0-27.033-1.322-39.985-3.817l-11.687 43.618c16.821 3.43 34.11 5.199 51.672 5.199s34.851-1.769 51.673-5.199l-11.687-43.618c-12.953 2.495-26.317 3.817-39.986 3.817z'/><path d='m467 256c0 13.669-1.322 27.033-3.817 39.985l43.618 11.687c3.43-16.821 5.199-34.11 5.199-51.672s-1.769-34.851-5.199-51.673l-43.618 11.687c2.495 12.953 3.817 26.317 3.817 39.986z'/><path d='m256 45c13.669 0 27.033 1.322 39.985 3.817l11.687-43.618c-16.821-3.43-34.11-5.199-51.672-5.199s-34.851 1.769-51.673 5.199l11.687 43.618c12.953-2.495 26.317-3.817 39.986-3.817z'/><path d='m324.962 455.415 11.704 43.678c37.408-12.372 71.683-33.403 100.354-62.074s49.702-62.946 62.074-100.354l-43.678-11.704c-21.142 60.963-69.492 109.313-130.454 130.454z'/><path d='m56.585 324.962-43.678 11.704c12.372 37.408 33.403 71.683 62.073 100.354 28.671 28.671 62.946 49.702 100.354 62.074l11.704-43.678c-60.962-21.142-109.312-69.492-130.453-130.454z'/><path d='m455.415 187.038 43.678-11.704c-12.372-37.408-33.403-71.683-62.074-100.354s-62.946-49.702-100.354-62.074l-11.704 43.679c60.963 21.141 109.313 69.491 130.454 130.453z'/><path d='m187.038 56.585-11.704-43.679c-37.408 12.373-71.683 33.404-100.354 62.074-28.671 28.671-49.702 62.946-62.074 100.354l43.678 11.704c21.142-60.962 69.492-109.312 130.454-130.453z'/></svg>") no-repeat;
    background-position: 50% 50%;
    width: 100%;
    height: 520px;
    content: "";
    position: absolute;
    top: 150px;
    left: 0;
    z-index: -1;
    filter: opacity(13%);
  }
}
.topBar {
  width: 1000px;
  margin: 0 auto;
  font-size: 39px;
  color: #EDE2E2;
  & span:nth-child(1) {
    margin-left: 600px;
    &::before {
      content: "Time:";
      
    }
  }
  & span:nth-child(2) {
    float: right;
    margin-right: 20px;
    &::before {
      content: "Score:";
    }
  }
}

.warp {
  width: 1024px;
  margin: 0 auto;
  .sideBar {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
}

.card {
  display: inline-block;
  @include cardSize();
  background-color: #eee;
  border: 1px solid #333;
  position: relative;
  border-radius: 5px;
  margin-top: -120px;
}

.card--empty{
  display: inline-block;
  @include cardSize();
  background-color: transparent;
  position: relative;
  &:after {
    position: absolute;
    content: '';
    @include cardSize();
    border: 2px dashed #333;
    border-radius: 5px;
    top: 64px;
    left: -1px;
  }
}

.holdBox {
  float: left;
  margin: 0;
  padding: 0;
  &:after {
    content: "";
    clear: both;
  }
  .holdBox__Seat {
    @include cardSize();
    border: 1px solid #333;
    float: left;
    margin: 10px;
    border-radius: 5px;
    list-style: none;
  }
}
.holdBox__Seat.hascard {
  background-color: #fff;
  position: relative;
  &::after {
    content: attr(data-suit);
    @include card_suit
  }
}

.suitBox {
  float: right;
  margin: 0;
  padding: 0;
  list-style-type: none;
  &:after {
    content: "";
    clear: both;
  }
  .suitBox__Seat {
    @include cardSize();
    border: 1px solid #333;
    float: left;
    margin: 10px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    &:before {
      content: attr(data-img);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);
      font-size: 120px;
      color: #3C6E46
    }
    &[data-nth="13"] div::after {
      content: '完成';
      display: block;
      width: 150px;
      height: 30px;
      font-size: 20px;
      font-weight: 900;
      color: #eee;
      text-align: center;
      line-height: 30px;
      background-color: #f33;
      box-shadow: 1px 1px 3px #999;
      transform: rotate(-30deg) translate(-35%, 120%)
    }
  }
}
.suitBox__Seat.hascard {
  background-color: #fff;
  &::after {
    content: attr(data-num);
    top: 0;
    left: 8px;
  }
  &::before {
    @include card_suit
  }
  &[data-color='red']:before {
    color: #f00
  }
  &[data-color='black']:before {
    color: #000
  }
}

.guard {
  display: none;
  position: absolute;
  width: 100%;
  height: 80%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0 0 5px rgba(30, 30, 30, .5);
  background-color: rgba(30, 30, 30, .9);
  z-index: 10;
  h2{
    text-align: center;
    font-weight: 900;
    padding: 20px 0;
    color: #fff;
    text-align: center;
    font-size: 88px;
    margin-top: 100px;
  }
}

.playInfo {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(230, 230, 230, .5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 20;
  div {
    position: absolute;
    width: 550px;
    height: 330px;
    padding: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0 0 5px rgba(30, 30, 30, .5);
    background-color: #155B25;
    color: #eee;
    h2{
      text-align: center;
      font-weight: 900;
    }
  }
}
            
          
!

JS

            
              let cards = []
let $ = document
const suit = ['♠', '♥', '♦', '♣']
const num = ['A', '2', '3', '4','5', '6', '7', '8', '9', '10','J', 'Q', 'K']

function load_cards() {
  clearcardBox()
  let cardBox = $.getElementById('cardBox')
  let newUl, newLi, newBox, str, color
  cardBox.innerHTML = ''
  cards = []
  for(let i = 1; i < 9; i++) {
    newUl = $.createElement('ul')
    newUl.className = 'cardBox__List' + i + ''
    newLi = $.createElement('li')
    newLi.className = 'card--empty'
    newUl.appendChild(newLi)
    cardBox.appendChild(newUl)
  }
  let listNum = 1
  num.forEach((num) =>
    suit.forEach((suit) => 
      (suit == '♥' || suit == '♦') ? (color = 'red', cards.push({suit, num, color})) : (color = 'black', cards.push({suit, num, color}))))
  shuffle(cards)
  for (let r = 51; r >= 0; r--) {
    if(listNum <= 1) {
      listNum = 8
      $.querySelector('.cardBox__List'+listNum).insertAdjacentHTML('beforeEnd', cardStyle(cards[r].color, cards[r].suit, cards[r].num))
    } else {
      listNum--
      $.querySelector('.cardBox__List'+listNum).insertAdjacentHTML('beforeEnd', cardStyle(cards[r].color, cards[r].suit, cards[r].num))
    }
  }
  
  let allUl = $.getElementsByTagName('ul')
  let moveFrom_data, moveFrom_ulName, moveFrom_target, moveFrom_card, moveFrom_Len, move_cards
  for (let i = 0; i < allUl.length; i++) {
    
    allUl[i].ondblclick = function(e){
      let lastChild_data = e.target.parentNode.lastChild.dataset;
      let parentClass = e.target.parentElement;
      let parentName = e.target.parentElement.className;
      let suitBox = $.querySelectorAll('.suitBox__Seat');
      function dbclick_addCard(boxseat, data) {
        suitBox[boxseat].dataset.nth ++
        suitBox[boxseat].dataset.num = data.num
        suitBox[boxseat].dataset.suit = data.suit
        suitBox[boxseat].dataset.color = data.color
        suitBox[boxseat].className = 'suitBox__Seat hascard'
      }
      function dbclick_outCard() {
        e.target.className = 'holdBox__Seat'
        e.target.dataset.num = ''
        e.target.dataset.suit = ''
        e.target.dataset.color = ''
      }
      let db_data = e.target.dataset
      if(parentName === 'holdBox') {
        if(suit[0] == db_data.suit) {
          if(num[suitBox[0].dataset.nth] === db_data.num) {
            dbclick_addCard(0, db_data)
            dbclick_outCard()
          }
        } else if(suit[1] == db_data.suit) {
          if(num[suitBox[1].dataset.nth] === db_data.num) {
            dbclick_addCard(1, db_data)
            dbclick_outCard()
          }
        } else if(suit[2] == db_data.suit) {
          if(num[suitBox[2].dataset.nth] === db_data.num) {
            dbclick_addCard(2, db_data)
            dbclick_outCard()
          }
        } else if(suit[3] == db_data.suit) {
          if(num[suitBox[3].dataset.nth] === db_data.num) {
            dbclick_addCard(3, db_data)
            dbclick_outCard()
          }
        }
      } else if(parentName.search('cardBox__List') == 0) {
        if(suit[0] == lastChild_data.suit) {
          if(num[suitBox[0].dataset.nth] === lastChild_data.num) {
            dbclick_addCard(0, lastChild_data)
            parentClass.removeChild(parentClass.lastChild)
          }
        } else if(suit[1] == lastChild_data.suit) {
          if(num[suitBox[1].dataset.nth] === lastChild_data.num) {
            dbclick_addCard(1, lastChild_data)
            parentClass.removeChild(parentClass.lastChild)
          }
        } else if(suit[2] == lastChild_data.suit) {
          if(num[suitBox[2].dataset.nth] === lastChild_data.num) {
            dbclick_addCard(2, lastChild_data)
            parentClass.removeChild(parentClass.lastChild)
          }
        } else if(suit[3] == lastChild_data.suit) {
          if(num[suitBox[3].dataset.nth] === lastChild_data.num) {
            dbclick_addCard(3, lastChild_data)
            parentClass.removeChild(parentClass.lastChild)
          }
        }
      }
    };

    allUl[i].ondragstart = function (e) {
      e.stopPropagation()
      let thisLi = this.getElementsByTagName('li')
      moveFrom_target = e.target
      moveFrom_data = e.target.dataset
      moveFrom_card = e.target.parentElement
      moveFrom_ulName = e.target.parentElement.className
      moveFrom_Len = thisLi.length
      if(moveFrom_ulName.search('cardBox__List') == 0) {
        if(!e.path[0].nextElementSibling) {
          move_cards = 1
          e.dataTransfer.setDragImage(moveFrom_target, e.layerX, e.layerY)
        } else {
          move_cards = 0
        }
      }
    }
    
    allUl[i].ondragover = function(e) {
        e.preventDefault();
    }
    
    allUl[i].ondrop = function(e) {
      e.preventDefault()
      let moveTo_class = e.target.parentElement.className
      let moveTo_path = $.getElementsByClassName(moveTo_class)
      let moveTo_seat = e.target.dataset.seat
      let moveTo_li = moveTo_path[0].childNodes[moveTo_seat]
      
      if(moveTo_class == 'holdBox') {
        if(moveFrom_ulName !== 'suitBox' && moveFrom_ulName !== 'holdBox') {
          if(!e.target.dataset.suit) {
            moveTo_li.setAttribute('data-suit', moveFrom_data.suit)
            moveTo_li.setAttribute('data-num', moveFrom_data.num)
            moveTo_li.setAttribute('data-color', moveFrom_data.color)
            moveTo_li.className = 'holdBox__Seat hascard'
            moveFrom_card.removeChild(moveFrom_card.lastChild)
          }
        }
      } else if (moveTo_class == 'suitBox') {
        let checkNum = num[e.target.dataset.nth]
        if(moveFrom_data.suit === e.target.dataset.img){
          if(moveFrom_data.num === checkNum) {
            let thisTarget = e.target
            e.target.dataset.num = moveFrom_data.num
            e.target.dataset.suit = moveFrom_data.suit
            e.target.dataset.color = moveFrom_data.color
            if (moveFrom_ulName == 'holdBox') {
              moveFrom_data.num = ''
              moveFrom_data.suit = ''
              moveFrom_data.color = ''
              moveFrom_target.className = 'holdBox__Seat'
            } else if (moveTo_class.search('cardBox__List') !== 0) {
              moveFrom_card.removeChild(moveFrom_card.lastChild)
            }
            e.target.dataset.nth ++
            thisTarget.className = 'suitBox__Seat hascard'
          }
        }
      } else if (moveTo_class.search('cardBox__List') == 0) {
        let aryNumTo = num.indexOf(e.target.dataset.num)
        let aryNumFrom = num.indexOf(moveFrom_data.num)
        if (moveFrom_ulName == 'holdBox') {
          if (moveFrom_data.color ==  'red' || moveFrom_data.color == 'black') {
            if(moveFrom_data.color !== e.target.dataset.color){
              if((aryNumFrom+1) == aryNumTo || aryNumTo == -1){
                moveTo_path[0].insertAdjacentHTML('beforeEnd', cardStyle(moveFrom_data.color, moveFrom_data.suit, moveFrom_data.num))
                moveFrom_target.className = 'holdBox__Seat'
                moveFrom_data.num = ''
                moveFrom_data.suit = ''
                moveFrom_data.color = ''
              }
            }
          }
        } else if (moveFrom_ulName.search('cardBox__List') == 0) {
          if(moveFrom_Len > 1) {
            if(move_cards == 1){
              if(moveFrom_data.color !== e.target.dataset.color){
                if((aryNumFrom+1) == aryNumTo || aryNumTo == -1) {
                  moveFrom_card.removeChild(moveFrom_card.lastChild)
                  moveTo_path[0].insertAdjacentHTML('beforeEnd', cardStyle(moveFrom_data.color, moveFrom_data.suit, moveFrom_data.num))
                }
              }
            }
          }
        }
      }
    }
  }
}
load_cards()

function shuffle (arr) {
    let i, j, temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
};

function cardStyle (color, suit, num) {
  return '<li class="card" data-color="' + color + '" data-suit="' + suit + '" data-num="' + num + '"></li>'
}

let sec = 0
let timer = setInterval(time,1000)
function time() {
  sec += 1 
  let formatTime = function (num) {
    return [parseInt(num / 60 ), num % 60].join(':').replace(/\b(\d)\b/g, '0$1');
  } 
  $.querySelector('.topBar span').innerText = formatTime(sec)
}

function guard(style) {
  $.querySelector('.guard').style.display = style
}
function playInfo(style) {
    $.querySelector('.playInfo').style.display = style
}

function clearcardBox() {
  for(let i = 0; i < 4; i++){
    $.querySelectorAll('.holdBox__Seat')[i].removeAttribute('data-suit')
    $.querySelectorAll('.holdBox__Seat')[i].removeAttribute('data-num')
    $.querySelectorAll('.holdBox__Seat')[i].removeAttribute('data-color')
    $.querySelectorAll('.holdBox__Seat')[i].setAttribute('class', 'holdBox__Seat')

    $.querySelectorAll('.suitBox__Seat')[i].setAttribute('data-nth', 0)
    $.querySelectorAll('.suitBox__Seat')[i].removeAttribute('data-suit')
    $.querySelectorAll('.suitBox__Seat')[i].removeAttribute('data-num')
    $.querySelectorAll('.suitBox__Seat')[i].removeAttribute('data-color')
    $.querySelectorAll('.suitBox__Seat')[i].setAttribute('class', 'suitBox__Seat')
  }
}
            
          
!
999px

Console