|
1 | 1 | var shapes; |
2 | 2 |
|
| 3 | +// Personal poems for the secret garden |
| 4 | +var personalPoems = [ |
| 5 | + { |
| 6 | + title: "dear old lover", |
| 7 | + text: `I got a message from an old boyfriend, asking me to be penpals, |
| 8 | +and wishing me well. But dating him was like chasing the wind. |
| 9 | +
|
| 10 | +It's wild that I chased the wind. When I felt like running after |
| 11 | +something, and something felt like nothing and now nothing keeps |
| 12 | +trying to play tag. |
| 13 | +
|
| 14 | +I know how the wind feels. |
| 15 | +Somedays I think |
| 16 | +I'll meet you outside my window, |
| 17 | +but when I look out |
| 18 | +all I see is rain.` |
| 19 | + }, |
| 20 | + { |
| 21 | + title: "tuesday night", |
| 22 | + text: `Hey I know it's late, but I think I left some of my stuff at your place. |
| 23 | +I think the back of my neck maybe somewhere near your ps3. Or maybe |
| 24 | +by your bong. |
| 25 | +I think I may have left my favorite pair of socks and the |
| 26 | +small of my back. I mean what really matters is that black dress, |
| 27 | +I kinda need it this weekend |
| 28 | +Oh, and also that point when it hurt and I fought back tears. |
| 29 | +I can wait until the weekend, but if you're home and still up, |
| 30 | +could I pop in and grab my stuff?` |
| 31 | + }, |
| 32 | + { |
| 33 | + title: "bumps", |
| 34 | + text: `bumps left. bumps right. big hands |
| 35 | +
|
| 36 | +no consent. bumps. brush. coast. wrap. lope. rope. |
| 37 | +
|
| 38 | +no words. no exchange. just bumps and bumps |
| 39 | +
|
| 40 | +gropes and grabs |
| 41 | +
|
| 42 | +unwrapping my presents, tearing paper` |
| 43 | + }, |
| 44 | + { |
| 45 | + title: "young drivers", |
| 46 | + text: `constantly thinking. chaotic. |
| 47 | +i'm constantly thinking. neurotic. |
| 48 | +accelerate. foot's on the gas. |
| 49 | +ready to brake. turn. check the mirror. |
| 50 | +fifteen seconds ahead. flip a switch. switch a lane |
| 51 | +turn. slow down. angle & timing. distance & angle. |
| 52 | +turn the wheel slowly. gradual. smooth. controlled. |
| 53 | +
|
| 54 | +what does he think. time ticks. ticks of the signal. |
| 55 | +silence. |
| 56 | +speak. check mirrors. |
| 57 | +fifteen seconds ahead of us. |
| 58 | +fifteen miles of decisions in the rear view of |
| 59 | +my psyche.` |
| 60 | + }, |
| 61 | + { |
| 62 | + title: "Untitled Poem #4", |
| 63 | + text: `There is a glass that separates me from you. |
| 64 | +I can't tell if its visable, if its clear or opaque |
| 65 | +
|
| 66 | +There is a glass that separates me from you. |
| 67 | +I think you can see it. I think you know its there. |
| 68 | +Stares. staring at me. |
| 69 | +Or are they staring at the glass. |
| 70 | +
|
| 71 | +If they looked away, did they look away from the divide. |
| 72 | +Did they look away from me. |
| 73 | +
|
| 74 | +There's a glass that separates me from you. |
| 75 | +Its stiff. Its thick. Its Cold. Like classroom lighting. |
| 76 | +Its enclosing. Its plastic wrap. And I |
| 77 | +don't have enough air to breathe.` |
| 78 | + }, |
| 79 | + { |
| 80 | + title: "sensitivity", |
| 81 | + text: `a blessing and a curse |
| 82 | +imagine too much sensitivity |
| 83 | +couldn't swallow a bite because |
| 84 | +i could feel it too much in my throat. |
| 85 | +place your hand on my shoulder |
| 86 | +slap. |
| 87 | +a rush of electricity upon contact. |
| 88 | +
|
| 89 | +like a fox on the highway, dodging |
| 90 | +judgement, anxiety, social disturbance |
| 91 | +speak. check mirrors. |
| 92 | +ten over the speed limit. |
| 93 | +
|
| 94 | +wildfire kisses. |
| 95 | +eye contact like splinters. |
| 96 | +but he can't hide a smirk.` |
| 97 | + } |
| 98 | +]; |
| 99 | + |
| 100 | +function getRandomPoem() { |
| 101 | + return personalPoems[Math.floor(Math.random() * personalPoems.length)]; |
| 102 | +} |
3 | 103 |
|
4 | 104 | window.addEventListener('load', () => { |
5 | 105 | if (document.readyState === "complete") { |
@@ -123,58 +223,39 @@ function toggleSVG(cell, two, shape) { |
123 | 223 | var isEnlarged = cell.data("isEnlarged"); |
124 | 224 |
|
125 | 225 | if (isEnlarged) { |
126 | | - // Shrink back to original size |
127 | | - cell.css({ |
128 | | - position: "absolute", |
129 | | - width: two.width, |
130 | | - height: two.height, |
131 | | - zIndex: 1 |
132 | | - }); |
133 | | - |
134 | | - shape.translation.set(two.width / 2, two.height / 2); |
135 | | - shape.scale = 1; |
136 | | - // Remove text if it exists |
137 | | - var text = shape.children.find(child => child instanceof Two.Text); |
138 | | - if (text) { |
139 | | - shape.remove(text); |
140 | | - } |
141 | | - two.update(); |
| 226 | + // Remove poem overlay and return to normal |
| 227 | + $('.poem-overlay').remove(); |
| 228 | + $('.cell').data("isEnlarged", false); |
142 | 229 | } else { |
143 | | - // Enlarge to cover the entire screen |
144 | | - var newWidth = $(window).width(); |
145 | | - var newHeight = $(window).height(); |
146 | | - var newCenterX = newWidth / 2; |
147 | | - var newCenterY = newHeight / 2; |
148 | | - var scaleFactor = Math.max(newWidth / two.width, newHeight / two.height); |
149 | | - |
150 | | - cell.css({ |
151 | | - position: "fixed", |
152 | | - top: 0, |
153 | | - left: 0, |
154 | | - width: "100vw", |
155 | | - height: "100vh", |
156 | | - zIndex: 9999, |
157 | | - transition: "width 1s, height 1s" |
158 | | - }); |
159 | | - |
160 | | - two.width = newWidth; |
161 | | - two.height = newHeight; |
162 | | - two.update(); |
163 | | - |
| 230 | + // Show poem overlay without complex animations |
| 231 | + var poem = getRandomPoem(); |
| 232 | + var poemOverlay = $(` |
| 233 | + <div class="poem-overlay"> |
| 234 | + <div class="poem-container"> |
| 235 | + <h3 class="poem-title">${poem.title}</h3> |
| 236 | + <div class="poem-text">${poem.text.replace(/\n/g, '<br>')}</div> |
| 237 | + <div class="poem-close">click anywhere to close</div> |
| 238 | + </div> |
| 239 | + </div> |
| 240 | + `); |
164 | 241 |
|
165 | | - |
166 | | - two.bind("update", function() { |
167 | | - shape.scale += (scaleFactor - shape.scale) * 0.1; |
168 | | - shape.translation.set(newCenterX, newCenterY); |
169 | | - |
170 | | - if (Math.abs(shape.scale - scaleFactor) < 0.01) { |
171 | | - shape.scale = scaleFactor; |
172 | | - two.unbind("update"); |
173 | | - } |
| 242 | + $('body').append(poemOverlay); |
| 243 | + |
| 244 | + // Add click handler to close overlay with fade out animation |
| 245 | + poemOverlay.on('click', function() { |
| 246 | + var overlay = $(this); |
| 247 | + overlay.removeClass('visible'); |
| 248 | + setTimeout(() => { |
| 249 | + overlay.remove(); |
| 250 | + $('.cell').data("isEnlarged", false); |
| 251 | + }, 800); // Wait for fade out animation to complete |
174 | 252 | }); |
| 253 | + |
| 254 | + // Fade in the poem |
| 255 | + setTimeout(() => { |
| 256 | + poemOverlay.addClass('visible'); |
| 257 | + }, 100); |
175 | 258 |
|
176 | | - two.play(); |
| 259 | + $('.cell').data("isEnlarged", true); |
177 | 260 | } |
178 | | - |
179 | | - cell.data("isEnlarged", !isEnlarged); |
180 | 261 | } |
0 commit comments