Skip to content

Commit 6b4f3b2

Browse files
triniftrinif
committed
removing console logs
1 parent 9699703 commit 6b4f3b2

3 files changed

Lines changed: 194 additions & 203 deletions

File tree

‎client/src/Stage.jsx‎

Lines changed: 89 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,89 @@
1-
import { useStage, usePlayer } from "@empirica/core/player/classic/react";
2-
import React, { useEffect, useMemo } from "react";
3-
import {
4-
TimeConditionalRender,
5-
PositionConditionalRender,
6-
ConditionsConditionalRender,
7-
SubmissionConditionalRender,
8-
} from "./components/ConditionalRender";
9-
import { Discussion } from "./elements/Discussion";
10-
import { Element } from "./elements/Element";
11-
12-
export function Stage() {
13-
console.log("Before use stage");
14-
15-
const stage = useStage();
16-
const player = usePlayer();
17-
18-
const progressLabel = useMemo(
19-
() =>
20-
`game_${stage.get("index")}_${stage
21-
.get("name")
22-
.trim()
23-
.replace(/ /g, "_")}`, // replace ALL spaces with underscores
24-
[stage]
25-
); // memoize so we don't trigger the useEffect on every render
26-
27-
useEffect(() => {
28-
if (player.get("progressLabel") !== progressLabel) {
29-
console.log(`Starting ${progressLabel}`);
30-
player.set("progressLabel", progressLabel);
31-
player.set("localStageStartTime", undefined); // force use of stageTimer
32-
}
33-
}, [progressLabel, player]);
34-
35-
const discussion = stage?.get("discussion");
36-
const elements = stage?.get("elements") || [];
37-
38-
// console.log("Elements in stage", elements);
39-
40-
const renderElement = (element, index) => (
41-
<TimeConditionalRender
42-
displayTime={element.displayTime}
43-
hideTime={element.hideTime}
44-
key={`element_${index}`}
45-
>
46-
<PositionConditionalRender
47-
showToPositions={element.showToPositions}
48-
hideFromPositions={element.hideFromPositions}
49-
>
50-
<ConditionsConditionalRender conditions={element.conditions}>
51-
<Element
52-
element={element}
53-
onSubmit={() => player.stage.set("submit", true)}
54-
/>
55-
</ConditionsConditionalRender>
56-
</PositionConditionalRender>
57-
</TimeConditionalRender>
58-
);
59-
60-
const renderDiscussionPage = () => (
61-
// If the page is larger than 'md', render two columns
62-
// with the left being the discussion at a fixed location
63-
// and the right being the elements.
64-
// If the page is smaller than 'md' render the discussion at the top
65-
// and the elements below it.
66-
67-
<>
68-
<div className="md:absolute md:left-0 md:top-0 md:bottom-0 md:right-150">
69-
<Discussion
70-
chatType={discussion.chatType}
71-
showNickname={discussion.showNickname ?? true}
72-
showTitle={discussion.showTitle}
73-
/>
74-
</div>
75-
76-
<div className="pb-4 px-4 md:absolute md:right-0 md:w-150 md:bottom-0 md:top-0 md:overflow-auto md:scroll-smooth">
77-
{elements.map(renderElement)}
78-
</div>
79-
</>
80-
);
81-
82-
const renderNoDiscussionPage = () => (
83-
<div className="mx-auto max-w-2xl pb-2">{elements.map(renderElement)}</div>
84-
);
85-
86-
return (
87-
<SubmissionConditionalRender>
88-
{!!discussion && renderDiscussionPage()}
89-
{!discussion && renderNoDiscussionPage()}
90-
</SubmissionConditionalRender>
91-
);
92-
}
1+
import { useStage, usePlayer } from "@empirica/core/player/classic/react";
2+
import React, { useEffect, useMemo } from "react";
3+
import {
4+
TimeConditionalRender,
5+
PositionConditionalRender,
6+
ConditionsConditionalRender,
7+
SubmissionConditionalRender,
8+
} from "./components/ConditionalRender";
9+
import { Discussion } from "./elements/Discussion";
10+
import { Element } from "./elements/Element";
11+
12+
export function Stage() {
13+
14+
const stage = useStage();
15+
const player = usePlayer();
16+
17+
const progressLabel = useMemo(
18+
() =>
19+
`game_${stage.get("index")}_${stage
20+
.get("name")
21+
.trim()
22+
.replace(/ /g, "_")}`, // replace ALL spaces with underscores
23+
[stage]
24+
); // memoize so we don't trigger the useEffect on every render
25+
26+
useEffect(() => {
27+
if (player.get("progressLabel") !== progressLabel) {
28+
console.log(`Starting ${progressLabel}`);
29+
player.set("progressLabel", progressLabel);
30+
player.set("localStageStartTime", undefined); // force use of stageTimer
31+
}
32+
}, [progressLabel, player]);
33+
34+
const discussion = stage?.get("discussion");
35+
const elements = stage?.get("elements") || [];
36+
37+
const renderElement = (element, index) => (
38+
<TimeConditionalRender
39+
displayTime={element.displayTime}
40+
hideTime={element.hideTime}
41+
key={`element_${index}`}
42+
>
43+
<PositionConditionalRender
44+
showToPositions={element.showToPositions}
45+
hideFromPositions={element.hideFromPositions}
46+
>
47+
<ConditionsConditionalRender conditions={element.conditions}>
48+
<Element
49+
element={element}
50+
onSubmit={() => player.stage.set("submit", true)}
51+
/>
52+
</ConditionsConditionalRender>
53+
</PositionConditionalRender>
54+
</TimeConditionalRender>
55+
);
56+
57+
const renderDiscussionPage = () => (
58+
// If the page is larger than 'md', render two columns
59+
// with the left being the discussion at a fixed location
60+
// and the right being the elements.
61+
// If the page is smaller than 'md' render the discussion at the top
62+
// and the elements below it.
63+
64+
<>
65+
<div className="md:absolute md:left-0 md:top-0 md:bottom-0 md:right-150">
66+
<Discussion
67+
chatType={discussion.chatType}
68+
showNickname={discussion.showNickname ?? true}
69+
showTitle={discussion.showTitle}
70+
/>
71+
</div>
72+
73+
<div className="pb-4 px-4 md:absolute md:right-0 md:w-150 md:bottom-0 md:top-0 md:overflow-auto md:scroll-smooth">
74+
{elements.map(renderElement)}
75+
</div>
76+
</>
77+
);
78+
79+
const renderNoDiscussionPage = () => (
80+
<div className="mx-auto max-w-2xl pb-2">{elements.map(renderElement)}</div>
81+
);
82+
83+
return (
84+
<SubmissionConditionalRender>
85+
{!!discussion && renderDiscussionPage()}
86+
{!discussion && renderNoDiscussionPage()}
87+
</SubmissionConditionalRender>
88+
);
89+
}

‎client/src/elements/Element.jsx‎

Lines changed: 105 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,105 @@
1-
/*
2-
A base wrapper for all the elements
3-
4-
*/
5-
6-
import React from "react";
7-
import { useStage } from "@empirica/core/player/classic/react";
8-
import { Prompt } from "./Prompt";
9-
import { Display } from "./Display";
10-
import { Separator } from "./Separator";
11-
import { AudioElement } from "./AudioElement";
12-
import { Survey } from "./Survey";
13-
import { SubmitButton } from "./SubmitButton";
14-
import { KitchenTimer } from "./KitchenTimer";
15-
import { TrainingVideo } from "./TrainingVideo";
16-
import { Qualtrics } from "./Qualtrics";
17-
import { SharedNotepad } from "../components/SharedNotepad";
18-
import { TalkMeter } from "./TalkMeter";
19-
import { Image } from "../components/Image";
20-
21-
export function Element({ element, onSubmit }) {
22-
// Todo: remove stage dependencies to improve robustness in intro/exit steps
23-
const stage = useStage();
24-
25-
console.log("In element", element);
26-
console.log("Element type", element.type);
27-
28-
switch (element.type) {
29-
case "audio":
30-
return <AudioElement file={element.file} />;
31-
32-
case "display":
33-
return (
34-
<Display
35-
promptName={element.promptName}
36-
reference={element.reference}
37-
position={element.position}
38-
/>
39-
);
40-
41-
case "image":
42-
return <Image file={element.file} width={element.width} />;
43-
44-
case "prompt":
45-
return (
46-
<Prompt
47-
file={element.file}
48-
name={element.name}
49-
shared={element.shared}
50-
/>
51-
);
52-
53-
case "qualtrics":
54-
console.log("qualtrics");
55-
return (
56-
<Qualtrics
57-
url={element.url}
58-
params={element.params}
59-
onSubmit={onSubmit}
60-
/>
61-
);
62-
63-
case "separator":
64-
return <Separator style={element.style} />;
65-
66-
case "submitButton":
67-
return (
68-
<SubmitButton
69-
onSubmit={onSubmit}
70-
name={element.name}
71-
buttonText={element.buttonText}
72-
/>
73-
);
74-
75-
case "survey":
76-
return (
77-
<Survey
78-
surveyName={element.surveyName}
79-
name={element.name}
80-
onSubmit={onSubmit}
81-
/>
82-
); // TODO: pass in the element name so that results can be saved if the survey is completed multiple times
83-
84-
case "timer":
85-
return (
86-
<KitchenTimer
87-
startTime={element.startTime || element.displayTime || 0}
88-
endTime={
89-
element.endTime || element.hideTime || stage?.get("duration")
90-
}
91-
warnTimeRemaining={element.warnTimeRemaining}
92-
/>
93-
);
94-
95-
case "video":
96-
return <TrainingVideo url={element.url} />;
97-
98-
case "talkMeter":
99-
return <TalkMeter />;
100-
101-
case "sharedNotepad":
102-
return <SharedNotepad padName={element.name || stage.get("name")} />;
103-
104-
default:
105-
console.log(`unknown element type ${element.type} in `, element);
106-
return undefined;
107-
}
108-
}
1+
/*
2+
A base wrapper for all the elements
3+
4+
*/
5+
6+
import React from "react";
7+
import { useStage } from "@empirica/core/player/classic/react";
8+
import { Prompt } from "./Prompt";
9+
import { Display } from "./Display";
10+
import { Separator } from "./Separator";
11+
import { AudioElement } from "./AudioElement";
12+
import { Survey } from "./Survey";
13+
import { SubmitButton } from "./SubmitButton";
14+
import { KitchenTimer } from "./KitchenTimer";
15+
import { TrainingVideo } from "./TrainingVideo";
16+
import { Qualtrics } from "./Qualtrics";
17+
import { SharedNotepad } from "../components/SharedNotepad";
18+
import { TalkMeter } from "./TalkMeter";
19+
import { Image } from "../components/Image";
20+
21+
export function Element({ element, onSubmit }) {
22+
// Todo: remove stage dependencies to improve robustness in intro/exit steps
23+
const stage = useStage();
24+
25+
switch (element.type) {
26+
case "audio":
27+
return <AudioElement file={element.file} />;
28+
29+
case "display":
30+
return (
31+
<Display
32+
promptName={element.promptName}
33+
reference={element.reference}
34+
position={element.position}
35+
/>
36+
);
37+
38+
case "image":
39+
return <Image file={element.file} width={element.width} />;
40+
41+
case "prompt":
42+
return (
43+
<Prompt
44+
file={element.file}
45+
name={element.name}
46+
shared={element.shared}
47+
/>
48+
);
49+
50+
case "qualtrics":
51+
console.log("qualtrics");
52+
return (
53+
<Qualtrics
54+
url={element.url}
55+
params={element.params}
56+
onSubmit={onSubmit}
57+
/>
58+
);
59+
60+
case "separator":
61+
return <Separator style={element.style} />;
62+
63+
case "submitButton":
64+
return (
65+
<SubmitButton
66+
onSubmit={onSubmit}
67+
name={element.name}
68+
buttonText={element.buttonText}
69+
/>
70+
);
71+
72+
case "survey":
73+
return (
74+
<Survey
75+
surveyName={element.surveyName}
76+
name={element.name}
77+
onSubmit={onSubmit}
78+
/>
79+
); // TODO: pass in the element name so that results can be saved if the survey is completed multiple times
80+
81+
case "timer":
82+
return (
83+
<KitchenTimer
84+
startTime={element.startTime || element.displayTime || 0}
85+
endTime={
86+
element.endTime || element.hideTime || stage?.get("duration")
87+
}
88+
warnTimeRemaining={element.warnTimeRemaining}
89+
/>
90+
);
91+
92+
case "video":
93+
return <TrainingVideo url={element.url} />;
94+
95+
case "talkMeter":
96+
return <TalkMeter />;
97+
98+
case "sharedNotepad":
99+
return <SharedNotepad padName={element.name || stage.get("name")} />;
100+
101+
default:
102+
console.log(`unknown element type ${element.type} in `, element);
103+
return undefined;
104+
}
105+
}

0 commit comments

Comments
 (0)