Add passphrase generator

junderw · junderw · commit d6ef84a09fab · 2025-05-18T16:05:47.000+09:00
diff --git a/jp_diceware.html b/jp_diceware.html
@@ -12,14 +12,15 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
       background: #f5f5f5;
     }
 
     main {
       width: 80%;
       max-width: 600px;
       text-align: center;
+      margin-top: 2rem;
     }
 
     h1 {
@@ -52,6 +53,23 @@
       font-family: monospace;
       font-size: 1.25rem;
     }
+
+    .passphrase-section {
+      margin-top: 2rem;
+      text-align: center;
+    }
+
+    .passphrase-options label {
+      margin-right: 1rem;
+      font-size: 1.1rem;
+    }
+
+    #passphrase {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-top: 1rem;
+      word-wrap: break-word;
+    }
   </style>
 </head>
 <body>
@@ -63,10 +81,22 @@ <h1>🎲 Word Roller</h1>
     <button onclick="rollWords()">Roll!</button>
   </div>
   <div class="word-list" id="result">Loading wordlist...</div>
+
+  <div class="passphrase-section">
+    <h2>Passphrase</h2>
+    <div class="passphrase-options">
+      <label><input type="radio" name="delimiter" value=" " checked> space</label>
+      <label><input type="radio" name="delimiter" value="."> period</label>
+      <label><input type="radio" name="delimiter" value="-"> hyphen</label>
+      <label><input type="radio" name="delimiter" value=","> comma</label>
+    </div>
+    <div id="passphrase"></div>
+  </div>
 </main>
 
   <script>
     let csvData = [];
+    let lastWords = [];
 
     // Load the CSV when the page loads
     fetch('./wordlist.csv')
@@ -104,6 +134,12 @@ <h1>🎲 Word Roller</h1>
       return shuffled;
     }
 
+    function updatePassphrase() {
+      const delimiter = document.querySelector('input[name="delimiter"]:checked').value;
+      const romajiWords = lastWords.map(row => row.split(',')[3]);
+      document.getElementById('passphrase').textContent = romajiWords.join(delimiter);
+    }
+
     function rollWords() {
       const resultEl = document.getElementById('result');
       const num = parseInt(document.getElementById('numWords').value);
@@ -119,16 +155,23 @@ <h1>🎲 Word Roller</h1>
       }
 
       // Shuffle and select random entries
-      const shuffled = secureShuffle(csvData).slice(0, num);
+      lastWords = secureShuffle(csvData).slice(0, num);
 
-      // Extract columns 2 and 4
-      const output = shuffled.map(row => {
+      // Extract columns 2, 3, and 4 for display
+      const output = lastWords.map(row => {
         const cols = row.split(',');
         return `${cols[1]}  -  ${cols[2]}  -  ${cols[3]}`;
       }).join('\n');
 
       resultEl.textContent = output;
+
+      updatePassphrase();
     }
+
+    // Update passphrase when delimiter changes
+    document.querySelectorAll('input[name="delimiter"]').forEach(radio => {
+      radio.addEventListener('change', updatePassphrase);
+    });
   </script>
 </body>
 </html>
