diff --git a/src/classes/factories/ScreenPropFactory.ts b/src/classes/factories/ScreenPropFactory.ts index 2de5543..db78a28 100644 --- a/src/classes/factories/ScreenPropFactory.ts +++ b/src/classes/factories/ScreenPropFactory.ts @@ -132,6 +132,16 @@ class ScreenPropFactory implements Factory { } break; + case "statusPreview": + // Setup the props + returned.props = { + trial: this.trial.trial, + display: this.trial.display, + isPartnerHighStatus: this.trial.isPartnerHighStatus, + handler: this.handler.callback.bind(this.handler), + }; + break; + // Loading screen case "loading": if (this.trial.loadingType === "social") { diff --git a/src/index.tsx b/src/index.tsx index 5aa017d..892dcd7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -836,39 +836,6 @@ timeline.push({ }, }); -// Insert instructions if the participant will be shown their status -if (Configuration.manipulations.enableStatusPhaseOne === true) { - timeline.push({ - type: "instructions", - pages: [ - react2html( - - - - Instructions - - - Stage One - - - In the next phase, you will be able to see your partner's social - standing in comparison to your own. - - - Press 'Next >' to continue. - - - - ), - ], - allow_keys: Configuration.manipulations.useButtonInput, - key_forward: BINDINGS.NEXT, - key_backward: BINDINGS.PREVIOUS, - show_page_number: true, - show_clickable_nav: true, - }); -} - // Insert instructions to let the participant know they will // be matched with a partner timeline.push({ @@ -914,6 +881,15 @@ timeline.push({ loadingType: "matchingIntentions", }); +// Insert `statusPreview` screen if the participant will be shown their status +if (Configuration.manipulations.enableStatusPhaseOne === true) { + timeline.push({ + type: Configuration.studyName, + display: "statusPreview", + isPartnerHighStatus: Configuration.manipulations.isPartnerHighStatusPhaseOne, + }) +} + // Set and store the data collection let dataCollection: Row[]; @@ -1235,39 +1211,6 @@ for (let i = 0; i < dataCollection.length; i++) { }, }); - // Insert instructions if the participant will be shown their status - if (Configuration.manipulations.enableStatusPhaseTwo === true) { - timeline.push({ - type: "instructions", - pages: [ - react2html( - - - - Instructions - - - Stage Two - - - In the next phase, you will be able to see your partner's social - standing in comparison to your own. - - - Press 'Next >' to continue. - - - - ), - ], - allow_keys: Configuration.manipulations.useButtonInput, - key_forward: BINDINGS.NEXT, - key_backward: BINDINGS.PREVIOUS, - show_page_number: true, - show_clickable_nav: true, - }); - } - // Insert instructions to let the participant know they will // be matched with a partner timeline.push({ @@ -1313,6 +1256,15 @@ for (let i = 0; i < dataCollection.length; i++) { loadingType: "matchingIntentions", }); + // Insert `statusPreview` screen if the participant will be shown their status + if (Configuration.manipulations.enableStatusPhaseTwo === true) { + timeline.push({ + type: Configuration.studyName, + display: "statusPreview", + isPartnerHighStatus: Configuration.manipulations.isPartnerHighStatusPhaseTwo, + }) + } + break; } case "mid2": { @@ -1451,39 +1403,6 @@ for (let i = 0; i < dataCollection.length; i++) { }, }); - // Insert instructions if the participant will be shown their status - if (Configuration.manipulations.enableStatusPhaseThree === true) { - timeline.push({ - type: "instructions", - pages: [ - react2html( - - - - Instructions - - - Stage Three - - - In the next phase, you will be able to see your partner's social - standing in comparison to your own. - - - Press 'Next >' to continue. - - - - ), - ], - allow_keys: Configuration.manipulations.useButtonInput, - key_forward: BINDINGS.NEXT, - key_backward: BINDINGS.PREVIOUS, - show_page_number: true, - show_clickable_nav: true, - }); - } - timeline.push({ type: "instructions", pages: [ @@ -1529,6 +1448,15 @@ for (let i = 0; i < dataCollection.length; i++) { loadingType: "matchingIntentions", }); + // Insert `statusPreview` screen if the participant will be shown their status + if (Configuration.manipulations.enableStatusPhaseThree === true) { + timeline.push({ + type: Configuration.studyName, + display: "statusPreview", + isPartnerHighStatus: Configuration.manipulations.isPartnerHighStatusPhaseThree, + }) + } + break; } case "playerGuess": { diff --git a/src/view/components/Wrapper/index.tsx b/src/view/components/Wrapper/index.tsx index 9cbf063..3547724 100644 --- a/src/view/components/Wrapper/index.tsx +++ b/src/view/components/Wrapper/index.tsx @@ -33,8 +33,9 @@ import Status from "../../screens/Questionnaires/Status"; import DASS from "../../screens/Questionnaires/DASS"; import Screentime from "../../screens/Questionnaires/Screentime"; import Demographics from "../../screens/Questionnaires/Demographics"; -import Loaded from "../../screens/Loaded"; import Loading from "../../screens/Loading"; +import Loaded from "../../screens/Loaded"; +import StatusPreview from "src/view/screens/StatusPreview"; import Waiting from "../../screens/Waiting"; import End from "../../screens/End"; import Resources from "../../screens/Resources"; @@ -134,6 +135,10 @@ const Wrapper: FC = ( {activeDisplay === "loaded" && } + {activeDisplay === "statusPreview" && ( + + )} + {activeDisplay === "loading" && ( )} diff --git a/src/view/screens/StatusPreview/index.tsx b/src/view/screens/StatusPreview/index.tsx new file mode 100644 index 0000000..902565c --- /dev/null +++ b/src/view/screens/StatusPreview/index.tsx @@ -0,0 +1,76 @@ +/** + * @file `StatusPreview` screen to show participants their partner's social standing. + * + * This screen displays the partner's social standing to participants + * at the start of a game phase. Key features include: + * - Partner social standing presentation + * - Partner avatar presentation + * + * @author Henry Burgess + */ + +// React import +import React, { FC, ReactElement } from "react"; + +// Grommet UI components +import { Box, Button, Layer, Paragraph } from "grommet"; +import { LinkNext } from "grommet-icons"; +import Status from "src/view/components/Status"; +import Avatar from "boring-neutral-avatars"; + +// Configuration +import { Configuration } from "src/configuration"; + +/** + * @summary Generate a 'StatusPreview' screen containing a card with the partner avatar for the subsequent phase of the game + * @param {FC} props Props object containing: + * - isPartnerHighStatus: {boolean} Whether the partner is in high status + * - handler: {function} Function to handle the continue button click + * @return {ReactElement} 'StatusPreview' screen with partner avatar and success message + */ +const Loaded: FC = (props: Props.Screens.StatusPreview): ReactElement => { + // Get the current partner avatar and social standing + const experiment = window.Experiment; + const partnerStatus = props.isPartnerHighStatus ? experiment.getState().get("partnerHighStatus") : experiment.getState().get("partnerLowStatus"); + + // Get the updated partner avatar + const partnerAvatar = Configuration.avatars.names.partner[ + experiment.getState().get("partnerAvatar") + ] + + return ( + + + + In this phase you will be able to see your partner's social standing. + + + + + Their ID has been hidden to preserve anonymity. + +