diff --git a/src/components/UI/Dialog/DialogBox.jsx b/src/components/UI/Dialog/DialogBox.jsx index 582dc17..61ad07a 100644 --- a/src/components/UI/Dialog/DialogBox.jsx +++ b/src/components/UI/Dialog/DialogBox.jsx @@ -7,8 +7,10 @@ import * as Dialog from "@radix-ui/react-dialog"; import { Cross2Icon, InfoCircledIcon } from "@radix-ui/react-icons"; import "./dialogbox.css"; +// The help dialog stays CLOSED by default so the builder is immediately +// playable for a child (no overlay to dismiss). The "?" button reopens it. export const DialogBox = () => ( - + @@ -26,45 +29,38 @@ export const DialogBox = () => ( - Manual + Comment jouer
    -
  • Use left side panel to change the properties of brick
  • - You change the pivot point of bricks using{" "} + Choisis une forme et une couleur{" "} + en haut, puis clique pour poser une pièce. +
    • +
  • + En haut, 🧱 Créer pose des pièces,{" "} + ✋ Modifier sert à les choisir, les déplacer ou + les effacer. +
    • +
  • + Pour effacer : passe en ✋ Modifier, clique une + pièce (ou maintiens Maj pour en + choisir plusieurs) puis appuie sur{" "} + Suppr. +
    • +
  • + Tu peux décaler le point de pose avec les touches{" "} A S{" "} - W and D{" "} - keys or You can use anchorX and{" "} - anchorZ option from the control panel + W D.
  • - To delete brick, select Edit option in control - panel then select brick by clicking on brick or hold{" "} - Shift to select multiple bricks and - use - Delete to delete selected bricks -
    • -
  • - Top bar has two options. create Mode which let's you create - new bricks while Edit mode let's you edit existing bricks by - selecting -
    • -
  • - You can also use CTRL +{" "} - Z for undo,{" "} - CTRL + R{" "} - for redo. -
    • -
  • - Bottom bar has (from left) first button to undo, second to redo, - third to delete selected and forth button displays list of all - users in room + En bas : les deux flèches annulent ou refont, la poubelle efface + la sélection, et le dernier bouton montre qui joue avec toi.
- diff --git a/src/components/UI/JoinRoomForm/index.jsx b/src/components/UI/JoinRoomForm/index.jsx index 874fc20..8af1456 100644 --- a/src/components/UI/JoinRoomForm/index.jsx +++ b/src/components/UI/JoinRoomForm/index.jsx @@ -1,98 +1,74 @@ /* eslint-disable react/prop-types */ -import * as Form from "@radix-ui/react-form"; import "./styles.css"; -import { useRef } from "react"; +import { useRef, useState } from "react"; import { useStore } from "../../../store"; +import { uID } from "../../../utils"; -const JoinRoomForm = ({ setRoomId }) => { - const form = useRef(); +// Fixed default room so two people who click "à plusieurs" land together +// without typing anything. +const SHARED_ROOM = "lisael"; - const name = useRef(); - const room = useRef(); +function autoName() { + return `Constructeur ${Math.floor(Math.random() * 900) + 100}`; +} +export const JoinRoomScreen = ({ setRoomId }) => { const setSelfName = useStore((state) => state.setSelfName); + const [showPerso, setShowPerso] = useState(false); + const persoRoom = useRef(""); - const submit = (e) => { - e.preventDefault(); - setSelfName(name.current); - setRoomId(room.current); + const join = (roomId) => { + setSelfName(autoName()); + setRoomId(roomId); + }; + + const playSolo = () => join(`solo-${uID(6)}`); + const playTogether = () => join(SHARED_ROOM); + + const joinPerso = () => { + const r = (persoRoom.current || "").trim(); + join(r ? `perso-${r}` : `solo-${uID(6)}`); }; return ( - - -
- Name - - Please enter your Name - -
- - { - name.current = e.target.value; - }} - /> - - - -
- Room ID - - Please enter a room ID - -
- - { - room.current = e.target.value; - }} - /> - - - - - - - ); -}; +
+
+

🧱 Blocs Pro

+

On construit ?

-export const JoinRoomScreen = ({ setRoomId }) => { - return ( -
- + + + + + + + {showPerso && ( +
+ { + persoRoom.current = e.target.value; + }} + /> + +
+ )} +
); }; diff --git a/src/components/UI/JoinRoomForm/styles.css b/src/components/UI/JoinRoomForm/styles.css index 0503f00..56ad3e4 100644 --- a/src/components/UI/JoinRoomForm/styles.css +++ b/src/components/UI/JoinRoomForm/styles.css @@ -1,95 +1,140 @@ -@import "@radix-ui/colors/black-alpha.css"; -@import "@radix-ui/colors/violet.css"; -@import "@radix-ui/colors/mauve.css"; +/* Kid-friendly, keyboard-free room entry screen. */ -/* reset */ -input, -textarea, -button { +.JoinScreen { + width: 100vw; + height: 100vh; + box-sizing: border-box; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(160deg, #2b6cff 0%, #7b3ff2 100%); + font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; +} + +.JoinCard { + width: min(92vw, 420px); + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + padding: 32px 28px; + border-radius: 28px; + background: #ffffff; + box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); +} + +.JoinTitle { + margin: 0; + font-size: 2.2rem; + font-weight: 800; + color: #1b1b2b; + text-align: center; +} + +.JoinSubtitle { + margin: 0 0 6px; + font-size: 1.15rem; + font-weight: 600; + color: #6b6b80; + text-align: center; +} + +.BigButton { all: unset; box-sizing: border-box; -} - -.FormRoot { - width: 260px; -} - -.FormField { - display: grid; - margin-bottom: 10px; -} - -.FormLabel { - font-size: 14px; - font-weight: 500; - line-height: 35px; - color: white; -} - -.FormMessage { - font-size: 13px; - color: white; - opacity: 0.8; -} - -.Input, -.Textarea { width: 100%; - display: inline-flex; + display: flex; + flex-direction: column; align-items: center; justify-content: center; - border-radius: 4px; - - font-size: 15px; - color: white; - background-color: gray; - box-shadow: 0 0 0 1px var(--black-a9); -} -.Input:hover, -.Textarea:hover { - box-shadow: 0 0 0 1px white; -} -.Input:focus, -.Textarea:focus { - box-shadow: 0 0 0 2px white; -} -.Input::selection, -.Textarea::selection { - background-color: var(--black-a9); - color: white; -} - -.Input { - padding: 0 10px; - height: 35px; - line-height: 1; -} - -.Textarea { - resize: none; - padding: 10px; -} - -.FormButton { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 15px; - font-size: 15px; - line-height: 1; - font-weight: 500; - height: 35px; - width: 100%; - - background-color: white; - color: black; - box-shadow: 0 2px 10px var(--black-a7); -} -.FormButton:hover { - background-color: var(--mauve-3); + gap: 6px; + padding: 22px 18px; + border-radius: 22px; + font-size: 1.35rem; + font-weight: 800; + color: #ffffff; + text-align: center; cursor: pointer; + user-select: none; + transition: transform 0.12s ease, box-shadow 0.12s ease; + box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18); } -.FormButton:focus { - box-shadow: 0 0 0 2px black; + +.BigButtonEmoji { + font-size: 2.6rem; + line-height: 1; +} + +.BigButton:hover { + transform: translateY(-2px); +} + +.BigButton:active { + transform: translateY(4px); + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); +} + +.BigButton.solo { + background: #ff8a18; +} + +.BigButton.together { + background: #2ca84a; +} + +.PersoToggle { + all: unset; + box-sizing: border-box; + cursor: pointer; + margin-top: 4px; + font-size: 0.85rem; + font-weight: 600; + color: #9a9ab0; +} + +.PersoToggle:hover { + color: #6b6b80; +} + +.PersoBox { + display: flex; + width: 100%; + gap: 8px; +} + +.PersoInput { + all: unset; + box-sizing: border-box; + flex: 1; + height: 40px; + padding: 0 12px; + border-radius: 12px; + font-size: 1rem; + color: #1b1b2b; + background: #f0f0f6; + box-shadow: inset 0 0 0 2px #d8d8e4; +} + +.PersoInput:focus { + box-shadow: inset 0 0 0 2px #7b3ff2; +} + +.PersoGo { + all: unset; + box-sizing: border-box; + cursor: pointer; + height: 40px; + padding: 0 18px; + border-radius: 12px; + font-weight: 700; + color: #ffffff; + background: #2b6cff; + display: inline-flex; + align-items: center; +} + +.PersoGo:hover { + background: #1f57d6; } diff --git a/src/components/UI/ModeToggleBar/index.jsx b/src/components/UI/ModeToggleBar/index.jsx index 595cc05..68a1687 100644 --- a/src/components/UI/ModeToggleBar/index.jsx +++ b/src/components/UI/ModeToggleBar/index.jsx @@ -18,18 +18,18 @@ export const ModeToggleBar = () => { setMode(CREATE_MODE)} > - {CREATE_MODE} + 🧱 Créer setMode(EDIT_MODE)} > - {EDIT_MODE} + ✋ Modifier ); diff --git a/src/components/UI/Panel/Checkbox/index.jsx b/src/components/UI/Panel/Checkbox/index.jsx index e176d69..b8b624d 100644 --- a/src/components/UI/Panel/Checkbox/index.jsx +++ b/src/components/UI/Panel/Checkbox/index.jsx @@ -6,16 +6,9 @@ import { CheckIcon } from "@radix-ui/react-icons"; import "./styles.css"; import { useStore } from "../../../../store"; -const stateMap = { - rotate: "rotate", -}; - -const setterMap = { - rotate: "setRotate", -}; - -export const Checkbox = ({ label = "rotate" }) => { - const setValue = useStore((state) => state[setterMap[label]]); +export const Checkbox = ({ label = "Tourner" }) => { + // Single toggle: rotate the active piece 90° before placing. + const setValue = useStore((state) => state.setRotate); return (
{ return (
- - - - - +
); diff --git a/src/components/UI/PeopleList/index.jsx b/src/components/UI/PeopleList/index.jsx index b45b5a7..c6a2b13 100644 --- a/src/components/UI/PeopleList/index.jsx +++ b/src/components/UI/PeopleList/index.jsx @@ -78,7 +78,7 @@ export const PopoverPeopleList = () => { color: "rgba(0, 0, 0, 0.5)", }} > - No one else in room + Personne d'autre ici )} {others.map((user) => {