The best Mario Makers from around the world showcase their style.
- resize images
- download and parse csv
- combine image and csv data
- check existence of needed level, maker, thumbnail
- output
themes.json
in convenient format for react
Run react app using generated themes.json
and images
Build production version of the site to upload to mmcelebration.com
Every page of the website is post-processed via react snap.
To get all the art work in sync, the crew uses a google spreadsheet to keep track of everything. This goes in to the trailers, the art work and the website.
This code base downloads the spreadsheet information and combines it with images and art work to build the final product.
Get the data for the current theme
const {data} = useTheme();
// data includes all the data for the current theme
<PublicImage {...data.images.logo} />
Get the current level
const {level} = useLevel();
Get the current batch
const {batch} = useBatch();
All original images are collected here using snake_case naming.
All images will be resized to single and double format, a href and srcSet attribute are stored in themes.json.
export { default as _4ymm } from "./4ymm.module.css";
export { default as _5ymm } from "./5ymm.module.css";
export { default as _6ymm } from "./5ymm.module.css"; // same as 5ymm
export { default as _7mmc } from "./7mmc.module.css";
export { default as _8mmc } from "./8mmc.module.css";
Each theme sets css variables that alter the look of the website. This file needs to have such an export for each theme.
Any class defined in a theme has to be defined in all the themes. Currently only the Theme class is used to keep it simple.
const Theme = useCss('Theme')
...
<App className={Theme}>
This applies the current theme's css variables to the website.
export * as _4ymm from "./4ymm";
export * as _5ymm from "./5ymm";
export * as _6ymm from "./5ymm"; // same as 5ymm
export * as _7mmc from "./7mmc";
export * as _8mmc from "./8mmc";
export * as _default from "./default";
The welcome, about and credit contents are exported here. Use it like so:
<Content.About />
<Content.Welcome />
<Content.Credits />
Using these components will automatically load the right content for the theme, based on what is available. Any props given to the component will be given to the final component as well.
...
_5ymm: {
gid: 588603541,
weektrailers: ["b26QvbP4MUI", "-f83uRDCZpA", "ouKbaTu5YKc", "13Sb6V8ydPM"],
}
This is the entry point for all themes. There's a few requirements:
- GID for the spreadsheet
- Weektrailer for each batch in the spreadsheet
- Resized maker image, screenshot and thumbnail image in
/public