index.html

<html>

<head>
    <title>Solitaire CARDTS</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="cardts.min.js"></script>
    <script src="element.card-t.full.js"></script>
    <script type="module" src="solitaire.js"></script>
    <link rel="stylesheet" type="text/css" href="solitaire.css" />

    <style id=nthCardSequence>
        /* CSS can't do nth-child calculations , so JavaScript adds all CSS rules to display cards as a sequence */
    </style>

    <style id=DropLocations>
        /* JavaScript dynamicall adds rules where a dragging card can be dropped */
    </style>

</head>

<body>
    <header>
        <cardts-zone id=CardtsHeader>
            <!-- Cardts with Title Letters are injected here -->
        </cardts-zone>
        <div>
            <a href='https://github.com/card-ts/playingcardts'>&lt;card-t&gt;</a> Selection and Drag-Drop interactions
        </div>
    </header>
    <main>
        <!-- Here is the Solitaire Game -->
        <cardts-area id=Solitaire>
            <div id=Deck>
                <cardts-zone id=Stock> </cardts-zone>
                <cardts-zone id=Waste> </cardts-zone>
            </div>
            <div id=TablePiles>
                <!-- 8 sequence piles are injected here -->
            </div>
            <div id=TableFoundations>
                <!-- 4 foundation piles are injected here -->
            </div>
            <div id=DraggingPile>
                <!-- cards being dragged / dropped into another pile -->
            </div>
            <div id=SelectionSequenceCards>
                <!-- outline current card & sequence of cards -->
            </div>
            <div id="Instructions">
                Game logic not (yet) implemented.
                <br>
                Testing selection and drag-drop interactions with card-ts and piles
                <br>
                You can drag any selection to any pile
            </div>
        </cardts-area>
    </main>

    <script>
    </script>
    <footer>&lt;card-t&gt; on GitHub: <a
            href="https://card-ts.github.io/playingcardts/">https://card-ts.github.io/playingcardts/</a>
    </footer>
    <!-- Fork me on GitHub label  -->
    <a style="position:fixed;top:0;right:0" href="https://github.com/card-ts/solitaire"><img width="160" height="160"
            src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=160%2C160"></a>

</body>

</html>
<div id=PublishDate>
Published: 2019-06-20 10:51 