Compare revisions

Vesa Lappalainen · Vesa Lappalainen · f499713a · f499713a · f499713a · f499713a
--- a/.gitignore
+++ b/.gitignore
+.idea/
+.vscode/
+commond/
+kuvat/
--- a/README.md
+++ b/README.md
+# cards
+Esimerkkejä TIMiin upotettavista kompononenteista
--- a/button.html
+++ b/button.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <div class="game"></div>
+<script>
+document.addEventListener('DOMContentLoaded', (event) => {
+    const peli = document.querySelector('.game');
+    const button = document.createElement('button');
+    button.style.position = "absolute";
+    button.style.left = `10px`;
+    button.style.top = `10px`;
+    button.style.width = `50px`;
+    button.style.height = `50px`;
+    button.innerHTML = '&#8678;';
+    button.style.fontSize = "40px";
+    peli.appendChild(button);
+});
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/cards.css
+++ b/cards.css
+body {
+    font-family: Arial, sans-serif;
+}
+
+.table {
+    position: absolute;
+    font-family: Arial, sans-serif;
+    background-color: #009e00; /* Vihreä tausta */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.dealdeck {
+    position: relative;
+    width: 100px; /* Adjust as needed */
+    height: 150px; /* Adjust as needed */
+}
+
+.deck {
+    position: relative;
+    width: 73px; /* Adjust as needed */
+    height: 98px; /* Adjust as needed */
+}
+
+.card {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 73px;
+    height: 98px;
+    background-color: transparent;
+    /* border: 1px solid #ccc; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    -webkit-user-drag: element;
+}
+
+.hidden {
+    display: none;
+}
+
+.dragging-card {
+    position: absolute;
+    pointer-events: none;
+    z-index: 1000;
+}
\ No newline at end of file
--- a/cards.html
+++ b/cards.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Card Deck Component</title>
+    <link rel="stylesheet" href="cards.css">
+    <style>
+.button.eka {
+    padding: 0;
+    width: 50px;
+    /*border: 1px solid #000;*/
+    -webkit-border-radius: 5px;
+}
+    </style>
+    <script>
+         document.write('<script src="cards.js?v=' + Math.random() + '"><\/script>');
+    </script>
+</head>
+<body>
+    <div class="game"></div>
+    <div id="debug" style="top: 500px"></div>
+    <button id="debugResetButton">Reset</button>
+<script>
+document.addEventListener('DOMContentLoaded', (event) => {
+    const peli = document.querySelector('.game');
+    peli.style.position = "absolute";
+    peli.style.left = "100px"
+    const poyta = new Table("poyta", true);
+    poyta.element.style.width = '500px';
+    poyta.element.style.height = '340px';
+    poyta.dx = 100;
+    poyta.mx = 20;
+    poyta.my = 20;
+    peli.appendChild(poyta.element);
+    const jakoPakka = new DealDeck('jakoPakka');
+    // jakoPakka.shuffle();
+    poyta.addDeck(jakoPakka);
+    const pakka1 = new Deck('pakka1');
+    poyta.addDeck(pakka1);
+    const pakka2 = new Deck('pakka2');
+    poyta.addDeck(pakka2);
+    const pakka3 = new Deck('pakka3');
+    poyta.addDeck(pakka3);
+    pakka3.element.style.height = '300px';
+    pakka3.dy = 20;
+    jakoPakka.tapHandler = (_deck, _card) => {
+        const card = jakoPakka.pop();
+        if (card) {
+            pakka1.animateAddCard(card);
+        }
+    };
+    // Attach event listener to the button
+    const debugResetButton = document.getElementById('debugResetButton');
+    debugResetButton.addEventListener('click', debugClear);
+});
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/cards.js
+++ b/cards.js
--- a/common/images/cards/back1.png
+++ b/common/images/cards/back1.png
--- a/common/images/cards/back10.png
+++ b/common/images/cards/back10.png
--- a/common/images/cards/back11.png
+++ b/common/images/cards/back11.png
--- a/common/images/cards/back12.png
+++ b/common/images/cards/back12.png
--- a/common/images/cards/back13.png
+++ b/common/images/cards/back13.png
--- a/common/images/cards/back2.png
+++ b/common/images/cards/back2.png
--- a/common/images/cards/back3.png
+++ b/common/images/cards/back3.png
--- a/common/images/cards/back4.png
+++ b/common/images/cards/back4.png
--- a/common/images/cards/back5.png
+++ b/common/images/cards/back5.png
--- a/common/images/cards/back6.png
+++ b/common/images/cards/back6.png
--- a/common/images/cards/back8.png
+++ b/common/images/cards/back8.png
--- a/common/images/cards/back9.png
+++ b/common/images/cards/back9.png
--- a/common/images/cards/bblackPtr.png
+++ b/common/images/cards/bblackPtr.png
--- a/common/images/cards/blackPtr.png
+++ b/common/images/cards/blackPtr.png
No results found