Commits

Jordi Chacón committed 6a67161

CSS new layout finished. Everything looks much nicer now. Need to add a nice logo though

Comments (0)

Files changed (4)

priv/docroot/css/tt.css

 
 h1 {
   padding: 25px 0 0 30px;
-  font: 32px "arial black", arial, sans-serif;
+  font: 40px Constantina,Georgia,'Nimbus Roman No9 L',serif;
   color: #151515;
 }
 
   margin-bottom: 1.5em;
 }
 #body h3 {
-  font-size: 9px;
   color: #FFEA00;
 }
 #body .more a {
 
 
 /** tables **/
-#ranking
-{
+#ranking {
     width: 370px;
 }
-#matches
-{
+#matches {
     width: 350px;
 }
-table
-{
+table {
 	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 	font-size: 12px;
 	margin: 15px;
 	border-collapse: collapse;
 	text-align: left;
 }
-table th
-{
+table th {
 	font-size: 14px;
 	font-weight: normal;
 	color: #ffffff;
 	padding: 10px 8px;
 	border-bottom: 2px solid #ffea00;
 }
-table td
-{
+table td {
 	border-bottom: 1px dashed #ffea00;
 	color: #ffffff;
 	padding: 6px 8px;
 }
-table tbody tr:hover td
-{
+table tbody tr:hover td {
 	color: #ffea00;
 }
+
+
+/** new match form **/
+.result, .resultselect, .scoreboard, #dash, #submit {
+    overflow: hidden,
+    display: inline-block;
+}
+
+.result, #dash, .resultselect, .scoreboard {
+    float: left;
+}
+
+.result {
+    width: 43%;
+}
+
+#h3winner {
+    margin-left: 3px;
+}
+
+#h3loser {
+    float: right;
+}
+
+#dash {
+    width: 14%;
+    margin-top: 17px;
+}
+
+#dash span {
+    color: #ffea00;
+    margin-left: 20px;
+}
+
+.resultselect {
+    width: 60%;
+}
+
+.scoreboard {
+    width: 40%;
+}
+
+#submit input {
+    margin-top: 10px;
+    margin-left: 308px;
+}
+
+.figures {
+    font-family: Comic Sans, Comic Sans MS, cursive;
+    width: 50px;
+    height: 50px;
+    -webkit-border-radius: 7px; 
+    -moz-border-radius: 7px; 
+    border-radius: 7px;
+    border: 2px solid #000;
+    background: #ddd;
+    font-size: 30px;
+    font-weight: 900;
+    text-align: center;
+    margin-left: 6px;
+}
+.figures:focus
+{
+    margin-left: 6px;
+    outline-color: -moz-use-text-color !important; 
+    outline-style: none !important; 
+    outline-width: 0 !important; 
+}
+
+.usersselect {
+    width: 100%;
+    text-align: center;
+    padding: 5px;
+}
+.usersselect:focus
+{
+    outline-color: -moz-use-text-color !important; 
+    outline-style: none !important; 
+    outline-width: 0 !important; 
+}
+

priv/docroot/js/tt.js

  *    http://bitbucket.org/etnt/tt/
  */
 
-// Functions to add text to various parts on the page
-function update_header (hdr) {
-  if (hdr != "")
-    $('#header').text(hdr);
-}
-
-function update_emsg (msg) {
-  if (msg != "")
-    $('#emsg').text(msg);
+function is_int(value){
+  if((parseFloat(value) == parseInt(value)) && !isNaN(parseInt(value))){
+      return true;
+ } else {
+      return false;
+ }
 }
 
 /*
 		  <thead>\
 		    <tr>\
 		      <th scope="col"><span class="winner">Winner</span></td>\
-		      <th scope="col"><span class="looser">Looser</span></td>\
-		      <th scope="col"><span class="figures">Figures</span></td>\
+		      <th scope="col"><span class="looser">Loser</span></td>\
+		      <th scope="col"><span class="figs">Figures</span></td>\
 		      <th scope="col"><span class="date">Date</span></td>\
 		    </tr>\
 		  </thead>\
       'r<-matches' : {
 	'span.winner'  : 'r.winner',
 	'span.looser'  : 'r.looser',
-	'span.figures' : 'r.figures',
+	'span.figs'    : 'r.figures',
 	'span.date'    : 'r.date'
       }
     }
   var template = '<tr class="matchentry">\
 	    <td><span class="winner"></span></td>\
 	    <td><span class="looser"></span></td>\
-	    <td><span class="figures"></span></td>\
+	    <td><span class="figs"></span></td>\
 	    <td><span class="date"></span></td>\
 	      </tr>';
   $('#matchesdata').html(template);
   $('#matches').render(x.data, directive);
   $('tr:even.matchentry').addClass('even');
-  update_header(x.header);
-  update_emsg(x.emsg);
-}
-
-
-/*
- *  U S E R   P A G E
- */
-function render_user(x) {
-  var date = x.data.created_tz.split("T");
-  var user_info = "<p>Nick: " + x.data.nick + "</p>"
-		    + "<p>Score: " + x.data.score + "</p>"
-		    + "<p>Registered: " + date[0] + "</p>";
-  $('#main').html(user_info);
-  update_header(x.header);
-  update_emsg(x.emsg);
-}
-
-function show_user(user) {
-  $.getJSON("/users/" + user, {}, function (x) {
-    render_user(x);
-  });
 }
 
 
 	   type: "POST",
 	   data: args,
 	   success: function () {
-	     update_header("Match successfuly registered.");
+	     show_ranking();
+	     show_matches();
+	     show_new_match();
 	   },
 	   error: function () {
 	     alert("An error happened.");
 	  }
     }
   };
-  var template =
-    '<form id="regform">\
-      <div>\
-	<table id="regtable">\
-	  <thead>\
-	    <tr>\
-	      <th>Winner</th>\
-	      <th>&nbsp;</th>\
-	      <th>Looser</th>\
-	    </tr>\
-	  </thead>\
-	  <tbody>\
-	    <tr>\
-	      <td>\
-		<select id="winner" name="winner">\
-		  <option class="users" value="" ></option>\
-		</select>\
-	      </td>\
-	      <td><span class="mdash">&mdash;</span></td>\
-	      <td>\
-		<select name="looser">\
-		  <option class="users" value="" ></option>\
-		</select>\
-	      </td>\
-	    </tr>\
-	  </tbody>\
-	</table>\
-      <div>\
-	<label for="figures">Figures:</label>\
-	<input type="text" id="figures" name="figures" />\
-      </div>\
-      <div class="submit">\
-        <input type="submit" name="g" value="Submit" id="g" />\
-      </div>\
-    </form>';
+  $('.usersselect').html("<option class=\"users\" value=\"\" ></option>");
+  $('#regform').render(x.data, directive);
 
-    // Populate the DOM with the template
-    $('#main').html(template);
-    // Populate the template with the data
-    $('#regform').render(x.data, directive);
-    // Update other parts of the page
-    update_header('Add a match');
-
-    // Setup the Submit button to do some simple sanity
-    // checks of the figures and then submit the data!
-    $('#regform').submit(function () {
-      var figures = $('#figures').val();
-      if (figures.length > 0) {
-	if (/^(([0-9]|[1][0-1])-([0-9]|[1][0-1]))+(,([0-9]|[1][0-1])-([0-9]|[1][0-1]))*$/.test(figures))
-	  register_score($('#regform').serialize());
-	else
-	  alert("'Figures' has wrong format!");
-      }
-      else
-	register_score($('#regform').serialize());
-
-      return false;
-    });
-
-    // Show the form
-    $('#regform').show();
+  // Setup the Submit button to do some simple sanity
+  // checks of the figures and then submit the data!
+  $('#regform').submit(function () {
+    if ($('#winner').val() == $('#looser').val())
+      alert("Winner and loser are the same players");
+    else {
+      var wfigures = $('#wfigures').val();
+      var lfigures = $('#lfigures').val();
+      if (wfigures.length > 0 && lfigures.length > 0 && is_int(wfigures)
+	&& is_int(lfigures) && parseInt(wfigures) > parseInt(lfigures))
+	    register_score($('#regform').serialize());
+      else alert("'Figures' are not correct");
+    }
+    return false;
+  });
 }
 
 function show_new_match () {
 
     show_ranking();
     show_matches();
+    show_new_match();
 })

src/tt_matches_resource.erl

 create_match(ReqData, Context) ->
     PL = mochiweb_util:parse_qs(wrq:req_body(ReqData)),
     L = [{Key, list_to_binary(proplists:get_value(Key, PL))} 
-         || Key <- ["winner","looser","figures"]],
+         || Key <- ["winner","looser"]],
     Winner = proplists:get_value("winner", PL),
     Looser = proplists:get_value("looser", PL),
+    WFigures = proplists:get_value("wfigures", PL),
+    LFigures = proplists:get_value("lfigures", PL),
+    Figures = list_to_binary(WFigures ++ "-" ++ LFigures),
     update_score_wl(Winner, Looser),
-    tt_couchdb:store_doc([{"type",<<"match">>}|L]),
+    tt_couchdb:store_doc([{"type",<<"match">>}, {"figures", Figures}|L]),
     {true, ReqData, Context}.
 
 update_score_wl(WinnerNick, LooserNick) ->

src/tt_resource.erl

   </head>
   <body>
 <div id=\"wrapper\">
-  <h1><em>PING PONG</em> KLARNA</h1>
+  <h1><em>PING PONG at KLARNA</em></h1>
   <div id=\"topcon\">
     <div id=\"topcon-inner\">
       <h2>Sign up</h2>
                   <div class=\"box-br\">
                     <div class=\"box-bl\">
                       <div class=\"box-tl\">
-                        <h2>User Info</h2>
-                        <h3>05.03.2007</h3>
-                        <p>Even more websites all about website templates on <a href=\"http://www.justwebtemplates.com\">Just Web Templates</a>.</p>
-                        <p class=\"more\"><a href=\"http://www.free-css.com/\">more...</a></p>
+                        <h2>NEW MATCH</h2>
+                        <form id=\"regform\">
+                           <div class=\"result\">
+                              <div class=\"resultselect\">
+                                  <h3 id=\"h3winner\">Winner</h3>
+		                  <select class=\"usersselect\" id=\"winner\" name=\"winner\">
+		                  <option class=\"users\" value=\"\" ></option>
+		                  </select>
+                              </div>
+                              <div class=\"scoreboard\">
+                                  <input class=\"figures\" maxlength=\"2\" type=\"text\" id=\"wfigures\" name=\"wfigures\" />
+                              </div>
+                           </div>
+                           <div id=\"dash\">
+                                  <span class=\"mdash\">&mdash;</span></td>
+                           </div>
+                           <div class=\"result\">
+                              <div class=\"scoreboard\">
+                                  <input class=\"figures\" maxlength=\"2\" type=\"text\" id=\"lfigures\" name=\"lfigures\" />
+                              </div>
+                              <div class=\"resultselect\">
+                                  <h3 id=\"h3loser\">Loser</h3>
+		                  <select class=\"usersselect\" id=\"looser\" name=\"looser\">
+		                  <option class=\"users\" value=\"\" ></option>o
+		                  </select>
+                              </div>
+                           </div>
+                           <div id=\"submit\">
+                             <input type=\"submit\" name=\"g\" value=\"Submit\" id=\"g\" />
+                           </div>
+                         </form>
                       </div>
                     </div>
                   </div>