-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add animation abstraction & some tests
- Loading branch information
Showing
9 changed files
with
350 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import { useState } from 'react'; | ||
|
||
export interface TimedAnimation { | ||
duration: number; | ||
type: AnimationType; | ||
opacity: number; | ||
newColor?: string; | ||
} | ||
|
||
type AnimationType = 'flashing' | 'flickering' | 'highlighted-margins'; | ||
|
||
export interface AnimatedCell { | ||
cellIndex: number; | ||
animation: TimedAnimation; | ||
} | ||
|
||
export const createTimedAnimation = ( | ||
duration: number, | ||
type: AnimationType, | ||
opacity: number, | ||
newColor?:string | ||
): TimedAnimation => ({ | ||
duration, | ||
type, | ||
opacity, | ||
newColor, | ||
}); | ||
|
||
const useHeapAnimation = () => { | ||
const [highlightedCells, setHighlightedCells] = useState<number[]>([]); | ||
const [animatedCells, setAnimatedCells] = useState<AnimatedCell[]>([]); | ||
const [animationTimeouts, setAnimationTimeouts] = useState<number[]>([]); | ||
|
||
const highlightCells = (cellIndices: number[]) => { | ||
setHighlightedCells(cellIndices); | ||
}; | ||
|
||
const clearHighlightedCells = () => { | ||
setHighlightedCells([]); | ||
}; | ||
|
||
const enqueueAnimation = (cellIndex: number, animation: TimedAnimation) => { | ||
// Remove any existing animation for this cell | ||
setAnimatedCells(prevState => prevState.filter(cell => cell.cellIndex !== cellIndex)); | ||
setAnimatedCells(prevState => [...prevState, { cellIndex, animation }]); | ||
|
||
// Set timeout to clear the animation after its duration | ||
const timeout = window.setTimeout(() => { | ||
setAnimatedCells(prevState => prevState.filter(cell => cell.cellIndex !== cellIndex)); | ||
}, animation.duration); | ||
|
||
setAnimationTimeouts(prevState => [...prevState, timeout]); | ||
}; | ||
|
||
const clearAnimations = () => { | ||
// Clear all animated cells | ||
setAnimatedCells([]); | ||
|
||
// Clear any pending animation timeouts | ||
animationTimeouts.forEach(timeout => clearTimeout(timeout)); | ||
setAnimationTimeouts([]); | ||
}; | ||
|
||
return { | ||
highlightedCells, | ||
highlightCells, | ||
clearHighlightedCells, | ||
animatedCells, | ||
enqueueAnimation, | ||
clearAnimations | ||
}; | ||
}; | ||
|
||
export default useHeapAnimation; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
const darkenColor = (hex: string, percent: number): string => { | ||
// Convert the hex to RGB values | ||
let r: number = parseInt(hex.substring(1, 3), 16); | ||
let g: number = parseInt(hex.substring(3, 5), 16); | ||
let b: number = parseInt(hex.substring(5, 7), 16); | ||
|
||
// Calculate the adjustment value | ||
let adjust = (amount: number, color: number) => { | ||
return Math.round(color * (1 - amount)); | ||
}; | ||
|
||
r = adjust(percent, r); | ||
g = adjust(percent, g); | ||
b = adjust(percent, b); | ||
|
||
// Convert the RGB values back to hex | ||
return "#" + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.