-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Show default thumbnail * Add color picker * Customizable logo * It kinda works * Save multiple thumbnails * Support for character icons * Fix unknown characters
- Loading branch information
1 parent
46374dc
commit 63bb61f
Showing
98 changed files
with
825 additions
and
100 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
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
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
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,91 @@ | ||
import React, {ReactInstance, ReactNode} from "react"; | ||
import { Box, Grid, Typography } from "@mui/material"; | ||
import DefaultIcon from '../../../assets/MsLogo.png'; | ||
|
||
const ThumbnailText = (text: string, variant: any) => { | ||
return ( | ||
<Typography variant={variant} sx={{ color: 'white', fontWeight: 'bold', textAlign: 'center'}} noWrap> | ||
{text} | ||
</Typography> | ||
) | ||
} | ||
|
||
interface Props { | ||
children?: ReactNode; | ||
scale?: string; | ||
bgColor?: string; | ||
logo?: string; | ||
player1?: string; | ||
player2?: string; | ||
character1?: string; | ||
character2?: string; | ||
bottomText?: string; | ||
visible?: boolean; | ||
title?: string; | ||
} | ||
export type Ref = ReactInstance; | ||
|
||
const characterFolder = './characters/'; | ||
|
||
// Create Document Component | ||
const ThumbnailGenerator = React.forwardRef<Ref, Props>((props, ref) => { | ||
// console.log("images", images) | ||
let displayOption = props.visible ? 'block' : 'none'; | ||
return ( | ||
<Box id={props.title} ref={ref} sx={{ height: '720px', width: '1280px', backgroundColor: '#B9F3FC', scale: props.scale, transformOrigin: 'top left', display: displayOption }}> | ||
<Grid container> | ||
<Grid item xs={12}> | ||
<Grid container sx={{ width: '100%', height: '110px', backgroundColor: 'black'}}> | ||
<Grid item xs={5} className="centered-flex"> | ||
{ThumbnailText(props.player1!, "h3")} | ||
</Grid> | ||
<Grid item xs={2} className="centered-flex"> | ||
{ThumbnailText('VS', "h1")} | ||
</Grid> | ||
<Grid item xs={5} className="centered-flex"> | ||
{ThumbnailText(props.player2!, "h3")} | ||
</Grid> | ||
</Grid> | ||
</Grid> | ||
<Grid item xs={12}> | ||
<Grid container sx={{ width: '100%', height: '500px', backgroundColor: props.bgColor}}> | ||
<Grid sx={{ position: 'relative', left: '-50px', bottom: '10px'}} item xs={5} className="centered-flex"> | ||
<img src={require(`${ characterFolder + props.character1 + '.png' }`)} /> | ||
</Grid> | ||
<Grid item xs={2} className="centered-flex"> | ||
<img src={props.logo === '' ? DefaultIcon : props.logo} width="250px" height="250px" /> | ||
</Grid> | ||
<Grid sx={{ position: 'relative', left: '50px', bottom: '10px'}} item xs={5} className="centered-flex"> | ||
<img src={require(`${ characterFolder + props.character2 + '.png' }`)} /> | ||
</Grid> | ||
</Grid> | ||
</Grid> | ||
<Grid item xs={12}> | ||
<Grid container sx={{ width: '100%', height: '110px', backgroundColor: 'black'}}> | ||
{/* <Grid item xs={2} className="centered-flex"> | ||
</Grid> */} | ||
<Grid item xs={12} className="centered-flex"> | ||
{ThumbnailText(props.bottomText!, "h2")} | ||
</Grid> | ||
{/* <Grid item xs={2} className="centered-flex"> */} | ||
{/* </Grid> */} | ||
</Grid> | ||
</Grid> | ||
</Grid> | ||
</Box> | ||
) | ||
}); | ||
|
||
ThumbnailGenerator.defaultProps = { | ||
scale: '1', | ||
bgColor: '#B9F3FC', | ||
logo: DefaultIcon, | ||
player1: 'Player 1', | ||
player2: 'Player 2', | ||
character1: 'Random Character', | ||
character2: 'Random Character', | ||
bottomText: 'Grand Finals', | ||
visible: true | ||
} | ||
|
||
export default ThumbnailGenerator |
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.