refactored frontent to separate files
This commit is contained in:
@@ -1,209 +1,25 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Socket, Channel } from "phoenix";
|
||||
import "./App.css";
|
||||
|
||||
interface Player {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface GameState {
|
||||
[playerId: string]: Player;
|
||||
}
|
||||
|
||||
// Connect to nginx load balancer
|
||||
const WS_SERVER = "ws://localhost:4000/socket";
|
||||
import { UserInput } from "./game/UserInput";
|
||||
import { BoardDisplay } from "./game/BoardDisplay";
|
||||
import { ConnectionStatus } from "./game/ConnectionStatus";
|
||||
|
||||
function App() {
|
||||
const [players, setPlayers] = useState<GameState>({});
|
||||
const [myPlayerId, setMyPlayerId] = useState<string | null>(null);
|
||||
const [connectionStatus, setConnectionStatus] =
|
||||
useState<string>("connecting");
|
||||
const socketRef = useRef<Socket | null>(null);
|
||||
const channelRef = useRef<Channel | null>(null);
|
||||
const keysPressed = useRef<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
// Connect to nginx load balancer
|
||||
console.log(`Connecting to ${WS_SERVER}`);
|
||||
|
||||
const socket = new Socket(WS_SERVER, {
|
||||
timeout: 3000,
|
||||
reconnectAfterMs: (tries) =>
|
||||
[1000, 2000, 5000, 10000][tries - 1] || 10000,
|
||||
});
|
||||
|
||||
socket.onOpen(() => {
|
||||
console.log(`✓ Connected to load balancer`);
|
||||
setConnectionStatus("Connected");
|
||||
});
|
||||
|
||||
socket.onError((error) => {
|
||||
console.error(`✗ Connection error:`, error);
|
||||
setConnectionStatus("Connection error");
|
||||
});
|
||||
|
||||
socket.onClose(() => {
|
||||
console.log(`✗ Disconnected from load balancer`);
|
||||
setConnectionStatus("Disconnected - reconnecting...");
|
||||
});
|
||||
|
||||
socket.connect();
|
||||
socketRef.current = socket;
|
||||
|
||||
// Join game channel
|
||||
const channel = socket.channel("game:lobby", {});
|
||||
|
||||
channel
|
||||
.join()
|
||||
.receive("ok", () => {
|
||||
console.log(`✓ Joined game channel`);
|
||||
setConnectionStatus("Connected & playing");
|
||||
})
|
||||
.receive("error", (resp) => {
|
||||
console.log(`✗ Failed to join:`, resp);
|
||||
setConnectionStatus("Failed to join game");
|
||||
})
|
||||
.receive("timeout", () => {
|
||||
console.log(`✗ Timeout joining`);
|
||||
setConnectionStatus("Connection timeout");
|
||||
});
|
||||
|
||||
// Listen for game state updates
|
||||
channel.on("game_state", (payload: { players: GameState }) => {
|
||||
setPlayers(payload.players);
|
||||
|
||||
if (!myPlayerId && Object.keys(payload.players).length > 0) {
|
||||
const playerIds = Object.keys(payload.players);
|
||||
if (playerIds.length > 0) {
|
||||
setMyPlayerId(playerIds[playerIds.length - 1]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
channelRef.current = channel;
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
channel.leave();
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [myPlayerId]);
|
||||
|
||||
// Handle keyboard input - send to active channel
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const key = e.key.toLowerCase();
|
||||
if (["w", "a", "s", "d"].includes(key)) {
|
||||
e.preventDefault();
|
||||
|
||||
// Only send if not already pressed (prevent repeat)
|
||||
if (!keysPressed.current.has(key)) {
|
||||
keysPressed.current.add(key);
|
||||
|
||||
// Send to active channel
|
||||
const activeChannel = channelRef.current;
|
||||
if (activeChannel && activeChannel.state === "joined") {
|
||||
activeChannel.push("move", { direction: key });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
const key = e.key.toLowerCase();
|
||||
if (["w", "a", "s", "d"].includes(key)) {
|
||||
keysPressed.current.delete(key);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
window.addEventListener("keyup", handleKeyUp);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
window.removeEventListener("keyup", handleKeyUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
background: "#1a1a2e",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{/* Connection status */}
|
||||
<>
|
||||
<UserInput />
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 10,
|
||||
right: 10,
|
||||
color: "white",
|
||||
fontFamily: "monospace",
|
||||
background: "rgba(0,0,0,0.5)",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
<div>Status: {connectionStatus}</div>
|
||||
<div>Players: {Object.keys(players).length}</div>
|
||||
</div>
|
||||
|
||||
{/* Game canvas */}
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "800px",
|
||||
height: "600px",
|
||||
background: "#16213e",
|
||||
margin: "50px auto",
|
||||
border: "2px solid #0f3460",
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
background: "#1a1a2e",
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{Object.entries(players).map(([id, player]) => (
|
||||
<div
|
||||
key={id}
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: player.x,
|
||||
top: player.y,
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
borderRadius: "50%",
|
||||
background: id === myPlayerId ? "#e94560" : "#53a8b6",
|
||||
border:
|
||||
id === myPlayerId ? "3px solid #ff6b6b" : "2px solid #48d6e0",
|
||||
transition: "all 0.1s linear",
|
||||
transform: "translate(-50%, -50%)",
|
||||
boxShadow:
|
||||
id === myPlayerId ? "0 0 10px #e94560" : "0 0 5px #53a8b6",
|
||||
}}
|
||||
>
|
||||
{id === myPlayerId && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-25px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
color: "#fff",
|
||||
fontSize: "10px",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
You
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<ConnectionStatus />
|
||||
<BoardDisplay />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user