Skip to content

Commit 34557f0

Browse files
itaylayzeritaylayzer
authored
Merge pull request #1 from itaylayzer/dev
Dev
2 parents 0b091a9 + 17784a3 commit 34557f0

16 files changed

Lines changed: 388 additions & 91 deletions

File tree

‎.github/workflows/nextjs.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ jobs:
4141
env:
4242
CONFIG_TS: ${{ vars.CONFIG_TS }}
4343

44+
- name: Change starters jsons
45+
run: |
46+
echo "[0,0,0,0,0]" > ./src/config/data/starter/materials.json;
47+
echo "[0,0,0,0,0]" > ./src/config/data/starter/devcards.json;
48+
4449
- name: Detect package manager
4550
id: detect-package-manager
4651
run: |

‎README.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,5 @@
22

33
TODO:
44

5-
- first 2 rounds
65
- players trade
7-
- validation on settlements & roads placing
86
- knight: get a material from an area nearby player

‎src/client/client.ts‎

Lines changed: 72 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export function handleSocket(
6565
devcards: number;
6666
}[];
6767
}) => {
68-
console.log("client INIT id", id);
6968
const materialsMap = new Map(
7069
materials.map(([index, { num, material }]) => {
7170
return [
@@ -104,15 +103,11 @@ export function handleSocket(
104103
});
105104

106105
const { onlines } = get();
107-
console.log("onlines.clear before", onlines);
108106
onlines.forEach((_, key) => onlines.delete(key));
109-
console.log("onlines.clear after", onlines);
110107

111108
for (const xplayer of xplayers) {
112109
const { devcards, id, materials, name } = xplayer;
113110

114-
console.log("client player INIT", xplayer);
115-
116111
onlines.set(id, {
117112
devcards,
118113
color: id,
@@ -190,7 +185,6 @@ export function handleSocket(
190185
materials: number;
191186
devcards: number;
192187
}) => {
193-
console.log("client player PLAYER_JOIN", xplayer);
194188
const { onlines } = get();
195189
const { devcards, id, materials, name } = xplayer;
196190

@@ -301,8 +295,6 @@ export function handleSocket(
301295
id: number;
302296
players: { id: number; vp: number; vpdc: number }[];
303297
}) => {
304-
console.log("winner.client");
305-
306298
get().ui.events.emit("win", id, players);
307299
}
308300
);
@@ -317,10 +309,78 @@ export function handleSocket(
317309
}));
318310
});
319311

320-
socket.on(ClientCodes.TURN_SWITCH, (turnId: number) => {
321-
set({ turnId });
322-
setTurnState(get().turnId === get().local.color ? "ready" : "others");
323-
});
312+
socket.on(
313+
ClientCodes.TURN_SWITCH,
314+
({ turnId, round }: { turnId: number; round: number }) => {
315+
console.log("client.turn turn=", turnId, "round=", round);
316+
const myTurn = turnId === get().local.color;
317+
318+
if (round === 2) {
319+
set({ firstRounds: false });
320+
}
321+
322+
if (myTurn) {
323+
switch (round) {
324+
case 0:
325+
case 1: {
326+
const { events } = get().ui;
327+
328+
set((old) => ({
329+
ui: { ...old.ui, mapState: "picking vertex" },
330+
}));
331+
332+
// pick vertex
333+
events.once("picked vertex", (index) => {
334+
socket?.emit(ServerCodes.BUY_SETTLEMENT, index);
335+
336+
if (round === 1) {
337+
set({ secondSettlement: index });
338+
}
339+
set((old) => ({
340+
ui: { ...old.ui, mapState: "ready" },
341+
}));
342+
343+
setTimeout(() => {
344+
set((old) => ({
345+
ui: { ...old.ui, mapState: "picking edge" },
346+
}));
347+
348+
// pick edge
349+
events.once(
350+
"picked edge",
351+
(from: number, to: number) => {
352+
socket.emit(ServerCodes.BUY_ROAD, [
353+
from,
354+
to,
355+
]);
356+
357+
set((old) => ({
358+
ui: {
359+
...old.ui,
360+
mapState: "ready",
361+
},
362+
}));
363+
364+
setTimeout(() => {
365+
set({
366+
secondSettlement: undefined,
367+
});
368+
369+
socket.emit(ServerCodes.STOP_TURN);
370+
}, 50);
371+
}
372+
);
373+
}, 50);
374+
});
375+
break;
376+
}
377+
}
378+
}
379+
380+
set({ turnId });
381+
setTurnState(turnId === get().local.color ? "ready" : "others");
382+
}
383+
);
324384

325385
socket.on(
326386
ClientCodes.PLAYER_UPDATE,

‎src/components/catan/components/ActionDeck.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { FaHandshakeSimple } from "react-icons/fa6";
1515
import { RiDiceFill } from "react-icons/ri";
1616
import { MaterialNotify } from "../notifications/MaterialNotify";
1717
import { TradeButton } from "./TradeButton";
18+
import { cn } from "@/lib/utils";
1819

1920
export function ActionDeck() {
2021
const {
@@ -23,6 +24,7 @@ export function ActionDeck() {
2324
ui: { dicesState, events, mapState },
2425
local,
2526
set,
27+
firstRounds,
2628
} = useCatanStore();
2729

2830
const [sevenMode, setSevenMode] = useState(false);
@@ -135,7 +137,6 @@ export function ActionDeck() {
135137
},
136138
];
137139

138-
console.log("dicesState", dicesState);
139140

140141
const turnNotMine = dicesState !== "mine";
141142
const allDisabled =
@@ -161,7 +162,12 @@ export function ActionDeck() {
161162
];
162163

163164
return (
164-
<div>
165+
<div
166+
className={cn(
167+
"transition-[opacity,scale] duration-1000",
168+
firstRounds && "opacity-0 scale-80 pointer-events-none"
169+
)}
170+
>
165171
<MaterialNotify />
166172

167173
<div className="relative z-30 flex flex-row-reverse border-1 rounded-2xl bg-accent gap-5 px-4 pb-1 pt-2 scale-110 items-center justify-around">

‎src/components/catan/components/LocalPlayerDeck.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export function LocalPlayerDeck({}: {}) {
4343
ui: { events, dicesState, mapState },
4444
set,
4545
client: { socket },
46+
firstRounds,
4647
} = useCatanStore();
4748

4849
const render = useRender();
@@ -133,9 +134,16 @@ export function LocalPlayerDeck({}: {}) {
133134
];
134135

135136
return (
136-
<div>
137+
<div
138+
className={cn(
139+
"transition-[opacity,scale] duration-1000",
140+
firstRounds && "opacity-0 scale-80 pointer-events-none"
141+
)}
142+
>
137143
<div className="relative flex scale-90 gap-2 px-7 pb-1 pt-3 items-center justify-around">
138144
{combine.map((value, index) => {
145+
if (LOCAL_DECK_MATERIALS[index] === undefined) return null;
146+
139147
const isDevCard = index > 4;
140148
const { name, icon } = LOCAL_DECK_MATERIALS[index];
141149

@@ -176,8 +184,8 @@ export function LocalPlayerDeck({}: {}) {
176184
height: 30,
177185
};
178186

179-
const rightIcon = LOCAL_DECK_MATERIALS[index].icon(setting);
180-
const cardIcon = LOCAL_DECK_MATERIALS[index].icon({
187+
const rightIcon = icon(setting);
188+
const cardIcon = icon({
181189
...cardSetting,
182190
style: {
183191
filter: `drop-shadow(0px 0px 20px ${color})`,

‎src/components/catan/components/OnlinePlayerCard.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
22
Tooltip,
3-
TooltipTrigger,
43
TooltipContent,
4+
TooltipTrigger,
55
} from "@/components/ui/tooltip";
66
import { COLORS, DEVELOPMENTS, ONLINE_STATS } from "@/config/constants/ui";
7-
import { useCatanStore } from "@/store/useCatanStore";
7+
import { cn } from "@/lib/utils";
88
import { Player } from "@/types/player";
99

1010
// import { IoLogoGameControllerB } from "react-icons/io";
@@ -65,10 +65,12 @@ export function OnlinePlayerCard({
6565
player,
6666
largestArmy,
6767
longestRoad,
68+
turnId,
6869
}: {
6970
player: Player;
7071
largestArmy: number;
7172
longestRoad: number;
73+
turnId: number;
7274
}) {
7375
const {
7476
materials,
@@ -80,9 +82,6 @@ export function OnlinePlayerCard({
8082
knightUsed,
8183
} = player;
8284

83-
console.log("client", "victoryPoints", victoryPoints);
84-
console.log("client", "OnlinePlayerCard", "maxRoad", maxRoad);
85-
8685
const belongLargestArmy = largestArmy === color;
8786
const belongLongestRoad = longestRoad === color;
8887

@@ -124,10 +123,12 @@ export function OnlinePlayerCard({
124123
style={{
125124
filter: `drop-shadow(0px 0px 10px ${COLORS[color]}, drop-shadow(0px 0px 10px ${COLORS[color]}`,
126125
animationDelay: `${color / 2}s`,
127-
rotate: "90deg",
128126
scale: "0.7",
129127
}}
130-
className="animate-pulse"
128+
className={cn(
129+
"animate-pulse transition-all",
130+
turnId === player.color ? "rotate-180" : "rotate-90"
131+
)}
131132
color={COLORS[color]}
132133
/>
133134
<h2 className="flex-1 mr-12 text-[20px]">{name}</h2>

‎src/components/catan/components/PlayersBar.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function PlayersBar() {
1111
largestArmy,
1212
longestRoad,
1313
ui: { events },
14+
turnId
1415
} = useCatanStore();
1516

1617
const render = useRender();
@@ -25,7 +26,7 @@ export default function PlayersBar() {
2526
const list: ReactNode[] = [];
2627
onlines.forEach((player) =>
2728
list.push(
28-
OnlinePlayerCard({ player, largestArmy, longestRoad }),
29+
OnlinePlayerCard({ player, largestArmy, longestRoad, turnId }),
2930
<hr />
3031
)
3132
);
@@ -46,6 +47,7 @@ export default function PlayersBar() {
4647
},
4748
largestArmy,
4849
longestRoad,
50+
turnId
4951
})
5052
);
5153

‎src/components/catan/components/TradeButton.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,6 @@ export function TradeButton(): {
185185

186186
events.on("trade requests", (trades: Deal[]) => {
187187
trades.sort((a, b) => a.count - b.count);
188-
console.log("trades.trades", trades);
189188
setTrades(trades);
190189
});
191190

0 commit comments

Comments
 (0)