jake/dbpc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
Jacob Haddon 2024-03-12 21:16:51 -04:00
parent e52846a08f
commit faaeb2633b
2 changed files with 58 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daily Blackout Poetry Challenge</title> <title>Daily Blackout Poetry Challenge</title>
<!-- <!--
@ -30,7 +31,6 @@ this file uses:
--> -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="jquery-3.7.1.min.js"></script> <script src="jquery-3.7.1.min.js"></script>
@ -44,77 +44,65 @@ this file uses:
// console.log(book.pages[14][6]); // console.log(book.pages[14][6]);
$(document).ready(function(){ $(document).ready(function(){
// let text = $("#spina").html().split(" ");
// console.log(text);
// Make the header with the book info // Make the header with the book info
$("#poem_header").html("<h2>" + book.title + "</h2>\n\n<h3>" + book.author + "</h3>\n"); $("#poem_header").html("<h2>" + book.title + "</h2>\n\n<h3>" + book.author + "</h3>\n");
// Add in the page, change the underscores to italics // Add in the page, change the underscores to italics
$("#spina").html(book.pages[14][6].replace(/(_([a-z0-9]+)_)/ig, "<i>$2</i>")); $("#spina").html(book.pages[14][6].replace(/(_([a-z0-9]+)_)/ig, "<i>$2</i>"));
// format the text with span tags
$("#spina p").each(function( index ) { $("#spina p").each(function( index ) {
let text = $( this ).html().split(" "); let text = $( this ).html().split(" ");
let newText = []; let newText = [];
$.each( text , function(index, value ){ $.each( text , function(index, value ){
newText[index] = "<span>" + value + "</span>"; newText[index] = "<span>" + value + "</span>";
// console.log("index:" + index + " <span>" + value + "</span>")
}); // each text }); // each text
$( this ).html(newText.join(" ")); $( this ).html(newText.join(" "));
// console.log(newText.join(" "));
}); // each p }); // each p
// lock the page to prevent edits
$("#spina p span").each(function( index ) {
}); // each p
$("#lock").click(function(){ $("#lock").click(function(){
$("#spina").toggleClass("unlock"); $("#spina").toggleClass("unlock");
}); // lock button click }); // lock button click
$("#screen").click(function(){ // make a screenshot
html2canvas(document.getElementById('poem'), { $("#screen").click(function() {
scale: 3 html2canvas(document.getElementById('poem'), {
scale: 3
}).then(function(canvas) { }).then(function(canvas) {
// Export the canvas to its data URI representation canvas.toBlob(function(blob) {
// var base64image = canvas.toDataURL("image/png"); window.saveAs(blob, "yourwebsite_screenshot.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 }); // screen button click
// change for composition view // change for composition view
$("#compose").click(function(){ $("#blackout").click(function() {
$("#spina").toggleClass("unlock"); $("#spina").toggleClass("unlock");
$("#spina").toggleClass("done"); $("#spina").toggleClass("done");
$( "#spina p span.click" ).toggleClass("clickDone"); $("#spina p span.click").toggleClass("clickDone");
// get today and format
const today = Date(Date.now()); const today = Date(Date.now());
todayFormatted = today.toString(); todayFormatted = today.toString();
$("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>";
$(this).text(function(i, text){ // add the byline
return text === "Blackout!" ? "Un-Blackout!" : "Blackout!"; $("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>";
})
}); // compose // toggle the text on the button
$(this).text(function(i, text) {
return text === "Blackout!" ? "Un-Blackout!": "Blackout!";
});
}); // blackout button click
// reset everything back // reset everything back
$("#clear").click(function(){ $("#clear").click(function(){
$("#spina").removeClass("done"); $("#spina").removeClass("done");
$( "#spina p span.click" ).removeClass("click"); $("#spina p span.click").removeClass("click");
$("#byline").html(""); $("#byline").html("");
$("#poem_list").html(""); $("#poem_list").html("");
$("#spina").addClass("unlock"); $("#spina").addClass("unlock");
}); // clear }); // clear button click
// $("help").hide();
// show help section // show help section
$(".helpbtn").click(function(){ $(".helpbtn").click(function(){
@ -127,25 +115,31 @@ $(document).ready(function(){
}); // copy text }); // copy text
$("#copy_text_meta").click(function(){ $("#copy_text_meta").click(function(){
// get today and format it
const today = Date(Date.now()); const today = Date(Date.now());
todayFormatted = today.toString(); todayFormatted = today.toString();
// add the meta to the copyed text
var poem_meta = "#dailyBlackoutPoetryChallenge\n\n" + $("#poem_list").text() + "\n\n" + book.title + " - " + todayFormatted; var poem_meta = "#dailyBlackoutPoetryChallenge\n\n" + $("#poem_list").text() + "\n\n" + book.title + " - " + todayFormatted;
navigator.clipboard.writeText(poem_meta); navigator.clipboard.writeText(poem_meta);
}); // copy text }); // copy text w/meta
// change the color of a clicked word; add/remove clicked word to list // change the color of a clicked word; add/remove clicked word to list
$(document).on('click', "#spina.unlock p span", function(e){ $(document).on('click', "#spina.unlock p span", function(e){
// $("#spina.unlock p span").click(function(){
// add the class to the clicked word
$( this ).toggleClass("click"); $( this ).toggleClass("click");
// make the list of words
let list = ""; let list = "";
$("#spina p span.click").each(function(index) { $("#spina p span.click").each(function(index) {
list += " " + $(this).text(); list += " " + $(this).text();
}); //poem }); //poem
// Add to the list, but strip out punctuation // 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, "")); $("#poem_list").html(list.replace(/[^a-z0-9 ]+/ig, ""));
}); //spina click }); //spina click
}); // document ready }); // document ready
</script> </script>
@ -161,41 +155,15 @@ $(document).ready(function(){
<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> <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> </header>
<div id="poem_header"> <div id="poem_header"></div>
<h2>Invaders from the Dark</h2>
<h3>Greye La Spina</h3>
</div>
<nav> <nav>
<button class="helpbtn btn btn-mn">Help</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="compose" class="btn btn-mn">Blackout!</button> - <button id="screen" class="btn btn-mn">Save as image</button> <button class="helpbtn btn btn-mn">Help</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="blackout" class="btn btn-mn">Blackout!</button> - <button id="screen" class="btn btn-mn">Save as image</button>
</nav> </nav>
<main id="poem"> <main id="poem">
<div id="spina" class="unlock"></div>
<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> <div id="byline"></div>
</main> </main>
<section> <section>
@ -209,21 +177,18 @@ $(document).ready(function(){
<div id="poem_list"></div> <div id="poem_list"></div>
</section> </section>
<footer> <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>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> <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> </footer>
<!--Help Section-->
<div id="help" class="help"> <div id="help" class="help">
<div class="help btn-hlp-bx">
<button class="btn btn-hlp helpbtn">Close</button> <div class="help btn-hlp-bx">
</div> <button class="btn btn-hlp helpbtn">Close</button>
</div>
<div class="helpwords"> <div class="helpwords">

39
style.css
View File

@ -15,21 +15,15 @@ font-family: "lora";
src: local("Lora"), src: local("Lora"),
url("fonts/Lora/webfonts/Lora-Regular.woff2") format('woff2'), url("fonts/Lora/webfonts/Lora-Regular.woff2") format('woff2'),
url("fonts/Lora/variable/Lora-VariableFont_wght.ttf") format('truetype'); url("fonts/Lora/variable/Lora-VariableFont_wght.ttf") format('truetype');
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
}
@font-face {
font-family: "brygada";
src: local("Brygada1918"),
url("fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf") format('truetype');
} }
@font-face { @font-face {
font-family: "lora"; font-family: "lora";
src: local("Lora"), src: local("Lora"),
url("fonts/Lora/webfonts/Lora-Italic.woff2") format('woff2'), url("fonts/Lora/webfonts/Lora-Italic.woff2") format('woff2'),
url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf"); url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf")format('truetype');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@ -51,6 +45,10 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
.purple {
color: RebeccaPurple;
}
.help { .help {
display: none; display: none;
} }
@ -58,11 +56,11 @@ a:hover {
/* Styles for the help section of the site */ /* Styles for the help section of the site */
#help { #help {
background-color: black;
color: white; color: white;
position: absolute; position: absolute;
top: 0%; top: 0%;
left: 0%; left: 0%;
background-color: black;
width: 100%; width: 100%;
} }
@ -76,13 +74,13 @@ a:hover {
} }
/* styles for the 'page */ /* styles for the 'page */
#spina { #spina {
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
border-style: solid;
padding: 10%; padding: 10%;
border-style: solid;
border-width: 1px; border-width: 1px;
/*background-color: #fdf8e9;*/
} }
#byline { #byline {
@ -91,18 +89,17 @@ a:hover {
} }
#poem_list { #poem_list {
border: 2px solid RebeccaPurple;
min-height: 75px; min-height: 75px;
border: 2px solid RebeccaPurple;
padding: 50px 5% 5%; padding: 50px 5% 5%;
} }
#copy_buttons { #copy_buttons {
float: right; float: right;
} }
.click { .click {
background-color: Plum; background-color: Plum;
/*background-color: RebeccaPurple;*/
/*color: #ffffff;*/
} }
/* Styles for the buttons */ /* Styles for the buttons */
@ -119,11 +116,10 @@ a:hover {
background-color: RebeccaPurple; background-color: RebeccaPurple;
color: #ffffff; color: #ffffff;
} }
.btn-mn:hover { .btn-mn:hover {
/* background-color: Plum; background-color: black;
color: #000000;*/ color: white;
background-color: black;
color: white;
} }
.btn-hlp-bx { .btn-hlp-bx {
@ -146,7 +142,6 @@ color: white;
.clickDone { .clickDone {
background-color: white; background-color: white;
padding: 2px; padding: 2px;
color: black; color: black;
} }
@ -156,7 +151,3 @@ color: white;
/*border: 10px solid black;*/ /*border: 10px solid black;*/
} }
.purple {
color: RebeccaPurple;
}