updated meme-fodder selection rules

public/assets/js/claimPublish.js

@@ -137,8 +137,7 @@ socket.on('publish-complete', function(msg){
 	var publishResults;
 	var directUrl = '/' + msg.name + '/' + msg.result.claim_id;
 	// build new publish area
-	publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! Go ahead, share it with the world!</p>';
+	publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></p>';
-	publishResults += '<p>Check it out, here: <a target="_blank" href="' + directUrl + '">view it here!</a></p>';
 	publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
 	publishResults += '<a href="/"><button>Reload</button></a></p>';
 	// update publish area

public/assets/js/memeDraw.js

@@ -22,6 +22,18 @@ img.onload = function() {
 	drawMeme()
 }
 
+function newCanvas(image){
+	// hide start image
+	img = image;
+	// get dimensions of the start img
+	canvasHeight = canvasWidth * (img.height / img.width);
+	// size the canvas
+	canvas.width = canvasWidth;
+	canvas.height = canvasHeight;
+	// draw the meme
+	drawMeme()
+}
+
 // if the text changes, re-draw the meme
 topText.addEventListener('keyup', drawMeme);
 bottomText.addEventListener('keyup', drawMeme);
@@ -40,14 +52,14 @@ function drawMeme() {
 	var text1 = topText.value;
 	text1 = text1.toUpperCase();
 	x = canvasWidth / 2;
-	y = 0;
+	y = 5;
 
 	wrapText(ctx, text1, x, y, canvasWidth, fontSize, false);
 
 	ctx.textBaseline = 'bottom';
 	var text2 = bottomText.value;
 	text2 = text2.toUpperCase();
-	y = canvasHeight;
+	y = canvasHeight - 5;
 
 	wrapText(ctx, text2, x, y, canvasHeight, fontSize, true);
 

public/assets/js/memePublish.js

@@ -116,8 +116,7 @@ socket.on('publish-complete', function(msg){
 	var publishResults;
 	var directUrl = '/' + msg.name + '/' + msg.result.claim_id;
 	// build new publish area
-	publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! Go ahead, share it with the world!</p>';
+	publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></p>';
-	publishResults += '<p>Check it out, here: <a target="_blank" href="' + directUrl + '">view it here!</a></p>';
 	publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
 	publishResults += '<a href="/"><button>Reload</button></a></p>';
 	// update publish area

views/partials/memeFodderMaker.handlebars

@@ -7,9 +7,8 @@
 			<div class="row">
 				<div class="col-md-12">
 					<h3>Congratulations, you found the /meme-fodder game</h3>
-					<p>Here's how it's played...</p>
+					<p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below.  Got a masterpiece? <a href="https://twitter.com/hashtag/MemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
-					<p>Create a meme based on the current <i>lbry://meme-fodder</i> claim using the tools below.  Got a masterpiece? <a href="https://twitter.com/hashtag/MemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
+					<p>Spee.ch/meme-fodder/play uses the free, public images at the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
-					<p><i>Spee.ch/meme-fodder/play</i> will always use the public, free image that owns the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
 				</div>
 			</div>
 			<div class="row">

views/partials/memeFodderResults.handlebars

@@ -6,14 +6,13 @@
 		<div class="card-block" id="publish-active-area">
 			<div class="row">
 				<div class="col-md-12">
-					<p>Below are some of the most recent images that have been fuel for our enjoyment on /meme-fodder</p>
+					<p>Below are the images published to /meme-fodder.  Click one to choose it as your canvas.</p>
 				</div>
 			</div>
 			<div class="row">
 			{{#each claims}}
 				<div class="col-md-3">
-					<a href="/{{this.name}}/{{this.claim_id}}">
+					<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" onclick="newCanvas(this)"/>
-					<img class="all-claims-img" src="/{{this.name}}/{{this.claim_id}}" /></a>
 				</div>
 				<hr>
 			{{/each}}