💄 add no-drag to images

TODO.md

@@ -1,7 +1,6 @@
 ===========
 
-- Text cuttoff with attacks (meow)
-- Add nodrag to images
+- Text cuttoff with attacks
 
 ===========
 

src/components/Evolution.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import usePokemonMetadata from "../app/use-pokemon-metadata";
 import useEvent from "../app/use-event";
 import { Event } from "../app/emitter";
+import PixelImage from "../styles/PixelImage";
 
 const StyledEvolution = styled.div`
   position: absolute;
@@ -110,7 +111,7 @@ const firstAnimation = keyframes`
   }
 `;
 
-const FirstPokemon = styled.img`
+const FirstPokemon = styled(PixelImage)`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -213,7 +214,7 @@ const secondAnimation = keyframes`
   }
 `;
 
-const SecondPokemon = styled.img`
+const SecondPokemon = styled(PixelImage)`
   position: absolute;
   top: 50%;
   left: 50%;

src/components/GameboyMenu.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import useEvent from "../app/use-event";
 import { Event } from "../app/emitter";
 import { hideGameboyMenu, selectGameboyMenu } from "../state/uiSlice";
+import PixelImage from "../styles/PixelImage";
 
 const StyledGameboyMenu = styled.div`
   position: absolute;
@@ -113,7 +114,7 @@ const apearIn = keyframes`
   }
 `;
 
-const Nintendo = styled.img`
+const Nintendo = styled(PixelImage)`
   height: 4%;
   opacity: 0;
 

src/components/Paint.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import map from "../assets/map/mt-moon-3f.png";
 import { useState } from "react";
 import { PosType } from "../state/state-types";
+import PixelImage from "../styles/PixelImage";
 
 const StyledPaint = styled.div`
   position: fixed;
@@ -19,7 +20,7 @@ const ImageContainer = styled.div`
   height: 100%;
 `;
 
-const Image = styled.img`
+const Image = styled(PixelImage)`
   height: 100%;
 `;
 

src/components/PokemonEncounter.tsx

@@ -60,6 +60,7 @@ import MoveSelect from "./MoveSelect";
 import catchesPokemon from "../app/pokeball-helper";
 import { PokemonEncounterType, PokemonInstance } from "../state/state-types";
 import getPokemonEncounter from "../app/pokemon-encounter-helper";
+import PixelImage from "../styles/PixelImage";
 
 const MOVEMENT_ANIMATION = 1300;
 const FRAME_DURATION = 100;
@@ -286,7 +287,7 @@ const inFromRight = keyframes`
   }
 `;
 
-const LeftImage = styled.img`
+const LeftImage = styled(PixelImage)`
   height: 100%;
 
   transform: translate(400%);
@@ -302,7 +303,7 @@ const inFromLeft = keyframes`
   }
 `;
 
-const RightImage = styled.img`
+const RightImage = styled(PixelImage)`
   height: 100%;
 
   transform: translate(-400%);
@@ -357,7 +358,7 @@ const AttackLeft = styled.div<AttackingProps>`
     `};
 `;
 
-const Corner = styled.img`
+const Corner = styled(PixelImage)`
   transform: translateY(-50%);
 
   height: 8vh;
@@ -373,7 +374,7 @@ const CornerContainer = styled.div`
   }
 `;
 
-const CornerRight = styled.img`
+const CornerRight = styled(PixelImage)`
   height: 8vh;
   transform: translateY(-70%) scaleX(-1);
   @media (max-width: 1000px) {

src/components/PokemonRow.tsx

@@ -27,6 +27,7 @@ import ballB from "../assets/pokemon/simple/ball-b.png";
 import usePokemonStats from "../app/use-pokemon-stats";
 import { PokemonInstance } from "../state/state-types";
 import { MoveMetadata } from "../app/move-metadata";
+import PixelImage from "../styles/PixelImage";
 
 const getIcons = (metadata: PokemonMetadata): { a: string; b: string } => {
   // Is Voltorb or Electrode
@@ -100,7 +101,7 @@ const ArrowContainer = styled.div`
   align-items: center;
 `;
 
-const Image = styled.img`
+const Image = styled(PixelImage)`
   height: 19px;
   margin-right: 10px;
 

src/components/Text.tsx

@@ -17,6 +17,7 @@ import {
 } from "../state/uiSlice";
 import { Direction } from "../state/state-types";
 import { useActiveMapQuests } from "../app/use-quests";
+import PixelImage from "../styles/PixelImage";
 
 interface TextProps {
   $done: boolean;
@@ -86,7 +87,7 @@ const StyledText = styled.div<TextProps>`
   }
 `;
 
-const Image = styled.img`
+const Image = styled(PixelImage)`
   height: 60%;
   position: absolute;
   top: 50%;

src/styles/PixelImage.tsx

@@ -8,6 +8,12 @@ const PixelImage = styled.img`
   image-rendering: pixelated;
   image-rendering: optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor;
+
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  user-select: none;
 `;
 
 export default PixelImage;