integrated bootstrap
integrated bootstrap

--- /dev/null
+++ b/public/css/pong.css
@@ -1,1 +1,5 @@
-
+@media (min-width: 1200px) {
+    .container {
+        width: 1200px;
+    }
+}

--- a/public/index.html
+++ b/public/index.html
@@ -5,12 +5,41 @@
 <meta content='IE=edge' http-equiv='X-UA-Compatible'>
 <meta content='width=device-width,initial-scale=1' name='viewport'>
 <title>Pong 4</title>
-</head>
-<body>
 <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
 <script type="text/javascript" src="/bower_components/socket.io-client/socket.io.js"></script>
 <script type="text/javascript" src="/public/js/pong.js"></script>
-<div class="score"></div>
+<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
+<link rel="stylesheet" href="/public/css/pong.css">
+<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+</head>
+<body>
+
+<nav class="navbar navbar-inverse navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Pong 4</a>
+    </div>
+  </div>
+</nav>
+
+<div class="container">
+    <br /><br /><br /><br />
+    <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-8">
+            <div class="game"></div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-4">
+            <h1>Score</h1>
+            <p class="score lead"></p>
+        </div>
+    </div>
+</div><!-- /.container -->
 
 <script type="text/javascript">
     var socket = io();

--- a/public/js/pong.js
+++ b/public/js/pong.js
@@ -280,7 +280,7 @@
 Score.prototype.display = function () {
     $('.score').html("");
     for(player in this.players) {
-        $('.score').append(this.players[player].name + ':' + this.players[player].score + '<br />');
+        $('.score').append(this.players[player].name + ' - ' + this.players[player].score + '<br />');
     }
 }
 
@@ -420,7 +420,10 @@
     }
 }
 
-document.body.appendChild(canvas);
+//document.body.appendChild(canvas);
+$(function(){
+    $('.game').html(canvas);
+});
 animate(step);
 
 window.addEventListener("keydown", function (event) {

comments