Stand animation scale (#10)

Scale the stand animation with the window

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.30.0] - 2020-04-10
+### Added
+- Scale the stand animation when resizing the window
+
 ## [0.29.1] - 2020-04-02
 ### Added
 - Documentation to create stage illustration
@@ -38,7 +42,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Random character includes styles
 - Random character select the first color automatically
 
-[Unreleased]: https://github.com/mugen-launcher/quick-versus/compare/0.29.1...HEAD
+[Unreleased]: https://github.com/mugen-launcher/quick-versus/compare/0.30.0...HEAD
+[0.30.0]: https://github.com/mugen-launcher/quick-versus/compare/0.29.1...0.30.0
 [0.29.1]: https://github.com/mugen-launcher/quick-versus/compare/0.29.0...0.29.1
 [0.29.0]: https://github.com/mugen-launcher/quick-versus/compare/0.28.1...0.29.0
 [0.28.1]: https://github.com/mugen-launcher/quick-versus/compare/0.28.0...0.28.1

package.json

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

src/side/common/useStandAnimationScaleBasedOnWindowHeight.hook.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+function getScaleBasedOnWindowHeight() {
+  return window.innerHeight / 1000;
+}
+
+export default function useStandAnimationScaleBasedOnWindowHeight() {
+  const [scale, setScale] = useState(getScaleBasedOnWindowHeight());
+
+  useEffect(() => {
+    const onResize = () => {
+      setScale(getScaleBasedOnWindowHeight());
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return scale;
+}

src/side/left/standAnimation.view.jsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import useCharacterStandAnimation from "../../character/useCharacterStandAnimation.hook";
 import useCharacterSizeScale from "../../character/useCharacterSizeScale.hook";
 import useCharacterAnimationOptions from "../../configuration/useCharacterAnimationOptions.hook";
+import useStandAnimationScaleBasedOnWindowHeight from "../common/useStandAnimationScaleBasedOnWindowHeight.hook";
 
 const Image = styled.img`
   position: absolute;
@@ -16,6 +17,7 @@ const Image = styled.img`
 export default function StandAnimation({ character, colorIndex }) {
   const options = useCharacterAnimationOptions();
   const standAnimation = useCharacterStandAnimation(character, colorIndex);
+  const defaultScale = useStandAnimationScaleBasedOnWindowHeight();
   const scale = useCharacterSizeScale(character);
 
   if (!standAnimation) {
@@ -33,11 +35,11 @@ export default function StandAnimation({ character, colorIndex }) {
     }
   }
 
-  let xScale = 1;
-  let yScale = 1;
+  let xScale = defaultScale;
+  let yScale = defaultScale;
   if (scale) {
-    xScale = scale.x;
-    yScale = scale.y;
+    xScale *= scale.x;
+    yScale *= scale.y;
   }
 
   xScale *= options.scaleFactor;

src/side/right/standAnimation.view.jsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import useCharacterStandAnimation from "../../character/useCharacterStandAnimation.hook";
 import useCharacterSizeScale from "../../character/useCharacterSizeScale.hook";
 import useCharacterAnimationOptions from "../../configuration/useCharacterAnimationOptions.hook";
+import useStandAnimationScaleBasedOnWindowHeight from "../common/useStandAnimationScaleBasedOnWindowHeight.hook";
 
 const Image = styled.img`
   position: absolute;
@@ -16,6 +17,7 @@ const Image = styled.img`
 export default function StandAnimation({ character, colorIndex }) {
   const options = useCharacterAnimationOptions();
   const standAnimation = useCharacterStandAnimation(character, colorIndex);
+  const defaultScale = useStandAnimationScaleBasedOnWindowHeight();
   const scale = useCharacterSizeScale(character);
 
   if (!standAnimation) {
@@ -33,11 +35,11 @@ export default function StandAnimation({ character, colorIndex }) {
     }
   }
 
-  let xScale = 1;
-  let yScale = 1;
+  let xScale = defaultScale;
+  let yScale = defaultScale;
   if (scale) {
-    xScale = scale.x;
-    yScale = scale.y;
+    xScale *= scale.x;
+    yScale *= scale.y;
   }
 
   xScale *= options.scaleFactor;