add jp support

src/App.js

@@ -8,21 +8,49 @@ import { exportComponentAsPNG } from 'react-component-export-image';
 
 class App extends Component {
     state = {
-
+        lang: "en"
     };
 
     exportButtonStyle = {
         fontSize: 30,
         fontWeight: 'bold'
     }
 
+    getWtfMessage(){
+        if(this.state.lang === "en"){
+            return "please view in desktop since idk how to make things work on mobile";
+        } else {
+            return "サイトとか作るの初めてなのでケータイとかでこのサイト見るとめちゃくちゃになります。。。すいません";
+        }
+    }
+
+    getLangButtonClasses = (lang) => {
+        var className = "btn btn-sm ml-2 mr-2 btn-";
+        console.log("wtf: " + lang + " " + this.state.lang);
+        if(this.state.lang === lang){
+            className += "primary";
+        } else {
+            className += "secondary";
+        }
+        return className;
+    }
+
+    handleLangChange = (lang) => {
+        this.setState({lang});
+    }
+
     render(){
             const printRef = React.createRef();
 
+
             return (
                 <React.Fragment>
-                    <div className="mt-5">
-                        <Favs key="ok" className="mt-3" ref={printRef}></Favs>
+                    <div className="text-center mt-3">
+                        <button style={this.exportButtonStyle} onClick={() => this.handleLangChange("en")} className={this.getLangButtonClasses("en")}>EN</button>
+                        <button style={this.exportButtonStyle} onClick={() => this.handleLangChange("jp")} className={this.getLangButtonClasses("jp")}>日本語</button>
+                    </div>
+                    <div className="mt-3">
+                        <Favs key="ok" className="mt-3" ref={printRef} lang={this.state.lang}></Favs>
                         <div className="text-center mt-5 mb-5">
                             <button style={this.exportButtonStyle} onClick={() => exportComponentAsPNG(printRef)} className="btn btn-secondary btn-sm">
                                 Export to PNG
@@ -32,7 +60,9 @@ class App extends Component {
                     <div className="text-center mb-5 text-muted">
                         All characters/assets belong to Cygames and Nintendo
                         <div></div>
-                        please view in desktop since idk how to make things work on mobile
+                        {this.getWtfMessage()}
+                        <div></div>
+                        hello twitter!
                     </div>
                 </React.Fragment>
             );

src/components/Favs.jsx

@@ -9,7 +9,6 @@ import OutsideClickHandler from './OutsideClickHandler';
 const unknownImg = require("../resources/misc/unknown.png");
 
 const logo = require("../resources/misc/logo_app.png");
-const favsTitle = require("../resources/misc/favs.png");
 
 class Favs extends Component {
     state = {
@@ -100,7 +99,12 @@ class Favs extends Component {
         }
     }
 
-
+    getSelfPlugText(){
+        if(this.props.lang === "en"){
+            return "Made in sockperson.github.io/dragalia-faves";
+        }
+        return "テンプレ　sockperson.github.io/dragalia-faves";
+    }
 
     render() {
         const eles = this.state.elements;
@@ -116,7 +120,7 @@ class Favs extends Component {
                         <div className="row justify-content-center">
                             <div className="row justify-content-center">
                                 <img src={logo} className="col-3 thumbnail img-responsive"/>
-                                <img src={favsTitle} className="col-7 thumbnail img-responsive"/>
+                                <img src={require("../resources/misc/favs_" + this.props.lang + ".png")} className="col-7 thumbnail img-responsive"/>
                             </div>
                             <div></div>
                             {weps.map(wep => (
@@ -127,8 +131,8 @@ class Favs extends Component {
                                     </React.Fragment>
                                 ))
                             ))}
-                            <div className="row justify-content-center">
-                                <p className="col-5 h4 mt-2 mb-2 text-muted text-nowrap">Made in sockperson.github.io/dragalia-faves</p>
+                            <div className="text-center">
+                                <p className="h4 mt-2 mb-2 text-muted text-nowrap">{this.getSelfPlugText()}</p>
                             </div>
                         </div>
                     </OutsideClickHandler>