nicolas
/
acorn


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
    <script src="jquery-3.5.1.js"></script>
    <script src="comm.js"></script>
    <script src="draggame.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">
            <div class="creating-container">
                <div class="question-text">
                    Create a word sounding like...
                    <div class="question-box" id="question-box">
                    </div>
                </div>
                <div class="question-letters" >
                    ... using the following letters:
                    <div class="letter-box" id="letter-box">
                    </div>
                </div>
            </div>
            <form id="createform">
                <label for="word">Word:</label>
                <input id="word" type="text" autocomplete="off" /><br>
                <input id="submit-word" type="submit" value="Submit Word" />
            </form>
        </div>

        <div id="guessing" style="display:none">
            You now have to guess!<br><br>
            <div id="guessing-draggame" style="display: flex;flex-direction: row; min-height: 110px;">
                <div id="dropzones" style="flex: 2;">
                </div>
                <div id="qdz-source" class="question-dropsource" ondragover="allowDrag(event)" ondrop="drop(event)" style="flex: 1">
                </div>
            </div>
            <form id="guessingform">
                <input id="submit-guess" type="submit" value="Submit Guess" />
            </form>
        </div>
        <div id="results" style="margin-top: 20px; display:none">
            <div id="guesses-table"></div>
            <table id="points-table" class="points-table"></table>
        </div>
        <div id="status">
        </div>
    </div>

</body>
</html>