Repository: kaidouji85/gbraver-burst-browser
Pull request #1768: タイトルボタンにアイコンを追加した
Author: login: kaidouji85
Created: 2025-05-21T01:15:30Z | Merged: 2025-05-21T04:56:02Z

This pull request introduces improvements to the layout and structure of the title screen buttons and their styling. It enhances the visual alignment and readability of the buttons by adding icons and restructuring the HTML and CSS.

### CSS Layout and Styling Updates:
* Added `flexbox` properties (`display: flex`, `flex-direction: column`, `align-items: center`, `justify-content: center`) to improve the alignment and layout of buttons in the `.title` and `.title__config` classes. Also added padding for better spacing. (`src/css/title.css`, [src/css/title.cssR260-R264](diffhunk://#diff-fa4f36644ae2a80b94771dd0423d70dc0ec869f3d8c966d0a6386bd80e754070R260-R264))
* Introduced a new `.title__tutorial-icon` class to style the tutorial button icon with a larger font size, ensuring consistency with the responsive design. (`src/css/title.css`, [src/css/title.cssR297-R303](diffhunk://#diff-fa4f36644ae2a80b94771dd0423d70dc0ec869f3d8c966d0a6386bd80e754070R297-R303))

### HTML Structure Enhancements:
* Updated the button structure in `root-inner-html.hbs` to include both an icon (`<span>` with class `__menu-button-icon`) and a label (`<span>` with class `__menu-button-label`) for each button. This improves accessibility and visual clarity by pairing text with representative icons. (`src/js/dom-scenes/title/dom/root-inner-html.hbs`, [src/js/dom-scenes/title/dom/root-inner-html.hbsL98-R129](diffhunk://#diff-bf991384bfa8941df5e3ca15732d5604b5c7e54effeb1139b479ec95fc96e3c2L98-R129))


Diff:
diff --git a/src/css/title.css b/src/css/title.css
index 57995c549e..221755419f 100644
--- a/src/css/title.css
+++ b/src/css/title.css
@@ -252,11 +252,15 @@
 .title__story {
   border: var(--sub-button-border);
   background-color: var(--sub-button-background-color);
-  min-height: calc(var(--responsive-font-size) * 3);
   font-size: calc(var(--responsive-font-size));
   border-radius: var(--button-border-radius);
   color: var(--button-font-color);
   box-shadow: var(--sub-button-box-shadow);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--responsive-font-size) * 0.5);
 }
 
 .title__config {
@@ -281,7 +285,6 @@
 
 .title__tutorial {
   grid-area: tutorial;
-  min-height: calc(var(--responsive-font-size) * 3);
   font-size: calc(var(--responsive-font-size) * 1.1);
   border-radius: var(--button-border-radius);
   color: var(--button-font-color);
@@ -289,4 +292,11 @@
   border: var(--button-border);
   background-color: var(--button-background-color);
   font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title__tutorial-icon {
+  font-size: calc(var(--responsive-font-size) * 2);
 }
diff --git a/src/js/dom-scenes/title/dom/root-inner-html.hbs b/src/js/dom-scenes/title/dom/root-inner-html.hbs
index 5cfdd4d32c..3ae6b6b47b 100644
--- a/src/js/dom-scenes/title/dom/root-inner-html.hbs
+++ b/src/js/dom-scenes/title/dom/root-inner-html.hbs
@@ -92,25 +92,25 @@
     <small class="{{ROOT_CLASS}}__music">音楽 魔王魂</small>
   </div>
   <div class="{{ROOT_CLASS}}__game-menu">
-    <button
-      class="{{ROOT_CLASS}}__config"
-      data-id="{{ids.config}}"
-    >設定</button>
-    <button
-      class="{{netBattleClassName}}"
-      data-id="{{ids.netBattle}}"
-    >ネット対戦</button>
-    <button
-      class="{{ROOT_CLASS}}__arcade"
-      data-id="{{ids.arcade}}"
-    >アーケード</button>
-    <button
-      class="{{ROOT_CLASS}}__story"
-      data-id="{{ids.story}}"
-    >ストーリー</button>
-    <button
-      class="{{ROOT_CLASS}}__tutorial"
-      data-id="{{ids.tutorial}}"
-    >チュートリアル</button>
+    <button class="{{ROOT_CLASS}}__config" data-id="{{ids.config}}">
+      <span class="{{ROOT_CLASS}}__menu-button-icon">⚙️</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">設定</span>
+    </button>
+    <button class="{{netBattleClassName}}" data-id="{{ids.netBattle}}">
+      <span class="{{ROOT_CLASS}}__menu-button-icon">🌐</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">ネット対戦</span>
+    </button>
+    <button class="{{ROOT_CLASS}}__arcade" data-id="{{ids.arcade}}">
+      <span class="{{ROOT_CLASS}}__menu-button-icon">🕹</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">アーケード</span>
+    </button>
+    <button class="{{ROOT_CLASS}}__story" data-id="{{ids.story}}">
+      <span class="{{ROOT_CLASS}}__menu-button-icon">📖</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">ストーリー</span>
+    </button>
+    <button class="{{ROOT_CLASS}}__tutorial" data-id="{{ids.tutorial}}">
+      <span class="{{ROOT_CLASS}}__tutorial-icon">🔰</span>
+      <span class="{{ROOT_CLASS}}__tutorial-label">チュートリアル</span>
+    </button>
   </div>
 </div>
\ No newline at end of file


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T01:30:48Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR adds icons to the title screen buttons and refactors the HTML/CSS to use flexbox for improved alignment and readability.

- HTML buttons now include separate `<span>` elements for icons and labels.
- CSS updated to apply `display: flex` layout on buttons and introduced a larger `.title__tutorial-icon` style.

### Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

| File                                                   | Description                                                   |
| ------------------------------------------------------ | ------------------------------------------------------------- |
| src/js/dom-scenes/title/dom/root-inner-html.hbs        | Wrapped each button’s content with icon and label spans       |
| src/css/title.css                                       | Added flexbox properties for button layout and tutorial icon styling |


<details>
<summary>Comments suppressed due to low confidence (2)</summary>

**src/js/dom-scenes/title/dom/root-inner-html.hbs:127**
* The tutorial icon span uses `__tutorial-icon`, which is inconsistent with other buttons using `__menu-button-icon`. Consider renaming to `{{ROOT_CLASS}}__menu-button-icon` for consistency.
```
<span class="{{ROOT_CLASS}}__tutorial-icon">🔰</span>
```
**src/js/dom-scenes/title/dom/root-inner-html.hbs:128**
* The tutorial label span uses `__tutorial-label` instead of the standard `__menu-button-label`. Consistent class names help maintain uniform styling.
```
<span class="{{ROOT_CLASS}}__tutorial-label">チュートリアル</span>
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T01:32:03Z

Review comments:
diff_hunk: @@ -289,4 +294,11 @@
   border: var(--button-border);
   background-color: var(--button-background-color);
   font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
path: src/css/title.css
user: login: Copilot
body: [nitpick] Flexbox properties are duplicated in both the generic button rule and the `.title__config` rule. Consider extracting common layout styles into a shared selector to reduce duplication.
```suggestion
  /* Flexbox layout styles moved to shared class */
  @extend .flex-center;
```
created_at: 2025-05-21T01:32:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -95,22 +95,37 @@
     <button
       class="{{ROOT_CLASS}}__config"
       data-id="{{ids.config}}"
-    >設定</button>
+    >
+      <span class="{{ROOT_CLASS}}__menu-button-icon">⚙️</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">設定</span>
+    </button>
     <button
       class="{{netBattleClassName}}"
       data-id="{{ids.netBattle}}"
-    >ネット対戦</button>
+    >
+      <span class="{{ROOT_CLASS}}__menu-button-icon">🌐</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">ネット対戦</span>
+    </button>
     <button
       class="{{ROOT_CLASS}}__arcade"
       data-id="{{ids.arcade}}"
-    >アーケード</button>
+    >
+      <span class="{{ROOT_CLASS}}__menu-button-icon">🕹</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">アーケード</span>
+    </button>
     <button
       class="{{ROOT_CLASS}}__story"
       data-id="{{ids.story}}"
-    >ストーリー</button>
+    >
+      <span class="{{ROOT_CLASS}}__menu-button-icon">📖</span>
+      <span class="{{ROOT_CLASS}}__menu-button-label">ストーリー</span>
+    </button>
     <button
       class="{{ROOT_CLASS}}__tutorial"
       data-id="{{ids.tutorial}}"
-    >チュートリアル</button>
+    >
+      <span class="{{ROOT_CLASS}}__tutorial-icon">🔰</span>
path: src/js/dom-scenes/title/dom/root-inner-html.hbs
user: login: Copilot
body: Icon spans may be announced by screen readers. Add `aria-hidden="true"` to hide decorative icons and ensure labels convey the menu function.
created_at: 2025-05-21T01:32:03Z
author_association: CONTRIBUTOR

PR comments:
user: login: qlty-cloud-legacy[bot]
created_at: 2025-05-21T02:08:13Z
body: Code Climate has analyzed commit 376ff687 and detected **0 issues** on this pull request.

The test coverage on the diff in this pull request is **100.0%** (**50%** is the threshold).

This pull request will bring the total coverage in the repository to **71.2%** (**0.0%** change).

View more on [Code Climate](https://codeclimate.com/github/kaidouji85/gbraver-burst-browser/pull/1768).

author_association: NONE