Merge branch 'chaos_page' of ssh://git.leizour.fr:222/RedCrab/projet-nuitinfo-2024 into chaos_page

docker-compose.yml

@@ -3,10 +3,22 @@ services:
     build:
       context: .
       dockerfile: dockerfile
-    container_name: web
+      network: host
+    container_name: nuitdelinfo
     restart: always
-    ports:
-      - 8080:2486
     volumes:
       - ./back/data:/app/data
+    networks:
+      - traefik
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.nuitdelinfo.rule=Host(`nuitdelinfo.leizour.fr`)"
+      - "traefik.http.routers.nuitdelinfo.entrypoints=websecure"
+      - "traefik.http.routers.nuitdelinfo.tls=true"
+      - "traefik.http.routers.nuitdelinfo.tls.certresolver=myresolver"
+      - "traefik.http.services.nuitdelinfo.loadbalancer.server.port=2486"
+
+networks:
+  traefik:
+    external: true
 

front/src/components/3d/Axes.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
 import { LineBasicMaterial, Line, Group } from 'three'
-import { useFrame } from '@react-three/fiber'
 import * as THREE from 'three'
 
 export default function Axes() {

front/src/components/3d/Character.tsx

@@ -1,11 +1,10 @@
-import { Group, Mesh, MeshStandardMaterial, BufferGeometry } from 'three'
 import { useGLTF } from '@react-three/drei'
 
 export default function Character() {
     // import glb file
 
     // load the glb file in "/models/BASEmodel.glb"
-    const { nodes, materials, scene } = useGLTF('/models/man.glb')
+    const { scene } = useGLTF('/models/man.glb')
     
     // rotate the character
     scene.rotation.x = -Math.PI / 2

front/src/components/3d/Floor.tsx

@@ -1,5 +1,3 @@
-
-import React from 'react'
 import { Group } from 'three'
 import * as THREE from 'three'
 

front/src/components/3d/Marker.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
-import { Group } from 'three'
 import * as THREE from 'three'
 
 interface MarkerProps {
-    position: [number, number, number],
+    position: number[],
     color: string,
     onClick?: () => void
 }
 
 export default function Marker({ position, color, onClick }: MarkerProps) {
 
-    const [positionState, setPositionState] = React.useState(position)
+    const [positionState, setPositionState] = React.useState(new THREE.Vector3(...position))
     
     // Return the marker object
     // return <primitive object={marker}  />
     return (
-        <mesh position={positionState} rotation={[Math.PI,0,0]} onClick={onClick} onPointerOver={(e) => setPositionState([positionState[0], positionState[1], positionState[2] + 0.1])} onPointerOut={(e) => setPositionState(position)}>
+        <mesh position={positionState} rotation={[Math.PI,0,0]} onClick={onClick} onPointerOver={() => setPositionState(positionState.clone().setZ(positionState.z + 0.1))} onPointerOut={() => setPositionState(new THREE.Vector3(...position))}>
             <coneGeometry args={[0.15, 0.6, 6]} />
             <meshStandardMaterial color={color} side={THREE.DoubleSide} />
         </mesh>

front/src/components/3d/Ocean.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 import { Water, WaterOptions } from 'three/examples/jsm/objects/Water.js';
-import { WaterMesh, WaterMeshOptions } from 'three/examples/jsm/objects/Water2Mesh.js';
 
 const Ocean: React.FC = () => {
 

front/src/components/Button.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
 
 interface ButtonProps {
     color: 'primary' | 'secondary';

front/src/components/FstSection.tsx

@@ -1,5 +1,4 @@
 import Button from "./Button";
-import ButtonLink from "./ButtonLink";
 import NavBar from "./NavBar";
 
 export default function FstSection () {

front/src/components/NavBar.tsx

@@ -1,4 +1,3 @@
-import LogoButton from '../components/LogoButton.tsx'
 import ClickableLink from './ClickableLink.tsx';
 import RoundButton from './RoundButton.tsx';
 
@@ -7,7 +6,7 @@ export default function NavBar(){
     <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.5em 1em"}}>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
             {/* <LogoButton url="/" logo = "https://archlinux.org/static/hetzner_logo.41114a37d25f.png"/> */}
-            <span class="material-symbols-outlined"
+            <span className="material-symbols-outlined"
             style={{fontSize: "4em", color: "white", margin: "0.5em"}}>sailing</span>
             <ClickableLink url="/" text = "Accueil" />
             <ClickableLink url="/game" text = "Jeu" />

front/src/pages/ChaosPage.tsx

@@ -25,6 +25,7 @@ export default function ChaosPage(){
       }
       
       
+    //   console.log(shuffledArray);  // Affiche un tableau mélangé
       
 
     const [entry1,setEntry1] = useState("")
@@ -48,6 +49,9 @@ export default function ChaosPage(){
         setEntry3(entry3+ent);
     }
 
+    const [tel,setTel] = useState(0)
+
+    
     return(
         <div>
             <h1>Chaos Page</h1>
@@ -66,6 +70,17 @@ export default function ChaosPage(){
                                                                 rdmFront={randomFront}
                                                                 color={color}/> })}
             </div>
+            <fieldset>
+                <legend>Formulaire super mega bien</legend>
+                <input type="text" placeholder="nom"/>
+                <input type="text" placeholder="prenom"/>
+                <input type="text" placeholder="email"/>
+                <input type="text" placeholder="mdp"/>
+                <input type="text" placeholder="mdp2"/>
+                <label htmlFor="phone">phone : {tel}</label>
+                <input type="range" min="0" max="9999999999" step="1" name="phone" id="phone" value={tel} onChange={(e)=>setTel(parseInt(e.target.value))}/>
+                <input type="submit" value="envoyer"/>
+            </fieldset>
         </div>
     )
 }

front/src/pages/GamePage.tsx

@@ -1,9 +1,7 @@
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, PerspectiveCamera, Sky } from "@react-three/drei";
-import * as THREE from "three";
+import { useEffect,  useState } from "react";
-import React, { useEffect, useRef, useState } from "react";
 import Ocean from "../components/3d/Ocean";
-import Axes from "../components/3d/Axes";
 import Character from "../components/3d/Character";
 import Floor from "../components/3d/Floor";
 import Marker from "../components/3d/Marker";