Fix duplicate picks and recursive rating updates

src/composables/useVote.ts

@@ -1,13 +1,13 @@
-import { computed, reactive, ref, toRefs } from 'vue';
+import { computed, reactive, ref, toRefs, watchEffect } from 'vue';
 import glicko2 from 'glicko2-lite';
 
-import photos from '@/photos.json';
+import defaultPhotos from '@/photos.json';
 import { Database, Photo } from '@/models';
 import { randomNumber } from '@/utils/randomNumber';
 
 const db = reactive<Database>(
   JSON.parse(localStorage.getItem('db') as string) || {
-    photos,
+    photos: defaultPhotos,
     votes: []
   }
 );
@@ -24,7 +24,6 @@ const photosForFirstPick = computed(() =>
   })
 );
 
-export function useVote() {
 const pickPhotosForNewVote = () => {
   const firstPick =
     photosForFirstPick.value[
@@ -37,7 +36,11 @@ export function useVote() {
     );
 
     const fileNamesToExclude = [
-        ...new Set(votesWithFirstPick.flatMap(({ photos }) => photos))
+      ...new Set(
+        votesWithFirstPick
+          .flatMap(({ photos }) => photos)
+          .concat([firstPick.fileName])
+      )
     ];
 
     return !fileNamesToExclude.includes(fileName);
@@ -46,16 +49,20 @@ export function useVote() {
   const secondPick =
     photosForSecondPick[randomNumber(0, photosForSecondPick.length - 1)];
 
-    photosInCurrentVote.value.push(firstPick, secondPick);
+  photosInCurrentVote.value = [firstPick, secondPick];
 };
 
 const submitVote = (result: 0 | 0.5 | 1) => {
-    const fileNames = [...photosInCurrentVote.value].map(
+  const fileNames = ([...photosInCurrentVote.value] as Photo[]).map(
     ({ fileName }) => fileName
   ) as [string, string];
 
   db.votes.unshift({ photos: fileNames, result });
-    photosInCurrentVote.value = [];
+
+  if (db.votes.length % 12 === 0) {
+    updateRatings();
+  }
+
   pickPhotosForNewVote();
 };
 
@@ -63,13 +70,14 @@ export function useVote() {
   const twelveMostRecentVotes = db.votes.slice(0, 12).reverse();
 
   const votesGrouppedByPhotos = twelveMostRecentVotes.reduce((obj, vote) => {
-      const [firstPick, secondPick] = vote.photos;
+    const [firstFileName, secondFileName] = vote.photos;
 
     const firstPhoto = db.photos.find(
-        ({ fileName }) => fileName === firstPick
+      ({ fileName }) => fileName === firstFileName
     )!;
+
     const secondPhoto = db.photos.find(
-        ({ fileName }) => fileName === secondPick
+      ({ fileName }) => fileName === secondFileName
     )!;
 
     const firstPhotoOpponentParams = [
@@ -84,33 +92,32 @@ export function useVote() {
       1 - vote.result
     ] as [number, number, number];
 
-      if (obj[firstPick]) {
-        obj[firstPick].push(firstPhotoOpponentParams);
+    if (obj[firstFileName]) {
+      obj[firstFileName].push(firstPhotoOpponentParams);
     } else {
-        obj[firstPick] = [firstPhotoOpponentParams];
+      obj[firstFileName] = [firstPhotoOpponentParams];
     }
 
-      if (obj[secondPick]) {
-        obj[secondPick].push(secondPhotoOpponentParams);
+    if (obj[secondFileName]) {
+      obj[secondFileName].push(secondPhotoOpponentParams);
     } else {
-        obj[secondPick] = [secondPhotoOpponentParams];
+      obj[secondFileName] = [secondPhotoOpponentParams];
     }
 
     return obj;
   }, {} as Record<string, [number, number, number][]>);
 
-    for (const [photoFileName, votes] of Object.entries(
-      votesGrouppedByPhotos
-    )) {
-      const photo = db.photos.find(
-        ({ fileName }) => fileName === photoFileName
-      )!;
+  for (const [photoFileName, votes] of Object.entries(votesGrouppedByPhotos)) {
+    const photo = db.photos.find(({ fileName }) => fileName === photoFileName)!;
     const newRatingParams = glicko2(photo.rating, photo.rd, photo.vol, votes);
 
     Object.assign(photo, newRatingParams);
   }
 };
 
+watchEffect(() => localStorage.setItem('db', JSON.stringify(db)));
+
+export function useVote() {
   return {
     photosInCurrentVote,
     photosForFirstPick,