Merge pull request #11 from lmf-git/map

Map
lmf-git · Oct 10, 2022 · 6bc0a6c · 6bc0a6c
2 parents 345f749 + 5abc665
commit 6bc0a6c
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 100 deletions.
diff --git a/components/Game/Map/MapGUI.js b/components/Game/Map/MapGUI.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import MapConfig from 'lib/map/mapConfig';
+import MapConfig, { BIOMES } from 'lib/map/mapConfig';
 import MapManager from 'lib/map/mapManager';
 import NoiseHandler from "lib/map/noiseHandler";
 import { controlsListen, controlsUnlisten } from "lib/map/controls";
@@ -12,7 +12,7 @@ export default function MapGUI({ setOverlay, chunks, position }) {
 
     useEffect(() => {
         // TODO: Get this from game server.
-        MapConfig.seed = 2384832974;
+        MapConfig.seed = 9888499499429;
         NoiseHandler.initialise();
 
         // Bootstrap game.
@@ -27,6 +27,9 @@ export default function MapGUI({ setOverlay, chunks, position }) {
 
             // Remove resize handler.
             window.removeEventListener('resize', MapManager.resize);
+
+            // Reset loaded chunks.
+            MapConfig.chunksMeta = {};
         }
     }, []);
 
@@ -52,8 +55,17 @@ export default function MapGUI({ setOverlay, chunks, position }) {
 
                     { chunk.tiles.map((tile, tI) => 
                         // TODO: Make into real class css module rule
-                        <div style={{ background: tile.biome }} className={styles.tile} key={`chunk-${tI}`}>
-                            {tile.x}|{tile.y}
+                        <div 
+                            data-biome={tile.biome} 
+                            style={{ 
+                                background: BIOMES[tile.biome],
+                                border: tile.biome === 'OCEAN' ? 'none' : '',
+                                borderBottom: 'none',
+                                borderLeft: 'none'
+                            }} 
+                            className={styles.tile} 
+                            key={`chunk-${tI}`}>
+                            {/* {tile.x}|{tile.y} */}
                         </div>
                     )}
                 </div>

diff --git a/components/Game/Map/MapGUI.module.css b/components/Game/Map/MapGUI.module.css
@@ -4,7 +4,7 @@
 }
 
 .map-window {
-    background: #1e1e1e;
+    background: rgb(67, 66, 120);
 }
 
 .map-branding {
@@ -80,6 +80,9 @@
     opacity: 0;
     transition: opacity .2s, color .2s;
     opacity: 1;
+
+    border: 1px solid rgb(40, 40, 40);
+    box-sizing: border-box;
 }
 
 .tile:hover {

diff --git a/components/Pages/Home/Home.module.css b/components/Pages/Home/Home.module.css
@@ -1,7 +1,7 @@
 .header {
     display: flex;
     align-items: center;
-    padding: .5em;
+    padding: 1em;
     margin-bottom: 3em;
 }
 
@@ -56,8 +56,12 @@
     opacity: .75;
 }
 
+.infoPanels {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
 
-.roadmap-list {
-    /* max-height: 10em; */
-    /* overflow-y: scroll; */
+.roadmap {
+    flex: 50%;
 }
diff --git a/lib/map/mapConfig.js b/lib/map/mapConfig.js
@@ -1,3 +1,21 @@
+export const BIOMES = { 
+    OCEAN: '#434278',
+    BEACH: '#CFBA8A',
+    SCORCHED: '#555555',
+    BARE: '#888888',
+    TUNDRA: '#bbbbaa',
+    SNOW: '#ffffff',
+    TEMPERATE_DESERT: '#C6CF9B',
+    SHRUBLAND: '#889977',
+    TAIGA: '#99aa77',
+    TEMPERATE_DECIDUOUS_FOREST: '#679459',
+    TEMPERATE_RAIN_FOREST: '#347553',
+    SUBTROPICAL_DESERT: '#d2b98b',
+    GRASSLAND: '#88aa55',
+    TROPICAL_SEASONAL_FOREST: '#559944',
+    TROPICAL_RAIN_FOREST: '#448855'
+};
+
 // Shared object for map.
 const MapConfig = {
     chunksMeta: {},

diff --git a/lib/map/mapManager.js b/lib/map/mapManager.js
@@ -2,24 +2,6 @@ import { controlsListen } from "./controls";
 import MapConfig from "./mapConfig";
 import NoiseHandler from "./noiseHandler";
 
-const PALETTE = { 
-    OCEAN: '#434278',
-    BEACH: '#CFBA8A',
-    SCORCHED: '#555555',
-    BARE: '#888888',
-    TUNDRA: '#bbbbaa',
-    SNOW: '#ffffff',
-    TEMPERATE_DESERT: '#C6CF9B',
-    SHRUBLAND: '#889977',
-    TAIGA: '#99aa77',
-    TEMPERATE_DECIDUOUS_FOREST: '#679459',
-    TEMPERATE_RAIN_FOREST: '#347553',
-    SUBTROPICAL_DESERT: '#d2b98b',
-    GRASSLAND: '#88aa55',
-    TROPICAL_SEASONAL_FOREST: '#559944',
-    TROPICAL_RAIN_FOREST: '#448855'
-};
-
 // TODO: Don't load if already loaded.
 // TODO: fix this to not need to be inside this method
 const VILLAGE_IMAGES = {
@@ -151,10 +133,9 @@ export default class MapManager {
                 const x = Math.round(position.x + j);
                 const y = Math.round(position.y - i);
 
-                const biome = PALETTE[NoiseHandler.biome(x, y)];
                 chunk.tiles.push({
                     x, y,
-                    biome: biome
+                    biome: NoiseHandler.biome(x, y)
                 });
             }
         }

diff --git a/lib/map/noiseHandler.js b/lib/map/noiseHandler.js
@@ -23,18 +23,18 @@ export default class NoiseHandler {
     };
 
     static initialise() {
-        MapConfig.heightNoise = new Noise(MapConfig.seed - 10);
-        MapConfig.moistureNoise = new Noise(MapConfig.seed + 10);
+        MapConfig.heightNoise = new Noise(MapConfig.seed - 5);
+        MapConfig.moistureNoise = new Noise(MapConfig.seed + 5);
     }
 
     static calcTileMoisture(x, y) {
-        const noise = MapConfig.moistureNoise.perlin2(x / 10, y / 10);
+        const noise = MapConfig.moistureNoise.perlin2(x / 8, y / 8);
         const noiseInt = Math.abs(noise);
         return noiseInt;
     }
 
     static calcTileHeight(x, y) {
-        const noise = MapConfig.heightNoise.perlin2(x / 10, y / 10);
+        const noise = MapConfig.heightNoise.perlin2(x / 8, y / 8);
         const noiseInt = Math.abs(noise);
         return noiseInt;
     }

diff --git a/pages/index.js b/pages/index.js
@@ -14,19 +14,16 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <div className={[styles.roadmap, 'panel'].join(' ')}>
-        <h2>News</h2>
-        <ul>
-          <li>Login</li>
-          <li>Now open source <a href="https://github.com/lmf-git/warsanon">on github.</a></li>
-        </ul>
-      </div>
-
+      {/* 
       <img src="/easteregg/knight.png" style={{ 
         right: '2em',
         position: 'absolute', zIndex: -1, display: 'flex', flexWrap: 'wrap',
         top: '7em', alignItems: 'center'
-      }} />
+      }} /> */}
+
+
+
+      {/*
 
       <img src="/easteregg/picnic.png" style={{ 
         bottom: '2em',
@@ -51,7 +48,7 @@ export default function Home() {
         width: '7em',
         position: 'absolute', zIndex: -1, display: 'flex', flexWrap: 'wrap',
         left: '3em', alignItems: 'center'
-      }} />
+      }} /> */}
 
       {/* 
       <div style={{ 
@@ -65,62 +62,95 @@ export default function Home() {
       </div> 
       */}
 
-      <div className={[styles.roadmap, 'panel'].join(' ')}>
-        <h2>Roadmap</h2>
-        <ul className={styles['roadmap-list']}>
-
-
-
-          <li>Coordinate pointer number top right</li>
-
-          <li>Load from query params</li>
-
-          <li>Mobile drag</li>
-          <li>Zoom</li>
-
-          <li>-</li>
-
-          <li>-</li>
-          <li>Add player spawned to game world/chat log</li>
-          <li>Pick Spawn</li>
-          <li>-</li>
-
-          <li>Moving</li>
-          <li>Fighting</li>
-          <li>Dying</li>
-          <li>Gathering</li>
-          <li>Building</li>
-          <li>Trading</li>
-          <li>Admin world create seed + spawns</li>
-        </ul>
-
-        <h2>Completed</h2>
-        <ul className={styles['roadmap-list']} style={{ height: '10em', overflowY: 'scroll', textDecoration: 'line-through' }}>
-          <li>Add crosshair</li>
-          <li>Map centered offset</li>
-          <li>Load before position change</li>
-          <li>Move camera when selecting spawns</li>
-          <li>Track loaded chunks</li>
-          <li>Load tiles around center to fill out map</li>
-          <li>Move viewport to coordinate centred</li>
-          <li>Simulate some game log events</li>
-          <li>Click/select tiles</li>
-          <li>Chat/game log feed</li>
-          <li>Chunk positioning</li>
-          <li>Resize</li>
-          <li>Drag</li>
-          <li>HTML approach to map</li>
-          <li>Load Spawns</li>
-          <li>World user count</li>
-          <li>Add profile link</li>
-          <li>Complete profile/Onboarding</li>
-          <li>Allow avatar</li>
-          <li>Login</li>
-          <li>World select</li>
-          <li>World register</li>
-          <li>Add AuthContext and useAuthContext</li>
-          <li>Create protected/incomplete profile guard as effect</li>
-        </ul>
+      <div 
+        style={{ background: 'rgb(79, 79, 79)' }}
+        className={[styles.infoPanels, 'panel'].join(' ')}>
+        <div className={[styles.roadmap].join(' ')}>
+          <h2>News</h2>
+          <ul>
+            <li>Login now possible</li>
+            <li>Now open source <a href="https://github.com/lmf-git/warsanon">on github.</a></li>
+          </ul>
+        </div>
+
+        <div className={[styles.roadmap].join(' ')}>
+          <h2>FAQs</h2>
+          <ul className={styles['roadmap-list']}>
+            <li>Render spawn structure</li>
+
+            <li>Render spawned player</li>
+
+            <li>Fix map tooltip inaccuracy * chunkSize</li>
+
+            <li>Add player spawned to game world chat log</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className={[styles.infoPanels, 'panel'].join(' ')}>
+        <div className={[styles.roadmap].join(' ')}>
+          <h2>Working On</h2>
+          <ul className={styles['roadmap-list']}>
+            <li>Render spawn structure</li>
+
+            <li>Render spawned player</li>
+
+            <li>Coordinate pointer number top right</li>
+
+            <li>Add player spawned to game world/chat log</li>
+            <li>Pick Spawn</li>
+          </ul>
+        </div>
+
+        <div className={[styles.roadmap].join(' ')}>
+          <h2>Roadmap</h2>
+          <ul className={styles['roadmap-list']}>
+
+            <li>Load map position from query params</li>
+
+            <li>Mobile map drag</li>
+            <li>Zoom map</li>
+
+            <li>Moving</li>
+            <li>Fighting</li>
+            <li>Dying</li>
+            <li>Gathering</li>
+            <li>Building</li>
+            <li>Trading</li>
+            <li>Admin world create seed + spawns</li>
+            <li>Show worlds on profile</li>
+          </ul>
+        </div>
+
+        <div className={[styles.roadmap].join(' ')}>
+          <h2>Completed</h2>
+          <ul className={styles['roadmap-list']} style={{ textDecoration: 'line-through' }}>
+            <li>Add crosshair</li>
+            <li>Map centered offset</li>
+            <li>Load before position change</li>
+            <li>Move camera when selecting spawns</li>
+            <li>Track loaded chunks</li>
+            <li>Load tiles around center to fill out map</li>
+            <li>Move viewport to coordinate centred</li>
+            <li>Simulate some game log events</li>
+            <li>Click/select tiles</li>
+            <li>Chat/game log feed</li>
+            <li>Chunk positioning</li>
+            <li>Resize</li>
+            <li>Drag</li>
+            <li>HTML approach to map</li>
+            <li>Load Spawns</li>
+            <li>World user count</li>
+            <li>Add profile link</li>
+            <li>Complete profile/Onboarding</li>
+            <li>Allow avatar</li>
+            <li>Login</li>
+            <li>World select</li>
+            <li>World register</li>
+            <li>Add AuthContext and useAuthContext</li>
+            <li>Create protected/incomplete profile guard as effect</li>
+          </ul>
+        </div>
       </div>
     </Layout>
   )

diff --git a/public/global.css b/public/global.css
@@ -16,6 +16,6 @@ ul {
 }
 
 .panel {
-    padding: .5em;
+    padding: 1em;
     margin-bottom: 1em;
 }