Birds flocking around wheat

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/App.js

@@ -27,7 +27,6 @@ import { Trade } from "./Trade.js";
 import { Winner } from "./Winner.js";
 import { HouseRules } from "./HouseRules.js";
 import { Dice } from "./Dice.js";
-import { Flock } from "./Bird.js";
 
 import history from "./history.js";
 import "./App.css";
@@ -333,7 +332,6 @@ const Table = () => {
   return <GlobalContext.Provider value={global}>
     { /* <PingPong/> */ }
     <div className="Table">
-      <Flock count={15}/>
       <div className="ActivitiesBox">
         <Activities/>
         { dice && dice.length && <div className="DiceRoll">

client/src/Bird.css

@@ -1,10 +1,6 @@
 .Flock {
   z-index: 5000;
-  position: relative;
+  position: absolute;
-  top: 5rem;
-  left: 10rem;
-  width: 20rem;
-  height: 20rem;
   pointer-events: none;
 }
 

client/src/Bird.js

@@ -71,7 +71,7 @@ const Bird = ({ origin, radius, speed, size, style }) => {
   />;
 };
 
-const Flock = ({count}) => {
+const Flock = ({count, style}) => {
   const [birds, setBirds] = useState([]);
   useEffect(() => {
     const tmp = [];
@@ -87,7 +87,7 @@ const Flock = ({count}) => {
     setBirds(tmp);
   }, [count, setBirds]);
 
-  return <div className="Flock">{ birds }</div>;
+  return <div className="Flock" style={style}>{ birds }</div>;
 };
 
 export { Bird, Flock };

client/src/Board.js

@@ -3,6 +3,7 @@ import equal from "fast-deep-equal";
 import { assetsPath } from "./Common.js";
 import "./Board.css";
 import { GlobalContext } from "./GlobalContext.js";
+import { Flock } from "./Bird.js";
 
 const rows = [3, 4, 5, 4, 3, 2]; /* The final row of 2 is to place roads and corners */
 
@@ -526,10 +527,26 @@ const Board = () => {
           tile.type = 'volcano';
           tile.card = 0;
         }
-        let div = <Tile
+        let div;
+        
+        if (tile.type === 'wheat') {
+          div = <><Flock count={Math.floor(Math.random() * 4)}
+          style={{
+            top: `${tile.top - tileImageHeight * 0.5}px`,
+            left: `${tile.left - tileImageWidth * 0.5}px`,
+            width: `${tileImageWidth}px`,
+            height: `${tileImageHeight}px`
+          }}/><Tile
+          key={`tile-${order}`}
+          tile={tile}
+          /></>;
+        } else {
+          div = <Tile
             key={`tile-${order}`}
             tile={tile}
           />;
+        };
+
         if (++rowCount === rows[row]) {
           row++;
           rowCount = 0;