🔀 Merge branch 'release/1.1.0'

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2022-07-26
+
+### Added
+
+- Select / deselect all button
+- Small gap in header grid to prevent text too close to github icon
+
 ## [1.0.1] - 2022-07-26
 
 ### Added
@@ -21,5 +28,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial release
 
+[1.1.0]: https://github.com/Pustur/genshin-impact-team-randomizer/compare/1.0.1...1.1.0
 [1.0.1]: https://github.com/Pustur/genshin-impact-team-randomizer/compare/1.0.0...1.0.1
 [1.0.0]: https://github.com/Pustur/genshin-impact-team-randomizer/releases/tag/1.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "genshin-impact-team-randomizer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A web app to randomize your Genshin Impact team based on the characters that you own",
   "files": [
     "dist"

src/components/App/App.module.css

@@ -3,9 +3,15 @@
   margin-top: 1rem;
 }
 
-.titleGrid {
+.header {
+  --size-half-header-icon: calc(var(--size-header-icon) / 2);
+  --size-external-col: calc(
+    var(--size-half-header-icon) + var(--size-header-icon)
+  );
+
   display: grid;
-  grid-template-columns: calc(12px + 24px) 1fr calc(12px + 24px);
+  gap: var(--size-half-header-icon);
+  grid-template-columns: var(--size-external-col) 1fr var(--size-external-col);
   align-items: center;
 }
 
@@ -30,6 +36,7 @@
 .buttons {
   display: flex;
   justify-content: center;
+  gap: 1rem;
 }
 
 .grid {

src/components/App/App.tsx

@@ -20,6 +20,8 @@ const idToCard =
 
 const App: Component = () => {
   const [teams, setTeams] = createSignal<GenshinCharacter['id'][]>([]);
+  const areAllCharatersSelected = () =>
+    state.selectedCharacters.length === characters.length;
   const team1 = () => Array.from({ length: 4 }, (_, i) => teams()[i]);
   const team2 = () => Array.from({ length: 4 }, (_, i) => teams()[i + 4]);
   const generateTeams = () => {
@@ -29,7 +31,7 @@ const App: Component = () => {
 
   return (
     <>
-      <header class={styles.titleGrid}>
+      <header class={styles.header}>
         <h1 class={styles.title}>Genshin Impact Team Randomizer</h1>
         <a
           class={styles.githubIcon}
@@ -60,6 +62,19 @@ const App: Component = () => {
           </div>
         </div>
         <div class={styles.buttons}>
+          <Button
+            secondary
+            onClick={() =>
+              setState(state => ({
+                ...state,
+                selectedCharacters: areAllCharatersSelected()
+                  ? []
+                  : characters.map(c => c.id),
+              }))
+            }
+          >
+            {areAllCharatersSelected() ? 'Deselect' : 'Select'} all
+          </Button>
           <Button onClick={generateTeams}>Generate teams</Button>
         </div>
         <div class={`${styles.grid} ${styles.mainGrid}`}>

src/components/Button/Button.module.css

@@ -15,3 +15,18 @@
   outline: 2px solid var(--color-button-bg);
   outline-offset: 3px;
 }
+
+.secondaryButton {
+  background-color: var(--color-button-secondary-bg);
+  border-color: var(--color-button-secondary-border);
+  color: var(--color-button-secondary-fg);
+}
+
+.secondaryButton:active {
+  background-color: var(--color-button-secondary-bg);
+  border-color: var(--color-button-secondary-border);
+}
+
+.secondaryButton:focus-visible {
+  outline-color: var(--color-button-secondary-bg);
+}

src/components/Button/Button.tsx

@@ -1,12 +1,25 @@
-import { JSX, ParentComponent } from 'solid-js';
+import { JSX, ParentComponent, splitProps } from 'solid-js';
 
 import styles from './Button.module.css';
 
+interface IButton {
+  secondary?: boolean;
+}
+
 const Button: ParentComponent<
-  JSX.ButtonHTMLAttributes<HTMLButtonElement>
+  IButton & JSX.ButtonHTMLAttributes<HTMLButtonElement>
 > = props => {
+  const [local, others] = splitProps(props, ['secondary']);
+
   return (
-    <button class={styles.button} onClick={props.onClick}>
+    <button
+      {...others}
+      class={
+        local.secondary
+          ? `${styles.button} ${styles.secondaryButton}`
+          : styles.button
+      }
+    >
       {props.children}
     </button>
   );

src/index.css

@@ -24,6 +24,9 @@
   --color-button-fg: var(--color-card-fg);
   --color-button-bg: white;
   --color-button-border: #ede5d8;
+  --color-button-secondary-fg: white;
+  --color-button-secondary-bg: var(--color-button-fg);
+  --color-button-secondary-border: #545d6d;
 
   --color-anemo: #74c2a8;
   --color-cryo: #9fd6e3;
@@ -38,6 +41,7 @@
   --size-element: 12px;
   --size-font: 10px;
   --size-card-min-width: 64px;
+  --size-header-icon: 24px;
 }
 
 @media (min-width: 768px) {