???? ??? ?????? ???? ??? ??? ?? ??? ??? ??? ??? ??? ????. ? ????? ??? ????? ??? ?? ??? ??? ?? ? ???? ??? ?? ??? ???? Svelte? ???? ?? ??? ??? ?? ??? ???? ??? ???????.

??

? ???? ???? ?? ?? ??? ???? ??? ????? ?? ??? ??? ???? ??? ???.

??? ?? ? ???, ?? ???? ?? ? ?? ??? ? ?? ??? ? ? ??? ???? ????? ??? ???? ?????? ??????.

?? ??? ???? ??? ??? ??? ?? ??? ???? ????. ?? ???? API?? ???? ??? ??? ?? ?????.

Svelte? ??? ????? ??? ??? ? ? ??????!

? ? ????, ?? ??? ?? ??? ????? ????? ???? ??? ?? ?? ?? ?????.
?? ???? ? ?? ??? ?????.

• ??? ??????? ????
• ?? ????? ?? ??? ?? ???? ?? ?? ??? ???? ?????? ?????? ?????.

??? ??? ??? ? ???? ?????? ????? ?? ?? ?? ??? ??????? ??? ??? ?? ?? ?? ????? ???????.

?? ? ??? ??????, svelte? ?? ???? ?? ?? ??? ?? ?? ??? ?? ???? ?????(?? ?? ??).
????? ?? ?? ? ?? ??? ????.

?? ????

??? ??? ? ?? ?? Svelte ?? ??? ?????.

1. App.svelte - ???? ???? ??? ???? ???? ?? ?? ??
2. MemberImageCard.svelte - ?? ????? ? ??? ??? ???? ?? ??

?? ??: ??? ?? ??

??? ??? ?? ??? ????. ??? ?? ?? ??? ???? ???.

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

?? ??? ??? ???? ??? ??????

imageInUse? ImagesToUse? ??? ???? ??? ??? ????. ??? ??? ??? ?? ? ?? ??? ??? ?????.

1. ?? ??? ??? ?? ?? ?? ??? ?????
2. ???? ??? ???? ???? ?? ???? ? ??? ???
3. ?? ???? ?? ????? ??? ???? ????? ?????
4. ?? ?? ?? ??? ???? ?????

?? ??: ??? ??

??? ?? ????? ??? ???? ????? ??? ??? ????? ???? ??? ?????. switchImages ??? ???? ??? ?????.

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

1. ??? ??? ??

?? ?? ??? ??? ??? ???? ???? ???.

const switchImages = () => {
  let newImagesSwapMap = new Map<number, Image>()
  let remainingImagesToUse
  let newRemainingImages: Image[]

? ??? ? ?? ????? ?????.

• ?? ???? ???? ? ?????
• ??? ??? ??? ??? N?? ???? ?????. ??? N? NUMBER_OF_IMAGES_TO_SWITCH???.

2. ??? ?? ??

???? ????? ???? ??? ??? ???? ?????.

if (remainingImages.length <= NUMBER_OF_IMAGES_TO_SWITCH) {
 // If we have fewer remaining images than needed, use all of them
 remainingImagesToUse = remainingImages.slice(0);
 newRemainingImages = [];
} else {
 // Take the last N images from the remaining pool
 remainingImagesToUse = remainingImages.slice(-NUMBER_OF_IMAGES_TO_SWITCH);
 // Keep the rest for future swaps
 newRemainingImages = remainingImages.slice(0, -NUMBER_OF_IMAGES_TO_SWITCH);
}

??? ?? ?? ??? ??? ??? ?????. ?? ?? NUMBER_OF_IMAGES_TO_SWITCH? 1?? NUMBER_OF_IMAGES_TO_USE? 16? ?? ???? ?? 7?? ???? ????? ?? ???? [7]? ?? ? ????.

3. ?? ??

??? ???? ?? ? ???? ?? ???? ??? ?????.

indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH)
 .fill(null)
 .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));

? ??? ??? ???? ???? ?? ? ???? ?? ?????.

4. ?? ??

?? ?? ?? ??? ????.

const imageIsInUse = (image: Image) => {
 const inUse = imagesInUse.find((img: Image) => image.picture_url === img.picture_url);
 return inUse;
};

? ???? ?? ?? ????? ??? ?????.

1. ???? ??? ??(??)? ????
2. ?? ???? ?? ???? ?????(imageToSwap)
3. ??? ? ???? ?????(imageToSwapWith)
4. ? ???? ???? ?? ???? ?? ??:
   • imageSwapMap? ??? ?????.
   • imageInUse?? ??? ??? ???????.
   • ??? ?? ?? ???? ?? ?????

5. ?? ??

?? ??? ??? ? ??? ???????.

for (let i = 0; i < indexesToSwap.length; i++) {
 let index = indexesToSwap[i];
 let imageToSwap = imagesInUse[index]; // Current image in the grid
 let imageToSwapWith = remainingImagesToUse.pop(); // New image to display

 if (imageToSwapWith && !imageIsInUse(imageToSwapWith)) {
  // Record the swap in our map
  newImagesSwapMap.set(index, imageToSwapWith);
  // Update the swap map to trigger component updates
  imagesSwapMap = newImagesSwapMap;
  // Update the grid state
  imagesInUse[index] = imageToSwapWith;
  // Add the old image back to the pool
  newRemainingImages.unshift(imageToSwap);
 } else {
  return; // Skip if the image is already in use
 }
}

6. ????? ???

imageSwapMap? ?????? ???? ?????. ?????? ?? MemberImageCard ?? ??? ?????.

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

MemberImageCard? ???:

1. ??? ?? ??? ??? ? ??
2. ?? ???? ? ???? ?????
3. faceOnDisplay? ???? ??? ?????? ??????.
4. ???? ??? ?? ??? ?? ??? ??????

? ???? ??? ??? ????? ??? ??? ??? ????? ????.

• ???? ??? ???? ???? ????
• ???? ????? ?????
• ???? ?? ??? ?????
• ?????? ???? ?? ???? ?????
• ???? ?? ??? ??? ????? ?????

??? ?????: ???? ???

? MemberImageCard ?? ??? CSS ?? ? ??? ???? ?? ?? ?????? ?????. ?? ??? CSS? ??? ?? ?? ?? ?? ?????.

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

const switchImages = () => {
  let newImagesSwapMap = new Map<number, Image>()
  let remainingImagesToUse
  let newRemainingImages: Image[]

???? ???? ? ?? ??? ??? ?????.

1. ??? ? ???? ?????
2. ?? ????? ???
3. ???? ???? ?? ???? ?????

? ?? UX? ?? ?????? ??

??? ??? ???? ?? ?????? ?? ??? ??????.

if (remainingImages.length <= NUMBER_OF_IMAGES_TO_SWITCH) {
 // If we have fewer remaining images than needed, use all of them
 remainingImagesToUse = remainingImages.slice(0);
 newRemainingImages = [];
} else {
 // Take the last N images from the remaining pool
 remainingImagesToUse = remainingImages.slice(-NUMBER_OF_IMAGES_TO_SWITCH);
 // Keep the rest for future swaps
 newRemainingImages = remainingImages.slice(0, -NUMBER_OF_IMAGES_TO_SWITCH);
}

???? ???? ???? ???? ???? ??? ??? ??? ??? ??? ?????.

?? ?? ??

???? ??? ??? Svelte? onMount ?? ?? ??? ???? ?????.

indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH)
 .fill(null)
 .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));

??

? ??? ????? ???? UI ????? ???? ?? ?? CSS ??? ??? Svelte? ??? ??? ???? ?????.

? ??? Svelte? ???? ?? ??? ??? ??: ?? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!