nicolas
/
acorn


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
    <script src="jquery-3.5.1.js"></script>
    <script src="comm.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Eichelhäutgerät</title>
</head>
<body>
    <div class="header">
        <h1>Welcome to Eichelhäutgerät</h1>
    </div>
    <aside class="side-control">
        <div id="side-info">
            <div id="lobby-control" style="display:none">
                <div id="lobby-info">

                </div>
                
                <h3>Connected Players</h3>
                <div id="player-list" class="player-list">
                </div>
                <button type="button" class="button" id="leave-lobby">Leave Lobby</button>
            </div>
        </div>
    </aside>
    <div class="main_container">
        <form id="loginform" class="loginform">
            <div class="row">
                <div class="label-col">
                    <label for="gameId">Game ID:</label>
                </div>
                <div class="text-col">
                    <input id="gameId" type="text" />
                </div>
            </div>

            <div class="row">
                <div class="label-col">
                    <label for="nick">Nickname:</label>
                </div>
                <div class="text-col">
                    <input id="nick" type="text" />
                </div>
            </div>

            <input id="join" type="button" value="Join" />
            <input id="create" type="button" value="Create Game" />
        </form>

        <div id="startingform" style="display:none">
            A new round is ready to be played. Click &quot;Ready&quot; to indicate that you are ready.
            <form>
                <input id="ready" type="button" value="Ready" />
            </form>
        </div>


        <div id="creating" style="margin: 0px; display:none">
            <table class="qtable">
                <tr><td style="border:none; vertical-align:top">
                    <div class="questiontext">
                        Create a word sounding like...
                        <div class="question-box" id="question-box">
                        </div>
                    </div>
                </td><td style="border:none; vertical-align:top">
                    ... using the following letters:
                    <div class="letter-box" id="letter-box">
                    </div>
                </td></tr>
            </table>
            <form id="createform">
                <label for="word">Word:</label>
                <input id="word" type="text" /><br>
                <input id="submit" type="button" value="Submit Word" />
            </form>
        </div>

        <div id="guessing" style="display:none">
            You now have to guess!<br><br>
            <div id="guessingDynTable">
            </div>
        
            <form id="guessingform">
                <div id="guessingDyn">
                </div>
                <input id="submitGuess" type="button" value="Submit Guess" />
            </form>

            <div id="guessing-draggame" style="display: flex;flex-direction: row; min-height: 110px;">
                <script lang="javascript">
                    function allowDrag(e) {
                        e.preventDefault();
                    }
                    function drag(e) {
                        e.dataTransfer.setData("id", e.target.id);
                    }
                    function drop(e) {
                        e.preventDefault();
                        var id = e.dataTransfer.getData("id");
                        var target = e.target;
                        while (!target.classList.contains("question-dropzone") && !target.classList.contains("question-dropsource"))
                            target = target.parentNode;
                        
                        var occupyingDrop = target.querySelector(".question-dropelement");
                        var element = document.getElementById(id);

                        if (occupyingDrop != null && !target.classList.contains("question-dropsource")) {
                            element.parentNode.appendChild(occupyingDrop);
                        }
                        target.appendChild(element);
                    }
                </script>
                <div id="dropzones" style="flex: 1;">
                    <div id="qdz1" class="question-dropzone" ondragover="allowDrag(event)" ondrop="drop(event)">
                        q1
                    </div>
                    <div id="qdz2" class="question-dropzone" ondragover="allowDrag(event)" ondrop="drop(event)">
                        q2
                    </div>
                </div>
                <div id="qdz-source" class="question-dropsource" ondragover="allowDrag(event)" ondrop="drop(event)" style="flex: 1">
                    <p id="qde1" class="question-dropelement" draggable="true" ondragstart="drag(event)">
                        a1
                    </p>
                    <p id="qde2" class="question-dropelement" draggable="true" ondragstart="drag(event)">
                        a2
                    </p>
                    <p id="qde3" class="question-dropelement" draggable="true" ondragstart="drag(event)">
                        ae
                    </p>
                    <p id="qde4" class="question-dropelement" draggable="true" ondragstart="drag(event)">
                        wea2
                    </p>
                    <p id="qde5" class="question-dropelement" draggable="true" ondragstart="drag(event)">
                        aqqqwq2
                    </p>
                    <p id="qde6" class="question-dropelement" draggable="true" ondragstart="drag(event)">
                        aganz langa text wo muas azeigt werda
                    </p>
                </div>

            </div>
        </div>
        <div id="results" style="margin-top: 20px; display:none">
        
        </div>
        <div id="status">
        </div>
    </div>

</body>
</html>