@capytale/meta-player 0.3.10 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/app.module.scss

@@ -1,5 +1,6 @@
 .app {
   height: 100%;
+  height: 100dvh;
   display: grid;
   grid-template-rows: auto 1fr;
 }

package/src/features/activityJS/AfterResetAction.tsx

@@ -0,0 +1,23 @@
+import { FC, useEffect } from "react";
+import {
+  SaveCallback,
+  addAfterReset,
+  removeAfterReset,
+} from "./saverSlice";
+import { useAppDispatch } from "../../app/hooks";
+
+type AfterResetActionProps = SaveCallback;
+
+const AfterResetAction: FC<AfterResetActionProps> = (props) => {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(addAfterReset(props));
+    return () => {
+      // Remove the callback when the component is unmounted
+      dispatch(removeAfterReset(props.name));
+    };
+  }, [props]);
+  return null;
+};
+
+export default AfterResetAction;

package/src/features/activityJS/Saver.tsx

@@ -95,8 +95,7 @@ const Saver: FC<{}> = () => {
       }
     }
     try {
-      const saveData = await ab.save();
-      console.log("Save return data", saveData);
+      await ab.save();
       dispatch(setSaveState("idle"));
       if (
         activityJs.activitySession.mode === "assignment" ||

package/src/features/activityJS/hooks.ts

@@ -5,7 +5,7 @@ import {
   setSaveState,
 } from "../activityData/activityDataSlice";
 import { useActivityJS } from "./ActivityJSProvider";
-import { selectBeforeReset } from "./saverSlice";
+import { selectBeforeReset, selectAfterReset } from "./saverSlice";
 
 type UseResetProps = {
   onError: (errorMessage: string) => void;
@@ -14,6 +14,7 @@ type UseResetProps = {
 export const useReset = (props: UseResetProps) => {
   const dispatch = useAppDispatch();
   const beforeReset = useAppSelector(selectBeforeReset);
+  const afterReset = useAppSelector(selectAfterReset);
   const activityJs = useActivityJS();
   const mode = useAppSelector(selectMode);
   const workflow = useAppSelector(selectWorkflow);
@@ -50,8 +51,19 @@ export const useReset = (props: UseResetProps) => {
         ab.assignmentNode.binaryData.value = null;
       }
       try {
-        const saveData = await ab.save();
-        console.log("Save return data", saveData);
+        await ab.save();
+
+        for (const callback of Object.values(afterReset)) {
+          try {
+            const v = callback();
+            if (v instanceof Promise) {
+              await v;
+            }
+          } catch (e) {
+            console.error("Error in afterReset callback", e);
+            props.onError((e as any).toString());
+          }
+        }
         if (reload) {
           location.reload();
         }

package/src/features/activityJS/saverSlice.ts

@@ -12,12 +12,14 @@ export interface SaverState {
   beforeSave: { [key: string]: CallbackType };
   afterSave: { [key: string]: CallbackType };
   beforeReset: { [key: string]: CallbackType };
+  afterReset: { [key: string]: CallbackType };
 }
 
 const initialState: SaverState = {
   beforeSave: {},
   afterSave: {},
   beforeReset: {},
+  afterReset: {},
 };
 
 // If you are not using async thunks you can use the standalone `createSlice`.
@@ -43,6 +45,11 @@ export const saverSlice = createAppSlice({
         state.beforeReset[action.payload.name] = action.payload.callback;
       },
     ),
+    addAfterReset: create.reducer(
+      (state, action: PayloadAction<SaveCallback>) => {
+        state.afterReset[action.payload.name] = action.payload.callback;
+      },
+    ),
     removeBeforeSave: create.reducer((state, action: PayloadAction<string>) => {
       delete state.beforeSave[action.payload];
     }),
@@ -54,6 +61,9 @@ export const saverSlice = createAppSlice({
         delete state.beforeReset[action.payload];
       },
     ),
+    removeAfterReset: create.reducer((state, action: PayloadAction<string>) => {
+      delete state.afterReset[action.payload];
+    }),
   }),
   // You can define your selectors here. These selectors receive the slice
   // state as their first argument.
@@ -61,6 +71,7 @@ export const saverSlice = createAppSlice({
     selectBeforeSave: (saver) => saver.beforeSave,
     selectAfterSave: (saver) => saver.afterSave,
     selectBeforeReset: (saver) => saver.beforeReset,
+    selectAfterReset: (saver) => saver.afterReset,
   },
 });
 
@@ -72,8 +83,14 @@ export const {
   removeAfterSave,
   addBeforeReset,
   removeBeforeReset,
+  addAfterReset,
+  removeAfterReset,
 } = saverSlice.actions;
 
 // Selectors returned by `slice.selectors` take the root state as their first argument.
-export const { selectBeforeSave, selectAfterSave, selectBeforeReset } =
-  saverSlice.selectors;
+export const {
+  selectBeforeSave,
+  selectAfterSave,
+  selectBeforeReset,
+  selectAfterReset,
+} = saverSlice.selectors;

package/src/features/navbar/Countdown.tsx

@@ -6,6 +6,7 @@ import { useAppSelector } from "../../app/hooks";
 import { selectIsDirty, selectMode } from "../activityData/activityDataSlice";
 import { Button } from "primereact/button";
 import { useSave } from "../activityData/hooks";
+import serverClock from "../../utils/server-clock";
 
 // TODO use https://capytale2.ac-paris.fr/vanilla/time-s.php
 // https://forge.apps.education.fr/capytale/activity-js/-/blob/main/src/backend/capytale/clock.ts?ref_type=heads
@@ -47,8 +48,7 @@ const Countdown: FC = () => {
             }}
           >
             <Button
-              severity="secondary"
-              outlined
+              severity="danger"
               onClick={() => {
                 shouldSaveAt30s.current = false;
                 toast.current?.clear();
@@ -56,7 +56,7 @@ const Countdown: FC = () => {
             >
               Ne pas sauvegarder (danger)
             </Button>
-            <Button severity="warning" onClick={save}>
+            <Button severity="success" onClick={save}>
               Sauvegarder maintenant
             </Button>
           </div>
@@ -116,25 +116,8 @@ const Countdown: FC = () => {
     if (!deadline) {
       return;
     }
-    const deadlineUTC = Date.UTC(
-      deadline.getFullYear(),
-      deadline.getMonth(),
-      deadline.getDate(),
-      deadline.getHours(),
-      deadline.getMinutes(),
-      deadline.getSeconds(),
-      deadline.getMilliseconds(),
-    );
-    const now = new Date();
-    const nowUTC = Date.UTC(
-      now.getFullYear(),
-      now.getMonth(),
-      now.getDate(),
-      now.getHours(),
-      now.getMinutes(),
-      now.getSeconds(),
-      now.getMilliseconds(),
-    );
+    const deadlineUTC = deadline.getTime();
+    const nowUTC = serverClock.now();
     const newDiffMs = deadlineUTC - nowUTC;
     setDiffMs(newDiffMs);
     if (mode !== "assignment") {

package/src/features/pedago/InstructionsEditor.tsx

@@ -52,10 +52,12 @@ const InstructionsEditor: React.FC = forwardRef((_props, ref) => {
         {instructionsType === "none" && (
           <>
             <p>Pas de consigne.</p>
-            <Button
-              label="Créer une consigne"
-              onClick={() => dispatch(setInstructionsType("rich"))}
-            />
+            {mode === "create" && (
+              <Button
+                label="Créer une consigne"
+                onClick={() => dispatch(setInstructionsType("rich"))}
+              />
+            )}
           </>
         )}
         {instructionsType === "rich" && (

package/src/features/pedago/SharedNotesEditor.tsx

@@ -48,10 +48,12 @@ const SharedNotesEditor: React.FC = forwardRef((_props, ref) => {
         {sharedNotesType === "none" && (
           <>
             <p>Pas de notes partagées.</p>
-            <Button
-              label="Créer des notes partagées"
-              onClick={() => dispatch(setSharedNotesType("rich"))}
-            />
+            {mode === "create" && (
+              <Button
+                label="Créer des notes partagées"
+                onClick={() => dispatch(setSharedNotesType("rich"))}
+              />
+            )}
             <div style={{ textAlign: "start", padding: "16px" }}>
               <h3>Que sont les notes partagées ?</h3>
               <p>

package/src/index.css

@@ -94,6 +94,7 @@ body,
 
 .anti-cheat-content {
   height: 100vh;
+  height: 100dvh;
   width: 100vw;
   overflow: hidden;
 }

package/src/index.tsx

@@ -6,6 +6,7 @@ import MetaPlayerOptionsSetter from "./features/activityData/MetaPlayerOptionsSe
 import BeforeSaveAction from "./features/activityJS/BeforeSaveAction";
 import BeforeResetAction from "./features/activityJS/BeforeResetAction";
 import AfterSaveAction from "./features/activityJS/AfterSaveAction";
+import AfterResetAction from "./features/activityJS/AfterResetAction";
 import { useMode, useWorkflow } from "./hooks";
 import {
   useActivityJS,
@@ -26,6 +27,7 @@ export {
   BeforeSaveAction,
   BeforeResetAction,
   AfterSaveAction,
+  AfterResetAction,
   useMode,
   useWorkflow,
   useActivityJS,

package/src/utils/server-clock.ts

@@ -0,0 +1,42 @@
+async function getSeverTime() {
+  const res = await fetch("/vanilla/time-s.php");
+  return parseInt(await res.text()) * 1000;
+}
+
+class SeverClock {
+  private offset: number;
+  private lastSync: number;
+
+  constructor() {
+    this.offset = 0;
+    this.lastSync = 0;
+    this.sync();
+  }
+
+  async sync() {
+    const offsets = [];
+    for (let i = 0; i < 3; i++) {
+      const serverTime = await getSeverTime();
+      const localTime = Date.now();
+      offsets.push(serverTime - localTime);
+    }
+    this.offset = Math.max(...offsets);
+    this.lastSync = Date.now();
+  }
+
+  now() {
+    return Date.now() + this.offset;
+  }
+
+  get lastSyncTime() {
+    return this.lastSync;
+  }
+
+  get offsetTime() {
+    return this.offset;
+  }
+}
+
+const serverClock = new SeverClock();
+
+export default serverClock;