Val Town Code SearchReturn to Val Town

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

13];
14
15function preloadImage(src: string): Promise<HTMLImageElement> {
16  return new Promise((resolve, reject) => {
17    const img = new Image();
18    img.onload = () => resolve(img);
19    img.onerror = reject;
27  const [currentGifIndex, setCurrentGifIndex] = useState(0);
28  const [isPlaying, setIsPlaying] = useState(false);
29  const [secondSectionImage, setSecondSectionImage] = useState(0);
30  const [isLoading, setIsLoading] = useState(true);
31  const audioRef = useRef<HTMLAudioElement>(null);
44  const vinyl = "https://i.ibb.co/21FnfNQK/vinyl.png";
45
46  const landscapeImages = [
47    "https://i.ibb.co/Ndng2vrb/1.jpg",
48    "https://i.ibb.co/kVF2RjK0/2.jpg",
54  const backgroundSong = "https://cdn1.esm3.com/music/5251/m219936.mp3";
55
56  // Preload all images when component mounts
57  useEffect(() => {
58    const preloadAllImages = async () => {
59      try {
60        // Preload all images: gifs, vinyl, and landscape images
61        const allImages = [
62          questionGif,
63          ...valentineGifs,
64          vinyl,
65          ...landscapeImages,
66        ];
67
68        await Promise.all(allImages.map(preloadImage));
69        setIsLoading(false);
70      } catch (error) {
71        console.error("Error preloading images:", error);
72        setIsLoading(false);
73      }
74    };
75
76    preloadAllImages();
77  }, []);
78
113        if (skipSection) {
114          audioRef.current.currentTime = skipSection.end;
115          // Change the second section image when skipping
116          setSecondSectionImage(1);
117        }
118
188  );
189
190  // If images are still loading, show loading spinner
191  if (isLoading) {
192    return <LoadingSpinner />;
337      </div>
338
339      {/* Second Section: Landscape Image with Vinyl */}
340      {isValentine && (
341        <div
350          }}
351        >
352          {/* Background Landscape Image */}
353          <img
354            src={landscapeImages[secondSectionImage]}
355            style={{
356              width: "100%",
392      )}
393
394      {/* Third Section: Landscape Image 2 */}
395      {isValentine && (
396        <div
406        >
407          <img
408            src={landscapeImages[2]}
409            style={{
410              width: "100%",

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.