index.html | searchcode

/www/index.html

https://gitlab.com/Sxw1212/questions · HTML · 211 lines · 200 code · 11 blank · 0 comment · 0 complexity · fe4d3074f0c74af73bf3e0989427fb17 MD5 · raw file

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <title>Questions</title>
  </head>
  <body>
    <div class="container" id="game"></div>
    <script type="text/babel">
      var AnswerBox = React.createClass({
        getInitialState() {
          return {answer: ""}
        },
        handleSubmit() {
          this.props.socket.emit("answer:submit");
        },
        handleAnswerChange(e) {
          this.setState({answer: e.target.value});
          this.props.socket.emit("answer:update", e.target.value);
        },
        render() {
          return (
            <div className="AnswerBox">
              <div className="row">
                <div className="input-field">
                  <input type="text" id="answerbox-answer"
                  onChange={this.handleAnswerChange}
                  value={this.state.answer}/>
                  <label for="answerbox-answer">Answer: {this.props.gameState.currentQuestionType}</label>
                </div>

                <a className="waves-effect waves-light btn"
                onClick={this.handleSubmit}>Submit</a>
              </div>
            </div>
          );
        }
      });

      var QuestionBox = React.createClass({
        getInitialState() {
          return {question: "", questionType: ""}
        },
        handleSubmit() {
          this.props.socket.emit("question:submit");
        },
        handleQuestionChange(e) {
          this.setState({question: e.target.value});
          this.props.socket.emit("question:update", e.target.value);
        },
        handleQuestionTypeChange(e) {
          this.setState({questionType: e.target.value});
          this.props.socket.emit("questiontype:update", e.target.value);
        },
        render() {
          return (
            <div className="QuestionBox">
              <div className="row">
                <div className="input-field">
                  <input type="text" id="questionbox-question"
                  onChange={this.handleQuestionChange}
                  value={this.state.question}/>
                  <label for="questionbox-question">Question</label>
                </div>

                <div className="input-field">
                  <input type="text" id="questionbox-questiontype"
                  onChange={this.handleQuestionTypeChange}
                  value={this.state.questionType}/>
                  <label for="questionbox-questiontype">Question Type</label>
                </div>

                <a className="waves-effect waves-light btn"
                onClick={this.handleSubmit}>Submit</a>
              </div>
            </div>
          );
        }
      });

      var JoinBox = React.createClass({
        getInitialState() {
          return {
            room: localStorage.lastRoom || ""
          };
        },
        handleRoomChange(e) {
          this.setState({room: e.target.value});
        },
        handleSubmit(e) {
          localStorage.lastRoom = this.state.room;
          console.log(this.state.room);
          this.props.socket.emit("join", this.state.room);
        },
        render() {
          return (
            <div className="JoinBox">
              <div className="row">
                <div className="input-field">
                  <input type="text" id="joinbox-room"
                  onChange={this.handleRoomChange}
                  value={this.state.room}/>
                  <label for="joinbox-room">Room</label>
                </div>
                <a className="waves-effect waves-light btn"
                onClick={this.handleSubmit}>Join</a>
              </div>
            </div>
          );
        }
      });

      var SpectateBox = React.createClass({
        render() {
          return (
            <div className="SpectateBox">
              <div className="row">
                <p>Current Question: {this.props.gameState.currentQuestion}</p>
                <p>Current Question Type: {this.props.gameState.currentQuestionType}</p>
                <p>Current Answer: {this.props.gameState.currentAnswer}</p>
                <p>Players: {this.props.gameState.players}</p>
              </div>
            </div>
          );
        }
      });

      var Game = React.createClass({
        getInitialState() {
          return {
            gameState: {
              showConnectingBox: true
            },
            socket: io()
          };
        },
        componentDidMount() {

          this.state.socket.on("connect", () => {
            console.log("Connected");
          });

          this.state.socket.on("disconnect", () => {
            console.log("Disconnected");
            this.setState({
              gameState: {
                showConnectingBox: true
              }
            });
          });

          this.state.socket.on("updateGameState", (gameState) => {
            this.setState({
              gameState: gameState
            });
          });
        },
        render() {
          return (
            <div className="Game">
              { this.state.gameState.showConnectingBox ? <div>
                <div className="progress">
                  <div className="indeterminate"></div>
                </div>
                <p>Connecting to server</p>
              </div> : null}
              { this.state.gameState.showQuestionBox ? <QuestionBox
                socket={this.state.socket}
                gameState={this.state.gameState}
              /> : null}
              { this.state.gameState.showSpectateBox ? <SpectateBox
                gameState={this.state.gameState}
              /> : null}
              { this.state.gameState.showAnswerBox ? <AnswerBox
                socket={this.state.socket}
                gameState={this.state.gameState}
              /> : null}
              { this.state.gameState.showJoinBox ? <JoinBox
                socket={this.state.socket}
              /> : null}
              { this.state.gameState.showGameWaitBox ? <div>
                <div className="progress">
                  <div className="indeterminate"></div>
                </div>
                <p>Waiting for round to start</p>
              </div> : null}
              { this.state.gameState.showYouAreUpBox ? <div>
                <div className="progress">
                  <div className="indeterminate"></div>
                </div>
                <p>You are answering next!</p>
              </div> : null}
            </div>
          );
        }
      });

      ReactDOM.render(
        <Game/>,
        document.getElementById("game")
      );
    </script>
  </body>
</html>