Subliminal priming

src/App.tsx

@@ -9,7 +9,6 @@ import TaskPage from './components/TaskPage'
 import UserPage from './components/UserPage'
 import { useAuth } from './contexts/AuthContext'
 import { UNHEALTHY_IMAGE_COUNT } from './data/images'
-import { images } from './data/images.json'
 import { tasks } from './data/tasks.json'
 import { useFoodRatings } from './hooks/useFoodRatings'
 import './main.css'
@@ -43,17 +42,6 @@ export default function App() {
   return (
     <BrowserRouter>
       {session && <Nav />}
-      {images?.map((food) => (
-        <img
-          key={food.id}
-          src={food.src}
-          alt={'food'}
-          style={{
-            visibility: 'hidden',
-            height: '1px',
-          }}
-        />
-      ))}
       <Routes>
         <Route
           path="/"

src/components/DotProbe.tsx

@@ -144,7 +144,7 @@ export default function DotProbe({
 
     const taskResponseData = {
       user_id: session!.user.id,
-      gsession_created_at: taskStartedAt,
+      gsession_created_at: taskStartedAt.toLocaleDateString(),
       game_slug: 'dotprobe',
       assessment: 'TEST',
       phase: 0,

src/components/GoNoGo.tsx

@@ -16,6 +16,7 @@ import {
 } from '../types/Task'
 import { recordTaskResponse } from '../utils/recordResponse'
 import Break from './Break'
+import { getPrimingImageSrc, primingCategories } from '../data/images'
 
 function getGoNoGoTrialType(imageType: ImageType): GoNoGoTrialType {
   switch (imageType) {
@@ -95,43 +96,32 @@ export default function GoNoGo({
   setAverageResponse,
   userImages,
 }: GameProps) {
+  const taskData = useMemo(() => prepareTaskData(userImages, totalTrials), [])
   const [currentTrialIndex, setCurrentTrialIndex] = useState<number>(0)
-  const [gameStage, setGameStage] = useState<GoNoGoGameStage>('cue')
+  const [gameStage, setGameStage] = useState<GoNoGoGameStage>('prime')
+  const [primingShownAt, setPrimingShownAt] = useState<number | null>(
+    Date.now()
+  )
 
   const [numCorrect, setNumCorrect] = useState<number>(0)
   const [totalTime, setTotalTime] = useState<number>(0)
   const { image, error, interval } = stages[gameStage]
-
-  const taskData = useMemo(() => prepareTaskData(userImages, totalTrials), [])
-
-  useEffect(() => {
-    const healthyPercent =
-      taskData.filter((imgData) => imgData.imageType === 'healthy').length /
-      taskData.length
-    const unhealthyPercent =
-      taskData.filter((imgData) => imgData.imageType === 'unhealthy').length /
-      taskData.length
-    const waterPercent =
-      taskData.filter((imgData) => imgData.imageType === 'water').length /
-      taskData.length
-    const percentages = `
-    Healthy: ${Math.round(healthyPercent * 100)}%
-    Unhealthy: ${Math.round(unhealthyPercent * 100)}%
-    Water: ${Math.round(waterPercent * 100)}%
-    `
-    console.log('Go/No-Go', percentages)
-  }, [])
-
-  const { src, trialType, side, border, imageType } =
-    taskData[currentTrialIndex]
+  const { src, trialType, side, border } = taskData[currentTrialIndex]
   const [cueTimestamp, setCueTimestamp] = useState<number | null>(null)
   const [taskStartedAt, setTaskStartedAt] = useState(new Date())
   const [pictureDelta, setPictureDelta] = useState<number | null>(null)
   const [pictureShownAt, setPictureShownAt] = useState<number | null>(null)
   const [intervalShownAt, setIntervalShownAt] = useState<number | null>(null)
   const [jitterDur, setJitterDur] = useState<number | null>(null)
+  const [primingDur, setPrimingDur] = useState<number | null>(null)
   const { session } = useAuth()
 
+  const isTrialWithPriming: boolean = true
+  const showPriming: boolean = isTrialWithPriming && gameStage === 'prime'
+  const primingType: 'positive' | 'negative' =
+    trialType === 'go' ? 'positive' : 'negative'
+  const primingImageSrc = getPrimingImageSrc(primingType)
+
   useEffect(() => {
     setAccuracy(Math.round((numCorrect / currentTrialIndex) * 10000) / 100)
   }, [setAccuracy, numCorrect, currentTrialIndex])
@@ -147,6 +137,15 @@ export default function GoNoGo({
     setPictureDelta(
       pictureShownAt ? pictureShownAt - taskStartedAt.getTime() : null
     )
+    if (primingShownAt) {
+      setPrimingDur(primingShownAt ? Date.now() - primingShownAt : null)
+      setPrimingShownAt(null)
+    }
+  }
+
+  function showPrime() {
+    setGameStage('prime')
+    setPrimingShownAt(Date.now())
   }
 
   function showInterval() {
@@ -197,7 +196,7 @@ export default function GoNoGo({
   )
 
   useEffect(() => {
-    if (gameStage !== 'cue') showCue()
+    if (gameStage !== 'cue') isTrialWithPriming ? showPrime() : showCue()
   }, [currentTrialIndex])
 
   function handleReaction(reaction: GoNoGoReaction) {
@@ -214,7 +213,7 @@ export default function GoNoGo({
 
     const taskResponseData = {
       user_id: session!.user.id,
-      gsession_created_at: taskStartedAt,
+      gsession_created_at: taskStartedAt.toLocaleDateString(),
       game_slug: 'gonogo',
       assessment: 'TEST',
       phase: 0,
@@ -240,6 +239,11 @@ export default function GoNoGo({
       target_index: side === 'left' ? 0 : 1,
       picture_offset: side === 'left' ? 'LEFT' : 'RIGHT',
       picture_list: src,
+      priming_dur: primingDur,
+      priming_picture: isTrialWithPriming ? primingImageSrc : null,
+      priming_category: isTrialWithPriming
+        ? primingCategories[primingType]
+        : null,
     }
 
     recordTaskResponse(taskResponseData)
@@ -262,6 +266,9 @@ export default function GoNoGo({
   useEffect(() => {
     let timeout: NodeJS.Timeout
     switch (gameStage) {
+      case 'prime':
+        timeout = setTimeout(showCue, times.prime)
+        break
       case 'cue':
         timeout = setTimeout(() => handleReaction('omission'), times.cue)
         break
@@ -280,43 +287,54 @@ export default function GoNoGo({
     return () => clearTimeout(timeout)
   }, [gameStage])
 
-  if (gameStage === 'break') return <Break />
-
-  return interval ? (
-    <></>
-  ) : (
-    <div className={`imageBox ${border} sized`}>
-      {image && (
-        <div className="columns is-mobile">
-          <div className="column">
-            {side === 'left' ? (
-              <img
-                onClick={() => handleReaction('left-commission')}
-                src={src}
-              />
-            ) : (
-              <div
-                onClick={() => handleReaction('left-commission')}
-                className="fill clickable"
-              ></div>
-            )}
-          </div>
-          <div className="column">
-            {side === 'right' ? (
-              <img
-                onClick={() => handleReaction('right-commission')}
-                src={src}
-              />
-            ) : (
-              <div
-                onClick={() => handleReaction('right-commission')}
-                className="fill clickable"
-              ></div>
-            )}
-          </div>
+  return (
+    <>
+      {gameStage === 'break' ? (
+        <Break />
+      ) : interval ? (
+        <></>
+      ) : (
+        <div className={`imageBox ${!showPriming && border} sized`}>
+          {showPriming && (
+            <img
+              src={primingImageSrc}
+              alt="prime image"
+              className="squeezed cursorDefault"
+            />
+          )}
+          {!showPriming && image && (
+            <div className="columns is-mobile">
+              <div className="column">
+                {side === 'left' ? (
+                  <img
+                    onClick={() => handleReaction('left-commission')}
+                    src={src}
+                  />
+                ) : (
+                  <div
+                    onClick={() => handleReaction('left-commission')}
+                    className="fill clickable"
+                  ></div>
+                )}
+              </div>
+              <div className="column">
+                {side === 'right' ? (
+                  <img
+                    onClick={() => handleReaction('right-commission')}
+                    src={src}
+                  />
+                ) : (
+                  <div
+                    onClick={() => handleReaction('right-commission')}
+                    className="fill clickable"
+                  ></div>
+                )}
+              </div>
+            </div>
+          )}
+          {error && <div className="redCross">X</div>}
         </div>
       )}
-      {error && <div className="redCross">X</div>}
-    </div>
+    </>
   )
 }

src/components/HiddenImageToCache.tsx

@@ -0,0 +1,11 @@
+export default function HiddenImageToCache({
+  style,
+  ...props
+}: React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>) {
+  return (
+    <img style={{ visibility: 'hidden', height: '1px', ...style }} {...props} />
+  )
+}

src/components/LoginPage.tsx

@@ -1,6 +1,12 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { images } from '../data/images.json'
 import { supabase } from '../supabaseClient'
+import HiddenImageToCache from './HiddenImageToCache'
+import {
+  negativePrimingImageSrcs,
+  positivePrimingImageSrcs,
+} from '../data/images'
 
 export default function LoginPage() {
   const [loading, setLoading] = useState(false)
@@ -97,6 +103,31 @@ export default function LoginPage() {
           </div>
         </div>
       </section>
+      <div>
+        {images?.map((food) => (
+          <HiddenImageToCache key={food.id} src={food.src} alt={'food'} />
+        ))}
+        {positivePrimingImageSrcs.map(
+          (src) =>
+            src && (
+              <HiddenImageToCache
+                key={src}
+                src={src}
+                alt={'positive priming image'}
+              />
+            )
+        )}
+        {negativePrimingImageSrcs.map(
+          (src) =>
+            src && (
+              <HiddenImageToCache
+                key={src}
+                src={src}
+                alt={'negative priming image'}
+              />
+            )
+        )}
+      </div>
     </div>
   )
 }