Skip to content
Permalink
Browse files

Discoverable Edit Mode (#717)

* discoverable edit mode

* bugfix ipc signals and edit mode state

* discoverable edit mode buttons

* fblthp gets shy when you click too much

* review feedback
  • Loading branch information
lusbenjamin committed Nov 14, 2019
1 parent 5249450 commit 817146684c13366c70f249e2be04f5fb41cf3387
@@ -44,6 +44,7 @@ let mainLoaded = false;
let backLoaded = false;
let overlayLoaded = false;
let arenaState = ARENA_MODE_IDLE;
let editMode = false;

const singleLock = app.requestSingleInstanceLock();

@@ -227,6 +228,10 @@ function startApp() {
}
break;

case "toggle_edit_mode":
toggleEditMode();
break;

case "renderer_window_minimize":
mainWindow.minimize();
break;
@@ -367,6 +372,12 @@ function setArenaState(state) {
updateOverlayVisibility();
}

function toggleEditMode() {
editMode = !editMode;
overlay.webContents.send("set_edit_mode", editMode);
updateOverlayVisibility();
}

function setSettings(_settings) {
try {
settings = JSON.parse(_settings);
@@ -386,7 +397,7 @@ function setSettings(_settings) {
openOverlayDevTools
);
globalShortcut.register(settings.shortcut_editmode, () => {
overlay.webContents.send("edit");
toggleEditMode();
});
settings.overlays.forEach((_settings, index) => {
let short = "shortcut_overlay_" + (index + 1);
@@ -431,23 +442,34 @@ function updateOverlayVisibility() {
.getAllDisplays()
.find(d => d.id == settings.overlay_display) ||
electron.screen.getPrimaryDisplay();
overlay.show();
overlay.setBounds(bounds);
overlay.show();
}
}

function isEntireOverlayVisible() {
return overlay.isVisible();
}

/**
* Computes whether an Overlay windowlet should be visible based on the
* specified current overlay settings and Arena state. For example, given
* overlay settings for a draft-mode overlay, it will return true iff Arena
* is currently in a draft or idle.
*
* @param OverlaySettingsData settings
*/
function getOverlayVisible(settings) {
if (!settings) return false;

// Note: ensure this logic matches the logic in OverlayWindowlet
// TODO: extract a common utility?
const currentModeApplies =
(OVERLAY_DRAFT_MODES.includes(settings.mode) &&
arenaState === ARENA_MODE_DRAFT) ||
(!OVERLAY_DRAFT_MODES.includes(settings.mode) &&
arenaState === ARENA_MODE_MATCH);
arenaState === ARENA_MODE_MATCH) ||
(editMode && arenaState === ARENA_MODE_IDLE);

return settings.show && (currentModeApplies || settings.show_always);
}
@@ -618,9 +640,9 @@ function createMainWindow() {
}
},
{
label: "Edit Mode",
label: "Edit Overlay Positions",
click: () => {
overlay.webContents.send("edit");
toggleEditMode();
}
},
{
@@ -6,7 +6,12 @@ import db from "../shared/database";
import { getCardImage } from "../shared/util";
import DraftRatings from "../shared/DraftRatings";

import { getEditModeClass, useEditModeOnRef, OddsData } from "./overlayUtil";
import {
getEditModeClass,
useEditModeOnRef,
OddsData,
SettingsData
} from "./overlayUtil";
import { DbCardData } from "../shared/types/Metadata";

const NO_IMG_URL = "./images/nocard.png";
@@ -39,9 +44,11 @@ export interface CardDetailsWindowletProps {
card?: DbCardData | any; // TODO remove group lands hack
cardsSizeHoverCard: number;
editMode: boolean;
handleToggleEditMode: () => void;
odds?: OddsData;
overlayHover: { x: number; y: number };
overlayScale: number;
settings: SettingsData;
}

/**
@@ -57,10 +64,12 @@ export default function CardDetailsWindowlet(
arenaState,
card,
cardsSizeHoverCard,
handleToggleEditMode,
editMode,
odds,
overlayHover,
overlayScale
overlayScale,
settings
} = props;

// TODO remove group lands hack
@@ -100,7 +109,11 @@ export default function CardDetailsWindowlet(
}}
>
{editMode ? (
<div>
<div
onDoubleClick={handleToggleEditMode}
title={`${settings.shortcut_editmode} or double click me
to stop editing overlay positions`}
>
<img {...imgProps} />
</div>
) : (
@@ -103,10 +103,15 @@ export default function OverlayController(): JSX.Element {
}
}, [lastBeep, soundPriorityVolume]);

const handleToggleEditMode = useCallback(() => ipcSend("toggle_edit_mode"), []);

// Note: no useCallback because of dependency on deep overlays state
const handleToggleEditMode = (): void => {
const handleSetEditMode = (
event: unknown,
_editMode: boolean
) => {
// Save current windowlet dimensions before we leave edit mode
if (editMode) {
if (editMode && !_editMode) {
// Compute current dimensions of overlay windowlets in DOM
const newOverlays = overlays.map(
(overlay: OverlaySettingsData, index: number) => {
@@ -141,8 +146,7 @@ export default function OverlayController(): JSX.Element {
skip_refresh: true
});
}
// Always toggle edit mode
setEditMode(!editMode);
setEditMode(_editMode);
};

const handleActionLog = useCallback(
@@ -191,12 +195,8 @@ export default function OverlayController(): JSX.Element {
);

const handleSettingsUpdated = useCallback((): void => {
// mid-match Arena updates can make edit-mode difficult
// temporarily allow the overlays to go stale during editing
// (should be okay since ending edit-mode causes a refresh)
if (editMode) return;
setSettings({ ...playerData.settings });
}, [editMode]);
}, []);

const handleSetMatch = useCallback((event: unknown, arg: string): void => {
const newMatch = JSON.parse(arg);
@@ -224,7 +224,7 @@ export default function OverlayController(): JSX.Element {
// register all IPC listeners
useEffect(() => {
ipc.on("action_log", handleActionLog);
ipc.on("edit", handleToggleEditMode);
ipc.on("set_edit_mode", handleSetEditMode);
ipc.on("close", handleClose);
ipc.on("set_arena_state", handleSetArenaState);
ipc.on("set_draft_cards", handleSetDraftCards);
@@ -235,7 +235,7 @@ export default function OverlayController(): JSX.Element {
return (): void => {
// unregister all IPC listeners
ipc.removeListener("action_log", handleActionLog);
ipc.removeListener("edit", handleToggleEditMode);
ipc.removeListener("set_edit_mode", handleSetEditMode);
ipc.removeListener("close", handleClose);
ipc.removeListener("set_arena_state", handleSetArenaState);
ipc.removeListener("set_draft_cards", handleSetDraftCards);
@@ -266,9 +266,11 @@ export default function OverlayController(): JSX.Element {
card: hoverCard,
cardsSizeHoverCard,
editMode,
handleToggleEditMode,
odds: match ? match.playerCardsOdds : undefined,
overlayHover,
overlayScale
overlayScale,
settings
};

return (
@@ -3,6 +3,7 @@ import React, { useRef } from "react";
import {
ARENA_MODE_MATCH,
ARENA_MODE_DRAFT,
ARENA_MODE_IDLE,
COLORS_ALL,
OVERLAY_DRAFT_MODES
} from "../shared/constants";
@@ -89,11 +90,14 @@ export default function OverlayWindowlet(
// xhr.send();
// }, [backgroundImage]);
const overlaySettings = settings.overlays[index];
// Note: ensure this logic matches the logic in main.getOverlayVisible
// TODO: extract a common utility?
const currentModeApplies =
(OVERLAY_DRAFT_MODES.includes(overlaySettings.mode) &&
arenaState === ARENA_MODE_DRAFT) ||
(!OVERLAY_DRAFT_MODES.includes(overlaySettings.mode) &&
arenaState === ARENA_MODE_MATCH);
arenaState === ARENA_MODE_MATCH) ||
(editMode && arenaState === ARENA_MODE_IDLE);
const isVisible =
overlaySettings.show && (currentModeApplies || overlaySettings.show_always);
const tileStyle = parseInt(settings.card_tile_style + "");
@@ -159,9 +163,13 @@ export default function OverlayWindowlet(
{overlaySettings.top && (
<div className="outer_wrapper top_nav_wrapper">
<div
className="flex_item overlay_icon click-on"
className="button overlay_icon click-on"
onClick={handleToggleEditMode}
style={{ backgroundColor: `var(--color-${COLORS_ALL[index]})` }}
style={{
backgroundColor: `var(--color-${COLORS_ALL[index]})`,
marginRight: "auto"
}}
title={settings.shortcut_editmode}
/>
<div
className="button settings click-on"
@@ -87,6 +87,7 @@ export interface SettingsData {
overlay_scale: number;
overlays: OverlaySettingsData[];
overlayHover: { x: number; y: number };
shortcut_editmode: string;
}

const restrictMinSize =
@@ -755,7 +755,7 @@ export const SHORTCUT_NAMES = {
shortcut_overlay_3: "Toggle Overlay 3",
shortcut_overlay_4: "Toggle Overlay 4",
shortcut_overlay_5: "Toggle Overlay 5",
shortcut_editmode: "Toggle Overlay Move/Resize",
shortcut_editmode: "Toggle Edit Overlay Positions",
shortcut_devtools_main: "Toggle Developer Tools (main)",
shortcut_devtools_overlay: "Toggle Developer Tools (overlays)"
};
@@ -48,7 +48,11 @@ import {
setData,
updateLoading
} from "./background-util";
import { ARENA_MODE_MATCH, ARENA_MODE_DRAFT } from "../shared/constants";
import {
ARENA_MODE_MATCH,
ARENA_MODE_DRAFT,
ARENA_MODE_IDLE
} from "../shared/constants";
import update_deck from "./updateDeck";
import globals from "./globals";

@@ -475,6 +479,8 @@ function finishLoading() {
update_deck(false);
} else if (globals.duringDraft) {
ipc_send("set_arena_state", ARENA_MODE_DRAFT);
} else {
ipc_send("set_arena_state", ARENA_MODE_IDLE);
}

ipc_send("set_settings", JSON.stringify(playerData.settings));
@@ -2741,6 +2741,11 @@ a:hover {
margin: 0px 64px 20px 16px;
}

.settings_row {
display: inline-flex;
margin-left: 16px;
}

.deck_visual_stats {
padding: 0 !important;
margin: 32px !important;

0 comments on commit 8171466

Please sign in to comment.
You can’t perform that action at this time.