wip

next.config.js

@@ -5,6 +5,19 @@ const nextConfig = {
   images: {
     domains: ['huggingface.co'],
     unoptimized: true,
+  },
+  headers: async () => {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Permissions-Policy',
+            value: 'microphone=self'
+          }
+        ]
+      }
+    ];
   }
 }
 

src/components/AudioControls.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useAudioRecorder } from '../hooks/useAudioRecorder';
+
+export const AudioControls: React.FC = () => {
+    const { isRecording, audioURL, startRecording, stopRecording, playRecording } = useAudioRecorder();
+
+    return (
+        <div className="audio-controls">
+            {!isRecording ? (
+                <button
+                    onClick={startRecording}
+                    className="record-button"
+                >
+                    🎤 Démarrer l'enregistrement
+                </button>
+            ) : (
+                <button
+                    onClick={stopRecording}
+                    className="stop-button"
+                >
+                    ⏹️ Arrêter l'enregistrement
+                </button>
+            )}
+
+            {audioURL && (
+                <button
+                    onClick={playRecording}
+                    className="play-button"
+                >
+                    ▶️ Écouter l'enregistrement
+                </button>
+            )}
+        </div>
+    );
+};

src/game/PhaserGame.tsx

@@ -13,7 +13,7 @@ interface IProps
     currentActiveScene?: (scene_instance: Phaser.Scene) => void
 }
 
-export const PhaserGame = forwardRef<IRefPhaserGame, IProps>(function PhaserGame({ currentActiveScene }, ref)
+export default function PhaserGame({ currentActiveScene }: IProps)
 {
     const game = useRef<Phaser.Game | null>(null!);
 
@@ -24,14 +24,6 @@ export const PhaserGame = forwardRef<IRefPhaserGame, IProps>(function PhaserGame
 
             game.current = StartGame("game-container");
 
-            if (typeof ref === 'function')
-            {
-                ref({ game: game.current, scene: null });
-            } else if (ref)
-            {
-                ref.current = { game: game.current, scene: null };
-            }
-
         }
 
         return () =>
@@ -45,7 +37,7 @@ export const PhaserGame = forwardRef<IRefPhaserGame, IProps>(function PhaserGame
                 }
             }
         }
-    }, [ref]);
+    }, []);
 
     useEffect(() =>
     {
@@ -58,29 +50,17 @@ export const PhaserGame = forwardRef<IRefPhaserGame, IProps>(function PhaserGame
 
             }
 
-            if (typeof ref === 'function')
-            {
-
-                ref({ game: game.current, scene: scene_instance });
-            
-            } else if (ref)
-            {
-
-                ref.current = { game: game.current, scene: scene_instance };
-
-            }
-            
         });
         return () =>
         {
 
             EventBus.removeListener('current-scene-ready');
-        
+
         }
-    }, [currentActiveScene, ref]);
+    }, [currentActiveScene]);
 
     return (
         <div id="game-container"></div>
     );
 
-});
+}

src/game/scenes/MazeScene.ts

@@ -13,6 +13,17 @@ export class MazeScene extends Phaser.Scene {
             color: '#fff'
         }).setOrigin(0.5);
 
+        // Écouter les événements audio
+        EventBus.on('audio-recorded', (audioUrl: string) => {
+            // Vous pouvez utiliser l'audio dans Phaser ici
+            this.load.audio('recorded-audio', audioUrl);
+            this.load.once('complete', () => {
+                const sound = this.sound.add('recorded-audio');
+                // Utilisez le son comme vous le souhaitez
+            });
+            this.load.start();
+        });
+
         // Notifier React que la scène est prête
         EventBus.emit('current-scene-ready', this);
     }

src/hooks/useAudioRecorder.ts

@@ -0,0 +1,54 @@
+import { useState, useCallback } from 'react';
+
+export const useAudioRecorder = () => {
+    const [isRecording, setIsRecording] = useState(false);
+    const [audioURL, setAudioURL] = useState<string | null>(null);
+    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+    const [audioChunks, setAudioChunks] = useState<Blob[]>([]);
+
+    const startRecording = useCallback(async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const recorder = new MediaRecorder(stream);
+
+            recorder.ondataavailable = (event) => {
+                setAudioChunks(current => [...current, event.data]);
+            };
+
+            recorder.onstop = () => {
+                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                const audioUrl = URL.createObjectURL(audioBlob);
+                setAudioURL(audioUrl);
+            };
+
+            recorder.start();
+            setMediaRecorder(recorder);
+            setIsRecording(true);
+        } catch (error) {
+            console.error('Erreur lors de l\'accès au microphone:', error);
+        }
+    }, [audioChunks]);
+
+    const stopRecording = useCallback(() => {
+        if (mediaRecorder && isRecording) {
+            mediaRecorder.stop();
+            setIsRecording(false);
+            mediaRecorder.stream.getTracks().forEach(track => track.stop());
+        }
+    }, [mediaRecorder, isRecording]);
+
+    const playRecording = useCallback(() => {
+        if (audioURL) {
+            const audio = new Audio(audioURL);
+            audio.play();
+        }
+    }, [audioURL]);
+
+    return {
+        isRecording,
+        audioURL,
+        startRecording,
+        stopRecording,
+        playRecording
+    };
+};

src/pages/index.tsx

@@ -2,10 +2,13 @@ import Head from "next/head";
 import { Inter } from "next/font/google";
 import styles from "@/styles/Home.module.css";
 import dynamic from "next/dynamic";
+import { AudioControls } from '../components/AudioControls';
 
 const inter = Inter({ subsets: ["latin"] });
 
-const AppWithoutSSR = dynamic(() => import("@/App"), { ssr: false });
+const Game = dynamic(() => import("@/game/PhaserGame").then(mod => mod.default), {
+    ssr: false
+});
 
 export default function Home() {
     return (
@@ -17,7 +20,8 @@ export default function Home() {
                 <link rel="icon" href="/favicon.png" />
             </Head>
             <main className={`${styles.main} ${inter.className}`}>
-                <AppWithoutSSR />
+                <AudioControls />
+                <Game />
             </main>
         </>
     );

src/styles/globals.css

@@ -2,7 +2,7 @@ body {
     margin: 0;
     padding: 0;
     color: rgba(255, 255, 255, 0.87);
-    background-color: #000000; 
+    background-color: #000000;
     font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -45,4 +45,42 @@ body {
         border: 1px solid rgba(255, 255, 255, 0.3);
         color: rgba(255, 255, 255, 0.3);
     }
+}
+
+.audio-controls {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1000;
+    display: flex;
+    gap: 10px;
+}
+
+.audio-controls button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: all 0.3s ease;
+}
+
+.record-button {
+    background-color: #ff4444;
+    color: white;
+}
+
+.stop-button {
+    background-color: #444444;
+    color: white;
+}
+
+.play-button {
+    background-color: #44aa44;
+    color: white;
+}
+
+.audio-controls button:hover {
+    opacity: 0.8;
+    transform: scale(1.05);
 }