---
import Layout from '../../layouts/Layout.astro';
---
<Layout title="Drag Game">
  <main>
		<div>
      <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
        <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
      </div>
      </div>
      <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
        <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
          <div class="flex flex-row space-x-4 items-center justify-center">
            <div id="star-container" class="relative inline-flex items-center justify-center">
              <img src="/assets/bg-star.svg" alt="" class="block" />
              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
            </div> 
          </div>
          <div class="flex flex-row items-center" style="">
              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
          </div>
          <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
            <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
            <button onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
          </div>
        </div>
      </div>
      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
        <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
    </div>
		</div>
    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
      Worksheet saved successfully
    </div>  
		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
	</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
    // function showAnimation() {
    //     const clipArt = document.querySelector('.clip-art');
    //     clipArt.classList.add('show');
    // }
  const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
  const drawingZone = {
      x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
      y: window.innerHeight / 4,
      width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
      height: window.innerHeight / 2,
  };
  let submitButton;
  let formattedDateTime;
  let shortUniqueID;
  let scoreTotal = 0;
  let maxScore = 8;
  let resultView;
  let topLogoWidth;
  let muteIconWidth;
  let resetIconWidth;
  let tickIconWidth;
  let cancelIconWidth;
  let retryButton;
  let blockMatches;
  let retryButtonWidth;
  let leftTargetZoneW;
  let audioData;
  let audioFileId = false;
  let isPlaying = false;

  if(isMobile){
        topLogoWidth = 4.5;
        muteIconWidth = 1.8;
        resetIconWidth = 1.47;
        tickIconWidth = 1.24;
        cancelIconWidth = 1.08;
    }else if(isTab){
        topLogoWidth = 4.5;
        muteIconWidth = 1.6;
        resetIconWidth = 1.43;
        tickIconWidth = 1.29;
        cancelIconWidth = 1.18;
    }else{
        topLogoWidth = 6;
        muteIconWidth = 1.3;
        resetIconWidth = 1.26;
        tickIconWidth = 1.222;
        cancelIconWidth = 1.185;
    }

  if(isMobile){
      noticeWidth = 100;
      noticeHeight = 0;
      buttonWidth = 67;
      buttonHeight = 0;
      retryButtonWidth = window.innerWidth / 2 - 140;
      retryButtonHeight = window.innerHeight - 50;
      leftTargetZoneW = window.innerWidth * 0.9 - 30;
      rightTargetZoneW = window.innerWidth / 6;
    } else {
      noticeWidth = 100;
      noticeHeight = 0;
      buttonWidth = 100;
      buttonHeight = 0;
      retryButtonWidth = window.innerWidth / 2 - 50;
      retryButtonHeight = window.innerHeight - 70;
      leftTargetZoneW = window.innerWidth * 0.9 - 172;
      rightTargetZoneW = window.innerWidth / 6;
    }

  gameResult = [];
  window.onload = function() {
    // Get the current date and time
    currentDate = new Date();
    
    // Format the date and time as a string
   formattedDateTime = currentDate.toLocaleString();
    
    // Log the formatted date and time to the console
    // // console.log("Page loaded on: " + formattedDateTime);
  };
  function generateShortUniqueID(length) {14
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let result = '';
      for (let i = 0; i < length; i++) {
          const randomIndex = Math.floor(Math.random() * characters.length);
          result += characters.charAt(randomIndex);
      }
      return result;
  };
  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172 

  const targetZones = [
    {
      x: rightTargetZoneW,
      y: 170,
      name: "target1",
      block: null,
    },
    {
      x: rightTargetZoneW,
      y: 330,
      name: "target2",
      block: null,
    },
    {
      x: rightTargetZoneW,
      y: 480,
      name: "target3",
      block: null,
    },
    {
      x: rightTargetZoneW,
      y: 650,
      name: "target4",
      block: null,
    },
    {
      x: leftTargetZoneW,
      y: 170,
      name: "target5",
      block: null,
    },
    {
      x: leftTargetZoneW,
      y: 330,
      name: "target6",
      block: null,
    },
    {
      x: leftTargetZoneW,
      y: 480,
      name: "target7",
      block: null,
    },
    {
      x: leftTargetZoneW,
      y: 650,
      name: "target8",
      block: null,
    },
  ];
  // console.log(blockMatches.blockName, blockMatches.targetName)
  var assetsList = {};
  const params = new URLSearchParams(window.location.search);
  const paramsID = params.get('id');
  const spriteNames = params.get('spriteName');
    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
    function displaySprite() {
        if (buddiesList.includes(spriteNames)) {
            const imgElement = document.getElementById('starClipart');
            // document.getElementById('buddiesName').textContent = `Ask to ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
            if (imgElement) {
                imgElement.src = `/assets/${spriteNames}.gif`;
                console.log(imgElement.src)
            } else {
                console.log('Element with ID "starClipart" not found.');
            }
        } else {
            console.log('Sprite not found in the list.');
        }
    }
    displaySprite();
  const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
      .then(response => response.json())
      .then(({data}) => {
        if(data.instruction){
          audioFileId = true;
        }
        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
        const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
        if(isMobile){
          imageCustomWidth = "?width=100";
        } else{
          imageCustomWidth = "?width=100";
        }
        const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
        assetsList.element1 = assetsURL + image1   + imageCustomWidth;
        assetsList.element2 = assetsURL + image2   + imageCustomWidth;
        assetsList.element3 = assetsURL + image3   + imageCustomWidth;
        assetsList.element4 = assetsURL + image4   + imageCustomWidth;
        assetsList.element5 = assetsURL + image5   + imageCustomWidth;
        assetsList.element6 = assetsURL + image6   + imageCustomWidth;
        assetsList.element7 = assetsURL + image7   + imageCustomWidth;
        assetsList.element8 = assetsURL + image8   + imageCustomWidth;
        const config = {
          type: Phaser.AUTO,
          width: window.innerWidth,
          height: window.innerHeight,
          backgroundColor: '#ffffff',
          parent: "phaser-example",
          scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
            },
          scene: MyGame,
        };
        const game = new Phaser.Game(config);    
        
      })
      .catch(error => {

        console.error('Error fetching initial data:', error);
      });
  class MyGame extends Phaser.Scene {
    constructor() {
      super();
    }
    preload() {
        var progressBar = this.add.graphics();
        var progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(240, 270, 320, 50);
        
        var width = this.cameras.main.width;
        var height = this.cameras.main.height;
        var loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 0.5);
        var percentText = this.make.text({
            x: width / 2,
            y: height / 2 - 5,
            text: '0%',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        percentText.setOrigin(0.5, 0.5);
        var assetText = this.make.text({
            x: width / 2,
            y: height / 2 + 50,
            text: '',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        assetText.setOrigin(0.5, 0.5);
        this.load.on('progress', function (value) {
            percentText.setText(parseInt(value * 100) + '%');
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(250, 280, 300 * value, 30);
        });
        this.load.on('fileprogress', function (file) {
            assetText.setText('Loading asset: ' + file.key);
        });
        this.load.on('complete', function () {
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
            assetText.destroy();
        });
        for (var i = 0; i < 5; i++) {
            this.load.image('logo'+i, '/assets/background.jpg');
        }
        if(audioFileId === true){
          this.load.audio('instructAudio', audioData)
        }
        this.load.image("topMatch", "/assets/top_match.jpg");
        this.load.image('topLogo', '/assets/top_logo.svg');
        this.load.image("tick", '/assets/tick.png');
        this.load.image("tickIcon", '/assets/svg/tick2.svg');
        this.load.image("muteIcon", '/assets/svg/mute.svg');
        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
        this.load.image("resetIcon", '/assets/svg/reset.svg');
        this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
        this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
        
        // this.load.image("retryIcon", "/assets/svg/retry.svg")
        this.load.image("border", '/assets/svg/border.svg');
          this.load.spritesheet("blocks1", assetsList.element5,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks2", assetsList.element6,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks3", assetsList.element7,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks4", assetsList.element8,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks5", assetsList.element1,{
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks6", assetsList.element2, {
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks7", assetsList.element3, {
          frameWidth: 100,
          frameHeight: 100,
        });
         this.load.spritesheet("blocks8", assetsList.element4, {
          frameWidth: 100,
          frameHeight: 100,
        });
    }
    
    create() {
      const params = new URLSearchParams(window.location.search);
        const paramsID = params.get('id');
        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
          .then(response => response.json())
          .then(({ data }) => {
            // console.log(data)
            blockMatches = [
              {
                blockName: "blocks1",
                targetName: `target${data.match_with1}`,
              },
              {
                blockName: "blocks2",
                targetName: `target${data.match_with2}`,
              },
              {
                blockName: "blocks3",
                targetName: `target${data.match_with3}`,
              },
              {
                blockName: "blocks4",
                targetName: `target${data.match_with4}`,
              },
              {
                blockName: "blocks5",
                targetName: `target${data.match_with5}`,
              },
              {
                blockName: "blocks6",
                targetName: `target${data.match_with6}`,
              },
              {
                blockName: "blocks7",
                targetName: `target${data.match_with7}`,
              },
              {
                blockName: "blocks8",
                targetName: `target${data.match_with8}`,
              }
            ];
            // console.log(data)


            let wrapWidth;
            let textSizeScale;
            if(isMobile){
              wrapWidth = 10;
              textSizeScale = 540;
            } else{
              wrapWidth = 200;
              textSizeScale = 940
            }
            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
            const baseFontSize = 24;
            const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
            const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
          })
          .catch(error => {
            console.error('Error fetching initial data:', error);
          });
        const displayW = window.innerWidth;
        // const URL = window.location.href;
        // const gameName = URL.split('/');
        // let userData = {
        //   'user': 'drawing@beanstalkedu.com',
        //         'game_name': gameName[3],
        //         'starts': formattedDateTime,
        //         // 'game_start' : gameStartTime,
        // };
        // function submitUserData() {
        //   fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
        //     method: 'POST',
        //     headers: {
        //       'Content-Type' : 'application/json'
        //     },
        //     body: JSON.stringify(userData)
        //   })
        //   .then(response => {
        //     if(response.ok){
        //       // console.log('Data Saved', response)
        //     } else{
        //       // console.log('Something Wrong', response)
        //     }
        //   })
        //   .catch(error => {
        //     console.error('An error occured', error)
        //   }); 
        // };
        // window.load

        const graphics = this.add.graphics();
        const x = 0; const y = 54;
        const lineWidth = window.innerWidth;
        graphics.lineStyle(1, 0x0348A8);
        graphics.setAlpha(0.2);
        graphics.beginPath();
        graphics.moveTo(x, y);
        graphics.lineTo(x + lineWidth, y);
        graphics.strokePath();

        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});

        submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
        if(audioFileId === true){
            let instructionAudio = this.sound.add('instructAudio')
            soundButton.setInteractive().on('pointerdown', () => {
              if(isPlaying === false){
                instructionAudio.play()
                isPlaying = true
              } else if(isPlaying === true) {
                instructionAudio.stop();
                isPlaying = false
              }

            })
          }
        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
        //   font: '600 30px Quicksand',
        //   fill: '#fff',
        //   backgroundColor: 'blue',
        //   padding: { x: 20, y: 10 },
        // }).setDepth(1);
        submitButton.setInteractive().on('pointerdown', () => {
          // console.log('Clicked');
          // window.location.reload();
          // windowLoad();
          submitUserData(this);
          // showAnimation();
        })

        
        const blocks = [
            {
                x: displayW / 2-400,
                y: window.innerHeight - 120,
                textureKey: "blocks1",
                id: "block1",
            },
            {
                x: displayW / 2-300,
                y: window.innerHeight - 120,
                textureKey: "blocks2",
                id: "block2",
            },
            {
                x: displayW / 2-200,
                y: window.innerHeight - 120,
                textureKey: "blocks3",
                id: "block3",
            },
            {
                x: displayW / 2 - 100,
                y: window.innerHeight - 120,
                textureKey: "blocks4",
                id: "block4",
            },
            {
                x: displayW / 2,
                y: window.innerHeight - 120,
                textureKey: "blocks5",
                id: "block5",
            },
            {
                x: displayW / 2+100,
                y: window.innerHeight - 120,
                textureKey: "blocks6",
                id: "block6",
            },
            {
                x: displayW / 2+200,
                y: window.innerHeight - 120,
                textureKey: "blocks7",
                id: "block7",
            },
            {
                x: displayW / 2+300,
                y: window.innerHeight - 120,
                textureKey: "blocks8",
                id: "block8",
            },
        ];
        // console.log('test blocks',blocks[0])

        let score = 0;
        let counter = 0;

        const isMatch = (blockName, targetName) => {
          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
          if (match !== undefined) {
            scoreTotal++;
            counter++;
            console.log(`Score Total: ${scoreTotal}`); 
            return 'borderCorrect';
          } else {
            // console.log(`Score Total: ${scoreTotal}`); 
            return 'borderWrong';
          }
        };
        
        const droppedBlocks = [];
        const targetZoneBorders = [];
        targetZones.forEach((targetZone, index) => {
          const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.7).setScale(1);
          const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
          targetZoneBorders.push(targetBorder);
          targetZone.block = null;
        }),
        blocks.forEach((block, index) => {
          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
          // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
          newBlock.on("drag", (pointer, dragX, dragY) => {
            newBlock.setScale(1.3);
            newBlock.x = dragX;
            newBlock.y = dragY;
          });
          newBlock.on("dragend", () => {
            newBlock.setScale(1.0);
            let droppedOnTargetZone = false;
            
            targetZones.forEach((targetZone, targetIndex) => {
              if (
                Phaser.Geom.Intersects.RectangleToRectangle(
                  newBlock.getBounds(),
                  new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
                )
              ) {
                if (targetZone.block === null) {
                  newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
                  newBlock.disableInteractive();
                  targetZone.block = newBlock;
                  droppedBlocks.push(newBlock);
                  
                  // Call isMatch only once
                  const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
                  targetZoneBorders[targetIndex].setTexture(borderCondition);
                } else {
                  newBlock.setPosition(block.x, block.y);
                }
                droppedOnTargetZone = true;
                targetZoneBorders[targetIndex].setVisible(true);
                targetZoneBorders[targetIndex].setAlpha(1);
                return;
              }
            });

            if (!droppedOnTargetZone) {
              newBlock.setPosition(block.x, block.y);
            }

            if (droppedBlocks.length === targetZones.length) {
              displayResult(droppedBlocks);
            }
          });

        });
        // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
        retryButton.setInteractive().on('pointerdown', () => {
          window.location.reload();
        })
        // retryButton.setVisible(false);

    }
  }
  const displayResult = (droppedBlocks) => {
    droppedBlocks.forEach((block) => {
      const targetZone =  targetZones.find((zone) => zone.name === block.texture.key);
    });
  };

</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
  * {
    margin: 0;
    padding: 0;
    cursor: -webkit-grab; cursor: grab;
    font-family: quicksand;
  }
  /* Animation styles */
  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(100%); /* Start below the viewport */
    }
    100% {
      opacity: 1;
      transform: translateY(0); /* End at its original position */
    }
  }

  .clip-art-container {
      overflow: hidden; /* Prevents overflow during the animation */
  }

  .clip-art {
      transform: translateX(100%); /* Initially off-screen to the right */
      opacity: 0; /* Initially hidden */
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
  }

  .clip-art.show {
      transform: translateX(0); /* Move the image into view */
      opacity: 1; /* Fade in */
  }
</style>