cursor animation

index.js

@@ -55,7 +55,7 @@ function createWindow() {
         frame = config.frame;
       }
     }
-  } catch(error) {
+  } catch (error) {
     // No override
   }
 

package.json

@@ -2,7 +2,7 @@
   "name": "mugen-quick-versus-launcher",
   "author": "neolao",
   "license": "MIT",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "description": "Mugen launcher for Quick Versus",
   "keywords": [
     "mugen",

src/category/__tests__/useCategoryIndex.hook.test.js

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks"
+import { renderHook, act } from "@testing-library/react-hooks";
 import useCategoryIndex from "../useCategoryIndex.hook";
 
 describe("useCategoryIndex()", () => {
@@ -23,7 +23,7 @@ describe("useCategoryIndex()", () => {
     const { result } = renderHook(() => useCategoryIndex(categories, input));
     act(() => {
       input.dispatchEvent(new Event("y"));
-    })
+    });
     expect(result.current).toEqual(1);
   });
 
@@ -34,7 +34,7 @@ describe("useCategoryIndex()", () => {
     const { result } = renderHook(() => useCategoryIndex(categories, input, initialValue));
     act(() => {
       input.dispatchEvent(new Event("x"));
-    })
+    });
     expect(result.current).toEqual(1);
   });
 
@@ -45,7 +45,7 @@ describe("useCategoryIndex()", () => {
     const { result } = renderHook(() => useCategoryIndex(categories, input, initialValue));
     act(() => {
       input.dispatchEvent(new Event("y"));
-    })
+    });
     expect(result.current).toEqual(0);
   });
 
@@ -56,7 +56,7 @@ describe("useCategoryIndex()", () => {
     const { result } = renderHook(() => useCategoryIndex(categories, input, initialValue));
     act(() => {
       input.dispatchEvent(new Event("x"));
-    })
+    });
     expect(result.current).toEqual(1);
   });
 });

src/character/characterSelector.view.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { remote } from "electron";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import getCharactersMatrix from "../character/getCharactersMatrix";
 import useCharacterColumns from "../configuration/useCharacterColumns.hook";
 import thumbnailPlaceholder from "../assets/character-thumbnail-placeholder.png";
@@ -29,12 +29,33 @@ const Thumbnail = styled.img`
   height: 100%;
   object-fit: cover;
 `;
-const Selection = styled.div`
+
+const grow = keyframes`
+  0% {
+    width: 7vh;
+    height: 7vh;
+    transform: translateX(0) translateY(0);
+  }
+
+  50% {
+    width: 9vh;
+    height: 9vh;
+    transform: translateX(-1vh) translateY(-1vh);
+  }
+
+  100% {
+    width: 7vh;
+    height: 7vh;
+    transform: translateX(0) translateY(0);
+  }
+`;
+const Cursor = styled.div`
   position: absolute;
-  border: solid 3px #f00;
-  box-shadow: 0 0 0 3px #f00;
+  border: solid 5px #f00;
   width: 7vh;
   height: 7vh;
+  animation: ${grow} 1s ease-in-out infinite;
+  box-shadow: 0 0 0.2vh 0.2vh #000, inset 0 0 0.2vh 0.2vh #000;
   grid-row-start: ${props => props.row};
   grid-row-end: ${props => props.row};
   grid-column-start: ${props => props.column};
@@ -78,7 +99,7 @@ export default function CharacterSelector({ characters, selectedCharacter }) {
   return (
     <Grid column={columnCount} offsetY={offsetY}>
       {cells}
-      <Selection row={selectionRow} column={selectionColumn} />
+      <Cursor row={selectionRow} column={selectionColumn} />
     </Grid>
   );
 }

src/character/useCharacterThumbnail.hook.js

@@ -1,6 +1,6 @@
 import { remote } from "electron";
 import useEnvironment from "../configuration/useEnvironment.hook";
-import randomCharacter from "../assets/random-character.png"
+import randomCharacter from "../assets/random-character.png";
 const fs = remote.require("fs");
 const path = remote.require("path");
 

src/configuration/noSound.js

@@ -1,4 +1,4 @@
 export default {
   play: () => {},
   pause: () => {}
-}
+};

src/configuration/useCancelSound.hook.js

@@ -29,6 +29,6 @@ export default function useCancelSound() {
         audio.currentTime = 0;
         audio.play();
       }
-    }
+    };
   });
 }

src/configuration/useMoveCursorSound.hook.js

@@ -29,6 +29,6 @@ export default function useMoveCursorSound() {
         audio.currentTime = 0;
         audio.play();
       }
-    }
+    };
   });
 }

src/configuration/useSelectAILevelSound.hook.js

@@ -29,6 +29,6 @@ export default function useSelectAILevelSound() {
         audio.currentTime = 0;
         audio.play();
       }
-    }
+    };
   });
 }

src/configuration/useSelectCharacterSound.hook.js

@@ -29,6 +29,6 @@ export default function useSelectCharacterSound() {
         audio.currentTime = 0;
         audio.play();
       }
-    }
+    };
   });
 }

src/input/useGamepad.hook.js

@@ -50,10 +50,14 @@ export default function useGamepads() {
                 buttons.push(value === 0.7142857313156128 || value === 1 || value === 0.4285714626312256);
 
                 // down
-                buttons.push(value === 0.14285719394683838 || value === 0.4285714626312256 || value === -0.1428571343421936);
+                buttons.push(
+                  value === 0.14285719394683838 || value === 0.4285714626312256 || value === -0.1428571343421936
+                );
 
                 // right
-                buttons.push(value === -0.4285714030265808 || value === -0.7142857313156128 || value === -0.1428571343421936);
+                buttons.push(
+                  value === -0.4285714030265808 || value === -0.7142857313156128 || value === -0.1428571343421936
+                );
               }
             }
 
@@ -79,7 +83,7 @@ export default function useGamepads() {
         console.error(error);
       }
       window.requestAnimationFrame(scanGamepads);
-    }
+    };
     scanGamepads();
   }, [emitter]);