Robot Forge: Rise of the Circuits

import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; const robotParts = [ { name: 'Laser Arm', power: 20 }, { name: 'Rocket Legs', power: 15 }, { name: 'AI Brain', power: 25 }, { name: 'Steel Chest', power: 10 }, ]; export default function RobotForge() { const [robot, setRobot] = useState([]); const [battleLog, setBattleLog] = useState(''); const [leaderboard, setLeaderboard] = useState([]); const [playerName, setPlayerName] = useState(''); const addPart = (part) => { if (robot.length >= 3) return; setRobot([...robot, part]); }; const simulateBattle = async () => { const totalPower = robot.reduce((sum, part) => sum + part.power, 0); const response = await fetch('https://your-alibaba-cloud-function-url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ player: playerName, power: totalPower }), }); const result = await response.json(); setBattleLog(result.message); fetchLeaderboard(); }; const fetchLeaderboard = async () => { const res = await fetch('https://your-leaderboard-endpoint'); const data = await res.json(); setLeaderboard(data); }; return ( Robot Forge setPlayerName(e.target.value)} /> {robotParts.map((part, idx) => ( addPart(part)} className="cursor-pointer"> {part.name} Power: {part.power} ))} Your Robot: {robot.map((part, idx) => ( {part.name} (Power: {part.power}) ))} Simulate Battle {battleLog && {battleLog}} Leaderboard {leaderboard.map((entry, idx) => ( {entry.player} {entry.score} ))} ); }

Apr 13, 2025 - 15:28

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

const robotParts = [
{ name: 'Laser Arm', power: 20 },
{ name: 'Rocket Legs', power: 15 },
{ name: 'AI Brain', power: 25 },
{ name: 'Steel Chest', power: 10 },
];

export default function RobotForge() {
const [robot, setRobot] = useState([]);
const [battleLog, setBattleLog] = useState('');
const [leaderboard, setLeaderboard] = useState([]);
const [playerName, setPlayerName] = useState('');

const addPart = (part) => {
if (robot.length >= 3) return;
setRobot([...robot, part]);
};

const simulateBattle = async () => {
const totalPower = robot.reduce((sum, part) => sum + part.power, 0);
const response = await fetch('https://your-alibaba-cloud-function-url', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ player: playerName, power: totalPower }),
});
const result = await response.json();
setBattleLog(result.message);
fetchLeaderboard();
};

const fetchLeaderboard = async () => {
const res = await fetch('https://your-leaderboard-endpoint');
const data = await res.json();
setLeaderboard(data);
};

return (

Robot Forge

   setPlayerName(e.target.value)}
  />

  
    {robotParts.map((part, idx) => (
       addPart(part)} className="cursor-pointer">
        
          {part.name}
          
Power: {part.power}
        
      
    ))}
  

  
    Your Robot:
    
      {robot.map((part, idx) => (
        {part.name} (Power: {part.power})
      ))}
    
  

  

  {battleLog && {battleLog}}

  

    Leaderboard
    
      {leaderboard.map((entry, idx) => (
        
          {entry.player}
          {entry.score}
        
      ))}

);
}