add skillmap option for pixellating the background image (#10877) (#10878)

* add skillmap option for pixellating the background image

* typo

Author: riknoll

skillmap/src/App.tsx

@@ -57,6 +57,7 @@ interface AppProps {
     skillMaps: { [key: string]: SkillMap };
     activityOpen: boolean;
     backgroundImageUrl: string;
+    pixelatedBackground?: boolean;
     theme: SkillGraphTheme;
     signedIn: boolean;
     activityId: string;
@@ -71,7 +72,7 @@ interface AppProps {
     dispatchSetPageTitle: (title: string) => void;
     dispatchSetPageDescription: (description: string) => void;
     dispatchSetPageInfoUrl: (infoUrl: string) => void;
-    dispatchSetPageBackgroundImageUrl: (backgroundImageUrl: string) => void;
+    dispatchSetPageBackgroundImageUrl: (backgroundImageUrl: string, pixelatedBackground?: boolean) => void;
     dispatchSetPageBannerImageUrl: (bannerImageUrl: string) => void;
     dispatchSetUser: (user: UserState) => void;
     dispatchSetPageSourceUrl: (url: string, status: PageSourceStatus) => void;
@@ -228,13 +229,13 @@ class AppImpl extends React.Component<AppProps, AppState> {
                 }
 
                 if (metadata) {
-                    const { title, description, infoUrl, backgroundImageUrl,
+                    const { title, description, infoUrl, backgroundImageUrl, pixelatedBackground,
                         bannerImageUrl, theme, alternateSources } = metadata;
                     setPageTitle(title);
                     this.props.dispatchSetPageTitle(title);
                     if (description) this.props.dispatchSetPageDescription(description);
                     if (infoUrl) this.props.dispatchSetPageInfoUrl(infoUrl);
-                    if (backgroundImageUrl) this.props.dispatchSetPageBackgroundImageUrl(backgroundImageUrl);
+                    if (backgroundImageUrl) this.props.dispatchSetPageBackgroundImageUrl(backgroundImageUrl, pixelatedBackground);
                     if (bannerImageUrl) this.props.dispatchSetPageBannerImageUrl(bannerImageUrl);
                     if (alternateSources) this.props.dispatchSetPageAlternateUrls(alternateSources);
                     if (theme) this.props.dispatchSetPageTheme(theme);
@@ -432,7 +433,7 @@ class AppImpl extends React.Component<AppProps, AppState> {
     }
 
     render() {
-        const { skillMaps, activityOpen, backgroundImageUrl, theme } = this.props;
+        const { skillMaps, activityOpen, backgroundImageUrl, theme, pixelatedBackground } = this.props;
         const { error, showingSyncLoader, forcelang } = this.state;
         const maps = Object.keys(skillMaps).map((id: string) => skillMaps[id]);
         const feedbackEnabled = pxt.U.ocvEnabled();
@@ -446,7 +447,7 @@ class AppImpl extends React.Component<AppProps, AppState> {
                 <div className={`skill-map-container ${activityOpen ? "hidden" : ""}`} style={{ backgroundColor: theme.backgroundColor }}>
                     { error
                         ? <div className="skill-map-error">{error}</div>
-                        : <SkillGraphContainer maps={maps} backgroundImageUrl={backgroundImageUrl} backgroundColor={theme.backgroundColor} strokeColor={theme.strokeColor} />
+                        : <SkillGraphContainer maps={maps} backgroundImageUrl={backgroundImageUrl} backgroundColor={theme.backgroundColor} pixelatedBackground={pixelatedBackground} strokeColor={theme.strokeColor} />
                     }
                     { !error && <InfoPanel onFocusEscape={this.focusCurrentActivity} />}
                 </div>
@@ -568,6 +569,7 @@ function mapStateToProps(state: SkillMapState, ownProps: any) {
         skillMaps: state.maps,
         activityOpen: !!state.editorView,
         backgroundImageUrl: state.backgroundImageUrl,
+        pixelatedBackground: state.pixelatedBackground,
         theme: state.theme,
         signedIn: state.auth.signedIn,
         activityId: state.selectedItem?.activityId,

skillmap/src/actions/dispatch.ts

@@ -21,7 +21,7 @@ export const dispatchResetUser = () => ({ type: actions.RESET_USER });
 export const dispatchSetPageTitle = (title: string) => ({ type: actions.SET_PAGE_TITLE, title });
 export const dispatchSetPageDescription = (description: string) => ({ type: actions.SET_PAGE_DESCRIPTION, description });
 export const dispatchSetPageInfoUrl = (infoUrl: string) => ({ type: actions.SET_PAGE_INFO_URL, infoUrl });
-export const dispatchSetPageBackgroundImageUrl = (backgroundImageUrl: string) => ({ type: actions.SET_PAGE_BACKGROUND_IMAGE_URL, backgroundImageUrl });
+export const dispatchSetPageBackgroundImageUrl = (backgroundImageUrl: string, pixelatedBackground?: boolean) => ({ type: actions.SET_PAGE_BACKGROUND_IMAGE_URL, backgroundImageUrl, pixelatedBackground });
 export const dispatchSetPageBannerImageUrl = (bannerImageUrl: string) => ({ type: actions.SET_PAGE_BANNER_IMAGE_URL, bannerImageUrl });
 export const dispatchSetPageTheme = (theme: SkillGraphTheme) => ({ type: actions.SET_PAGE_THEME, theme });
 export const dispatchSetPageSourceUrl = (url: string, status: PageSourceStatus) => ({ type: actions.SET_PAGE_SOURCE_URL, url, status });

skillmap/src/components/SkillGraphContainer.tsx

@@ -15,6 +15,7 @@ interface SkillGraphContainerProps {
     graphs: SvgGraph[];
     backgroundImageUrl: string;
     backgroundColor: string;
+    pixelatedBackground?: boolean;
     strokeColor: string;
     graphSize: {
         width: number;
@@ -50,7 +51,7 @@ export class SkillGraphContainerImpl extends React.Component<SkillGraphContainer
     }
 
     render() {
-        const { maps, graphs, graphSize, backgroundImageUrl, backgroundColor, strokeColor } = this.props;
+        const { maps, graphs, graphSize, backgroundImageUrl, pixelatedBackground, backgroundColor, strokeColor } = this.props;
         const { backgroundSize } = this.state;
         let altTextColor: string = 'black';
         let backgroundAltText: string = lf("Background image for {0}", maps[0]?.displayName || lf("skillmap"));
@@ -97,7 +98,13 @@ export class SkillGraphContainerImpl extends React.Component<SkillGraphContainer
                     </svg>
                 </MenuBar>
                 {backgroundImageUrl && <div className="skill-graph-background">
-                    <img src={backgroundImageUrl} alt={backgroundAltText} onLoad={this.onImageLoad} style={{ color: altTextColor }} />
+                    <img
+                        src={backgroundImageUrl}
+                        className={pixelatedBackground ? "pixelated" : undefined}
+                        alt={backgroundAltText}
+                        onLoad={this.onImageLoad}
+                        style={{ color: altTextColor }}
+                    />
                 </div>}
             </div>
         </div>

skillmap/src/lib/skillMap.d.ts

@@ -3,6 +3,7 @@ interface PageMetadata {
     description?: string;
     infoUrl?: string;
     backgroundImageUrl?: string;
+    pixelatedBackground?: boolean;
     bannerImageUrl?: string; // Banner image in the info panel when no activity is selected
     theme?: SkillGraphTheme
     alternateSources?: string[]; // List of alternate pageSourceUrls to import user projects from

skillmap/src/lib/skillMapParser.ts

@@ -389,6 +389,7 @@ function inflateMetadata(section: MarkdownSection): PageMetadata {
         description: section.attributes["description"],
         infoUrl: cleanInfoUrl(section.attributes["infourl"]),
         backgroundImageUrl: section.attributes["backgroundurl"],
+        pixelatedBackground: isTrue(section.attributes["pixelatedbackground"]),
         bannerImageUrl: section.attributes["bannerurl"],
         alternateSources: parseList(section.attributes["alternatesources"]),
         theme: {

skillmap/src/store/reducer.ts

@@ -14,6 +14,7 @@ export interface SkillMapState {
     description: string;
     infoUrl?: string;
     backgroundImageUrl?: string;
+    pixelatedBackground?: boolean;
     bannerImageUrl?: string;
     user: UserState;
     pageSourceUrl: string;
@@ -124,6 +125,7 @@ const topReducer = (state: SkillMapState = initialState, action: any): SkillMapS
                 description: initialState.description,
                 infoUrl: initialState.infoUrl,
                 backgroundImageUrl: undefined,
+                pixelatedBackground: undefined,
                 bannerImageUrl: undefined,
                 alternateSourceUrls: undefined,
                 theme: {
@@ -326,7 +328,8 @@ const topReducer = (state: SkillMapState = initialState, action: any): SkillMapS
         case actions.SET_PAGE_BACKGROUND_IMAGE_URL:
             return {
                 ...state,
-                backgroundImageUrl: action.backgroundImageUrl
+                backgroundImageUrl: action.backgroundImageUrl,
+                pixelatedBackground: action.pixelatedBackground
             }
         case actions.SET_PAGE_BANNER_IMAGE_URL:
             return {

skillmap/src/styles/skillgraph.css

@@ -37,6 +37,10 @@
     max-height: 100%;
 }
 
+.skill-graph-background img.pixelated {
+    image-rendering: pixelated;
+}
+
 /*******************************/
 /*****   HIGH CONTRAST     *****/
 /*******************************/