Template release 0.1.2: move mockdatabase code to main

.gitignore

@@ -15,7 +15,6 @@ logs/
 #########
 ### generated files ###
 #########
-**/.DS_Store
 _build.zip
 ./*.log
 
@@ -26,7 +25,7 @@ _build.zip
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
-# !.yarn/sdks
+!.yarn/sdks
 !.yarn/versions
 
 #########

README.md

@@ -193,9 +193,9 @@ If you change the project from an `ES Module` to a `Common.js Module`, or if ESL
 
 TODO: describe how to setup hosting and database
 
-### Firebase Configuration
+Here's a [useful guide](https://firebase.google.com/docs/hosting/quickstart)
 
-After you setup your Firebase and Firestore services, add your configurations to
+After you setup your Firebase and Firestore accounts and services, add your configurations to
 
 - [`.firebaserc`](.firebaserc)
 - [`databaseCred.ts`](hosting/src/lib/databaseCred.ts)
@@ -210,7 +210,15 @@ yarn deploy-rules
 
 Once you have the rules deployed, you can switch from using the mock database (a simple database emulator) to Firestore.
 
-Set `const mock = false` in [`globalVariables.ts`](hosting/src/globalVariables.ts). This will cause the application to use [`databaseCred.ts`](hosting/src/lib/databaseCred.ts) and store the input in Firestore (in a DEBUG version of the data structure so that there's no confusion about what data was generated locally during development).
+Set `const mock = false` in [`globalVariables.ts`](hosting/src/globalVariables.ts). This will cause the application to use [`databaseCred.ts`](hosting/src/lib/databaseCred.ts) and store the input in Firestore. In production, the app writes to `exptData/:uid`, but will instead write to `exptData-dbug/:uid` when it is in debugging mode or running locally. This is so that there's no confusion about what data was generated locally during development.
+
+### Firebase
+
+When you're ready to deploy the website, push it to Firebase
+
+```sh
+yarn deploy
+```
 
 </details>
 
@@ -241,7 +249,7 @@ The script [`scripts/releaseScript.mjs`](scripts/releaseScript.mjs) automates de
 yarn release
 ```
 
-The script will walk you through committing your changes to git repo [that you forked](#installation).
+The script will walk you through committing your changes to the git repo [that you forked](#installation).
 
 A key idea here is that there should never be ambiguity about what code was served to a participant.
 

hosting/src/experiment.ts

@@ -5,7 +5,6 @@ import { initJsPsych } from 'jspsych'
 
 import { debugging, getUserInfo, mockStore, prolificCC, prolificCUrl } from './globalVariables'
 import { saveTrialDataComplete, saveTrialDataPartial } from './lib/databaseUtils'
-import { getMockDbState } from './lib/mockDatabase' // Mock Database Panel
 
 import type { KeyboardResponse, Task, TrialData } from './project'
 import type { DataCollection } from 'jspsych'
@@ -22,28 +21,6 @@ import imgStimOrange from './images/orange.png'
 const debug = debugging()
 const mock = mockStore()
 
-/* Mock Database Panel */
-
-const debugButton = document.getElementById('debug-panel-button')
-const debugPanel = document.getElementById('debug-panel-display')
-const debugPanelPre = document.getElementById('debug-panel-code')
-
-function updateDebugPanel() {
-  if (debugPanelPre) {
-    debugPanelPre.textContent = JSON.stringify(getMockDbState(), null, 2)
-  }
-}
-
-function toggleDebugPanel() {
-  debugPanel?.classList.toggle('hidden')
-  updateDebugPanel()
-}
-
-debugButton?.addEventListener('click', () => {
-  debugButton.blur()
-  toggleDebugPanel()
-})
-
 const debuggingText = debug ? `<br /><br />redirect link : ${prolificCUrl}` : '<br />'
 const exitMessage = `<p class="align-middle text-center"> 
 Please wait. You will be redirected back to Prolific in a few moments. 
@@ -52,19 +29,19 @@ If not, please use the following completion code to ensure compensation for this
 ${debuggingText}
 </p>`
 
-const exitExperiment = () => {
+const exitExperiment = (): void => {
   document.body.innerHTML = exitMessage
   setTimeout(() => {
     window.location.replace(prolificCUrl)
   }, 3000)
 }
 
-const exitExperimentDebugging = () => {
+const exitExperimentDebugging = (): void => {
   const contentDiv = document.getElementById('jspsych-content')
   if (contentDiv) contentDiv.innerHTML = exitMessage
 }
 
-export async function runExperiment() {
+export async function runExperiment(updateDebugPanel: () => void) {
   if (debug) {
     console.log('--runExperiment--')
     console.log('UserInfo ::', getUserInfo())
@@ -217,21 +194,6 @@ export async function runExperiment() {
   }
   timeline.push(debrief_block)
 
-  /* Mock Database Panel */
-  if (debug && mock) {
-    if (debugButton) {
-      debugButton.hidden = false
-      debugButton.classList.remove('jspsych-display-element', 'hidden')
-    }
-    if (debugPanel) {
-      debugPanel.hidden = false
-      debugPanel.classList.remove('jspsych-display-element')
-    }
-  } else {
-    debugButton?.remove()
-    debugPanel?.remove()
-  }
-
   /* start the experiment */
   // @ts-expect-error allow timeline to be type jsPsych TimelineArray
   await jsPsych.run(timeline)

hosting/src/globalVariables.ts

@@ -2,9 +2,9 @@ import { description, version } from '../../package.json'
 
 import { prolificCCode } from './lib/prolificCred'
 
-const debug = true
+const debug: boolean = true
 
-const mock = true
+const mock: boolean = true
 
 const prolificCUrlLive = `https://app.prolific.com/submissions/complete?cc=${prolificCCode}`
 
@@ -52,7 +52,7 @@ export class UserRecord {
   }
 }
 
-let exptInitialized = false
+let exptInitialized: boolean = false
 let userInfo: UserRecord
 
 export function getURLParams(): Record<string, string> {

hosting/src/main.ts

@@ -1,5 +1,6 @@
 import { runExperiment } from './experiment'
-import { debugging, getExptInitialized, setExptInitialized } from './globalVariables'
+import { debugging, getExptInitialized, mockStore, setExptInitialized } from './globalVariables'
+import { getMockDbState } from './lib/mockDatabase' // Mock Database Panel
 
 import './lib/loading'
 
@@ -8,8 +9,9 @@ import './styles/main.css'
 // import { doc } from 'firebase/firestore'
 
 const debug = debugging()
+const mock = mockStore()
 
-export function enableBeginExperiment() {
+export function enableBeginExperiment(): void {
   /*
    * Called on onAuthStateChanged() after initExperimentData() finishes
    */
@@ -20,6 +22,43 @@ export function enableBeginExperiment() {
   const startButton = document.getElementById('startButton') as HTMLButtonElement
   const loadingDiv = document.getElementById('loading-splash')
 
+  /* Mock Database Panel */
+
+  const debugButton = document.getElementById('debug-panel-button')
+  const debugPanel = document.getElementById('debug-panel-display')
+  const debugPanelPre = document.getElementById('debug-panel-code')
+
+  function updateDebugPanel(): void {
+    if (debugPanelPre) {
+      debugPanelPre.textContent = JSON.stringify(getMockDbState(), null, 2)
+    }
+  }
+
+  function toggleDebugPanel(): void {
+    debugPanel?.classList.toggle('hidden')
+    updateDebugPanel()
+  }
+
+  debugButton?.addEventListener('click', () => {
+    debugButton.blur()
+    toggleDebugPanel()
+  })
+
+  /* Mock Database Panel */
+  if (debug && mock) {
+    if (debugButton) {
+      debugButton.hidden = false
+      debugButton.classList.remove('jspsych-display-element', 'hidden')
+    }
+    if (debugPanel) {
+      debugPanel.hidden = false
+      debugPanel.classList.remove('jspsych-display-element')
+    }
+  } else {
+    debugButton?.remove()
+    debugPanel?.remove()
+  }
+
   if (loadingDiv) {
     loadingDiv.style.display = 'none'
     loadingDiv.hidden = false
@@ -39,7 +78,7 @@ export function enableBeginExperiment() {
     }
     welcomeDiv?.remove()
 
-    runExperiment().then(
+    runExperiment(updateDebugPanel).then(
       () => {
         if (debug) {
           console.log('runExperiment: Finished: Success') // Success!

package.json

@@ -29,7 +29,7 @@
   "bugs": {
     "url": "https://github.com/daeh/jspsych-template/issues"
   },
-  "templateVersion": "0.1.1",
+  "templateVersion": "0.1.2",
   "source": "./hosting",
   "directories": {
     "serve": "hosting/dist"
@@ -41,16 +41,16 @@
     "@jspsych/plugin-html-keyboard-response": "^2.0.0",
     "@jspsych/plugin-image-keyboard-response": "^2.0.0",
     "@jspsych/plugin-preload": "^2.0.0",
-    "firebase": "^10.14.0",
+    "firebase": "^10.14.1",
     "jspsych": "^8.0.2"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.9.0",
     "@types/eslint": "^9.6.1",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^22.7.5",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
     "autoprefixer": "^10.4.20",
     "browserslist": "^4.24.0",
     "browserslist-to-esbuild": "^2.1.1",
@@ -60,16 +60,16 @@
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "firebase-tools": "^13.21.0",
-    "globals": "^15.10.0",
+    "firebase-tools": "^13.22.0",
+    "globals": "^15.11.0",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "readline-sync": "^1.4.10",
     "shelljs": "^0.8.5",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.3",
-    "vite": "^5.4.8",
+    "vite": "^5.4.9",
     "vite-plugin-html": "^3.2.2"
   },
   "packageManager": "[email protected]"