reactでp5jsも使ってさらにリアルタイムデータベースも使いたい2

前回画面の実装が済みました。firebaseの導入に向けて今回は前回のものに修正を加えます。

ディレクトリの配置変え

前回はsrcディレクトリ直下に全て置いていたのですが、ファイル数が多くなりそうなので少し整理します。以下のようにディレクトリを作成しjsファイルとcssファイルを分けます。また前回無かったファイルもありますが、あとで使用するものです。

ライトモードとダークモードの導入

switch.js

明るい状態は前回のスクリーンショットで見てもらったかと思いますが、暗い状態だとホタルの光のようになって美しかったのでライトとダークの二つのモードを作ろうと思います。ライトモードとダークモードを切り替えるためのスイッチを作成します。

import React, { useState } from "react";
import Styles from "../styles/switch.module.css";
/**
* ライトモード・ダークモードの切り替え
* @param {*} props 
*/
const Switch = (props) => {
   const [state, setState] = useState("light");
   // 
   const changeState = () => {
       if (state === "light") {
           props.handler("dark");
           setState("dark");
       } else {
           props.handler("light");
           setState("light");
       }
   }
   if (state === "light") {
       return (
           <div 
               className={ Styles.container }
               onClick={ changeState }
           >
               <div 
                   className={ `${Styles.backBar}`.concat(" ", `${Styles.backBarLight}`) }
               >
                   light
               </div>
               <div
                   className={ Styles.btnLight }
               ></div>
           </div>
       );
   }
   return (
       <div 
           onClick={ changeState }
           className={ Styles.container }
       >
           <div 
               className={ `${Styles.backBar}`.concat(" ", `${Styles.backBarDark}`) }
           >
               dark
           </div>
           <div
               className={ Styles.btnDark }
           ></div>
       </div>
   );
}
export { Switch }

switch.module.css

.container {
   display: block;
   position: relative;
   width: 70px;
   height: 30px;
   cursor: pointer;
}
.backBar {
   display: block;
   position: absolute;
   font-size: 14px;
   line-height: 20px;
   padding: 0 5px;
   top: 5px;
   left: 5px;
   width: 50px;
   height: 20px;
   border-radius: calc(25px/2);
}
.backBarLight {
   text-align: right;
   background: #818181;
   box-shadow: 0 0 5px #000000;
}
.backBarDark {
   text-align: left;
   background: #404063;
   box-shadow: 0 0 5px #ffffff;
}
.btnLight {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #ffffff;
   box-shadow: 0 0 5px #000000;
   transition: all 0.3s ease-out;
}
.btnDark {
   display: block;
   position: absolute;
   top: 0;
   left: 40px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #232346;
   box-shadow: 0 0 5px #ffffff;
   transition: all 0.3s ease-out;
}

それに合わせてapp.jsとsketch.jsも書き換えます。

App.js

Appではmodeというステートでライトかダークかの状態を持たせます。またchangeMode関数でmodeを書き換えます。modeはP5Wrapperからsketch.jsにプロップスを渡します。また、changeMode関数をswitch.jsに渡すことでswitch.jsでmodeを書き換えれるようにします。

import React, { useState } from 'react';
import Styles from "./styles/app.module.css";
import P5Wrapper from "react-p5-wrapper"
import { Sketch } from "./scripts/sketch";
import { Switch } from "./scripts/switch";
function App() {
   const [mode, setMode] = useState("light");
   const changeMode = (value) => {
       setMode(value);
       console.log(mode);
   }
   return (
       <>
       <P5Wrapper sketch={ Sketch } mode={ mode }/>
       <div className={ Styles.switch }>
           <Switch 
               handler={ changeMode }
           />
       </div>
       </>
   );
}
export default App;

sketch.js

p.myCustomRedrawAccordingToNewPropsHandler関数で受け取ったプロップスを元にした処理を記述することが出来ます。ここで受け取ったmodeがlightかdarkかで条件分岐をします。

/**
* ライトモードとダークモードの切り替え用の関数
*/
let mode;
const dark = () => {
   p.blendMode(p.BLEND);
   p.background(0, 0, 0);
   p.blendMode(p.LIGHTEST);
}

const light = () => {
   p.blendMode(p.BLEND);
   p.background(0, 0, 255);
   p.blendMode(p.DIFFERENCE);
}

p.myCustomRedrawAccordingToNewPropsHandler = (props) => {
   mode = props.mode;
}
p.draw = () => {
    if (mode === "light") {
       light();
    } else {
       dark();
    }
    

実行すると以下のようになります。