sound and new textures

apps/client/src/components/interface.tsx

@@ -1,3 +1,6 @@
+import { Howl } from "howler";
+import type { Tree } from "packages/api-sdk/src/index.ts";
+import { useEffect, useMemo } from "react";
 import { useCommands } from "../hooks/useCommands.ts";
 import { usePlayers } from "../hooks/usePlayers.ts";
 import { useTrees } from "../hooks/useTrees.ts";
@@ -54,40 +57,24 @@ export const Interface = () => {
 		);
 	});
 
-	const showTrees = trees?.map((tree) => {
-		const size = tree.size;
-		const height = (size * 128) / 100;
-
-		const isShaking = tree.inProgress;
-
-		return (
-			<div
-				key={tree.id}
-				className={`fixed ${isShaking && "skew-x-shake"}`}
-				style={{ zIndex: tree.y, top: tree.y, left: tree.x }}
-			>
-				<div style={{ marginTop: -height, marginLeft: -height / 2 }}>
-					<img
-						src={"tree/tree_128.png"}
-						alt=""
-						className="w-fit"
-						style={{ height: height }}
-					/>
-				</div>
-			</div>
-		);
-	});
+	const showTrees = trees?.map((tree) => (
+		<TreeBlock key={tree.id} tree={tree} />
+	));
 
 	return (
 		<>
 			<div
 				className="fixed top-0 bottom-0 left-0 right-0"
 				style={{ backgroundImage: "url('/Grass_Sample.png')" }}
 			/>
+			<div className="fixed top-0 bottom-0 left-0 right-0 bg-green-500/10" />
+
 			<div className="z-10 absolute top-0 left-0">
 				{showPlayers}
 				{showTrees}
 
+				<Stone />
+
 				<Village />
 
 				<div className="fixed bottom-4 left-4">
@@ -148,23 +135,88 @@ const Village = () => {
 						Строим деревню тут?
 					</div>
 
-					<img
-						src={"dirt1_128.png"}
-						alt=""
-						className="w-fit"
-						style={{ height: height }}
-					/>
-
-					<div className="mx-auto -mt-4 px-2 py-1 w-fit text-center text-amber-900 rounded-2xl text-sm">
-						<div className="flex gap-2 justify-center">
-							<div className="px-2 py-1 bg-amber-900/90 text-amber-100 border-b-4 border-amber-950 rounded-2xl">
-								<p>Древесина</p>
-								<p className="text-xl font-bold">{village?.wood}</p>
-							</div>
+					<div className="relative">
+						<img
+							src={"wood/wood1_64.png"}
+							alt=""
+							className="ml-0 w-fit h-auto"
+						/>
+						<div className="absolute top-9 left-3 text-base text-center font-bold text-amber-200">
+							{village?.wood}
 						</div>
 					</div>
 				</div>
 			</div>
 		</>
 	);
 };
+
+const Stone = () => {
+	const stone = {
+		x: 1250,
+		y: 200,
+	};
+
+	const size = 100;
+	const height = (size * 128) / 100;
+
+	const isShaking = false;
+
+	return (
+		<div
+			className={`fixed ${isShaking && "skew-x-shake"}`}
+			style={{ zIndex: stone.y, top: stone.y, left: stone.x }}
+		>
+			<div style={{ marginTop: -height, marginLeft: -height / 2 }}>
+				<img
+					src={"stone/stone1_128.png"}
+					alt=""
+					className="w-fit"
+					style={{ height: height }}
+				/>
+			</div>
+		</div>
+	);
+};
+
+const TreeBlock = ({ tree }: { tree: Tree }) => {
+	const type = tree.type;
+	const size = tree.size;
+	const height = (size * 128) / 100;
+
+	const isShaking = tree.inProgress;
+
+	const sound = useMemo(
+		() =>
+			new Howl({
+				src: ["/sound/chopping1.wav"],
+				loop: true,
+			}),
+		[],
+	);
+
+	useEffect(() => {
+		if (isShaking) {
+			sound.play();
+			return;
+		}
+
+		sound.stop();
+	}, [isShaking, sound]);
+
+	return (
+		<div
+			className={`fixed ${isShaking && "skew-x-shake"}`}
+			style={{ zIndex: tree.y, top: tree.y, left: tree.x }}
+		>
+			<div style={{ marginTop: -height, marginLeft: -height / 2 }}>
+				<img
+					src={`tree/tree${type}_128.png`}
+					alt=""
+					className="w-fit"
+					style={{ height: height }}
+				/>
+			</div>
+		</div>
+	);
+};

apps/client/src/components/sound.tsx

@@ -0,0 +1,12 @@
+import { Howl } from "howler";
+
+export const Sound = () => {
+	const sound = new Howl({
+		src: ["/sound/forest1.mp3"],
+		loop: true,
+	});
+
+	sound.play();
+
+	return <></>;
+};

apps/client/src/index.css

@@ -1,14 +1,22 @@
 @import "tailwindcss";
 
 @keyframes skew-x-shake {
-    0% { transform: skewX(-15deg); }
-    5% { transform: skewX(15deg); }
-    10% { transform: skewX(-15deg); }
-    15% { transform: skewX(15deg); }
-    20% { transform: skewX(0deg); }
+    0% { transform: skewX(0deg); }
+    /* */
+    10% { transform: skewX(-5deg); }
+    12% { transform: skewX(5deg); }
+    15% { transform: skewX(0deg); }
+    /* */
+    30% { transform: skewX(-5deg); }
+    32% { transform: skewX(5deg); }
+    35% { transform: skewX(0deg); }
+    /* */
+    75% { transform: skewX(-5deg); }
+    77% { transform: skewX(5deg); }
+    80% { transform: skewX(0deg); }
     100% { transform: skewX(0deg); }
 }
 
 .skew-x-shake {
-    animation: skew-x-shake 1.5s infinite;
+    animation: skew-x-shake 2.6s infinite;
 }

apps/client/src/main.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Interface } from "./components/interface";
+import { Sound } from "./components/sound.tsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
+		<Sound />
 		<Interface />
 	</React.StrictMode>,
 );

package.json

@@ -8,11 +8,7 @@
 		"db:start": "docker compose up",
 		"db:edit": "prisma studio"
 	},
-	"keywords": [
-		"game",
-		"online",
-		"twitch"
-	],
+	"keywords": ["game", "online", "twitch"],
 	"author": "Nick Kosarev <[email protected]>",
 	"license": "MIT",
 	"repository": {
@@ -31,12 +27,14 @@
 		"@twurple/chat": "7.1.0",
 		"@twurple/easy-bot": "7.1.0",
 		"hono": "4.1.2",
+		"howler": "2.2.4",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.6.1",
 		"@tailwindcss/vite": "4.0.0-alpha.9",
+		"@types/howler": "2.2.11",
 		"@types/react": "18.2.67",
 		"@types/react-dom": "18.2.22",
 		"@vitejs/plugin-react": "4.2.1",

packages/api-sdk/src/lib/types.ts

@@ -38,4 +38,5 @@ export interface Tree {
 	resource: number;
 	inProgress: boolean;
 	progressFinishAt: Date;
+	type: string;
 }

prisma/schema.prisma

@@ -49,4 +49,5 @@ model Tree {
   resource         Int
   inProgress       Boolean  @default(false)
   progressFinishAt DateTime @default(now())
+  type             String
 }