문서 모음

NodeJS용 html 관련 파일 1

고수석 2019. 4. 18. 18:57

<html>

    <head>

        <title>Rock, paper, scissors</title>

        <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <script src="//code.jquery.com/jquery.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

        <style>

            body {

                margin-top: 30px;

            }

            #gameArea {

                display: none;

            }

            .sectionArea {

                margin-bottom: 30px;

            }

            .chat {

                height: 340px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <h1 class="text-center">Rock, paper, scissors</h1>


            <br />


            <div class="row" id="userFormArea">

                <div class="col-md-12">

                    <form id="userForm">

                        <div class="form-group row">

                            <label class="col-form-label col-sm-2 " for="username">Username</label>

                            <div class="col-sm-10">

                                <input class="form-control" id="username" placeholder="Enter Username" />

                            </div>

                        </div>

                        <br />

                        <input type="submit" class="btn btn-primary" value="Login" />

                    </form>

                </div>

            </div>


            <div class="row" id="gameArea">

                <div class="col-md-4">

                    <div class="well">

                        <h3>Online Users</h3>

                        <ul class="list-group" id="users"></ul>

                    </div>

                </div>

                

                <div class="col-md-8">

                    <form class="sectionArea" id="game">

                        <h4>Choices</h4>


                        <input class="form-check-input" id="rock" type="radio" name="choice" value="rock" checked />

                        <label class="form-check-label" for="rock">Rock</label>

                        <br />


                        <input class="form-check-input" id="paper" type="radio" name="choice" value="paper" />

                        <label class="form-check-label" for="paper">Paper</label>

                        <br />


                        <input class="form-check-input" id="scissors" type="radio" name="choice" value="scissors" />

                        <label class="form-check-label" for="scissors">Scissors</label>

                        <br />


                        <input type="submit" class="btn btn-primary" value="Submit" />

                    </form>


                    <div class="sectionArea">

                        <h4>Information</h4>

                        <p id="info" class="text-info">Waiting for players...</p>

                    </div>


                    <div class="container navbar-fixed-bottom">

                        <div class="chat pre-scrollable" id="chat"></div>

                        <form id="messageForm">

                            <label>Enter Message</label>

                            <textarea class="form-control" id="message">

                            </textarea>

                            <br />

                            <input type="submit" class="btn btn-primary" value="Send message" />

                        </form>

                    </div>

                </div>

            </div>

        </div>


        <script>

            $(function() {

                var socket = io.connect();

                var $messageForm = $('#messageForm');

                var $message = $('#message');

                var $chat = $('#chat');

                var $gameArea = $('#gameArea');

                var $userFormArea = $('#userFormArea');

                var $userForm = $('#userForm');

                var $users = $('#users');

                var $username = $('#username');

                var $game = $('#game');

                var $info = $('#info');

                var submitted = false;


                $messageForm.submit(function(e) {

                    e.preventDefault();

                    socket.emit('send message', $message.val());

                    $message.val('');

                });


                socket.on('room full', function() {

                    $('#login').hide();

                    $('#game').show();

                    $('#login').off('click');

                });