Themes_data

Author: arthurguedes375

src/assets/themes/blue-theme.css

@@ -0,0 +1,16 @@
+export const themes_data = {
+    dark: {
+        title: "Dark Theme",
+        bgc: "#123",
+        hover: "#374757",
+        border: "#25323f",
+        textColor: "#fff",
+    },
+    blue: {
+        title: "Blue Theme",
+        bgc: "#2367ac",
+        hover: "#4981b9",
+        border: "#0c59a7",
+        textColor: "#fff",
+    }
+}

src/assets/themes/themes_data.js

@@ -185,6 +185,7 @@ class Game extends Component {
 
         let returned = -1;
 
+        // eslint-disable-next-line
         this.state.winning_sequences.map((value, i) => {
             if (this.state.board[this.state.winning_sequences[i][0]] === symbol &&
                 this.state.board[this.state.winning_sequences[i][1]] === symbol &&
@@ -198,6 +199,8 @@ class Game extends Component {
     // If tied return true
     check_tied() {
         let returned = true;
+
+        // eslint-disable-next-line
         this.state.board.map((value, i) => {
             if (this.state.board[i] === '') returned = false;
         });

src/pages/Game/index.jsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 
-// Initial Theme
-import '../../assets/themes/dark-theme.css';
 
 // Styles
 import './styles.css';
@@ -61,12 +59,14 @@ class GameSettings extends Component {
         if (data.p1.nickname && data.p1.nickname !== "Player 1") {
             newState.nicknameP1 = data.p1.nickname;
             newState.inputP1 = data.p1.nickname;
-            newState.maxRounds = data.maxRounds;
         }
 
         if (data.p2.nickname && data.p2.nickname !== "Player 2") {
             newState.nicknameP2 = data.p2.nickname;
             newState.inputP2 = data.p2.nickname;
+        }
+
+        if (data.maxRounds) {
             newState.maxRounds = data.maxRounds;
         }
 
@@ -83,13 +83,13 @@ class GameSettings extends Component {
 
         switch (themeIndex) {
             case 0:
-                themes.setTheme(themes.themes.dark);
+                themes.setTheme(themes.themes_data.dark);
                 break;
             case 1:
-                themes.setTheme(themes.themes.blue);
+                themes.setTheme(themes.themes_data.blue);
                 break;
             default:
-                themes.setTheme(themes.themes.dark);
+                themes.setTheme(themes.themes_data.dark);
                 break;
         }
 
@@ -108,11 +108,11 @@ class GameSettings extends Component {
                     <div className="themesSets">
                         <ul>
                             <li>
-                                <Button onClick={() => this.changeTheme(0)} value="Dark Theme" />
+                                <Button onClick={() => this.changeTheme(0)} value={themes.themes_data.dark.title} />
                             </li>
 
                             <li>
-                                <Button onClick={() => this.changeTheme(1)} value="Blue Theme" />
+                                <Button onClick={() => this.changeTheme(1)} value={themes.themes_data.blue.title} />
                             </li>
 
                         </ul>

src/pages/GameSettings/index.jsx

@@ -1,19 +1,8 @@
+import { themes_data } from '../assets/themes/themes_data';
+
 export const themes = {
 
-    themes: {
-        dark: {
-            bgc: "#123",
-            hover: "#374757",
-            border: "#25323f",
-            textColor: "#fff",
-        },
-        blue: {
-            bgc: "#2367ac",
-            hover: "#4981b9",
-            border: "#0c59a7",
-            textColor: "#fff",
-        }
-    },
+    themes_data,
 
 
     getStyle(element, property) {
@@ -23,7 +12,7 @@ export const themes = {
     loadThemes() {
         // localStorageTheme
         const lcStTm = localStorage.getItem("theme");
-        const newTheme = (lcStTm) ? JSON.parse(lcStTm) : this.themes.dark;
+        const newTheme = (lcStTm) ? JSON.parse(lcStTm) : this.themes_data.dark;
         this.setTheme(newTheme);
     },