diff --git a/TODO.md b/TODO.md index f25778f..1155653 100644 --- a/TODO.md +++ b/TODO.md @@ -1,7 +1,6 @@ =========== -- Text cuttoff with attacks (meow) -- Add nodrag to images +- Text cuttoff with attacks =========== diff --git a/src/components/Evolution.tsx b/src/components/Evolution.tsx index d5285b9..f0bc28b 100644 --- a/src/components/Evolution.tsx +++ b/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%; diff --git a/src/components/GameboyMenu.tsx b/src/components/GameboyMenu.tsx index 594691f..7c462d4 100644 --- a/src/components/GameboyMenu.tsx +++ b/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; diff --git a/src/components/Paint.tsx b/src/components/Paint.tsx index 9592c8f..a74a780 100644 --- a/src/components/Paint.tsx +++ b/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%; `; diff --git a/src/components/PokemonEncounter.tsx b/src/components/PokemonEncounter.tsx index 8a7c6ba..67ff6cd 100644 --- a/src/components/PokemonEncounter.tsx +++ b/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) { diff --git a/src/components/PokemonRow.tsx b/src/components/PokemonRow.tsx index b275912..c5a6a53 100644 --- a/src/components/PokemonRow.tsx +++ b/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; diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 63aba86..0ebaf5f 100644 --- a/src/components/Text.tsx +++ b/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%; diff --git a/src/styles/PixelImage.tsx b/src/styles/PixelImage.tsx index 93d51da..0292e68 100644 --- a/src/styles/PixelImage.tsx +++ b/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;