Small UI changes (more spacing)

remove unused vite config
Add disclaimer about crowd density
2022-03-27 22:28:49 +02:00 · 2022-03-27 22:28:33 +02:00 · 2022-03-27 21:56:56 +02:00 · 2022-03-27 21:56:15 +02:00 · 2022-03-27 16:23:17 +02:00 · 2022-03-27 16:10:04 +02:00
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.local
--- a/index.html
+++ b/index.html
@ -9,8 +9,8 @@
    <meta property="og:url" content="https://www.mapchecking.com/" />
    <meta property="og:image" content="https://www.mapchecking.com/socialimage.png" />
    <meta property="og:site_name" content="MapChecking" />
-    <title>MapChecking - Crowd size estimator</title>
-    <meta name="description" content="MapChecking helps you estimate the number of people standing in a given area. Fact check and debunk political claims during gatherings, march, and protests."/>
+    <title>MapChecking - Crowd size estimation tool</title>
+    <meta name="description" content="MapChecking helps you estimate the number of people standing in a given area. Fact check and debunk political claims during gatherings, march, and protests. #OSINT"/>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </head>
 <body>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,10 +7,10 @@
  },
  "dependencies": {
    "@googlemaps/js-api-loader": "^1.4.0",
-    "@vitejs/plugin-vue": "^1.2.4",
-    "between": "git+https://github.com/paraboul/between.git",
+    "@vitejs/plugin-vue": "^2.2.4",
    "js-base64": "^3.5.2",
-    "tailwindcss": "^2.2.4",
+    "tailwindcss": "^3.0.23",
+    "tatween": "^0.2.0",
    "vue": "^3.0.0-rc.1"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,9 @@
 <template>
    <div class="md:flex flex-1 md:items-stretch md:flex-row">
-        <div class="h-2/3 md:h-full w-full">
+        <div class="h-[60%] md:h-full w-full">
            <Map :density="density" :startHash="startHash" ref="map" @densityChange="densityUpdate" @hashChange="hashUpdate" @surfaceUpdate="surfaceUpdate" />
        </div>
-        <div class="flex flex-col relative w-full lg:w-2/3 py-2 md:px-4 font-sans md:border-l border-gray-500 bg-gray-100">
+        <div class="flex flex-col relative w-full lg:w-2/3 py-2 md:px-4 font-sans md:border-l border-gray-500 bg-slate-100">
            <div class="order-last md:order-first px-4 mb-4 md:mb-0 md:px-0">
                <h1 class="text-xl md:text-2xl">MapChecking &bull; Crowd size estimation</h1>
                <span class="text-gray-800 leading-tight">This tool helps you estimate and fact-check the maximum number of people standing in a given area.</span> 
@ -16,17 +16,17 @@
                    <span class="text-sm text-gray-700">Surface area <span class="font-semibold">{{ formatArea(surface) }}sqm</span> &bull; <span class="font-semibold">{{ formatArea(surface_feet) }}sqft</span></span>

                    <button @click="$refs.map.reset()" class="rounded absolute right-0 px-2 py-1 text-xs inline-block bg-red-400 shadow-md text-white font-bold hover:shadow-none focus:outline-none">Reset the area</button>
-                    <div class="mt-2">
+                    <div class="mt-2 space-y-2">
                        <span class="font-semibold">Crowd density <span class="text-xs text-gray-700"><a class="underline hover:no-underline" target="_blank" href="http://www.gkstill.com/Support/crowd-density/625sm/Density6.html">What does it look like?</a></span></span>
                        <input class="block w-full" type="range" min="0.1" max="5.0" step="0.05"  v-model.number="density" />
                    </div>

-                    <div class="flex justify-around pt-2">
+                    <div class="flex justify-around pt-2 mt-2">
                        <button @click="setDensity(0.3)" class="btn">Light</button>
                        <button @click="setDensity(2)" class="btn">Crowded</button>
                        <button @click="setDensity(4)" class="btn">Packed</button>
                    </div>
-                    <div class="text-center mt-1">
+                    <div class="text-center mt-2">
                        <span class="block font-semibold text-teal-600">{{ density.toFixed(2) }} people per sqm <small>(~10 sqft)</small></span>
                        <span class="inline-block mt-2 text-xl font-bold text-gray-800">{{ estimated }} estimated</span>
                    </div>
@ -35,17 +35,25 @@
                    Start by delimiting an area on the map
                </div>
            </div>
+            <div class="shadow-md md:rounded-md px-4 py-3 bg-red-50 shadow-red-100 md:mt-4  mb-4 md:mb-1 text-sm text-red-600">
+                ⚠️ It's easy to overestimate the density as the crowd is rarely uniformly packed. This is what <strong>2 people per square meter</strong> looks like from a low angle :
+                <div class="flex space-x-2 mt-1">
+                    <a class="font-semibold underline hover:no-underline" target="blank" href="https://www.gkstill.com/_Media/3-4_med_hr.png">Image 1</a>
+                    <a class="font-semibold underline hover:no-underline" target="blank" href="https://www.gkstill.com/_Media/4-4_med_hr.png">Image 2</a>
+                    <a class="font-semibold underline hover:no-underline" target="blank" href="https://www.gkstill.com/_Media/2-2_med_hr.png">Image 3</a>
+                    <span>(<a class="underline hover:no-underline" href="https://www.gkstill.com/Support/crowd-density/CrowdDensity-1.html">source</a>)</span>
+                </div>
+            </div>
            <div class="shadow-md md:rounded-md px-4 py-3 bg-white md:mt-4 mb-4 md:mb-8">
                <h2 class="font-bold mb-2">Examples</h2>

-                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAABAQJtzQ0LZXRJAAACQQRh0Q0JORBJA03NDQsdDEkC4c0NCrU4SQF5zQ0IFUhJAJnNDQoBWEkD5ckNCglsSQCFzQ0J_ZhJAlXNDQsdwEkDVc0NCT3ESQA90Q0LgfRJAXXRDQnh8EkAhdENCQHASQFB0Q0K9bBJAqXRDQu9uEkDadENCwGkSQHl0Q0JSZhJAe3RDQiNhEkB-dENCaV4SQNt0Q0KnXBJA4XRDQkJYEkCYdENC9lgSQGp0Q0LAWRJAWnRDQuhXEkC8dENC-k0SQH90Q0K2SRJAD3RDQiNREkA')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place du Trocadero - Paris</a>
+                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAAAgQJtzQ0LZXRJAAACQQVdzQ0K-UxJAlHNDQl5REkDTc0NCz1ESQP9zQ0KFUxJAHnRDQv5WEkA8dENC51oSQEF0Q0LRXhJAPnRDQldjEkA2dENCo2YSQA50Q0KPaxJA_HNDQq5uEkDac0NCV28SQJRzQ0IhcBJAYnNDQvFuEkAzc0NCEWoSQPNyQ0LIXxJAGnNDQsNZEkA')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place du Trocadero - Paris</a>
                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAAAAQEJ4Q0IdShdAAACQQcp4Q0IfKxdAeXlDQtI7F0CseENClVIXQNl3Q0IeaBdAG3dDQnlYF0A')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place de la République</a>
                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAAAAQHoRUkLzzlVBAABwQRsPUkISoVVB0A5SQhKhVUF_EFJChAhWQccQUkJBCFZB')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Tiergatern - Berlin</a>
            </div>
-
-            <div class="flex justify-around text-center order-last bg-white p-3 text-xs tracking-tight border-t border-gray-300">
+            <div class="grow"></div>
+            <div class="flex space-x-4 order-last bg-white p-4 text-xs tracking-tight md:-mx-4 items-center font-medium justify-center">
                <span>Created by Anthony Catel</span>
-
                <a href="https://twitter.com/antcatel?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @antcatel</a>
            </div>
 <!--             <div class="bottom-0 left-0 md:absolute h-8 bg-white border-t border-gray-300 w-full text-xs tracking-tight text-center py-2">Created by Anthony Catel</div> -->
@ -55,7 +63,7 @@

 <script>
 import Map from './components/Map.vue'
-import Between from 'between'
+import { tatween, Easing } from 'tatween';

 export default {
    name: 'App',
@ -73,7 +81,7 @@ export default {
        },

        densityUpdate(val) {
-            this.density = val;
+            this.density = Math.round(val * 100) / 100;
        },

        formatArea(val) {
@ -81,9 +89,9 @@ export default {
        },

        setDensity(val) {
-            Between.block(800, Between.easing.Exponential.Out, (obj) => {
+            tatween(800, Easing.Exponential.Out, (obj) => {
                obj.density = val;
-            }, this);
+            }, this)
        }
    },

--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@ -194,7 +194,7 @@
                    this.surfaceUpdated();
                }

-                this.$emit('densityChange', parseInt(meta[0]));
+                this.$emit('densityChange', parseFloat(meta[0]));
            },

            loadLegacyHash(hash) {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,69 +1,10 @@
-const colors = require('tailwindcss/colors')
-
 module.exports = {
-  mode: 'jit',
-  future: {
-//    removeDeprecatedGapUtilities: true,
-//    purgeLayersByDefault: true,
-  },
-  purge: {
-    enabled: true,
-    layers: ['utilities'],
-    content: [
-      "./src/**/*.vue",
-      "./index.html"
-    ]
-  },
-  theme: {
-    extend: {
-      colors: {
-        indigo: '#5c6ac4',
-        blue: '#007ace',
-        nidium: '#3eb7b3',
-        teal: colors.teal,
-        gray: {
-            100: '#f7fafc',
-            200: '#edf2f7',
-            300: '#e2e8f0',
-            400: '#cbd5e0',
-            500: '#a0aec0',
-            600: '#718096',
-            700: '#4a5568',
-            800: '#2d3748',
-            900: '#1a202c',
-          },
-      },

-      height: {
-        '1/2': '50%',
-        '1/3': '33.333333%',
-        '2/3': '66.666667%',
-        '1/4': '25%',
-        '2/4': '50%',
-        '3/4': '75%',
-        '1/5': '20%',
-        '2/5': '40%',
-        '3/5': '60%',
-        '4/5': '80%',
-        '1/6': '16.666667%',
-        '2/6': '33.333333%',
-        '3/6': '50%',
-        '4/6': '66.666667%',
-        '5/6': '83.333333%',
-        '1/12': '8.333333%',
-        '2/12': '16.666667%',
-        '3/12': '25%',
-        '4/12': '33.333333%',
-        '5/12': '41.666667%',
-        '6/12': '50%',
-        '7/12': '58.333333%',
-        '8/12': '66.666667%',
-        '9/12': '75%',
-        '10/12': '83.333333%',
-        '11/12': '91.666667%'
-      }
-    },
-  },
+  content: [
+    "./src/**/*.vue",
+    "./index.html"
+  ],
+
  variants: {},
  plugins: [],
 }
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+export default defineConfig({
+    plugins: [
+        vue({}),
+    ],
+
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src')
+        },
+    },
+
+    server: {
+        https: false,
+    }
+})
--- a/yarn.lock
+++ b/yarn.lock
Autor	SHA1	Wiadomość	Data
Anthony Catel	d766830206	Small UI changes (more spacing)	2022-03-27 22:28:49 +02:00
Anthony Catel	82612d2f05	remove unused vite config	2022-03-27 22:28:33 +02:00
Anthony Catel	1fe3391c81	Add disclaimer about crowd density	2022-03-27 21:56:56 +02:00
Anthony Catel	2a65deb43e	tailwind cleanup	2022-03-27 21:56:15 +02:00
Anthony Catel	c4fcb487cd	density should be a parsed as a float	2022-03-27 16:23:17 +02:00
Anthony Catel	e13c88c8c5	"Place du Trocadero", default to 2.5 p/sqm	2022-03-27 16:10:04 +02:00
Anthony Catel	c1d43c6ec5	Update "Place du Trocadero" default zone to reflect more realistic crowds	2022-03-27 16:05:52 +02:00
Anthony Catel	6a36800d35	Update packages	2022-03-27 16:05:30 +02:00