WordSnap Game JavaScript Code

function intapi(){
  var player = GetPlayer();
  var object = player.object;
  var addToTimeline = player.addToTimeline;
  var setVar = player.SetVar;
  var getVar = player.GetVar;

  var Score = getVar('Score') || 0;
  var WordCount = getVar('WordCount') || 0;
  var Word = getVar('Word') || '';

  // WordPuzzle Game Module
  const WordPuzzle = (function() {
      // Configuration
      const config = {
          words: ['oil', 'oven', 'pour', 'pan', 'spoon', 'knife'],
          colors: {
              default: '#767EFA',
              selected: '#E85C0D',
              matched: '#387F39'
          },
          lineWidth: 5,
          lineTolerance: 20
      };

      // State
      let state = {
          isDrawing: false,
          line: null,
          startX: 0,
          startY: 0,
          selectedLetters: [],
          currentWord: '',
          matchedWords: new Set()
      };

      // DOM Elements
      const svg = createSVGElement();

      // Helper Functions
      function createSVGElement() {
          const svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svgElem.style.position = 'absolute';
          svgElem.style.top = '0';
          svgElem.style.left = '0';
          svgElem.style.width = '100%';
          svgElem.style.height = '100%';
          svgElem.style.pointerEvents = 'none';
          document.body.appendChild(svgElem);
          return svgElem;
      }

      function getLetterPath(letterElement) {
          if (letterElement.classList.contains('slide-object-vectorshape') &&
              letterElement.getAttribute('data-acc-text') &&
              letterElement.getAttribute('data-acc-text').length === 1) {
              const svg = letterElement.querySelector('svg[data-commandset-id]');
              return svg ? svg.querySelector('g > g > path') : null;
          }
          return null;
      }

      function isPointNearLine(px, py, x1, y1, x2, y2, tolerance) {
          const lineLength = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
          if (lineLength === 0) return Math.sqrt((px - x1) ** 2 + (py - y1) ** 2) <= tolerance;

          const t = ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / (lineLength * lineLength);
          const clampedT = Math.max(0, Math.min(1, t));

          const closestX = x1 + clampedT * (x2 - x1);
          const closestY = y1 + clampedT * (y2 - y1);

          return Math.sqrt((px - closestX) ** 2 + (py - closestY) ** 2) <= tolerance;
      }

      function distanceAlongLine(px, py, x1, y1, x2, y2) {
          const lineLength = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
          if (lineLength === 0) return 0;

          const t = ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / (lineLength * lineLength);
          const clampedT = Math.max(0, Math.min(1, t));

          return clampedT * lineLength;
      }

      // Core Game Functions
      function normalizeEvent(e) {
          // Normalize touch and mouse events to always return clientX, clientY
          if (e.touches && e.touches.length > 0) {
              return {
                  clientX: e.touches[0].clientX,
                  clientY: e.touches[0].clientY
              };
          } else {
              return {
                  clientX: e.clientX,
                  clientY: e.clientY
              };
          }
      }

      function startDrawing(e) {
          if (e.target.classList.contains('disabled')) return;

          state.isDrawing = true;
          const rect = svg.getBoundingClientRect();
          const { clientX, clientY } = normalizeEvent(e);
          state.startX = clientX - rect.left;
          state.startY = clientY - rect.top;

          state.line = document.createElementNS("http://www.w3.org/2000/svg", "line");
          state.line.setAttribute("x1", state.startX);
          state.line.setAttribute("y1", state.startY);
          state.line.setAttribute("x2", state.startX);
          state.line.setAttribute("y2", state.startY);
          state.line.setAttribute("stroke", "rgba(0, 123, 255, 0.5)");
          state.line.setAttribute("stroke-width", config.lineWidth);
          state.line.setAttribute("stroke-linecap", "round");
          svg.appendChild(state.line);
      }

      function draw(e) {
          if (!state.isDrawing) return;

          const rect = svg.getBoundingClientRect();
          const { clientX, clientY } = normalizeEvent(e);
          const endX = clientX - rect.left;
          const endY = clientY - rect.top;

          state.line.setAttribute("x2", endX);
          state.line.setAttribute("y2", endY);

          selectLetters(state.startX, state.startY, endX, endY);
      }

      function endDrawing() {
          state.isDrawing = false;
          if (state.line) {
              svg.removeChild(state.line);
              state.line = null;
          }
          checkWord();
          resetSelection();
      }

      function selectLetters(x1, y1, x2, y2) {
          state.selectedLetters = [];
          state.currentWord = '';

          const letters = document.querySelectorAll('.slide-object-vectorshape[data-acc-text]');
          let lettersCrossed = [];

          letters.forEach(letter => {
              const rect = letter.getBoundingClientRect();
              const svgRect = svg.getBoundingClientRect();
              const centerX = rect.left + rect.width / 2 - svgRect.left;
              const centerY = rect.top + rect.height / 2 - svgRect.top;

              if (isPointNearLine(centerX, centerY, x1, y1, x2, y2, config.lineTolerance)) {
                  lettersCrossed.push({
                      element: letter,
                      distance: distanceAlongLine(centerX, centerY, x1, y1, x2, y2),
                      x: centerX,
                      y: centerY
                  });
              } else if (!letter.classList.contains('disabled')) {
                  resetLetterStyle(letter);
              }
          });

          lettersCrossed.sort((a, b) => a.distance - b.distance);

          lettersCrossed.forEach(letter => {
              state.selectedLetters.push(letter.element);
              state.currentWord += letter.element.getAttribute('data-acc-text').toLowerCase();
              if (!letter.element.classList.contains('disabled')) {
                  setLetterSelected(letter.element);
              }
          });


          setVar("Word", state.currentWord);
      }

      function checkWord() {
          if (config.words.includes(state.currentWord) && !state.matchedWords.has(state.currentWord)) {

              try {
                  Score = Score + 10;
                  setVar("Score", Score);
                  setVar("WordCount", ++WordCount);
                  setVar(state.currentWord, true);
                  setVar("Word", "");


                  state.matchedWords.add(state.currentWord);

              } catch (error) {
                  console.error('Error updating Storyline variable:', error);
              }

              state.selectedLetters.forEach(letter => {
                  if (!letter.classList.contains('disabled')) {
                      setLetterMatched(letter);
                  }
              });
              showMatchedWordFeedback(state.currentWord);
          }
      }

      // UI Functions
      function setLetterSelected(letterElement) {
          const path = getLetterPath(letterElement);
          if (path) {
              path.setAttribute('fill', 'url(#selectedGradient)');
          }
      }

      function setLetterMatched(letterElement) {
          const path = getLetterPath(letterElement);
          if (path) {
              path.setAttribute('fill', 'url(#matchedGradient)');
          }
          letterElement.classList.add('disabled');
      }

      function resetLetterStyle(letterElement) {
          const path = getLetterPath(letterElement);
          if (path) {
              path.setAttribute('fill', 'url(#defaultGradient)');
          }
      }

      function resetSelection() {
          state.selectedLetters.forEach(letter => {
              if (!letter.classList.contains('disabled')) {
                  resetLetterStyle(letter);
              }
          });
          state.selectedLetters = [];
          state.currentWord = '';
          setVar("Word", "");
      }

      function showMatchedWordFeedback(word) {
          const feedback = document.createElement('div');
          feedback.textContent = word.toUpperCase();
          feedback.className = 'matched-word-feedback';
          document.body.appendChild(feedback);

          // Trigger reflow to ensure the animation starts from the beginning
          void feedback.offsetWidth;

          feedback.classList.add('show');

          setTimeout(() => {
              feedback.classList.add('hide');
              feedback.addEventListener('animationend', () => {
                  document.body.removeChild(feedback);
              }, { once: true });
          }, 1500);
      }

      // Initialize
      function init() {
          // Add event listeners for both mouse and touch
          document.addEventListener('mousedown', startDrawing);
          document.addEventListener('mousemove', draw);
          document.addEventListener('mouseup', endDrawing);
          document.addEventListener('mouseleave', endDrawing);

          document.addEventListener('touchstart', startDrawing);
          document.addEventListener('touchmove', draw);
          document.addEventListener('touchend', endDrawing);
          document.addEventListener('touchcancel', endDrawing);

          const styles = `
              @keyframes pop-in {
                0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; filter: blur(10px); }
                70% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; filter: blur(0px); }
                100% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0px); }
              }

              @keyframes pop-out {
                0% { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0px); }
                100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; filter: blur(10px); }
              }

              .disabled {
                opacity: 0.5;
                pointer-events: none;
              }

              .matched-word-feedback {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 58px;
                font-weight: bold;
                opacity: 0;
                font-family: "Arial", sans-serif;
                color: #ffffff;
                padding: 25px 60px;
                background: linear-gradient(135deg, #FF7F00, #E85C0D);
                border-radius: 30px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 126, 95, 0.7);
                animation: pop-in 0.4s ease-out, fade-out 1s 2.5s ease-in forwards;
                text-align: center;
                z-index: 1000;
                transform-style: preserve-3d;
              }

              .matched-word-feedback.show {
                animation: pop-in 0.5s ease forwards;
              }

              .matched-word-feedback.hide {
                animation: pop-out 0.5s ease forwards;
              }
          `;

          const styleElement = document.createElement('style');
          styleElement.textContent = styles;
          document.head.appendChild(styleElement);

          // Add SVG gradients
          const gradientsSvg = `
           <svg width="0" height="0" style="position: absolute;">
              <defs>
                <linearGradient id="defaultGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#408419;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#89CF0B;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="selectedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#FF7F00;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#E85C0D;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="matchedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#FF7E5F;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#8E44AD;stop-opacity:1" />
                    </linearGradient>
              </defs>
            </svg>
          `;
          document.body.insertAdjacentHTML('beforeend', gradientsSvg);

          // Reset the matchedWords set when initializing
          state.matchedWords.clear();


      }

      // Public API
      return {
          init: init
      };
  })();

  // Initialize the game
  WordPuzzle.init();
  }