diff --git a/pages/ratstack/index.html b/pages/ratstack/index.html index 77e3fab..807a6da 100644 --- a/pages/ratstack/index.html +++ b/pages/ratstack/index.html @@ -12,7 +12,9 @@
- ¯¯¯¯¯¯¯¯¯¯¯¯¯🐀 RATS ATE MY PROJECT. +
+ +
diff --git a/pages/ratstack/index.js b/pages/ratstack/index.js index f5217cc..e32b0d1 100644 --- 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() \ No newline at end of file +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 = ` + Your Faction +

${emoji} ${playerFaction.properties.factionName}

+` +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}
+ Rats: ${feature.properties.rats}
+ Food: ${feature.properties.food} + ` + return true + }) +}) + +modalbox.innerHTML = ` + OH MAN I FORGOT TO IMPLEMENT GAMEPLAY +` \ No newline at end of file diff --git a/pages/ratstack/map/createMap.js b/pages/ratstack/map/createMap.js index 0a403a5..4b4d6b0 100644 --- 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, }); \ No newline at end of file diff --git a/pages/ratstack/map/districts.js b/pages/ratstack/map/districts.js index dda3c26..1da8dd8 100644 --- a/pages/ratstack/map/districts.js +++ b/pages/ratstack/map/districts.js @@ -1,26 +1,41 @@ // 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({ @@ -28,7 +43,7 @@ export const districtVector = new VectorLayer({ 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 new file mode 100644 index 0000000..b9176ac --- /dev/null +++ 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 new file mode 100644 index 0000000..c298e39 --- /dev/null +++ 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 new file mode 100644 index 0000000..de93940 --- /dev/null +++ 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 new file mode 100644 index 0000000..df40aa5 --- /dev/null +++ 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 deleted file mode 100644 index 1fcea68..0000000 --- a/pages/ratstack/src/lib/randomColor.js +++ /dev/null @@ -1,16 +0,0 @@ -import shuffle from 'lodash.shuffle' - -export const getRandomHex = () => - '#' + - Math.round(Math.random() * 0xffffff) - .toString(16) - .padStart(6, '0') - -const ls = [20, 35, 50] - -export const getHslColorsFor = array => - shuffle(array.map((_, i) => ({ - h: i * (360 / (array.length / 3)) % 360, - s: 100, - l: ls[i % 3] - }))) diff --git a/pages/ratstack/style.css b/pages/ratstack/style.css index 82641d9..4ff3a1d 100644 --- 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; -} \ No newline at end of file +} + +#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; +}