From 49fa3976f0f5ba77512df31d47ebc0ff98896d71 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sun, 19 Jun 2022 16:14:12 -0700
Subject: [PATCH] Birds flocking around wheat

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/App.js   |  2 --
 client/src/Bird.css |  6 +-----
 client/src/Bird.js  |  4 ++--
 client/src/Board.js | 19 ++++++++++++++++++-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index d5c0522..5a02827 100755
--- a/client/src/App.js
+++ b/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">
diff --git a/client/src/Bird.css b/client/src/Bird.css
index 2349307..debf31b 100644
--- a/client/src/Bird.css
+++ b/client/src/Bird.css
@@ -1,10 +1,6 @@
 .Flock {
   z-index: 5000;
-  position: relative;
-  top: 5rem;
-  left: 10rem;
-  width: 20rem;
-  height: 20rem;
+  position: absolute;
   pointer-events: none;
 }
 
diff --git a/client/src/Bird.js b/client/src/Bird.js
index 0483a40..b1ff091 100644
--- a/client/src/Bird.js
+++ b/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 };
diff --git a/client/src/Board.js b/client/src/Board.js
index 7d97c37..b840e22 100644
--- a/client/src/Board.js
+++ b/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;