From 37a76aeab2804e9fc0001922b2151ebd3490babf Mon Sep 17 00:00:00 2001
From: Crystal Prieb <cjprieb@gmail.com>
Date: Thu, 20 Oct 2022 20:01:47 -0500
Subject: [PATCH] add locking ability for words

---
 css/main.css | 38 +++++++++++++++++++++++++++++++++++---
 index.html   | 18 +++++++++++++++++-
 js/main.js   | 30 ++++++++++++++++++++++++++++--
 3 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/css/main.css b/css/main.css
index 334ef8b..11e964c 100755
--- a/css/main.css
+++ b/css/main.css
@@ -18,12 +18,27 @@ h1 {
   background-size: cover;
 }
 
-#theName{
+.name-value{
   font-size: 26px;
   font-weight: 800;
   font-family: serif;
   text-transform: uppercase;
   filter: blur(0px);
+  line-height: 1.3;
+}
+
+#theName {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.name-container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding: 0px 1em;
+  border-radius: 4px;
 }
 
 #description, #definition{
@@ -34,6 +49,23 @@ h1 {
   filter: blur(0px);
 }
 
+.lock {
+  color:rgb(57, 160, 237);
+  margin-top: .5em;
+}
+
+.lock_checked {
+  background-color: rgb(57, 160, 237);
+}
+
+.lock_checked, .lock_checked .lock {
+  color:white;
+}
+
+.lock label {
+  margin-left: 2px;
+}
+
 .generate{
   border: 3px solid rgb(57, 160, 237);
   background: none;
@@ -47,12 +79,12 @@ h1 {
 }
 
 @media only screen and (min-width: 400px){
-  #theName{
+  .name-value{
     font-size: 40px;
 }
 }
 @media only screen and (min-width: 768px){
-  #theName{
+  .name-value{
     font-size: 80px;
 }
 }
diff --git a/index.html b/index.html
index 96bf057..e2e681b 100755
--- a/index.html
+++ b/index.html
@@ -81,7 +81,23 @@ <h1>PRJCT NAMR</h1>
       <span id="hold" class="trnt_text"></span>
     </div>
           <div id="frameworkname">
-            <div id="theName"><span id="theAdj"></span> <span id="theNoun"></span></div>
+            <div id="theName">
+              <div class="name-container lock_checked">
+                <span class="lock">
+                  <input type="checkbox" id="lockAttribute" title="Prevent the attribute from changing" checked />
+                  <label for="lockAttribute" title="Prevent the attribute from changing">Lock</label>
+                </span>
+                <span class="name-value" id="theAdj"></span> 
+              </div>
+              <span class="name-value">&nbsp;</span>
+              <div class="name-container">
+                <span class="lock">
+                  <input type="checkbox" id="lockNoun" title="Prevent the noun from changing" />
+                  <label for="lockNoun" title="Prevent the noun from changing">Lock</label>
+                </span>
+                <span class="name-value" id="theNoun"></span>
+              </div>
+            </div>
             <div id="theMeaning">
               <div id="definition"></div>
               <div id="description"></div>
diff --git a/js/main.js b/js/main.js
index e5fe8b6..c6d45ef 100755
--- a/js/main.js
+++ b/js/main.js
@@ -3,11 +3,25 @@ var adjectives = [];
 var buttons = [];
 var holdon = [];
 
+function setCheckedStyle(checkbox) {
+  console.log("checkbox", checkbox);
+  if (checkbox.checked) {
+    $(checkbox).parent().parent().addClass("lock_checked");
+    // $(checkbox).removeClass("lock_unchecked");
+  }
+  else {
+    // $(checkbox).addClass("lock_unchecked");
+    $(checkbox).parent().parent().removeClass("lock_checked");
+  }
+}
+
 $( document ).ready(function() {
   $("#theName").hide(0);
   $("#frameworkname").hide(0);
   $("#makeName").hide(0);
   $("#hold").text("loading...")
+  $("#lockAttribute").change(function() {setCheckedStyle(this);});
+  $("#lockNoun").change(function() {setCheckedStyle(this);});
   var removeEmptyFilter = function (item) {
     return item.trim().length > 0
   };
@@ -85,9 +99,13 @@ function randomMsg() {
 };
 
 function yolo() {
-  nounlist = nounlist.filter(e => e !== currentNoun);
+  if (currentNoun != undefined) {
+    nounlist = nounlist.filter(e => e !== currentNoun);
+  }
   console.log(nounlist.length);
-  adjectives = adjectives.filter(e => e !== currentAdj);
+  if (currentAdj != undefined) {
+    adjectives = adjectives.filter(e => e !== currentAdj);
+  }
   console.log(adjectives.length);
 }
 
@@ -110,6 +128,10 @@ function define(adj, noun) {
 }
 
 function randomAdj() {
+  var lockAttribute = $("#lockAttribute").is(":checked");
+  console.log("lockAttribute", lockAttribute);
+  if (lockAttribute && typeof currentAdj !== 'undefined') return;
+  
   // extract a adjective
   var randAdj = Math.floor(Math.random() * adjectives.length);
   currentAdj = adjectives[randAdj];
@@ -127,6 +149,10 @@ function randomAdj() {
 }
 
 function randomNoun() {
+  var lockNoun = $("#lockNoun").is(":checked");
+  console.log("lockNoun", lockNoun);
+  if (lockNoun && typeof currentNoun !== 'undefined') return;
+
   // extract a noun
   var randLineNum = Math.floor(Math.random() * nounlist.length);
   currentNoun = nounlist[randLineNum];