difuseurInit.js

export default {
  rangee: 7,
  epaisseur: 0.003,
  largeurC: 0.068,
  largeurP: 0.100,
  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 ],
  couleur: "",
  nbcouleur : 0,
  bothSide: false,
  matiere: peuplier,
  matiereName: "peuplier",
  accroche: true,
  logo : false,
  get longueurP() { return ((this.rangee * this.largeurC) + ((this.rangee - 1) * this.epaisseur)) },
  get profondeur() { return (this.sequence.map((a, i) => { return a * (this.largeurP / Math.max(...this.sequence)) })) },
  id : 0,
  qte : 1,
  get prix () {return prixDuProduit.getPrix()},
  nom : "Sur mesure",
  unite : 1,
  poids : 3
}

import React, {useState, useRef} from 'react';
import {SketchPicker} from 'react-color';
import Canvas3D from './Canvas3D';
import ordinaire from './textures/ordinaire.jpg';
import peuplier from './textures/peuplier.jpg';
import okoume from './textures/okoume.jpg';
import blanc from './textures/blanc.jpg';
import mdf from './textures/mdf.jpg';
import souscouche from './textures/souscouche.jpg';
import '../styles/App.scss';
import {prixDuProduit, panierOperations} from '../Store/shopStore';
import {view} from 'react-easy-state';
import prix from '.././prix';
import { useHistory } from 'react-router-dom';
import diffuseurInit from './diffuseurInit';

const Grid = (props) => {
  return ( <>
  <div className="center titre_box">{props.titre}</div>
  {props.tab === "couleur" ? <div className="center">{props.option}</div> : null }
  <div className="flex_c">
    <div className="flex_r flex_w">
      {props.elements.map((a, i) => {
        return (
          <div className="box_quadralab">{a}</div>
        )
      })}
    </div>
  </div>
</>)
}

const setPrice = (key, value) => {
  console.log( prix[key][value]);
    prixDuProduit[key] = prix[key][value];
}

const Quadralab = (props) => {
  let history = useHistory()
  const [diffuseur, setDiffuseur] = useState(diffuseurInit);
  const [previousMat, setpreviousMat] = useState();
  const [tab, setTab] = useState("matiere");
  const [clicked, setClicked] = useState(0);
  const [img, setImg] = useState({src:'essai.png'});
  const [qte, setQte] = useState(1);

  const Validate = (id, qte, prix, name, unite, poids) => {
  panierOperations.addToCart(id, qte, prix, name, unite, poids);
  }

  const changeDif = React.useCallback((update) => {
    setDiffuseur(previous => ({
      ...previous,
      ...typeof update === 'function' ? update(previous) : update
    }));
  }, []);

//prix initial
  prixDuProduit["profondeur"] = prix["profondeur"][diffuseur.largeurP];
  prixDuProduit["couleur"] = prix["couleur"][diffuseur.nbcouleur];
  prixDuProduit["couleurBack"] = prix["couleurBack"][diffuseur.bothSide];
  prixDuProduit["accroche"] = prix["accroche"][diffuseur.accroche];
  prixDuProduit["logo"] = prix["logo"][diffuseur.logo];

//profondeurs

  const largeur100 = <div onClick={() => {changeDif({largeurP: 0.100}); setPrice("profondeur", 0.100)}} className="flex_c cursor"><span className="letterSize center">S</span><span>Classique / 10cm</span></div> ;
  const largeur150 = <div onClick={() => {changeDif({largeurP: 0.150}); setPrice("profondeur", 0.150)}} className="flex_c cursor"><span className="letterSize center">M</span><span>Intermédiaire / 15cm</span></div> ;
  const largeur200 = <div onClick={() => {changeDif({largeurP: 0.200}); setPrice("profondeur", 0.200)}} className="flex_c cursor"><span className="letterSize center">L</span><span>The Big One / 20cm</span></div> ;

//couleurs
  const C_aucune = <div onClick={() => {changeDif({couleur : "white", nbcouleur: 0, matiere: previousMat}); setPrice("couleur", 0)}} className="flex_c cursor"><span className="letterSize center"><i className="fas fa-times"></i></span><span>Aucune</span></div> ;
  const C_noir = <div onClick={() => {changeDif({couleur : "black", nbcouleur: 1, matiere: previousMat}); setPrice("couleur", 1)}} className="flex_c cursor"><span className="letterSize center noir"></span><span>Noir</span></div> ;
  const C_blanc = <div onClick={() => {changeDif({couleur : "white", nbcouleur: 1, matiere: blanc, matiereName: "blanc"}); setPrice("couleur", 1);}} className="flex_c cursor"><span className="letterSize center"></span><span>Blanc</span></div> ;
  const C_souscouche = <div onClick={() => {changeDif({couleur : "white", nbcouleur: 4, matiere: souscouche, matiereName: "souscouche"}); setPrice("couleur", 4)}} className="flex_c cursor"><span className="letterSize center souscouche"></span><span>Sous-couche</span></div> ;
  const C_perso = <div onClick={() => {setTab("couleurPerso"); setPrice("couleur", 3);}} className="flex_c cursor"><span className="letterSize center"><img src="././images/color-wheel.svg" width="50px"></img></span><span>Personnalisée</span></div> ;
  const C_bothside = <div><input type="radio" value="option1" checked={diffuseur.bothSide} onClick={()=> {changeDif({bothSide : !diffuseur.bothSide, couleurArriere: "white"}); setPrice("couleurBack", diffuseur.bothSide);}} />Peinture sur l'arrière du diffuseur</div>;

//matieres
  const M_mdf = <div onClick={() => {changeDif({matiere: mdf, matiereName: "Fibre de bois"}); setPrice("matiere", "mdf")}} className="flex_c cursor"><span className="letterSize center mdf"></span><span>Fibre de bois</span></div> ;
  const M_okoume = <div onClick={() => {changeDif({matiere: okoume, matiereName: "Okoume"}); setPrice("matiere", "okoume")}}  className="flex_c cursor"><span className="letterSize center okoume"></span><span>Okoume</span></div> ;
  const M_peuplier=<div onClick={() => {changeDif({matiere: peuplier, matiereName: "Peuplier"}); setPrice("matiere", "peuplier")}}  className="flex_c cursor"><span className="letterSize center peuplier"></span><span>Peuplier</span></div> ;
  const M_ordinaire=<div onClick={() => {changeDif({matiere: ordinaire, matiereName: "Contreplaqué"}); setPrice("matiere", "contreplaque")}}  className="flex_c cursor"><span className="letterSize center ordinaire"></span><span>Contreplaqué</span></div> ;

//options
  const O_accroche=<div onClick={() => {changeDif({accroche: !diffuseur.accroche}); setPrice("accroche", diffuseur.accroche)}} className="flex_c cursor"><span className="letterSize center"><img src="././images/hook.svg" width="50px"></img></span><span>{diffuseur.accroche? "Accroche au mur ajoutée" :  "Aucune accroche murale" }</span></div> ;
  const L_logo=<div onClick={() => {changeDif({logo: !diffuseur.logo}); setPrice("logo", diffuseur.logo)}} className="flex_c cursor"><span className="letterSize center"><img src="././images/user.svg" width="50px"></img></span><span>{diffuseur.logo? "Logo ajouté" :  "Aucun logo ajouté" }</span></div> ;

//rendu
  return (<div id="quadralab" className="flex_r fullsize ">
  <span className="back cursor"  onClick={() => history.goBack()} ><i className="fas fa-angle-left"></i> retour</span>
    <div className="w60 megafull flex_c">
      <Canvas3D dif = {diffuseur} clicked={clicked} img={img} setImg={setImg}></Canvas3D>
      <div className="priceBox w15">
        <p>Diffuseur {diffuseur.matiereName} {diffuseur.couleur} de {diffuseur.largeurP * 100} cm</p>
        <p>{prixDuProduit.getPrix()} €</p>
        <div className="flex_r flex_center">
        <button onClick={() => Validate(0, qte, diffuseur.prix, 'Sur Mesure', 1, 3)}>Ajouter au panier</button>
        <input className="givemespace" type="text" value={qte} size="2"/>
          <div className="flex_c"><i className="fas fa-plus cursor" onClick={()=> setQte(qte+1)}></i>
          <i className="fas fa-minus cursor" onClick={()=> setQte(qte-1)}></i></div>
        </div>
    </div>
  </div>
    <div className="w40 megafull flex_c quadraparam">
      <div className="flex_r">
        <i className="fas fa-cubes quadricon" onClick={() => setTab("matiere")}></i>
        <i className="fas fa-paint-brush quadricon" onClick={() => {setTab("couleur"); setpreviousMat(diffuseur.matiere)}}></i>
        <i className="fas fa-expand quadricon" onClick={() => setTab("profondeur")} ></i>
        <i className="fas fa-screwdriver quadricon" onClick={() => setTab("options")}></i>
        <i className="far fa-address-card quadricon" onClick={() => setTab("logo")}></i>
      </div>
      {tab === "matiere" ?
<Grid tab={tab} titre="Selectionner le bois" elements={[M_mdf, M_okoume, M_peuplier, M_ordinaire]}></Grid>
        : null}
      {tab === "couleur" ?
<Grid tab={tab} option={C_bothside} titre="Selectionner une couleur" elements={[C_aucune, C_souscouche, C_noir, C_blanc, C_perso, ""]}></Grid>
        : null}
      {tab === "couleurPerso" ?
        <div>
          <div className="center titre_box">Couleur personnalisée</div>
            <p className="cursor" onClick={() => setTab("couleur")}>Retour</p>
              <div className="flex_r">
                <div>Une seule couleur</div>
                <div>Peinture par cellule</div>
              </div>
              <SketchPicker color={diffuseur.couleur} onChange={(color) => changeDif({couleur : color.hex, nbcouleur: 3})}/>
        </div>
        : null}
      {tab === "profondeur" ?
<Grid tab={tab} titre="Selectionner une profondeur" elements={[largeur100, largeur150, largeur200, ""]}></Grid>
        : null}
      {tab === "options" ?
<Grid tab={tab} titre="Ajouter des éléments supplémentaires" elements={[O_accroche,"" ]}></Grid>
        : null}
      {tab === "logo" ?
<Grid tab={tab} titre="Ajouter votre logo" elements={[L_logo,"" ]}></Grid>
        : null}
    </div>
  </div>)
}

export default view(Quadralab);