Twine Version: 2.10.0.0 Harlowe Version 3.3.9
Hello everyone thanks for taking the time to help and read my post. So basically I am trying to create a minigame which involves a mechanical lock that the player must enter the correct code in order to move on to the next passage. I made a code for it and made the necessary passages. However, when I enter the correct code and press enter instead of sending me to my passage titled “Door” it sends me to a new tab in my browser with a white background with plain black text saying (goto: “Door”) can anyone please help me fix this code so it functions correctly? If you need more details I’ll be happy to provide them but here is my code in question:
(set: $code to "")
(set: $correctCode to "12169125")
<style>
.lock-container {
width: 300px;
margin: 20px auto;
background: #000;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.display {
background: #222;
color: #0f0;
font-family: 'Courier New', monospace;
padding: 10px;
margin-bottom: 15px;
text-align: center;
font-size: 24px;
letter-spacing: 5px;
border: 2px solid #333;
height: 40px;
line-height: 40px;
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 10px;
}
.key {
background: #222;
color: #0f0;
border: none;
padding: 15px;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
border-radius: 5px;
}
.key:hover {
background: #333;
transform: scale(0.95);
}
.key:active {
background: #444;
}
.error-message {
color: red;
text-align: center;
margin-top: 10px;
opacity: 0;
transition: opacity 0.5s;
font-weight: bold;
font-size: 18px;
}
.error-message.show {
opacity: 1;
}
</style>
<div class="lock-container">
<div class="display" id="codeDisplay">--------</div>
<div class="keypad">
<button class="key" data-value="1">1</button>
<button class="key" data-value="2">2</button>
<button class="key" data-value="3">3</button>
<button class="key" data-value="4">4</button>
<button class="key" data-value="5">5</button>
<button class="key" data-value="6">6</button>
<button class="key" data-value="7">7</button>
<button class="key" data-value="8">8</button>
<button class="key" data-value="9">9</button>
<button class="key" data-value="clear">C</button>
<button class="key" data-value="0">0</button>
<button class="key" data-value="enter">E</button>
</div>
<div class="error-message" id="errorMessage">Nope...</div>
</div>
<script>
$(document).ready(function() {
const display = document.getElementById('codeDisplay'); // The display for the entered code
const errorMessage = document.getElementById('errorMessage'); // The error message element
// Local variable to handle code input
let enteredCode = "";
$('.key').on('click', function() {
const value = $(this).data('value'); // Get the value of the button pressed
if (value === 'clear') {
// Clear the entered code
enteredCode = "";
display.textContent = "--------"; // Reset the display
return;
}
if (value === 'enter') {
// Check the entered code against the correct code
if (enteredCode === "12169125") {
// Navigate to the next passage using Harlowe's link system
window.location.href = "javascript:void(0)";
document.write('(goto: "Door")');
} else {
// Show an error message if the code is incorrect
errorMessage.classList.add('show');
setTimeout(() => errorMessage.classList.remove('show'), 2000);
enteredCode = ""; // Reset the code
setTimeout(() => display.textContent = "--------", 500);
}
return;
}
// Append the entered key to the code if it's less than 8 characters
if (enteredCode.length < 8) {
enteredCode += value;
display.textContent = enteredCode.padEnd(8, "-"); // Pad with dashes
}
});
});
</script>
