Untitled

<html>

    <head>

        <style>
            body {
                /*background-image: url('1_bg1.gif');*/
                background-color: rgb(110, 110, 110);
                background-repeat: repeat;
                image-rendering: pixelated;

                color: #ffee30;
                font-size: 160%;
                font-family: 'Times New Roman', Times, serif;
            }

            #maintable {
                width: 100%;
                height: auto;
            }

            #maintable,
            #maintable tr,
            #maintable td
            {
                border: 1px solid #ffee30;
                border-collapse: collapse;
                /*text-align: center;*/
            }

            #playfield {
                width: 67%;
                text-align: center;
            }
        </style>

        <style>
            .dropbox {
                width: 24px;
                height: 24px;
                padding: 10px;
                border: 0px solid #aaaaaa;
                text-align: center;
            }

            .opcard {
                cursor: grab;
                font-weight: bold;
                font-size: 150%;
                margin: auto;
            }

            .number {
                padding-left: 15px;
                padding-right: 15px;
                margin: auto;
            }

            #game,
            #game tr,
            #game td
            {
                /*border: 1px solid #ffee30;*/
                border-collapse: collapse;
                text-align: center;
                margin: auto;
            }


            #game tr,
            #game td {
                border: 1px solid #ffee30;
                 /*border-collapse: collapse;*/
            }


            #stacks,
            #stacks tr,
            #stacks td
            {
                border: 1px solid #ffee30;
                border-collapse: collapse;
                /*text-align: center;*/
            }


        </style>

    </head>


    <body>

        <!--back button-->
        <div>
            <p onclick="go_back()" style="text-decoration: none; color: #ffee30; margin: 0px; cursor:pointer; position: absolute;">Zurück</p>
            <script>
                function go_back() {
                  parent.document.getElementById("frame").src = "1.html";
                }
            </script>
        </div>


        <!-- title -->
        <h2 style="text-align: center; text-decoration: underline;">
            <p style="text-decoration: none; color: #ffee30;">Das Zahlenspiel!</p>
        </h2>


        <!-- page -->
        <table id="maintable">
            <tr id="toprow">

                <td id="playfield">

                    <table id="game">
                        <br>

                        <tr>
                            <td style="border-style: dashed !important;">
                                <div id="box0" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"></div>
                            </td>

                            <td>
                                <h1 class="number">1</h1>
                            </td>

                            <td>
                                <div id="box1" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"></div>
                            </td>

                            <td>
                                <h1 class="number">1</h1>
                            </td>

                            <td>
                                <div id="box2" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"></div>
                            </td>

                            <td>
                                <h1 class="number">1</h1>
                            </td>

                            <td>
                                <div id="box3" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"></div>
                            </td>

                            <td>
                                <h1 class="number">1</h1>
                            </td>

                            <td>
                                <div id="box4" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"></div>
                            </td>

                            <td style="border-style: hidden; border-left-style: solid;">
                                <h1 class="number">=</h1>
                            </td>

                        </tr>
                    </table>

                    <br>

                    <table id="stacks">
                        <tr>
                            <td>
                                <div id="stack_plus" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
                                    <!-- <p id="card1" class="opcard" draggable="true" ondragstart="dragpoint(event)"> + </p> -->
                                </div>
                            </td>
                            <td>
                                <div id="stack_minus" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
                                </div>
                            </td>
                            <td>
                                <div id="stack_mal" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
                                </div>
                            </td>
                            <td>
                                <div id="stack_geteilt" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
                                </div>
                            </td>
                            <td>
                                <div id="stack_klammerauf" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
                                </div>
                            </td>
                            <td>
                                <div id="stack_klammerzu" class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
                                </div>
                            </td>
                        </tr>

                    </table>


                </td>


                <td id="rightwing" rowspan="2">
                    a
                </td>

            </tr>


            <tr id="bottomrow">

                <td id="bottomfield">
                    a
                    <p>
                        <la-tex>
                            a+b
                        </la-tex>
                    </p>
                </td>

            </tr>

        </table>


    </body>

    <script>
        function droppoint(event) {
            // Get id of dropped P
            let data = event.dataTransfer.getData("id")

            // Only remove dragged card if target is stack
            if (event.target.nodeName == "P") {
                if (event.target.parentNode.id.startsWith("stack")) {
                    document.getElementById(data).remove()
                    fill_stacks()
                    return
                }
            } else if (event.target.id.startsWith("stack")) {
                document.getElementById(data).remove()
                fill_stacks()
                return
            }

            // Fill box
            if (event.target.nodeName == "P") {
                // if box is filled so user dropped on P node
                event.target.parentNode.appendChild(document.getElementById(data))
                event.target.remove()
            } else {
                // if box is empty or user dropped on filled box edge (node will be DIV)
                while (event.target.firstChild) {
                    event.target.removeChild( event.target.firstChild )
                }
                event.target.appendChild(document.getElementById(data))
            }

            event.preventDefault()
            fill_stacks()
        }

        function allowDropOption(event) {
            event.preventDefault()
        }

        function dragpoint(event) {
            event.dataTransfer.setData("id", event.target.id)
        }

        const zeichen = {
            "":""
        }

        const operatoren = {
            "stack_plus":"+",
            "stack_minus":"−",
            "stack_mal":"⋅",
            "stack_geteilt":":",
            "stack_klammerauf":"(",
            "stack_klammerzu":")"
        }

        const stacks = {
            "stack_plus":document.getElementById("stack_plus"),
            "stack_minus":document.getElementById("stack_minus"),
            "stack_mal":document.getElementById("stack_mal"),
            "stack_geteilt":document.getElementById("stack_geteilt"),
            "stack_klammerauf":document.getElementById("stack_klammerauf"),
            "stack_klammerzu":document.getElementById("stack_klammerzu")
        }


        function fill_stacks() {

            for (var stackname in stacks) {
                stack = stacks[stackname]
                console.log(stacks)

                // Skip stack if has child
                if (stack.firstElementChild) {
                    continue
                }

                // Clear stack
                while (stack.firstChild) {
                    stack.removeChild(stack.firstChild)
                }
                // New card
                var card = document.createElement('p')
                //var tex = document.createElement('la-tex')
                //card.appendChild(tex)
                card.id = crypto.randomUUID()
                card.textContent = operatoren[stackname]
                card.className = "opcard"
                //tex.style = "margin: auto;"
                card.draggable = true
                card.setAttribute("ondragstart", 'dragpoint(event)')
                card.setAttribute("data-operator", stackname.replace("stack_",""))
                stack.appendChild(card)
            }
        }

    </script>

    <script>
        window.addEventListener("load", function(){
            fill_stacks()
        })
    </script>

</html>