chore: finalize flying_ninja migration to icp-cli (Motoko + Rust) (#1374)

* chore: finalize motoko/flying_ninja migration to icp-cli

Upgrades icp.yaml to motoko@v5.0.0 and asset-canister@v2.2.1, updates
mops.toml toolchain to moc 1.9.0 / core 2.5.0 with correct args format,
removes dfx fallbacks from vite.config.js and actor.js, adds Makefile
with tests for all public functions, adds CI workflow, rewrites README,
and deletes dfx.json, BUILD.md, and .devcontainer/.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat: migrate rust/flying_ninja to icp-cli; bump icp-dev-env to 0.3.2

- Bump @dfinity/asset-canister v2.1.0 → v2.2.1
- Bump ic-cdk 0.16 → 0.20, candid 0.10.10 → 0.10
- Add Makefile with 4 tests
- Delete dfx.json, BUILD.md
- Bump both container images to icp-dev-env 0.3.2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* revert: back to icp-dev-env 0.3.1 (0.3.2 not yet on ghcr.io)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: bump icp-dev-env to 0.3.2 (images now published)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: replace removed ic_cdk::api::management_canister with ic_cdk::call for raw_rand

ic_cdk::api::management_canister was removed in ic-cdk 0.17+.
Use ic_cdk::call(Principal::management_canister(), "raw_rand", ()) instead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: use ic_cdk::management_canister::raw_rand() (ic-cdk 0.20 API)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: use ic-cdk-management-canister crate for raw_rand

ic_cdk::management_canister was removed — the canonical approach is the
dedicated ic-cdk-management-canister = "0.1.1" crate.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: add ic-mops prerequisite

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(rust/flying_ninja): rewrite README to match Motoko style

Remove dfx/BUILD.md references, add make test step, fix docs URL,
clarify the Rust backend in the intro.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(flying_ninja): use refs in game loop to prevent double-scoring in dev

React 18 StrictMode double-invokes effects in development. The game
loop useEffect had frame-level state (ninjaY, ninjaVelocity, pipeX,
gapPosition) in its dep array, causing the interval to be recreated
every 30ms tick. This created a window where two intervals ran
simultaneously, incrementing the score by 2 per gate instead of 1.

Fix: use useRef for all mutable game state read inside the interval,
reduce the dep array to [gameState, rng], and sync refs alongside
state setters. Also fixes a keypress listener leak where the inline
arrow function on line 103 was never removed on cleanup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(flying_ninja): use score 0 in is_high_score test to clarify intent

Score 0 makes it clear that any value qualifies when the leaderboard
has fewer than 10 entries — the logic is about capacity, not the score.
Update description accordingly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: marc0olo

.github/workflows/flying_ninja.yml

@@ -0,0 +1,43 @@
+name: flying_ninja
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    paths:
+      - motoko/flying_ninja/**
+      - rust/flying_ninja/**
+      - .github/workflows/flying_ninja.yml
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  motoko-flying_ninja:
+    runs-on: ubuntu-24.04
+    container: ghcr.io/dfinity/icp-dev-env-motoko:0.3.2
+    env:
+      ICP_CLI_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+      - name: Deploy and test
+        working-directory: motoko/flying_ninja
+        run: |
+          icp network start -d
+          icp deploy
+          make test
+
+  rust-flying_ninja:
+    runs-on: ubuntu-24.04
+    container: ghcr.io/dfinity/icp-dev-env-rust:0.3.2
+    env:
+      ICP_CLI_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+      - name: Deploy and test
+        working-directory: rust/flying_ninja
+        run: |
+          icp network start -d
+          icp deploy
+          make test

motoko/flying_ninja/.devcontainer/devcontainer.json

@@ -0,0 +1,28 @@
+.PHONY: test
+
+test:
+	@echo "=== Test 1: isHighScore returns true when leaderboard has fewer than 10 entries ==="
+	@result=$$(icp canister call backend isHighScore '(0)') && \
+	  echo "$$result" && \
+	  echo "$$result" | grep -q 'true' && \
+	  echo "PASS" || (echo "FAIL" && exit 1)
+
+	@echo "=== Test 2: addLeaderboardEntry returns entry in leaderboard ==="
+	@result=$$(icp canister call backend addLeaderboardEntry '("Alice", 100)') && \
+	  echo "$$result" && \
+	  echo "$$result" | grep -q '"Alice"' && \
+	  echo "$$result" | grep -q '100' && \
+	  echo "PASS" || (echo "FAIL" && exit 1)
+
+	@echo "=== Test 3: getLeaderboard returns persisted entry ==="
+	@result=$$(icp canister call backend getLeaderboard '()') && \
+	  echo "$$result" && \
+	  echo "$$result" | grep -q '"Alice"' && \
+	  echo "$$result" | grep -q '100' && \
+	  echo "PASS" || (echo "FAIL" && exit 1)
+
+	@echo "=== Test 4: getRandomness returns a blob ==="
+	@result=$$(icp canister call backend getRandomness '()') && \
+	  echo "$$result" && \
+	  echo "$$result" | grep -q 'blob' && \
+	  echo "PASS" || (echo "FAIL" && exit 1)

motoko/flying_ninja/BUILD.md

@@ -1,53 +1,35 @@
 # Flying Ninja
 
-[View this sample's code on GitHub](https://github.com/dfinity/examples/tree/master/motoko/flying_ninja)
-
-## Overview
-
-Flying Ninja is a 2D side-scroller game where players interact with the flying ninja character using their keyboard's space bar to move up and down. The goal is to avoid the obstacles and obtain points for each obstacle you dodge. When the game ends, the user can add their score to the leaderboard.
-
-## Deploying from ICP Ninja
-
-This example can be deployed directly from [ICP Ninja](https://icp.ninja), a browser-based IDE for ICP. To continue developing locally after deploying from ICP Ninja, see [BUILD.md](BUILD.md).
-
-[![Open in ICP Ninja](https://icp.ninja/assets/open.svg)](https://icp.ninja/i?g=https://github.com/dfinity/examples/motoko/flying_ninja)
-
-> **Note:** ICP Ninja currently uses `dfx` under the hood, which is why this example includes a `dfx.json` configuration file. `dfx` is the legacy CLI, being superseded by [icp-cli](https://cli.internetcomputer.org), which is what developers should use for local development.
+Flying Ninja is a 2D side-scroller game where players control a ninja character using the space bar to move up and down, dodging obstacles to earn points. When the game ends, players can submit their score to an on-chain leaderboard backed by a Motoko canister on ICP.
 
 ## Build and deploy from the command line
 
 ### Prerequisites
 
-- [x] Install [Node.js](https://nodejs.org/en/download/)
-- [x] Install [icp-cli](https://cli.internetcomputer.org): `npm install -g @icp-sdk/icp-cli @icp-sdk/ic-wasm`
+- Node.js
+- icp-cli: `npm install -g @icp-sdk/icp-cli @icp-sdk/ic-wasm`
+- ic-mops: `npm install -g ic-mops`
 
 ### Install
 
-Clone the example project:
-
 ```bash
 git clone https://github.com/dfinity/examples
 cd examples/motoko/flying_ninja
 ```
 
-### Deployment
-
-Start the local network:
+### Deploy and test
 
 ```bash
 icp network start -d
-```
-
-Deploy the canisters:
-
-```bash
 icp deploy
+make test
+icp network stop
 ```
 
-Stop the local network when done:
+For frontend development with hot reload:
 
 ```bash
-icp network stop
+npm run dev
 ```
 
 ## Updating the Candid interface
@@ -57,9 +39,9 @@ The `backend/backend.did` file defines the backend canister's public interface.
 If you modify the backend's public API, regenerate the `.did` file:
 
 ```bash
-$(mops toolchain bin moc) --idl $(mops sources) -o backend/backend.did backend/app.mo
+$(mops toolchain bin moc) --idl -o backend/backend.did backend/app.mo
 ```
 
 ## Security considerations and best practices
 
-If you base your application on this example, it is recommended that you familiarize yourself with and adhere to the [security best practices](https://internetcomputer.org/docs/building-apps/security/overview) for developing on ICP. This example may not implement all the best practices.
+Refer to the [security best practices](https://docs.internetcomputer.org/guides/security/overview) for information on security and best practices for your ICP app.

motoko/flying_ninja/Makefile

@@ -2,7 +2,7 @@ import Array "mo:core/Array";
 import Nat "mo:core/Nat";
 import Random "mo:core/Random";
 
-persistent actor FlyingNinja {
+actor FlyingNinja {
   type Order = { #less; #equal; #greater };
   type LeaderboardEntry = {
     name : Text;

motoko/flying_ninja/README.md

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Ninja from './Ninja';
 import Pipes from './Pipes';
 import Score from './Score';
@@ -25,7 +25,7 @@ class SeededRNG {
     s1 ^= s0;
     s1 ^= s0 >> 26;
     this.state1 = s1;
-    return (s0 + s1) / 4294967296; // This already returns a number between 0 and 1
+    return (s0 + s1) / 4294967296;
   }
 }
 
@@ -39,7 +39,6 @@ const Game = () => {
   const [rng, setRng] = useState(null);
   const [leaderboard, setLeaderboard] = useState([]);
 
-  // Add this function to fetch the leaderboard
   const fetchLeaderboard = async () => {
     try {
       const entries = await backend.getLeaderboard();
@@ -49,17 +48,12 @@ const Game = () => {
     }
   };
 
-  // this is run once when the page is loaded
   useEffect(() => {
     const initialize = async () => {
       try {
-        // fetch the leaderboard
         await fetchLeaderboard();
-        // initialize the seed with randomness from the internet computer
         const randomness = await backend.getRandomness();
         const seed = new Uint8Array(randomness);
-
-        // create a new SeededRNG with the first 8 bytes of the seed
         setRng(new SeededRNG(seed.slice(0, 8)));
       } catch (error) {
         console.error('Failed to initialize seed:', error);
@@ -78,12 +72,27 @@ const Game = () => {
   const [showNameInput, setShowNameInput] = useState(false);
   const [playerName, setPlayerName] = useState('');
 
+  // Refs hold the current values used inside the game loop interval so that
+  // the effect does not need to re-run (and re-create the interval) on every
+  // frame. Without refs, the dep array would include frame-level state and
+  // React 18 StrictMode's double-invocation would register two intervals,
+  // causing the score to increment by 2 per gate in development.
+  const ninjaYRef = useRef(ninjaStartY);
+  const ninjaVelocityRef = useRef(0);
+  const pipeXRef = useRef(pipeStartX);
+  const gapPositionRef = useRef(100);
+  const scoreRef = useRef(0);
+
   const startGame = () => {
-    setGameState('playing');
     resetGame();
   };
 
   const resetGame = () => {
+    ninjaYRef.current = ninjaStartY;
+    ninjaVelocityRef.current = 0;
+    pipeXRef.current = pipeStartX;
+    gapPositionRef.current = 100;
+    scoreRef.current = 0;
     setNinjaY(ninjaStartY);
     setNinjaVelocity(0);
     setPipeX(pipeStartX);
@@ -92,20 +101,15 @@ const Game = () => {
     setGameState('playing');
   };
 
-  // Handle gravity and ninja movement
   useEffect(() => {
     const handleInteraction = () => {
       if (gameState === 'playing') {
+        ninjaVelocityRef.current = jumpHeight;
         setNinjaVelocity(jumpHeight);
       }
     };
 
-    window.addEventListener('keypress', (event) => {
-      if (event.key === ' ' && gameState === 'playing') {
-        setNinjaVelocity(jumpHeight);
-      }
-    });
-
+    window.addEventListener('keypress', handleInteraction);
     window.addEventListener('touchstart', handleInteraction);
     window.addEventListener('mousedown', handleInteraction);
 
@@ -121,24 +125,36 @@ const Game = () => {
 
     if (gameState === 'playing' && rng) {
       gameLoop = setInterval(() => {
-        setNinjaY((prevY) => Math.min(prevY + ninjaVelocity, window.innerHeight - 10));
-        setNinjaVelocity((prevVelocity) => prevVelocity + gravity);
+        // Update ninja position
+        const newY = Math.min(ninjaYRef.current + ninjaVelocityRef.current, window.innerHeight - 10);
+        ninjaYRef.current = newY;
+        setNinjaY(newY);
 
-        setPipeX((prevX) => {
-          if (prevX < -5) {
-            // rng.next() already returns a number between 0 and 1
-            setGapPosition(rng.next() * (window.innerHeight - gapHeight));
-            setScore((prevScore) => prevScore + 1);
-            return window.innerWidth + 5;
-          }
-          return prevX - 5;
-        });
+        const newVelocity = ninjaVelocityRef.current + gravity;
+        ninjaVelocityRef.current = newVelocity;
+        setNinjaVelocity(newVelocity);
+
+        // Update pipe position
+        let newPipeX = pipeXRef.current - 5;
+        if (newPipeX < -5) {
+          const newGap = rng.next() * (window.innerHeight - gapHeight);
+          gapPositionRef.current = newGap;
+          setGapPosition(newGap);
+          scoreRef.current += 1;
+          setScore(scoreRef.current);
+          newPipeX = window.innerWidth + 5;
+        }
+        pipeXRef.current = newPipeX;
+        setPipeX(newPipeX);
 
         // Collision detection
         if (
-          ninjaY < 0 ||
-          ninjaY + 30 >= window.innerHeight ||
-          (pipeX < 130 && pipeX > 80 && (ninjaY < gapPosition || ninjaY > gapPosition + gapHeight))
+          ninjaYRef.current < 0 ||
+          ninjaYRef.current + 30 >= window.innerHeight ||
+          (pipeXRef.current < 130 &&
+            pipeXRef.current > 80 &&
+            (ninjaYRef.current < gapPositionRef.current ||
+              ninjaYRef.current > gapPositionRef.current + gapHeight))
         ) {
           setGameState('gameOver');
           checkHighScore();
@@ -147,10 +163,10 @@ const Game = () => {
     }
 
     return () => clearInterval(gameLoop);
-  }, [ninjaY, ninjaVelocity, pipeX, gapPosition, gameState, rng]);
+  }, [gameState, rng]);
 
   const checkHighScore = async () => {
-    const isHighScore = await backend.isHighScore(BigInt(score));
+    const isHighScore = await backend.isHighScore(BigInt(scoreRef.current));
     console.log('isHighScore', isHighScore);
     if (isHighScore) {
       setShowNameInput(true);
@@ -159,10 +175,10 @@ const Game = () => {
 
   const submitScore = async () => {
     if (playerName.trim() !== '') {
-      await backend.addLeaderboardEntry(playerName, BigInt(score));
+      await backend.addLeaderboardEntry(playerName, BigInt(scoreRef.current));
       setShowNameInput(false);
       setGameState('gameOver');
-      await fetchLeaderboard(); // update the leaderboard
+      await fetchLeaderboard();
     }
   };