Improved DM Tips

README.md

@@ -103,6 +103,7 @@ This D&D Battle Tracker simply aims to automate the process of tracking combat u
   * [Skull crossed bones](https://game-icons.net/1x1/lorc/skull-crossed-bones.html)
   * [Two shadows](https://game-icons.net/1x1/lorc/two-shadows.html)
   * [Backup](https://game-icons.net/1x1/lorc/backup.html)
+  * [Cog](https://game-icons.net/1x1/lorc/cog.html)
 
 ### Fonts
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dnd-battle-tracker",
-  "version": "5.111.2",
+  "version": "5.112.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.9.2",

src/components/App.css

@@ -1568,4 +1568,42 @@ button[role=tab][aria-selected=true]:focus  {
 .navigation-option__buymeacoffee {
   margin-left: 24px;
   margin-top: 4px;
+}
+
+/* DM Tips */
+.dmtips {
+  padding: 10px;
+}
+
+.dmtips--title {
+  text-align: center;
+}
+
+.dmtips--intro {
+  text-align: center;
+}
+
+.dmtips--tip {
+  margin-left: 20px;
+  font-style: italic;
+  color: #822000;
+}
+
+.dmtips--tip::before {
+  content: "💡";
+  font-style: normal;
+}
+
+.dmtips--tip svg {
+  margin: 0 5px;
+  top: 8px;
+  position: relative
+}
+
+.dmtips--happydming {
+  color: #822000;
+  text-align: center;
+  font-family: "IM Fell Great Primer SC";
+  font-variant: small-caps;
+  font-size: 1.17em;
 }

src/components/creature/CreatureHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CreatureExpander from '../buttons/CreatureExpander';
+import CreatureExpander from './CreatureExpander';
 
 function getName(expanded, active, name, multiColumn) {
   const maxLength = 22;

src/components/creature/toolbar/tool-menus/creatureMenu.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import OptionsMenuIcon from '../../../icons/OptionsMenuIcon';
 import StatBlockLink from '../tools/StatBlockLink';
 import MonsterSearcher from '../tools/MonsterSearcher';
 import CreatureLocker from '../tools/CreatureLocker';
 import CreatureSharer from '../tools/CreatureSharer';
 import CreatureHitPointsSharer from '../tools/CreatureHitPointsSharer';
 import CreatureRemover from '../tools/CreatureRemover';
+import CreatureMenuIcon from '../../../icons/CreatureMenuIcon';
 
 export function CreatureMenuToolMenu({ creature, creatureManagement, active }) {
   const {
@@ -68,7 +68,7 @@ export function CreatureMenuButton({
       aria-controls={toolMenuId}
       aria-expanded={toolMenuExpanded}
     >
-      <OptionsMenuIcon />
+      <CreatureMenuIcon />
     </button>
   );
 }

src/components/page/create-creature-form/Name.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import MonsterSearcher from '../../buttons/MonsterSearcher';
 import ComboboxList from '../../form/ComboboxList';
 import { getMonsters } from '../../../client/dnd5eapi';
 
@@ -28,11 +27,6 @@ export default function Name({
     getMonsters().then(setMonsterData);
   }, []);
 
-  const nameRightControls = {
-    rightEnabled: true,
-    RightControl: <MonsterSearcher asButton={false} search={name} />,
-  };
-
   return (
     <ComboboxList
       value={name}
@@ -45,8 +39,6 @@ export default function Name({
       listAriaLabel="Creature search results"
       inputAriaLabel="create creature form. Name (required)"
       inputAriaLabelItemSelected="create creature form. Name (required)"
-      rightControls={nameRightControls}
-      rightControlsItemSelected={nameRightControls}
       handleSubmit={createCreature}
       onItemSubmit={onSelectMonster}
       inputRef={inputRef}

src/components/page/footer/Info.js

@@ -26,21 +26,6 @@ export default function Info() {
         Track the initiative and status of all creatures involved in combat
         with this D&D 5e combat tracker!
       </p>
-      <p>
-        The next time you open D&D Battle Tracker in this browser
-        {' '}
-        it will be available for offline use so you can play anywhere!
-        {' '}
-        If your browser supports it you can also install the Battle Tracker to your device as a
-        {' '}
-        <ExternalLink
-          url="https://support.google.com/chrome/answer/9658361?hl=en-GB&co=GENIE.Platform%3DDesktop"
-        >
-          PWA
-        </ExternalLink>
-        {' '}
-        to get the best experience.
-      </p>
       <p>
         See&nbsp;
         <ExternalLink

test-integration/create-creature.test.js

@@ -263,12 +263,6 @@ describe('Create creature', () => {
 });
 
 describe('Name', () => {
-  it('allows a creature to be searched', async () => {
-    const dmApp = new DmApp();
-    await dmApp.createCreatureForm.enterCreatureName('goblin');
-    await CreateCreatureForm.assertCreateCreatureSearch('goblin');
-  });
-
   it('adds a creature to the battle when the name field is submitted', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.enterCreatureName('goblin');

test-integration/page-object-models/createCreatureForm.js

@@ -184,13 +184,6 @@ export default class CreateCreatureForm {
     return this.submitCreature();
   }
 
-  static async assertCreateCreatureSearch(name) {
-    const search = await screen.findByRole('link', { name: `Search ${name} on D&D Beyond` });
-    expect(search).toBeVisible();
-    const expectedHref = `https://www.dndbeyond.com/monsters?filter-search=${name}&sort=cr`;
-    return expect(search).toHaveAttribute('href', expectedHref);
-  }
-
   async typeName(name) {
     const srdSearch = await findSrdSearch();
     return this.user.type(srdSearch, name);