Skip to content

Commit 8ebe500

Browse files
zesamerizesameri
committed
Add mobile lyric display functionality and styles for improved user experience
- Introduced a mobile-specific lyrics container in secrets.js to enhance lyric alignment and visibility on smaller screens. - Updated CSS in secrets.css to include mobile flexbox styles for better layout and responsiveness of lyric lines. - Implemented mobile detection logic to adjust lyric positioning dynamically based on screen size. - Enhanced existing lyric display functionality to support both mobile and desktop environments, ensuring a seamless experience across devices.
1 parent c07b281 commit 8ebe500

File tree

3 files changed

+169
-17
lines changed

3 files changed

+169
-17
lines changed

‎css/secrets.css‎

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@ body {
55
margin: 0;
66
}
77

8+
/* Mobile flexbox container for lyrics */
9+
.mobile-lyrics-container {
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: flex-start;
13+
align-items: stretch;
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
z-index: 5;
20+
pointer-events: none;
21+
}
22+
823
svg {
924
margin: 0;
1025
}
@@ -97,7 +112,7 @@ svg {
97112
position: fixed;
98113
color: #f8f8f6;
99114
font-family: 'Roboto Slab', serif;
100-
font-size: 1.2em;
115+
font-size: 2.4em;
101116
line-height: 1.4;
102117
text-align: center;
103118
white-space: normal;
@@ -106,7 +121,6 @@ svg {
106121
pointer-events: none;
107122
transition: opacity 0.8s ease-in-out;
108123
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
109-
max-width: 250px;
110124
word-wrap: break-word;
111125
overflow-wrap: break-word;
112126
hyphens: auto;
@@ -116,6 +130,24 @@ svg {
116130
opacity: 1;
117131
}
118132

133+
/* Mobile-specific lyric styling */
134+
.lyric-line.mobile {
135+
font-family: 'Roboto Slab', serif;
136+
font-size: 4.7vw;
137+
width: 100% !important;
138+
max-width: 100% !important;
139+
display: block !important;
140+
text-align: left;
141+
line-height: 1.3;
142+
padding: 1vh 5vw;
143+
box-sizing: border-box;
144+
white-space: nowrap;
145+
overflow: hidden;
146+
flex-shrink: 0;
147+
position: relative !important;
148+
clear: both !important;
149+
}
150+
119151
/* Mobile responsive */
120152
@media (max-width: 768px) {
121153
.poem-container, .lyric-container {
@@ -132,9 +164,58 @@ svg {
132164
}
133165

134166
.lyric-line {
135-
font-size: 1em;
136-
max-width: 200px;
167+
font-family: 'Roboto Slab', serif;
168+
font-size: 7vw;
169+
max-width: 70vw;
137170
word-wrap: break-word;
138171
overflow-wrap: break-word;
139172
}
173+
174+
.lyric-line.mobile {
175+
font-family: 'Roboto Slab', serif;
176+
font-size: 5.5vw;
177+
width: 100vw;
178+
left: 0 !important;
179+
line-height: 1.4;
180+
padding: 0 5vw;
181+
box-sizing: border-box;
182+
}
183+
}
184+
185+
/* Extra small mobile devices */
186+
@media (max-width: 480px) {
187+
.lyric-line.mobile {
188+
font-family: 'Roboto Slab', serif;
189+
font-size: 6vw;
190+
width: 100vw;
191+
left: 0 !important;
192+
line-height: 1.5;
193+
padding: 0 5vw;
194+
box-sizing: border-box;
195+
}
196+
197+
.lyric-line {
198+
font-family: 'Roboto Slab', serif;
199+
font-size: 9vw;
200+
max-width: 80vw;
201+
}
202+
}
203+
204+
/* Very small mobile devices */
205+
@media (max-width: 360px) {
206+
.lyric-line.mobile {
207+
font-family: 'Roboto Slab', serif;
208+
font-size: 7vw;
209+
width: 100vw;
210+
left: 0 !important;
211+
line-height: 1.5;
212+
padding: 0 5vw;
213+
box-sizing: border-box;
214+
}
215+
216+
.lyric-line {
217+
font-family: 'Roboto Slab', serif;
218+
font-size: 11vw;
219+
max-width: 85vw;
220+
}
140221
}

‎js/secrets.js‎

Lines changed: 82 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ var displayedLyrics = [];
3333
var pathPositions = [];
3434
var pathIndex = 0;
3535
var usedPositions = [];
36+
var isMobile = false;
37+
var mobileLineIndex = 0;
38+
var mobileLineHeight = 200;
3639

3740
function getNextLyric() {
3841
if (currentLyricIndex >= lyrics.length) {
@@ -53,9 +56,42 @@ function getNextLyric() {
5356

5457
function clearAllLyrics() {
5558
$('.lyric-line').remove();
59+
$('.mobile-lyrics-container').remove();
5660
displayedLyrics = [];
5761
pathIndex = 0;
5862
usedPositions = [];
63+
mobileLineIndex = 0;
64+
}
65+
66+
function detectMobile() {
67+
var screenWidth = window.innerWidth;
68+
var mediaQueryMatch = window.matchMedia("only screen and (max-width: 850px)").matches;
69+
var userAgentMatch = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
70+
71+
isMobile = mediaQueryMatch || userAgentMatch;
72+
73+
console.log('Mobile detection - Screen width:', screenWidth, 'Media query match:', mediaQueryMatch, 'User agent match:', userAgentMatch, 'isMobile:', isMobile);
74+
75+
return isMobile;
76+
}
77+
78+
function getMobilePosition() {
79+
// Zigzag pattern: left, center, right, center, left...
80+
var patternIndex = mobileLineIndex % 4;
81+
82+
mobileLineIndex++;
83+
84+
return { alignment: getAlignmentFromPattern(patternIndex) };
85+
}
86+
87+
function getAlignmentFromPattern(patternIndex) {
88+
switch (patternIndex) {
89+
case 0: return 'left';
90+
case 1: return 'center';
91+
case 2: return 'right';
92+
case 3: return 'center';
93+
default: return 'left';
94+
}
5995
}
6096

6197
function generateSpiralPath() {
@@ -246,6 +282,7 @@ window.onresize = function() {
246282
pathPositions = [];
247283
pathIndex = 0;
248284
usedPositions = [];
285+
mobileLineIndex = 0;
249286
}
250287

251288
// $(function() {
@@ -369,20 +406,52 @@ function toggleSVG(cell, two, shape) {
369406
return;
370407
}
371408

372-
// Add new lyric line at predefined path position
373-
console.log('Adding new lyric line:', lyricData.text);
374-
var position = getNextPosition();
409+
// Detect mobile and use appropriate positioning
410+
detectMobile();
411+
var position;
375412

376-
// Adjust position to ensure text stays within bounds
377-
var adjustedPosition = adjustPositionForText(position, lyricData.text);
378-
379-
var lyricLine = $(`
380-
<div class="lyric-line" style="left: ${adjustedPosition.x}px; top: ${adjustedPosition.y}px;">
381-
${lyricData.text}
382-
</div>
383-
`);
384-
385-
$('body').append(lyricLine);
413+
if (isMobile) {
414+
console.log('Using mobile positioning, isMobile:', isMobile);
415+
position = getMobilePosition();
416+
417+
// Ensure mobile container exists
418+
if ($('.mobile-lyrics-container').length === 0) {
419+
console.log('Creating mobile container');
420+
$('body').append('<div class="mobile-lyrics-container"></div>');
421+
}
422+
423+
// Apply alignment for mobile
424+
var alignmentStyle = '';
425+
if (position.alignment === 'left') {
426+
alignmentStyle = 'text-align: left;';
427+
} else if (position.alignment === 'right') {
428+
alignmentStyle = 'text-align: right;';
429+
} else {
430+
alignmentStyle = 'text-align: center;';
431+
}
432+
433+
console.log('Adding lyric with alignment:', position.alignment);
434+
var lyricLine = $(`
435+
<div class="lyric-line mobile" style="${alignmentStyle}">
436+
${lyricData.text}
437+
</div>
438+
`);
439+
440+
$('.mobile-lyrics-container').append(lyricLine);
441+
} else {
442+
console.log('Using desktop positioning');
443+
position = getNextPosition();
444+
// Adjust position to ensure text stays within bounds
445+
position = adjustPositionForText(position, lyricData.text);
446+
447+
var lyricLine = $(`
448+
<div class="lyric-line" style="left: ${position.x}px; top: ${position.y}px;">
449+
${lyricData.text}
450+
</div>
451+
`);
452+
453+
$('body').append(lyricLine);
454+
}
386455

387456
// Fade in the lyric line
388457
setTimeout(() => {

‎secrets.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
<link href="./css/secrets.css" rel="stylesheet">
1616
<script src="./js/two.js"></script>
1717
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
18+
<!-- Fonts -->
19+
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
1820
<!-- Webpage Icon -->
1921
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
2022
</head>

0 commit comments

Comments
 (0)