zoup.js

import React, {useState} from 'react';
import {SketchPicker} from 'react-color';
import Canvas3D from './Canvas3D';
import contreplaque from './contreplaque.jpg';
import okoume from './okoume.jpg';
import '../styles/App.scss';

const formeInit = {
  rangee: 7,
  epaisseur: 0.003,
  largeurC: 0.068,
  largeurP: 0.100,
  get longueurP() {
    return ((this.rangee * this.largeurC) + ((this.rangee - 1) * this.epaisseur))
  },
  largeurP: 0.100,
  nbCarreaux: new Array(49).fill(0).map((d, id) => ({id})),
  nbPeignes: new Array(12).fill(0).map((d, id) => ({id})),
  sequence: [ 3, 5, 2, 1, 2, 5, 3, 5, 0, 4, 3, 4, 0, 5, 2, 4, 1, 0, 1, 4, 2, 1, 3, 0, 6, 0, 3, 1, 2, 4, 1, 0, 1, 4, 2, 5, 0, 4, 3, 4, 0, 5, 3, 5, 2, 1, 2, 5, 3 ],
  get profondeur() {
    return (this.sequence.map((a, i) => {
      return a * (this.largeurP / Math.max(...this.sequence))
    }))
  }
}

const couleurInit = {
  avant: "none",
  arriere: "none",
  bothSide: false
};

const Quadralab = (props) => {

  const [forme, setForme] = useState(formeInit);
  const [couleur, setCouleur] = useState(couleurInit);
  const [matiere, setMatiere] = useState(contreplaque);
  const [visible, setVisible] = useState(true);

  return (<div id="quadralab" className="flex_r fullsize ">
    <div className="w60 megafull">
      <Canvas3D forme={forme} couleur={couleur} matiere={matiere} accroche={visible}></Canvas3D>
    </div>
    <div className="w40 megafull flex_c quadraparam">
      <div className="flex_r">
        <i className="fas fa-paint-brush quadricon"></i>
        <i className="fas fa-cubes quadricon"></i>
        <i className="fas fa-expand quadricon"></i>
        <i className="fas fa-screwdriver quadricon"></i>
        <i className="far fa-address-card quadricon"></i>
      </div>
      <div className="center titre_box">Titre</div>
      <div className="flex_c">
        <div className="flex_r">
          <div className="box_quadralab">Element</div>
          <div className="box_quadralab">Element</div>
        </div>
        <div className="flex_r">
          <div className="box_quadralab">Element</div>
          <div className="box_quadralab">Element</div>
        </div>
      </div>

      {/** <div height="100px">
        <button onClick={() => setForme(prevForme => ({
            ...prevForme,
            largeurP: 0.100
          }))}>
          LargeurP 10cm
        </button>
        <button onClick={() => setForme(prevForme => ({
            ...prevForme,
            largeurP: 0.200
          }))}>
          Largeur P 20cm
        </button>
        <button onClick={() => setForme(prevForme => ({
            ...prevForme,
            largeurP: 0.150
          }))}>
          Largeur P 15cm
        </button>
        <p>Couleur

          <button onClick={() => setCouleur(prevCouleur => ({
              ...prevCouleur,
              avant: "blue"
            }))}>
            Couleur bleue
          </button>
          <button onClick={() => setCouleur(prevCouleur => ({
              ...prevCouleur,
              bothSide: true
            }))}>
            Deux cotés
          </button>
          <button onClick={() => {
              if (couleur.bothSide) {
                setCouleur(prevCouleur => ({
                  ...prevCouleur,
                  avant: "white",
                  arriere: "grey"
                }))
              } else {
                setCouleur(prevCouleur => ({
                  ...prevCouleur,
                  avant: "white",
                }))
              }

            }}>
            Aucune
          </button>
          <SketchPicker color={couleur} onChange={(color) => setCouleur(prevCouleur => ({
              ...prevCouleur,
              avant: color.hex
            }))}/>

        </p>
        <p>Matière

          <button onClick={() => setMatiere(okoume)}>
            Okoume
          </button>
          <button onClick={() => setMatiere(contreplaque)}>
            peuplier
          </button>
        </p>
        <p>Accroche

          <button onClick={() => setVisible(!visible)}>
            Accroche
          </button>
        </p>
        <p>Logo</p>
        <p>Sequence?</p>
      </div> **/
      }
    </div>
  </div>)
}

export default Quadralab;