dbpc/index.html

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daily Blackout Poetry Challenge</title>

<!--

Daily Blackout Poetry Challenge

html + Javascript

This presents a "page" from a novel and lets you make a blackout poem with it
using html2canvas you can save your poem as an image
you can copy the words below

texts are public domain from Project Gutenberg - https://www.gutenberg.org/
content licensed CC-BY-SA https://creativecommons.org/licenses/by-sa/4.0/
code license GPLv3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
Code repository: 
Written by Jacob Haddon https://jacobhaddon.com

this file uses:

* jQuery - https://jquery.com/ (MIT)
* html2canvas - https://html2canvas.hertzen.com/ (MIT)
* FileSaver - https://github.com/eligrey/FileSaver.js (MIT)

-->


<link rel="stylesheet" href="style.css">

<script src="jquery-3.7.1.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="FileSaver.min.js"></script>
<script src="test3.js"></script>

<script>

// console.log(book.title);
// console.log(book.pages[14][6]);

$(document).ready(function(){
// 	let text = $("#spina").html().split(" ");
// 	console.log(text);
	
	// Make the header with the book info
	$("#poem_header").html("<h2>" + book.title + "</h2>\n\n<h3>" + book.author + "</h3>\n");
	
	// Add in the page, change the underscores to italics
	$("#spina").html(book.pages[14][6].replace(/(_([a-z0-9]+)_)/ig, "<i>$2</i>"));
	
	$("#spina p").each(function( index ) {
		let text = $( this ).html().split(" ");
		let newText = [];
		$.each( text , function(index, value ){
			newText[index] = "<span>" + value + "</span>";
// 			console.log("index:" + index + " <span>" + value + "</span>")
		}); // each text
		$( this ).html(newText.join(" "));
// 		console.log(newText.join(" "));
	}); // each p
	
	
		$("#spina p span").each(function( index ) {
		
		
		}); // each p
		
	$("#lock").click(function(){
		$("#spina").toggleClass("unlock");
	}); // lock button click 
	
	$("#screen").click(function(){
		html2canvas(document.getElementById('poem'), {
   			scale: 3
		}).then(function(canvas) {
    		// Export the canvas to its data URI representation
//     		var base64image = canvas.toDataURL("image/png");
// 
//     		// Open the image in a new window
//     		window.open(base64image , "_blank");
    		    // Export canvas as a blob 
		canvas.toBlob(function(blob) {
        // Generate file download
        window.saveAs(blob, "yourwebsite_screenshot.png");
    });
		});
	}); // screen button click 

	// change for composition view
	$("#compose").click(function(){
		$("#spina").toggleClass("unlock");
		$("#spina").toggleClass("done");
		$( "#spina p span.click" ).toggleClass("clickDone");
		const today = Date(Date.now());
		todayFormatted = today.toString();
	
		$("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>"; 
	}); // compose 
	
	// reset everything back 
	$("#clear").click(function(){
		$("#spina").removeClass("done");
		$( "#spina p span.click" ).removeClass("click");
		$("#byline").html("");
		$("#spina").addClass("unlock");
	}); // clear 
// 	$("help").hide();
	
	// show help section
	$(".helpbtn").click(function(){
  		$(".help").toggle();
	}); // helpbtn toggle 
	
	// copy text from word bin
	$("#copy_text").click(function(){
		navigator.clipboard.writeText($("#poem_list").text());
	}); // copy text 
	 
	 // change the color of a clicked word; add/remove clicked word to list 
	$(document).on('click', "#spina.unlock p span", function(e){
// 	$("#spina.unlock p span").click(function(){
		$( this ).toggleClass("click");
		let list = "";
		$("#spina p span.click").each(function(index) {
			list += " " + $(this).text();	
		}); //poem 
		// Add to the list, but strip out punctuation 
// 		console.log(list.replace(/[^a-z0-9 ]+/ig, ""));
		$("#poem_list").html(list.replace(/[^a-z0-9 ]+/ig, ""));
	}); //spina click 
}); // document ready

</script>

</head>
<body>

<header>
	<h1>Daily <span class="purple">Blackout</span> Poetry Challenge</h1>
	
	<p>Your daily blackout poetry challenge! Make a poem, save the poem, share the poem! (Tag the poem: #dailyBlackoutPoetryChallenge)</p>

	<p>Click on a word to select it, click on it again to unselect. When you’ve found your poem hit Blackout! Get a screen shot and copy the words below!</p>
</header>

<nav>
	<button class="helpbtn">Help</button> - <button id="lock">Lock</button> - <button id="compose">Blackout!</button> - <button id="clear">Start Over</button> - <button id="screen">Save as image</button>
</nav>

<div id="poem_header">
	<h2>Invaders from the Dark</h2>
	<h3>Greye La Spina</h3>
</div>

<main id="poem">

	<div id="spina" class="unlock">

		<p>I ascertained that Miss Delorme was a responsible person, quite able and willing to defray the costs of printing her book, in case it proved to be out of the line of the regular publishing houses. I arranged to visit her home on June 18th, an easy matter, as I found I could get there by subway. On June 18th, therefor, I walked across the fields to the great wall which she had described in her letters, and rang the bell of the bronze gate. From that moment, I began to realize what Miss Delorme meant when she wrote that she feared for the safety of her manuscript. </p>

		<p>Even as I stood there waiting, things started to happen in a most bewildering fashion. I heard somebody throw up a window on a side of the house (to my right), and then there came a woman&#8217;s scream, which sounded to me more angry than fearful. The scream was followed by a heavy, metallic clang upon the pavement just around the corner from where I stood. I left the gate and ran in the direction of the noise. </p>

		<p>On the sidewalk lay a black tin box as is often used to preserve papers of importance. It was dented badly where it had struck the pavement. I picked it up and then turned my eyes toward the windows above me. </p>

		<p>And elderly woman stood at the open window nearest the corner of the house, holding with both hands to the window-frame at either side of her. Although she appeared to be alone, I received a strong impression that she was being pulled from behind, for she was struggling as if with all her power to maintain her position there. As I looked up, the tin box in my hand, she called to me anxiously. </p>

		<p>&#8220;Who are you?&#8221;</p>

		<p>I told her. </p>

		<p>&#8220;Thank God you came in time!&#8221; She cried excitedly. &#8220;Take the box and get away from her as quickly as you can. Don&#8217;t let it out of your sight until it has been printed and the books distributed. You&#8217;ll understand why, when you&#8217;ve read it. Never mind about me! My work is done!&#8221;</p>

		<p>As the last words were flung down at me, she disappeared backward into the room, as if pulled there by invisible hands. </p>

	</div>

	<div id="byline"></div>
	
</main>

<section>
	<h1>Copy Your Words</h1>
	<p>Copy the words you found here for alt-text, editing and archive! (Remember we don’t keep anything, so once you close this page, this poem is gone!)</P>
	<button id="copy_text">Copy</button>
	<div id="poem_list"></div>
</section>

<hr>
	
<footer>
	<p>This site made with <a href="https://jquery.com/">jQuery</a>, PHP and <a href="https://www.barebones.com/products/bbedit/">BBEdit</a> with help from <a href="https://espressoapp.com/">Espresso</a>.</p>
	<p><a href="https://code.jacobhaddon.com/jake/smhn">Code</a> by Jacob Haddon - license <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3.0</a> - <a href="https://Apokrupha.com/BlackOut">Apokrupha.com/Blackout</a></p>
</footer>

<hr>

<div class="helpbox help">
	<button class="helpbtn">Close</button>
</div>

<div id="help" class="help">

	<div class="helpwords">

		<h1>Help</h1>

		<p>The challenge is simple&#8212;select words from this page of text and find a poem. From there you can save it as an image and share it. </p>

		<p>You can copy the text below the page and use it as a starting point to write your own poem. </p>

		<p>You can make as many poems as you want each day with the same page. So don’t worry about ‘messing up.’</p>

		<p>The page will be new each day. We have a bunch of different titles (see the list!). The pages are chosen at random, which means they will vary in content, which is a part of the challenge for you. </p>

		<p>Make your posts with this hashtag so we can see you! </p>

		<h1>Buttons</h1>

		<h2>Start Over</h2>

		<p>This will reset everything back to the start. There is no undo! </p>

		<h2>Blackout!</h2>

		<p>This inverts your page, blacking out what you didn’t choose, showing only what you did. It is now ready to be saved as an image!</p>

		<h2>Save as Image</h2>

		<p>This will save just the page portion of the site as a PNG file. </p>

		<h1>What can I do with these poems / images / things</h1>

		<p>Anything you want. </p>

		<p>The text from these books is in the public domain, and you are free to use, remake, remix any way you want. </p>

		<p>The images are yours and you make do what you wish. If you love us, let people know. But attribution is not required. </p>

		<h1>Privacy</h1>

		<p>We do not track you. We do not collect any data. We do not save copies of your poems. The Javascript libraries and fonts are self-hosted to prevent others from using them to track you. </p>

		<p>The only way we will know if you use our site is if you tell us!</p>

		<h1>Contact</h1>

		<p>webmaster@ </p>

		<p>We are intolerant of intolerance. If you see something hateful, transphobic, homophobic, racist, or the like, let us know.</p>

		<p>We didn’t write any of the pages you see. While we do our best to pick works that don’t have hateful or hurtful contexts, that doesn’t mean that something could slip through. </p>

		<p>If you see something, tell us, we will make it go away.</p>

		<h1>Notes on Mobile</h1>

		<p>The DBPC will work on your phone, but with some caveats. The screen shots are based on the actual size of the screen being used. </p>

		<p>For best results, turn your phone landscape before taking the screenshot. </p>

		<h1>Note on Poems!</h1>

		<p>Since each day presents a limited canvas it is completely possible that two people will have the same, or very similar, words selected. That’s ok! This is a game to start your mind working. Your poem is still your poem even if someone else found it too! </p>
	
	</div>
	
</div>

</body>
</html>