mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-21 11:18:08 +00:00
Add Notes Minigame enhancements: Integrate new notepad assets and styles, update minigame logic for improved navigation and observation editing. Introduce responsive design elements and ensure inventory integration for the notepad. Refactor existing code for better maintainability and user experience.
This commit is contained in:
Z. Cliffe Schreuders
319
css/notes.css
Normal file
319
css/notes.css
Normal file
@@ -0,0 +1,319 @@
|
||||
/* Notes Minigame Styles */
|
||||
|
||||
/* Container styles */
|
||||
.notes-minigame-container {
|
||||
width: 90%;
|
||||
height: 85%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.notes-minigame-container {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.notes-minigame-game-container {
|
||||
max-width: 100%;
|
||||
padding: 1% 10% 6% 15%; /* Reduce padding on smaller screens */
|
||||
}
|
||||
|
||||
.notes-minigame-text-box {
|
||||
margin: 2% 4% 6% 8%;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.notes-minigame-observation-container {
|
||||
margin: 2% 4% 6% 8%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Game container */
|
||||
.notes-minigame-game-container {
|
||||
width: 100%;
|
||||
max-width: min(90vw, 90vh * (165/205)); /* Scale based on smaller dimension */
|
||||
position: relative;
|
||||
margin: 0 auto; /* Centered with no top margin */
|
||||
}
|
||||
|
||||
/* Notepad background container */
|
||||
.notes-minigame-notepad {
|
||||
width: 100%;
|
||||
aspect-ratio: 165 / 205; /* Match notepad image dimensions */
|
||||
background-image: url('../assets/mini-games/notepad.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.notes-minigame-content-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 2% 12% 8% 18%;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
overflow: auto; /* Allow scrolling if content is too long */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Text box container */
|
||||
.notes-minigame-text-box {
|
||||
margin: 3% 6% 8% 10%;
|
||||
padding: 15px;
|
||||
background: #fefefe;
|
||||
border: 4px solid #ddd;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0,0,0,0.1),
|
||||
inset 0 1px 0 rgba(255,255,255,0.8);
|
||||
position: relative;
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
/* Celotape effect */
|
||||
.notes-minigame-celotape {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
height: 16px;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255,255,255,0.9) 0%,
|
||||
rgba(255,255,255,0.7) 20%,
|
||||
rgba(255,255,255,0.9) 40%,
|
||||
rgba(255,255,255,0.7) 60%,
|
||||
rgba(255,255,255,0.9) 80%,
|
||||
rgba(255,255,255,0.7) 100%);
|
||||
border: 4px solid rgba(200,200,200,0.8);
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0,0,0,0.1),
|
||||
inset 0 2px 0 rgba(255,255,255,0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Binder holes effect */
|
||||
.notes-minigame-binder-holes {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.notes-minigame-binder-hole {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #666;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
/* Note title */
|
||||
.notes-minigame-title {
|
||||
margin: 0 6% 3% 10%;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #3498db;
|
||||
text-underline-offset: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Note text content */
|
||||
.notes-minigame-text {
|
||||
margin-left: 30px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
color: #333;
|
||||
font-family: 'VT323', monospace;
|
||||
}
|
||||
|
||||
/* Observation container */
|
||||
.notes-minigame-observation-container {
|
||||
margin: 3% 6% 8% 10%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Observation text */
|
||||
.notes-minigame-observation {
|
||||
font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
border: 4px dashed #ccc;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.notes-minigame-observation:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.notes-minigame-observation.empty {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Edit button */
|
||||
.notes-minigame-edit-btn {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: 4px solid #2980b9;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.notes-minigame-edit-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
/* Navigation container */
|
||||
.notes-minigame-nav-container {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Search input */
|
||||
.notes-minigame-search {
|
||||
padding: 8px 12px;
|
||||
border: 4px solid #555;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: 'VT323', monospace;
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Navigation buttons */
|
||||
.notes-minigame-nav-button {
|
||||
background: #95a5a6;
|
||||
color: white;
|
||||
border: 4px solid #7f8c8d;
|
||||
padding: 8px 15px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.notes-minigame-nav-button:hover {
|
||||
background: #7f8c8d;
|
||||
}
|
||||
|
||||
/* Note counter */
|
||||
.notes-minigame-counter {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: 4px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
/* Action buttons container */
|
||||
.notes-minigame-buttons-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
/* Edit interface styles */
|
||||
.notes-minigame-edit-textarea {
|
||||
width: calc(100% - 20px); /* Account for padding */
|
||||
min-height: 60px;
|
||||
font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
color: #666;
|
||||
border: 4px solid #3498db;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notes-minigame-edit-buttons {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.notes-minigame-save-btn {
|
||||
background: #2ecc71;
|
||||
color: white;
|
||||
border: 4px solid #27ae60;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: 'VT323', monospace;
|
||||
}
|
||||
|
||||
.notes-minigame-save-btn:hover {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.notes-minigame-cancel-btn {
|
||||
background: #95a5a6;
|
||||
color: white;
|
||||
border: 4px solid #7f8c8d;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: 'VT323', monospace;
|
||||
}
|
||||
|
||||
.notes-minigame-cancel-btn:hover {
|
||||
background: #7f8c8d;
|
||||
}
|
||||
Reference in New Issue
Block a user