add some stuff but it's not a game yet

isthisstackoverflow · Jan 29, 2023 · eddaea0 · eddaea0
1 parent e97af60
commit eddaea0
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 32 deletions.
diff --git a/pages/ratstack/index.html b/pages/ratstack/index.html
@@ -12,7 +12,9 @@
   <body>
     <div id="map"></div>
     <div id="user-interface">
-      ¯¯¯¯¯¯¯¯¯¯¯¯¯🐀 RATS ATE MY PROJECT.
+      <header id="headerbox"></header>
+      <div id="modalbox"></div>
+      <footer id="infobox"></footer>
     </div>
     <script type="module" src="./index.js"></script>
   </body>

diff --git a/pages/ratstack/index.js b/pages/ratstack/index.js
@@ -1,3 +1,37 @@
 import { createMap } from './map/createMap.js'
+import { getRandomPart } from './map/getRandomPart.js';
+import { districtSource } from './map/districts.js';
 
-createMap()
+const map = createMap()
+
+const headerbox = document.getElementById('headerbox')
+const infobox = document.getElementById('infobox')
+const modalbox = document.getElementById('modalbox')
+
+const playerFaction = getRandomPart(districtSource.getFeatures())
+window.goto = (duration = 2000) => map.getView().fit(playerFaction.getGeometry(), { duration })
+
+const updateHeader = (emoji) => headerbox.innerHTML = `
+  <span>Your Faction</span>
+  <h1>${emoji} ${playerFaction.properties.factionName}</h1>
+`
+updateHeader('🐀')
+goto(5000)
+
+const infodefault = 'Hover any region to display information.'
+infobox.innerHTML = infodefault
+map.on('pointermove', function (e) {
+  infobox.innerHTML = infodefault
+  map.forEachFeatureAtPixel(e.pixel, function (feature) {
+    infobox.innerHTML = `
+      Faction: ${feature.properties.factionName}<br />
+      Rats: ${feature.properties.rats}<br />
+      Food: ${feature.properties.food}
+    `
+    return true
+  })
+})
+
+modalbox.innerHTML = `
+  OH MAN I FORGOT TO IMPLEMENT GAMEPLAY
+`
diff --git a/pages/ratstack/map/createMap.js b/pages/ratstack/map/createMap.js
@@ -1,4 +1,5 @@
-import { districtVector, select } from "./districts.js"
+import { districtVector, hover } from "./districts.js"
+const { defaults } = ol.interaction.defaults
 
 const { Map, View } = ol
 const { Tile } = ol.layer
@@ -21,8 +22,7 @@ export const createMap = () => new Map({
     }),
     districtVector
   ],
-  interactions: [
-    select
-  ],
+  controls: [],
+  interactions: [hover],
   target,
 });
diff --git a/pages/ratstack/map/districts.js b/pages/ratstack/map/districts.js
@@ -1,34 +1,49 @@
 // Knowing that one day JSON can be loaded fills you with determination.
 // import districts from './districts.json' assert {type: 'json'}
 import { districts } from './districtsjson.js'
+import { enrat } from './enrat/index.js'
 
 const VectorLayer = ol.layer.Vector
 const VectorSource = ol.source.Vector
 const { Select } = ol.interaction
 const { GeoJSON } = ol.format
 const { pointerMove } = ol.events.condition
-const { Stroke, Style, Fill } = ol.style
+const { Stroke, Style, Fill, Text } = ol.style
 
-const style = new Style({
-  stroke: new Stroke({ color: '#333', width: 1 }),
-  fill: new Fill({ color: 'rgba(255,255,255,0)' })
+const text = (feature) => new Text({
+  font: '22px sans-serif',
+  overflow: true,
+  text: feature.properties.factionName,
+  fill: new Fill({color: feature.properties.hex}),
+  stroke: new Stroke({color: '#16161D', width: '2'}),
+  textAlign: 'center'
 })
 
-const hoverStyle = new Style({
-  stroke: new Stroke({ color: '#000', width: 3 }),
-  fill: new Fill({ color: 'rgba(255,255,255,0.0)' })
+const style = (feature) => new Style({
+  stroke: new Stroke({ color: '#333', width: 2 }),
+  fill: new Fill({ color: feature.properties.hex + '66' }),
+  text: text(feature)
+})
+
+const hoverStyle = (feature) => new Style({
+  stroke: new Stroke({ color: '#16161D', width: 4 }),
+  fill: new Fill({ color: feature.properties.hex + 'CC' }),
+  text: text(feature)
 })
 
 export const districtSource = new VectorSource({
-  features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(districts)
+  features:
+    new GeoJSON({ featureProjection: 'EPSG:3857' })
+      .readFeatures(districts)
+      .map(enrat)
 })
 
 export const districtVector = new VectorLayer({
   source: districtSource,
   style
 })
 
-export const select = new Select({
+export const hover = new Select({
   condition: pointerMove,
   style: hoverStyle
 })
diff --git a/pages/ratstack/map/enrat/getFactionName.js b/pages/ratstack/map/enrat/getFactionName.js
@@ -0,0 +1,46 @@
+import { getRandomPart } from '../getRandomPart.js'
+
+const hadThat = ['']
+
+const starts = [
+  'Red', 'Orange', 'Blue', 'Yellow',
+  'Green', 'Black', 'White', 'Ultraviolet',
+  'Deadly', 'Amazing', 'Dangerous', 'Astonishing',
+  'Töfte', 'Knorke', 'Schnieke',
+  'Sewer', 'Underground',
+  'Tunnel',
+  ''
+]
+
+const mids = [
+  'Rodent', 'Rat', 'Critter', 'Creature', 'Vermin',
+  'Tea', 'Sausage', 'Schinken', 'Cheese',
+  'Nager',
+  'Snake',
+  ''
+]
+
+const ends = [
+  'Killers', 'Sacks', 'Boys', 'Dimwits',
+  'Masters', 'Heroes', 'Team', 'Force',
+  'Pack', 'Horde', 'Flut',
+  'Rules',
+  ''
+]
+
+/**
+ * @returns {string} randomized faction name
+ */
+export const getFactionName = () => {
+  let name = ''
+  // reroll until unique - need lots of source names
+  while (hadThat.includes(name)) {
+    name = [
+      getRandomPart(starts),
+      getRandomPart(mids),
+      getRandomPart(ends)
+    ].join(' ').trim()
+  }
+  hadThat.push(name)
+  return name
+}
diff --git a/pages/ratstack/map/enrat/getRandomHex.js b/pages/ratstack/map/enrat/getRandomHex.js
@@ -0,0 +1,5 @@
+export const getRandomHex = () =>
+  '#' +
+    Math.round(Math.random() * 0xffffff)
+      .toString(16)
+      .padStart(6, '0')
diff --git a/pages/ratstack/map/enrat/index.js b/pages/ratstack/map/enrat/index.js
@@ -0,0 +1,14 @@
+import { getFactionName } from "./getFactionName.js"
+import { getRandomHex } from "./getRandomHex.js"
+
+const makeFeatureProperties = () => ({
+  factionName: getFactionName(),
+  hex: getRandomHex(),
+  rats: Math.floor(Math.random() * 900) + 101,
+  food: Math.floor(Math.random() * 900) + 101,
+})
+
+export const enrat = feature => {
+  feature.properties = makeFeatureProperties()
+  return feature
+}
diff --git a/pages/ratstack/map/getRandomPart.js b/pages/ratstack/map/getRandomPart.js
@@ -0,0 +1,5 @@
+/**
+ * @param {*[]} a array of something
+ * @returns {*} random value from array
+ */
+export const getRandomPart = a => a[Math.floor(Math.random() * a.length)]
diff --git a/pages/ratstack/src/lib/randomColor.js b/pages/ratstack/src/lib/randomColor.js
diff --git a/pages/ratstack/style.css b/pages/ratstack/style.css
@@ -1,5 +1,6 @@
 * {
   font-family: 'Courier New', monospace;
+  color: #16161D;
 }
 
 html, body {
@@ -22,4 +23,40 @@ html, body {
 
 #user-interface * {
   pointer-events: all;
-}
+}
+
+#headerbox {
+  position: absolute;
+  top: 0;
+  background: white;
+  border: 1px solid #16161D;
+  padding: 1em;
+  margin: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#headerbox h1 {
+  margin: 0;
+  white-space: nowrap;
+}
+
+#infobox {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #16161D;
+  padding: 1em;
+  margin: 1em;
+}
+
+#modalbox {
+  position: absolute;
+  background: white;
+  color: #16161D;
+}