<script setup lang="ts">

</script>

<template>
  <div class="q-pa-md row justify-center">
    <div style="width: 100%; max-width: 980px; min-width: 980px;">

      <q-card class="rules-card bg-grey-10 text-white shadow-10">

        <q-card-section class="text-center bg-grey-9 q-py-md">
          <div class="text-h5 text-weight-bold rules-title">
            <q-icon name="menu_book" class="q-mr-sm" /> Game Rules Overview
          </div>
        </q-card-section>

        <q-card-section class="q-pa-none">

          <q-list class="rules-list">

            <QExpansionItem
              icon="groups"
              label="Players"
              header-class="text-weight-bold bg-grey-8"
            >
              <q-card-section>
                Two to seven players. The aim is to be the last player left in the game.
              </q-card-section>
            </QExpansionItem>

            <QExpansionItem
              icon="style"
              label="Equipment & Card Ranks"
              header-class="text-weight-bold bg-grey-8"
            >
              <q-card-section>
                <p>A standard 52-card pack is used.</p>
                <p>In each suit, cards rank from highest to lowest: **A K Q J 10 9 8 7 6 5 4 3 2**.</p>
              </q-card-section>
            </QExpansionItem>

            <QExpansionItem
              icon="casino"
              label="Deal and Trumps"
              header-class="text-weight-bold bg-grey-8"
            >
              <q-card-section>
                <div class="text-subtitle1 text-primary q-mb-sm">First Hand (Deal)</div>
                <p>The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.</p>
                <q-separator inset dark class="q-my-sm"/>
                <div class="text-subtitle1 text-primary q-mb-sm">Subsequent Hands (Deal)</div>
                <p>The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. **One fewer card is dealt in each successive hand until the final hand consists of one card each.**</p>
              </q-card-section>
            </QExpansionItem>

            <QExpansionItem
              icon="play_circle_outline"
              label="Play & Winning a Trick"
              header-class="text-weight-bold bg-grey-8"
            >
              <q-card-section>
                <div class="text-subtitle1 text-primary q-mb-sm">Play</div>
                <p>The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.</p>

                <div class="text-subtitle1 text-primary q-my-sm">Winning a Trick</div>
                <p>The highest card of the suit led wins, **unless** a trump is played, in which case the highest trump wins. The winner of the trick leads the next.</p>

                <div class="text-subtitle1 text-primary q-my-sm">Leading Trumps</div>
                <p>Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.</p>
              </q-card-section>
            </QExpansionItem>

            <QExpansionItem
              icon="flare"
              label="Knockout & Dog's Life (Special Rules)"
              header-class="text-weight-bold bg-red-9"
            >
              <q-card-section>
                <div class="text-subtitle1 text-red-4 q-mb-sm">Knockout</div>
                <p>At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.</p>

                <div class="text-subtitle1 text-red-4 q-my-sm">Winning the Game</div>
                <p>The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.</p>

                <q-separator inset dark class="q-my-sm"/>

                <div class="text-subtitle1 text-red-4 q-my-sm">Dog's Life (Optional)</div>
                <p>The first player who takes no tricks is awarded a "dog's life". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.</p>
              </q-card-section>
            </QExpansionItem>

          </q-list>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<style scoped>
.rules-card {
  width: 100%;
  border: 2px solid #5a5a5a;
}
.rules-list .q-item {
  border-bottom: 1px solid #333;
}
</style>
