detailed logs warning popup

src/background/onLabel/DetailedLogs.ts

@@ -1,3 +1,4 @@
+import postChannelMessage from "../../broadcastChannel/postChannelMessage";
 import LogEntry from "../../types/logDecoder";
 
 interface Entry extends LogEntry {
@@ -6,5 +7,10 @@ interface Entry extends LogEntry {
 
 export default function DetailedLogs(entry: Entry): void {
   const { json } = entry;
+  postChannelMessage({
+    type: "SET_DETAILED_LOGS",
+    value: json,
+  });
+
   console.log(`DETAILED LOGS ARE ${json}`);
 }

src/broadcastChannel/channelMessages.ts

@@ -20,6 +20,7 @@ export type MessageType =
   | "LOG_READ_FINISHED"
   | "ACTION_LOG"
   | "SET_UUID"
+  | "SET_DETAILED_LOGS"
   | "SET_UUID_DISPLAYNAME"
   | "OVERLAY_UPDATE"
   | "OVERLAY_SET_SETTINGS"
@@ -77,6 +78,11 @@ export interface LogFinishedMessage extends ChannelMessageBase {
   type: "LOG_READ_FINISHED";
 }
 
+export interface SetDetailedLogsMessage extends ChannelMessageBase {
+  type: "SET_DETAILED_LOGS";
+  value: string;
+}
+
 export interface SetUUIDMessage extends ChannelMessageBase {
   type: "SET_UUID";
   value: string;
@@ -190,6 +196,7 @@ export type ChannelMessage =
   | ActionLogMessage
   | LogMessageRecvMessage
   | LogFinishedMessage
+  | SetDetailedLogsMessage
   | SetUUIDMessage
   | SetUUIDDisplayNameMessage
   | OverlayUpdateMessage

src/broadcastChannel/mainChannelListeners.ts

@@ -97,6 +97,13 @@ export default function mainChannelListeners() {
       fetchPlayerId();
     }
 
+    if (msg.data.type === "SET_DETAILED_LOGS") {
+      reduxAction(store.dispatch, {
+        type: "SET_DETAILED_LOGS",
+        arg: msg.data.value === "ENABLED",
+      });
+    }
+
     if (msg.data.type === "SET_UUID") {
       switchPlayerUUID(msg.data.value);
     }

src/components/App.tsx

@@ -27,6 +27,7 @@ import LoadingBar from "./LoadingBar";
 import PopupComponent from "./PopupComponent";
 import Popups from "./Popups";
 import ArenaIdSelector from "./popups/ArenaIdSelector";
+import DetailedLogs from "./popups/DetailedLogs";
 import SettingsPersistor from "./SettingsPersistor";
 import TopBar from "./TopBar";
 import TopNav from "./TopNav";
@@ -43,9 +44,13 @@ function App(props: AppProps) {
   const dispatch = useDispatch();
   const [canLogin, _setCanLogin] = useState(true);
 
-  const { loginState, loading, backgroundGrpid, matchInProgress } = useSelector(
-    (state: AppState) => state.renderer
-  );
+  const {
+    detailedLogs,
+    loginState,
+    loading,
+    backgroundGrpid,
+    matchInProgress,
+  } = useSelector((state: AppState) => state.renderer);
 
   const os = forceOs || (isElectron() ? process.platform : "");
 
@@ -122,6 +127,18 @@ function App(props: AppProps) {
   const openArenaIdSelector = useRef<() => void>(vodiFn);
   const closenArenaIdSelector = useRef<() => void>(vodiFn);
 
+  const openDetailedLogs = useRef<() => void>(vodiFn);
+  const closenDetailedLogs = useRef<() => void>(vodiFn);
+
+  useEffect(() => {
+    if (detailedLogs === false) {
+      openDetailedLogs.current();
+    }
+    if (detailedLogs === true) {
+      closenDetailedLogs.current();
+    }
+  }, [detailedLogs]);
+
   return (
     <>
       <SettingsPersistor />
@@ -147,6 +164,17 @@ function App(props: AppProps) {
       >
         <ArenaIdSelector onClose={closenArenaIdSelector.current} />
       </PopupComponent>
+      <PopupComponent
+        open={false}
+        className={getPopupClass(os)}
+        width="800px"
+        height="600px"
+        openFnRef={openDetailedLogs}
+        closeFnRef={closenDetailedLogs}
+        persistent={false}
+      >
+        <DetailedLogs onClose={closenDetailedLogs.current} />
+      </PopupComponent>
       {os !== "" && os !== "linux" && <TopBar forceOs={os} />}
       <div
         className={wrapperClass}

src/components/PopupComponent.tsx

@@ -32,6 +32,7 @@ export default function PopupComponent(props: PopupComponentProps) {
     persistent,
     onClose,
   } = props;
+
   const [state, setState] = useState<{ display: boolean; open: boolean }>({
     display: open,
     open,

src/components/popups/DetailedLogs.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+
+import { ReactComponent as Close } from "../../assets/images/svg/close.svg";
+
+interface DetailedLogsProps {
+  onClose: () => void;
+}
+
+export default function DetailedLogs(props: DetailedLogsProps) {
+  const { onClose } = props;
+
+  const [page, setPage] = useState(0);
+
+  return (
+    <>
+      <div className="close-button" onClick={onClose}>
+        <Close fill="var(--color-text-hover)" />
+      </div>
+      <div style={{ margin: "22px 16px 16px 16px" }}>
+        <h2 style={{ marginBottom: "16px", color: "var(--color-r)" }}>
+          Detailed Logs are disabled!
+        </h2>
+
+        <p style={{ color: "var(--color-text-dark)" }}>
+          Detailed logs enables plugins support on MTG Arena, this is required
+          for MTG Arena Tool to work. You can enable detailed logs on MTG Arena
+          with few simple steps
+        </p>
+
+        <div
+          className="page-slider-container"
+          style={{ marginTop: "48px", height: "380px" }}
+        >
+          <div
+            className="page-slider"
+            style={{
+              transform: `translateX(-${page * 100}%)`,
+            }}
+          >
+            <div className="slide">
+              <p>
+                On MTG Arena, click on the setting icon and click on
+                &quot;Account&quot;
+              </p>
+              <div className="slide-img-a" />
+            </div>
+            <div className="slide">
+              <p>
+                Here, simply enable &quot;Detailed Logs&quot;,{" "}
+                <b
+                  style={{
+                    color: "var(--color-r)",
+                  }}
+                >
+                  You will need to restart MTG Arena for the change to take
+                  effect.
+                </b>
+              </p>
+              <div className="slide-img-b" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            width: "100%",
+          }}
+        >
+          <div
+            style={{
+              height: "36px",
+              width: "120px",
+              margin: "auto",
+            }}
+            className="button-simple"
+            onClick={() => setPage(page === 0 ? 1 : 0)}
+          >
+            {page === 0 ? "Next" : "Previous"}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/info.json

@@ -1 +1 @@
-{"version":"6.4.5","branch":"dev","timestamp":1701130024029}
+{"version":"6.5.3","branch":"dev","timestamp":1703692342670}

src/redux/actions.ts

@@ -35,6 +35,7 @@ export const actions = {
   SET_READING_LOG: RendererSlice.setReadingLog,
   SHOW_POST_SIGNUP: RendererSlice.showPostSignup,
   SET_LOGIN_STATE: RendererSlice.setLoginState,
+  SET_DETAILED_LOGS: RendererSlice.setDetailedLogs,
   SET_LOG_COMPLETION: RendererSlice.setLogCompletion,
   SET_MATCHES_FETCH_STATE: RendererSlice.setMatchesFetchState,
   SET_ARCHIVED: RendererSlice.setArchived,

src/redux/slices/rendererSlice.ts

@@ -30,6 +30,7 @@ export const initialRendererState = {
   backgroundGrpid: null as number | null,
   loading: false,
   logCompletion: 0,
+  detailedLogs: null as boolean | null,
   noLog: false,
   offline: true,
   loginState: LOGIN_AUTH,
@@ -102,6 +103,12 @@ const rendererSlice = createSlice({
     ): void => {
       state.logCompletion = action.payload;
     },
+    setDetailedLogs: (
+      state: RendererState,
+      action: PayloadAction<boolean>
+    ): void => {
+      state.detailedLogs = action.payload;
+    },
     setMatchesFetchState: (
       state: RendererState,
       action: PayloadAction<{
@@ -213,6 +220,7 @@ export const {
   showPostSignup,
   setLoginState,
   setLogCompletion,
+  setDetailedLogs,
   setMatchesFetchState,
   setBackgroundGrpid,
   setLoading,

src/scss/popups.scss

@@ -358,4 +358,51 @@
       }
     }
   }
+}
+
+.page-slider-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  .page-slider {
+    width: 100%;
+    display: flex;
+    position: absolute;
+    -webkit-transition: all 0.25s ease-in-out;
+    transition: all 0.25s ease-in-out;
+
+    .slide {
+      width: 100%;
+      min-width: 100%;
+      height: 100%;
+      min-height: 100%;
+    }
+  }
+
+  .slide-img-a {
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    background-image: url("../assets/images/help/detailed-logs-account.png");
+    width: 467px;
+    height: 300px;
+    border-radius: 8px;
+    display: flex;
+    overflow: hidden;
+    margin: 16px auto;
+  }
+
+  .slide-img-b {
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    background-image: url("../assets/images/help/detailed-logs-enabled.png");
+    width: 460px;
+    height: 300px;
+    border-radius: 8px;
+    display: flex;
+    overflow: hidden;
+    margin: 16px auto;
+  }
 }