Skip to content

Commit

Permalink
bug fixes, RESTful states, cleaned up JSON, nav keys for performing, …
Browse files Browse the repository at this point in the history
…some extra nav links
  • Loading branch information
Xeus committed Apr 3, 2012
1 parent 8435ff8 commit 6a868b2
Show file tree
Hide file tree
Showing 9 changed files with 368 additions and 59 deletions.
4 changes: 2 additions & 2 deletions README
Expand Up @@ -7,12 +7,12 @@ Party game. People get 5 minutes to create rhymes from a prompt of 2 common rap
topics. Then when time's up, someone has to perform the song and should be
judged on his/her flow!

Last update 06 Mar 12: Functional from start to end.
Last update 02 Apr 12: Added some JSON/REST, AJAX updates for rhymes.

TODO:
-random flow made up of past rhymes
-insert choruses
-insert random rappers' rhymes
-add more phat beats (from Raj?)
-karaoke highlighting line-by-line for performance?
-karaoke highlighting line-by-line for performance? (partial)
-hook up to microphone & beat machine & recorder?
7 changes: 5 additions & 2 deletions static/css/kf.css
Expand Up @@ -14,7 +14,7 @@
#karaokeFlow A { text-decoration: none; color: #6D249E;}
#javascript_countdown_time { color: #6D249E; }
#performFlowTitle { text-transform: uppercase; font-size: 25pt; }
.performTD { font-size: 20pt;}
.performTD { font-size: 20pt; }
#submitRhymes { font-size: 30pt; }
#submitRhymes:hover { background: white; color: black; }
.help { color: gray !important; border-size: 0pt !important; background: white !important; font-size: 10pt; }
Expand All @@ -25,12 +25,15 @@
.glow { -webkit-animation-name: bluePulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; }
BUTTON:hover, INPUT[type="submit"]:hover { background: white !important; color: black !important; }
#dialog { font-size: 12pt; font-family: Arial;}
#lyrics { color: black; font-size: 25pt; text-align: justify; font-family: 'Amethysta', serif; text-align: center;}
#lyrics { color: #8C3C19; font-size: 20pt; text-align: justify; font-family: 'Amethysta', serif; text-align: center; line-height: .9em;}
.lyricsCurrent { font-size: 40pt; color: white; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px; }
.lyricsNeighbor { font-size: 35pt; /* color: #4F220E; */ }
#lyricsTable { margin-left: auto; margin-right: auto; }
#flowName { font-size: 20pt;}
#aboutTable { width: 50%;}
#aboutTable TD { font-size: 15pt;}
#adminHeader { margin: auto; display: inline; width: 400px; align: center;}
.showRhymes { font-size: 20pt; }

/* from http://www.zurb.com/playground/radioactive-buttons */
@-webkit-keyframes bluePulse {
Expand Down
4 changes: 4 additions & 0 deletions static/js/keymaster.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 10 additions & 2 deletions views/layout.html
Expand Up @@ -10,6 +10,7 @@
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<link href='/css/kf.css' rel='stylesheet' type='text/css'>
<link type="text/css" href="/css/pepper-grinder/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<SCRIPT TYPE="text/javascript" SRC="/js/keymaster.min.js"></SCRIPT>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script>
</HEAD>
Expand All @@ -21,8 +22,15 @@
</DIV>

<% if (admin == true) { %>
<BR />
<DIV ID="adminHeader"><CENTER>[
<DIV ID="adminHeader"><CENTER>[ ADMIN:
<A HREF="/flows/edit">all flows</A>
| <A HREF="/rhymes/edit">all rhymes</A>
| <A HREF="/stats/edit">stats</A> <!-- TODO: make this work -->
]</CENTER></DIV>
<% } %>

<% if (allLists == true) { %>
<DIV ID="adminHeader"><CENTER>[ LISTS:
<A HREF="/flows">all flows</A>
| <A HREF="/rhymes">all rhymes</A>
| <A HREF="/stats">stats</A>
Expand Down
37 changes: 34 additions & 3 deletions views/perform.html
Expand Up @@ -14,6 +14,8 @@
-->

('j' to highlight next line, 'k' to highlight previous line)

<iframe width="400" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F35694882&amp;auto_play=false&amp;show_artwork=true&amp;color=ff7700"></iframe>

</TD><TD VALIGN="top" ALIGN="center" CLASS="performTD">
Expand All @@ -26,13 +28,15 @@
<BR />

<%
lineCounter = 0;
currentLine = 0;
rhymes2 = rhymes.split(",");
for (var i=0; i<rhymes2.length; i++) {
var rhymesSplit = rhymes2[i].split("|");
for (var j=0; j<rhymesSplit.length; j++) {
%>
<%= rhymesSplit[j] %><BR />
<% } %>
<SPAN TITLE="<%= lineCounter %>" ID="line<%= lineCounter %>" CLASS="<% if (lineCounter == currentLine || lineCounter == 0) { %>lyricsCurrent<% } else if (lineCounter == currentLine - 1 || lineCounter == currentLine + 1) { %>lyricsNeighbor<% } %>"><%= rhymesSplit[j] %></SPAN><BR />
<% lineCounter++; } %>
<HR NOSHADE SIZE=1 COLOR="black">
<% } %>

Expand All @@ -41,8 +45,35 @@
</TD></TR></TABLE>

<script type="text/javascript">

$(function() {
lineCounter = <%= lineCounter %>;
currentLine = <%= currentLine %>;
key('j', function() {
if (currentLine < lineCounter-1) {
lastLine = currentLine - 1;
nextLine = currentLine + 1;
$("#line"+currentLine).removeClass("lyricsCurrent");
$("#line"+lastLine+", #line"+nextLine).removeClass("lyricsNeighbor");
currentLine++;
lastLine = currentLine - 1;
nextLine = currentLine + 1;
$("#line"+currentLine).addClass("lyricsCurrent");
$("#line"+lastLine+", #line"+nextLine).addClass("lyricsNeighbor");
}
});
key('k', function() {
if (currentLine > 0) {
lastLine = currentLine + 1;
nextLine = currentLine - 1;
$("#line"+currentLine).removeClass("lyricsCurrent");
$("#line"+lastLine+", #line"+nextLine).removeClass("lyricsNeighbor");
currentLine--;
lastLine = currentLine + 1;
nextLine = currentLine - 1;
$("#line"+currentLine).addClass("lyricsCurrent");
$("#line"+lastLine+", #line"+nextLine).addClass("lyricsNeighbor");
}
});
$("#submitRhymes").button().click(function() {
window.location = '/perform';
return false;
Expand Down
58 changes: 58 additions & 0 deletions views/rhyme_single_edit.html
@@ -0,0 +1,58 @@
<TABLE ID="bodyTable"><TR><TD VALIGN="top" STYLE="background: ;">

<CENTER>

<FORM NAME="rhymeForm" ID="rhymeForm" METHOD="post" ACTION="/rhymes/update">
<INPUT TYPE="hidden" NAME="rhymeID" VALUE="<%= rhymes.rhymeID %>" />
<TABLE BORDER=0>
<TR><TD ALIGN="right" VALIGN="middle">rhyme/s</TD>
<TD><INPUT TYPE="text" NAME="rhymeBody" ID="rhymeBody" VALUE="<%= rhymes.body %>" CLASS="text ui-widget-content ui-corner-all" SIZE=40 /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">topic #1</TD>
<TD><INPUT TYPE="text" NAME="rhymeTopic1" ID="rhymeTopic1" VALUE="<%= rhymes.topic1 %>" CLASS="text ui-widget-content ui-corner-all" /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">topic #2</TD>
<TD><INPUT TYPE="text" NAME="rhymeTopic2" ID="rhymeTopic2" VALUE="<%= rhymes.topic2 %>" CLASS="text ui-widget-content ui-corner-all" /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">date</TD>
<TD><INPUT TYPE="text" NAME="rhymeDate" ID="rhymeDate" READONLY="true" VALUE="<%= rhymes.date %>" CLASS="text ui-widget-content ui-corner-all" SIZE=35 /></TD></TR>
</TABLE>

<INPUT NAME="updateRhyme" TYPE="submit" ID="updateRhyme" VALUE="update dis rhyme!" CLASS="glow" STYLE="font-size: 17pt;" />

<!-- DIV confirms successful AJAX post msg -->
<DIV ID="updated" CLASS="text ui-widget-content ui-corner-all" STYLE="display: none; background: yellow;"></DIV>

</FORM>

</CENTER>

</TD></TR></TABLE> <!-- /bodyTable -->

<script type="text/javascript">

$(function() {
// loops through all rhymes and gives them click handlers
$('#updateRhyme').click(function(e) {
console.log("Fired");
formData = $('#rhymeForm').serialize();
$.ajax({
url: "/rhymes/update",
type: "POST",
data: formData,
dataType: "json",
success: function(response) {
if (response.status == "OK") {
console.log("Rhyme modified successfully, let's display it.");
$("#updated").html("Updated!");
$("#updated").css("display", "block");
}
},
error : function(error) {
console.log("There was an error updating the rhyme.");
console.log(error);
}
});
e.preventDefault();
return false;
});
});

</script>
42 changes: 22 additions & 20 deletions views/rhymes.html
Expand Up @@ -4,34 +4,36 @@

<TABLE ID="bodyTable"><TR><TD VALIGN="top">

<CENTER>

<UL>
<!-- need to refresh this upon AJAX refresh -->
<% for (var i=0; i<rhymes.length; i++) { %>
<FORM NAME="rhymeForm<%= i %>" ID="rhymeForm<%= i %>" METHOD="post" ACTION="/rhymes/update">
<INPUT TYPE="hidden" NAME="rhymeID" VALUE="<%= rhymes[i].rhymeID %>" />
<TABLE BORDER=0>
<TR><TD ALIGN="right" VALIGN="middle">rhyme/s</TD>
<TD><INPUT TYPE="text" NAME="rhymeBody" ID="rhyme<%= i %>Body" VALUE="<%= rhymes[i].body %>" CLASS="text ui-widget-content ui-corner-all" SIZE=40 /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">topic #1</TD>
<TD><INPUT TYPE="text" NAME="rhymeTopic1" ID="rhyme<%= i %>Topic1" VALUE="<%= rhymes[i].topic1 %>" CLASS="text ui-widget-content ui-corner-all" /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">topic #2</TD>
<TD><INPUT TYPE="text" NAME="rhymeTopic2" ID="rhyme<%= i %>Topic2" VALUE="<%= rhymes[i].topic2 %>" CLASS="text ui-widget-content ui-corner-all" /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">date</TD>
<TD><INPUT TYPE="text" NAME="rhymeDate" ID="rhyme<%= i %>Date" READONLY="true" VALUE="<%= rhymes[i].date %>" CLASS="text ui-widget-content ui-corner-all" SIZE=35 /></TD></TR>
</TABLE>

<INPUT NAME="updateRhyme" TYPE="submit" ID="updateRhyme<%= i %>" VALUE="update dis rhyme!" CLASS="glow" STYLE="font-size: 17pt;" />

</FORM><BR /><HR NOSHADE SIZE=1 COLOR="black"><BR />
<LI><DIV CLASS="showRhymes" ID="rhyme<%= i %>" TITLE="(topic #1: <%= rhymes[i].topic1 %>, topic #2: <%= rhymes[i].topic2 %>, date: <%= rhymes[i].date %>"><%= rhymes[i].body %> <SPAN STYLE="font-size: 8pt; font-family: Arial;">[ <A HREF="" onClick="toggleEdit(<%= i %>, <%= rhymes[i].rhymeID %>); return false;" ID="rhymeLink<%= i %>">edit</A> ]</SPAN>
<DIV ID="rhymeContents<%= i %>" STYLE="display: none;">hi</DIV>
</DIV></LI>
<% } %>

</CENTER>
</UL>

</TD></TR></TABLE> <!-- /bodyTable -->

<script type="text/javascript">

var toggleEdit = function(i, rhymeID) {
if ($("#rhymeLink"+i).html() == "edit") {
$("#rhymeLink" + i).html("hide");
$("#rhymeContents" + i).load("/rhymes/" + rhymeID + "/edit");
$("#rhyme"+i).css("border-style", "dotted");
$("#rhyme"+i).css("border-color", "black");
$("#rhyme"+i).css("border-width", "1px");
}
else {
$("#rhymeLink" + i).html("edit");
$("#rhyme"+i).css("border-width", "0px");
}
$("#rhymeContents" + i).toggle();
}

$(function() {

});

</script>
67 changes: 67 additions & 0 deletions views/rhymes_edit.html
@@ -0,0 +1,67 @@
<CENTER>

<TABLE BORDER=0 CELLPADDING=10><TR><TD VALIGN="middle"><H2>All Da Rhymes.</H2></TD></TR></TABLE><BR />

<TABLE ID="bodyTable"><TR><TD VALIGN="top">

<CENTER>

<!-- creates a new form for each rhyme to be edited -->
<% for (var i=0; i<rhymes.length; i++) { %>
<FORM NAME="rhymeForm<%= i %>" ID="rhymeForm<%= i %>" METHOD="post" ACTION="/rhymes/update">
<INPUT TYPE="hidden" NAME="rhymeID" VALUE="<%= rhymes[i].rhymeID %>" />
<TABLE BORDER=0>
<TR><TD ALIGN="right" VALIGN="middle">rhyme/s</TD>
<TD><INPUT TYPE="text" NAME="rhymeBody" ID="rhyme<%= i %>Body" VALUE="<%= rhymes[i].body %>" CLASS="text ui-widget-content ui-corner-all" SIZE=40 /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">topic #1</TD>
<TD><INPUT TYPE="text" NAME="rhymeTopic1" ID="rhyme<%= i %>Topic1" VALUE="<%= rhymes[i].topic1 %>" CLASS="text ui-widget-content ui-corner-all" /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">topic #2</TD>
<TD><INPUT TYPE="text" NAME="rhymeTopic2" ID="rhyme<%= i %>Topic2" VALUE="<%= rhymes[i].topic2 %>" CLASS="text ui-widget-content ui-corner-all" /></TD></TR>
<TR><TD ALIGN="right" VALIGN="middle">date</TD>
<TD><INPUT TYPE="text" NAME="rhymeDate" ID="rhyme<%= i %>Date" READONLY="true" VALUE="<%= rhymes[i].date %>" CLASS="text ui-widget-content ui-corner-all" SIZE=35 /></TD></TR>
</TABLE>

<INPUT NAME="updateRhyme" TYPE="submit" ID="updateRhyme<%= i %>" VALUE="update dis rhyme!" CLASS="glow" STYLE="font-size: 17pt;" />

<!-- DIV confirms successful AJAX post msg -->
<DIV ID="updated<%= i %>" CLASS="text ui-widget-content ui-corner-all" STYLE="display: none; background: yellow;"></DIV>

</FORM><BR /><HR NOSHADE SIZE=1 COLOR="black"><BR />
<% } %>

</CENTER>

</TD></TR></TABLE> <!-- /bodyTable -->

<script type="text/javascript">

$(function() {
// loops through all rhymes and gives them click handlers
<% for (var i=0; i<rhymes.length; i++) { %>
$('#updateRhyme<%= i %>').click(function(e) {
console.log("Fired");
formData<%= i %> = $('#rhymeForm<%= i %>').serialize();
$.ajax({
url: "/rhymes/update",
type: "POST",
data: formData<%= i %>,
dataType: "json",
success: function(response) {
if (response.status == "OK") {
console.log("Rhyme modified successfully, let's display it.");
$("#updated<%= i %>").html("Updated!");
$("#updated<%= i %>").css("display", "block");
}
},
error : function(error) {
console.log("There was an error updating the rhyme.");
console.log(error);
}
});
e.preventDefault();
return false;
});
<% } %>
});

</script>

0 comments on commit 6a868b2

Please sign in to comment.