Merge pull request #71 from Watts-Lab/evan-render-stage

Rendering Stages

@empirica-mocks/core/mocks.js

@@ -1,10 +1,20 @@
+import { useContext } from 'react';
+import { isFunctionDeclaration } from "typescript";
+// import { StageContext } from '@/editor/stageContext'; # don't know why this doesn't work
+
+// file is in deliberation-empirica/client/node_modules/@empirica/core/mocks.js
+import { StageContext } from "../../../../../src/app/editor/stageContext"
+
+
+
 export function usePlayer() {
  // This is a mock function that returns a mock player object
  // console.log("loaded usePlayer() from react-mocks.js");
  const player = {
  isMock: true,
  introDone: true,
  exitStep: 0, //TODO,
+ gameID: 21,
  position: 0, //TODO - set with toggle
  get: function (varName) {
  return this[varName];
@@ -34,26 +44,50 @@ export function useGame() {
 }
 
 export function useStageTimer() {
- //TODO implement?
+ const stage = useContext(StageContext);
+ console.log("useStageTimerMock", stage)
+
  // This is a mock function that returns a mock stage timer object
  const stageTimer = {
  isMock: true,
+ elapsed: stage.elapsed // problem: this will be called every render cycle...
  };
 
  return stageTimer;
 }
 
 export function useStage() {
  // This is a mock function that returns a mock stage object
+
+ const {
+ currentStageIndex,
+ setCurrentStageIndex,
+ elapsed,
+ setElapsed,
+ treatment,
+ setTreatment,
+ } = useContext(StageContext)
+ // const stage1 = useContext(StageContext);
+ // console.log("useStageMock", stage1)
+
  const stage = {
  isMock: true,
- index: 0, //TODO
  get: function (varName) {
- return this[varName];
- },
- set: function (varName, value) {
- this[varName] = value;
+ //const currentStageIndex = int(localStorage.getItem("currentStageIndex"));
+
+ //const treatmentString = localStorage.getItem("treatment");
+ //const treatment = JSON.parse(treatmentString);
+ if (varName === "elements") {
+ return treatment.gameStages[currentStageIndex]?.elements
+ } else if (varName === "discussion") {
+ return treatment.gameStages[currentStageIndex]?.discussion
+ } else if (varName === "name") {
+ return treatment.gameStages[currentStageIndex]?.name
+ } else if (varName === "index") {
+ return currentStageIndex
+ }
  },
+
  };
 
  return stage;
@@ -73,3 +107,30 @@ export function usePlayers() {
 
  return players;
 }
+
+export function useGlobal() {
+ // This is a mock function that returns a mock global object
+ const global = {
+ isMock: true,
+ recruitingBatchConfig: {
+ cdn: 'prod',
+ },
+ resourceLookup: {
+ cdn: 'prod',
+ },
+ cdnList: {
+ test: "http://localhost:9091",
+ local: "http://localhost:9090",
+ prod: "https://s3.amazonaws.com/assets.deliberation-lab.org",
+ },
+ get: function (varName) {
+ return this[varName];
+ }
+ };
+ return global;
+}
+
+// Mock implementation of Loading
+export function Loading() {
+ return "Loading...";
+}

@empirica-mocks/core/package.json

@@ -39,7 +39,7 @@
  "require": "./dist/player.cjs"
  },
  "./player/react": {
- "import": "./react-mocks.js"
+ "import": "./mocks.js"
  },
  "./player/classic": {
  "types": "./dist/player-classic.d.ts",

cypress/e2e/test.cy.ts

@@ -26,7 +26,7 @@ describe('test spec', () => {
  cy.get('[data-cy="add-element-button-0"]').click()
  cy.get('[data-cy="edit-element-name-0-new"]').type("Element 1")
  cy.get('[data-cy="edit-element-type-0-new"]').select("Prompt")
- cy.get('[data-cy="edit-element-file-0-new"]').type("file/address")
+ cy.get('[data-cy="edit-element-file-0-new"]').type("projects/example/preDiscussionInstructions.md")
  cy.get('[data-cy="edit-element-save-0-new"]').click()
 
  cy.get('[data-cy="element-0-0"]').contains("prompt").should("be.visible")
@@ -43,6 +43,12 @@ describe('test spec', () => {
  cy.get('[data-cy="element-0-1"]').contains("survey").should("be.visible")
  cy.get('[data-cy="element-0-1"]').contains("TIPI").should("be.visible")
 
+ // view first stage in render panel
+ cy.get('[data-cy="render-panel"]').contains("Click on a stage card to preview the stage from a participant view.").should("be.visible")
+ cy.get('[data-cy="stage-0"]').click(0, 0)
+ cy.get('[data-cy="render-panel"]').contains("Click on a stage card to preview the stage from a participant view.").should("not.exist")
+ cy.get('[data-cy="render-panel"]').contains("Here are a number of personality traits").should("be.visible")
+
  // create second stage
  cy.get('[data-cy="add-stage-button"]').click()
  cy.get('[data-cy="edit-stage-name-new"]').type("Stage 2")
@@ -62,10 +68,15 @@ describe('test spec', () => {
  cy.get('[data-cy="element-1-0"]').contains("video").should("be.visible")
  cy.get('[data-cy="element-1-0"]').contains("https://www.youtube.com/").should("be.visible")
 
+ // view second stage in render panel
+ cy.get('[data-cy="stage-1"]').click(0, 0)
+ cy.get('[data-cy="render-panel"]').contains("Click on a stage card to preview the stage from a participant view.").should("not.exist")
+ cy.get('[data-cy="render-panel"]').contains("Click to continue the video").should("be.visible")
+
  // edit first element
  cy.get('[data-cy="edit-element-button-0-0"]').click()
  cy.get('[data-cy="edit-element-name-0-0"]').should("have.value", "Element 1").should("be.visible").type(" Edited")
- cy.get('[data-cy="edit-element-file-0-0"]').type("edited/file/address")
+ cy.get('[data-cy="edit-element-file-0-0"]').type("projects/example/discussionInstructions.md")
  cy.get('[data-cy="edit-element-save-0-0"]').click()
 
  cy.get('[data-cy="element-0-0"]').contains("prompt").should("be.visible")

src/app/editor/components/CodeEditor.tsx

@@ -44,7 +44,6 @@ export default function CodeEditor() {
  duration: 600,
  desc: 'Main Discussion Time',
  discussion: {
- chatType: 'text',
  showNickname: false,
  showTitle: true,
  },
@@ -117,6 +116,7 @@ export default function CodeEditor() {
  localStorage.setItem('code', code)
  window.location.reload() //refresh page to make elements appear on screen
  } catch (YAMLParseError) {
+ console.log('Parse Error on Save', YAMLParseError)
  //TODO also display a little something went wrong pop up
  }
  }

src/app/editor/components/EditElement.tsx

@@ -5,7 +5,7 @@ import {
  ElementType,
  elementSchema,
  elementBaseSchema,
-} from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+} from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as zod from 'zod'
 

src/app/editor/components/EditStage.tsx

@@ -6,7 +6,7 @@ import {
  stageSchema,
  StageType,
  ElementType,
-} from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+} from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as zod from 'zod'
 

src/app/editor/components/ElementCard.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Modal } from './Modal'
 import { EditElement } from './EditElement'
-import { TreatmentType } from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+import { TreatmentType } from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
 
 export function ElementCard({
  element,

src/app/editor/components/RenderPanel.tsx

@@ -1,32 +1,64 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
+import dynamic from 'next/dynamic.js'
 import TimePicker from './TimePicker'
 //import { Stage } from './../../../.././deliberation-empirica/client/src/Stage.jsx'
 import RenderDelibElement from './RenderDelibElement'
-export function RenderPanel({ renderPanelStage }: { renderPanelStage: any }) {
+
+import { StageContext } from '@/editor/stageContext'
+
+const Stage = dynamic(
+ () =>
+ import('./../../../.././deliberation-empirica/client/src/Stage.jsx').then(
+ (mod) => mod.Stage
+ ) as any,
+ {
+ ssr: false,
+ }
+)
+
+export function RenderPanel() {
  const [time, setTime] = useState(0)
- const elements = renderPanelStage.elements
- const stageName = renderPanelStage.title
- const stageDuration = renderPanelStage.duration
+
+ const {
+ currentStageIndex,
+ setCurrentStageIndex,
+ elapsed,
+ setElapsed,
+ treatment,
+ setTreatment,
+ } = useContext(StageContext)
+ console.log('RenderPanel.tsx current stage index', currentStageIndex)
+ console.log('Current Treatment', treatment)
+
+ // const currentStageIndex = Number(localStorage.getItem('currentStageIndex'))
+
+ //const treatment =
+ //const currentStage = treatment?.gameStages.?[currentStageIndex]
+
+ //console.log('Current stage', localStorage.getItem('currentStageIndex'))
 
  return (
- <div className="flex">
- {!stageName && (
+ <div className="flex" data-cy="render-panel">
+ {currentStageIndex === 'default' && (
  <h1>
  Click on a stage card to preview the stage from a participant view.
  </h1>
  )}
- {stageName && (
- <div>
- <h1>Preview of {stageName} </h1>
+ {currentStageIndex !== 'default' && (
+ <div className="min-w-fit">
+ <h1>Preview of stage {currentStageIndex} </h1>
  <TimePicker
  value={time + ' s'}
- setValue={setTime}
- maxValue={stageDuration}
+ setValue={setElapsed}
+ maxValue={treatment.gameStages[currentStageIndex]?.duration ?? 0}
  />
+ {/* need to retrieve stage duration from treatment */}
  </div>
  )}
- {stageName && <div className="divider divider-horizontal"></div>}
- <div>
+ {currentStageIndex !== 'default' && (
+ <div className="divider divider-horizontal"></div>
+ )}
+ {/* <div>
  {elements !== undefined &&
  elements.map(
  (element: any, index: any) =>
@@ -38,15 +70,11 @@ export function RenderPanel({ renderPanelStage }: { renderPanelStage: any }) {
  </div>
  )
  )}
- </div>
+ </div> */}
 
- {/* Currently causes build to fail */}
- {/*
- <div className="page-display-container">
- {stageName && <Stage />}{' '}
- Replace custom rendering logic with Stage component
+ <div className="w-full">
+ {currentStageIndex !== 'default' && <Stage />}
  </div>
- */}
  </div>
  )
 }

src/app/editor/components/StageCard.tsx

@@ -1,14 +1,18 @@
 'use client'
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { ElementCard } from './ElementCard'
-import { cn } from '@/app/components/utils'
+import { cn } from '@/components/utils'
 import { Modal } from './Modal'
 import { EditStage } from './EditStage'
 import { EditElement } from './EditElement'
 import {
  TreatmentType,
  DurationType,
 } from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+import { setCurrentStageIndex } from './utils'
+import { useStage } from '../../../../@empirica-mocks/core/mocks'
+
+import { StageContext } from '../stageContext.jsx'
 
 export function StageCard({
  title,
@@ -31,6 +35,9 @@ export function StageCard({
  stageIndex: number
  setRenderPanelStage: any
 }) {
+ const { currentStageIndex, setCurrentStageIndex, elapsed, setElapsed } =
+ useContext(StageContext)
+
  const addElementOptions = [
  { question: 'Name', responseType: 'text' },
  {
@@ -57,12 +64,19 @@ export function StageCard({
  const width = duration ? scale * duration : 'auto'
 
  function handleStageClick() {
- setRenderPanelStage({
- title: title,
- elements: elements,
- duration: duration,
- stageIndex: stageIndex,
- })
+ // setCurrentStageIndex(stageIndex)
+ // console.log('setting current stage to ', stageIndex)
+ //@ts-ignore
+
+ console.log('setting current stage to ', stageIndex)
+ setCurrentStageIndex(stageIndex)
+
+ // setRenderPanelStage({
+ // title: title,
+ // elements: elements,
+ // duration: duration,
+ // stageIndex: stageIndex,
+ // })
  }
 
  const newElementModalId = `modal-stage${stageIndex}-element-new`

src/app/editor/components/Timeline.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import { parse } from 'yaml'
 import { StageCard } from './StageCard'
 import TimelineTools from './TimelineTools'
@@ -8,14 +8,23 @@ import { stringify } from 'yaml'
 import { Modal } from './Modal'
 import { EditStage } from './EditStage'
 import { TreatmentType } from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+import { StageContext } from '@/editor/stageContext'
 
 export default function Timeline({
  setRenderPanelStage,
 }: {
  setRenderPanelStage: any
 }) {
  const [scale, setScale] = useState(1) // pixels per second
- const [treatment, setTreatment] = useState<any | null>(null)
+ //const [treatment, setTreatment] = useState<any | null>(null)
+ const {
+ currentStageIndex,
+ setCurrentStageIndex,
+ elapsed,
+ setElapsed,
+ treatment,
+ setTreatment,
+ } = useContext(StageContext)
 
  function editTreatment(newTreatment: TreatmentType) {
  setTreatment(newTreatment)
@@ -31,7 +40,7 @@ export default function Timeline({
  const parsedCode = parse(codeStr)
  setTreatment(parsedCode)
  }
- }, [])
+ }, [setTreatment])
 
  if (!treatment) {
  return null