今日飲む酒をキメるガチャ的なもの #851
Open
今日飲む酒をキメるガチャ的なもの #851
+98
−2
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📦 esbuild Bundle Analysis for sakazukiThis analysis was generated by esbuild-bundle-analyzer. 🤖
Largest pathsThese visualization shows top 20 largest paths in the bundle.Meta file: meta.json, Out file: app/assets/builds/application.js
DetailsNext to the size is how much the size has increased or decreased compared with the base branch of this PR.
|
Fixes #850 Add functionality to randomly select a drink from the available stock when clicking the sake cup icon in the top left corner. * Modify `app/views/layouts/_header.html.erb` to add a data-controller attribute to the sake cup icon link. * Modify `app/controllers/sakes_controller.rb` to add a `random` action that selects a random drink from the available stock and redirects to its show page. Add a private method to fetch a random sake from the available stock. * Modify `config/routes.rb` to add a route for the `random` action in the `SakesController`. * Add `app/javascript/controllers/random_drink_controller.ts` to create a Stimulus controller that handles the click event on the sake cup icon and makes an AJAX request to the `random` action. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/momocus/sakazuki/issues/850?shareId=XXXX-XXXX-XXXX-XXXX).
momocus
force-pushed
the
add-random-drink-button
branch
from
4fe2220 to
da21cdf
Compare
|
/fix |
yonta
reviewed
Jan 19, 2025
| @@ -0,0 +1,49 @@ | |||
| import { Controller } from "@hotwired/stimulus" | |||
|
|
|||
| type DrinkData = { | |||
yonta
reviewed
Jan 19, 2025
| @@ -79,3 +79,6 @@ ja: | |||
| price_is_per_go: 一合当たりのお値段となり〼 | |||
| menu_one_drink: | |||
| new_arrival: 新着 | |||
| shuffle: | |||
| title: 日本酒ガチャ | |||
yonta
requested changes
Jan 19, 2025
| @@ -117,5 +117,12 @@ | |||
| expect { delete sake_path(id) }.to change(Sake, :count).by(-1) | |||
| end | |||
| end | |||
|
|
|||
There was a problem hiding this comment.
JSONの中身に関するテストどうしようね。
今までJSON APIなかったから目をつむってきたけど…
| @@ -30,3 +30,6 @@ application.register("show-taste-graph", ShowTasteGraphController) | |||
|
|
|||
| import SimpleLightboxController from "./simple_lightbox_controller" | |||
| application.register("simple-lightbox", SimpleLightboxController) | |||
|
|
|||
There was a problem hiding this comment.
これはrails generate stimulus CONTROLER_NAMEでアルファベットオーダーで挿入しているので揃えてください。
| name: string | ||
| } | ||
|
|
||
| export default class extends Controller { |
There was a problem hiding this comment.
無名クラスではなく名前をつけておいてね。
他のTSファイルを参照。
| declare readonly resultTarget: HTMLElement | ||
|
|
||
| connect() { | ||
| this.shuffleTarget.addEventListener("click", () => { |
There was a problem hiding this comment.
clickイベントへの接続はdata-actionで接続できるはず。
| console.error(error) | ||
| }) | ||
| }) | ||
| this.buttonTarget.addEventListener("click", () => { |
| } | ||
|
|
||
| displayRandomDrink(data: DrinkData) { | ||
| this.resultTarget.innerHTML = ` |
There was a problem hiding this comment.
テンプレートリテラルの改行は改行のまま出力される。
この結果の文字列は"\n<h1>...</h1>\n"と先頭・末尾にいらない改行が入るね。
| @@ -0,0 +1,25 @@ | |||
| <div data-controller="random-drink" class="d-inline"> | |||
There was a problem hiding this comment.
TSのファイル名がrandom_drink_controller.tsだし、これもパーシャルビューの名前もshuffleよりもrandome drinkでそろえるほうが分かりやすいと思う。
| @@ -5,7 +5,7 @@ | |||
| <%= link_to( | |||
| sanitize("#{image_tag('choko.svg', class: 'sakazuki-header-logo')}SAKAZUKI", tag: %w[img]), | |||
| root_path, | |||
| { class: "navbar-brand d-flex align-items-center" }, | |||
There was a problem hiding this comment.
RandomDrinkコントローラがロゴ・タイトルに結び付けられている。
しかしこのコントローラが操作するのはロゴ・タイトルではない。
| <% else %> | ||
| <%# 通常タイトル %> | ||
| <% header = t(".header") %> | ||
| <% include_empty = include_empty?(params[:q]) %> | ||
| <% h1 = t(".h1_with_stock", stock: stock(include_empty)) %> | ||
| <%= title(header, h1) %> | ||
| <%= render(partial: "shuffle") %> |
There was a problem hiding this comment.
このifは検索されているor検索されていないの意味。
その中にガチャボタンを出すかどうかが書いてある。
検索している・しない、にガチャを表示するかどうかは関係がない。
例えば、検索はしていないが、空き瓶込みの表示でもガチャボタンが出る。
でもガチャは空き瓶を対象にしていない。
ガチャは検索や空き瓶表示をサポートしないので、表示に合うときだけガチャボタンをだすべきでは。
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <div data-random-drink-target="result" data-bs-dismiss="modal"></div> |
There was a problem hiding this comment.
ここのbodyは文字列要素なのでdivブロックではなくpインライン要素
|
酒ガチャという名前が大変気に入ったので、モジュール名やパーシャルビュー名も |
|
@momocus
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #850
酒一覧ページ酒ガチャボタンを追加しました
default.mp4