Add quarantine state

README.md

@@ -2,7 +2,12 @@
 
 --- 
 
-Modified to add the  "app" factor by Marco Pierobon
+- Modified to add the  "quarantine" state by Giuseppe Sucameli
+    If a symptomatic person has the app installed, all the people having the app which had contacts with him are quarantined as well.
+
+
+- Modified to add the  "app" factor by Marco Pierobon
+    An infected person having the app installed stops moving, infected people having the app don't infect other people having the app.
 
 ---
 

package.json

@@ -43,4 +43,4 @@
       ]
     }
   }
-}
+}

src/Ball.js

@@ -2,9 +2,11 @@ import {
   BALL_RADIUS,
   COLORS,
   MORTALITY_PERCENTATGE,
+  SYMPTOMATIC_PERCENTAGE,
   TICKS_TO_RECOVER,
   RUN,
   SPEED,
+  MAXSPEED,
   STATES
 } from './options.js'
 import { checkCollision, calculateChangeDirection } from './collisions.js'
@@ -25,16 +27,19 @@ export class Ball {
     this.hasCollision = true
     this.survivor = false
     this.hasAppInstalled = hasAppInstalled
+    this.contacts = []
+    this.feelSick = null
   }
 
   checkState () {
-    if (this.state === STATES.infected) {
+    if (this.state === STATES.infected || this.state === STATES.quarantine) {
       if (RUN.filters.death && !this.survivor && this.timeInfected >= TICKS_TO_RECOVER / 2) {
         this.survivor = this.sketch.random(100) >= MORTALITY_PERCENTATGE
         if (!this.survivor) {
           this.hasMovement = false
+          const oldState = this.state
           this.state = STATES.death
-          RUN.results[STATES.infected]--
+          RUN.results[oldState]--
           RUN.results[STATES.death]++
           return
         }
@@ -44,14 +49,44 @@ export class Ball {
       }
 
       if (this.timeInfected >= TICKS_TO_RECOVER) {
+        const oldState = this.state
         this.state = STATES.recovered
-        RUN.results[STATES.infected]--
+        RUN.results[oldState]--
         RUN.results[STATES.recovered]++
         this.hasMovement = true
       } else {
         this.timeInfected++
       }
     }
+
+    // after a while it may feel sick
+    if (this.state === STATES.infected) {
+      if (this.feelSick === null && this.timeInfected >= TICKS_TO_RECOVER / 3) {
+        this.feelSick = SYMPTOMATIC_PERCENTAGE >= this.sketch.random(100)
+        if (this.feelSick) {
+          this.state = STATES.quarantine
+          RUN.results[STATES.infected]--
+          RUN.results[STATES.quarantine]++
+          return
+        }
+      }
+    }
+
+    // notify quarantine state to all contacts having app
+    if (this.state === STATES.quarantine) {
+      if (this.hasAppInstalled) {
+        for (let i = 0; i < this.contacts.length; i++) {
+          const otherBall = this.contacts[i]
+          if (otherBall.hasAppInstalled && otherBall.state === STATES.infected) {
+            otherBall.contacts.splice(otherBall.contacts.indexOf(this), 1)
+            otherBall.state = STATES.quarantine
+            RUN.results[STATES.infected]--
+            RUN.results[STATES.quarantine]++
+          }
+        }
+        this.contacts = []
+      }
+    }
   }
 
   checkCollisions ({ others }) {
@@ -73,13 +108,25 @@ export class Ball {
         otherBall.vx = ax
         otherBall.vy = ay
 
+        // limit vx and vy to MAXSPEED
+        this.vx = Math.max(Math.min(this.vx, MAXSPEED), -MAXSPEED)
+        this.vy = Math.max(Math.min(this.vy, MAXSPEED), -MAXSPEED)
+        otherBall.vx = Math.max(Math.min(otherBall.vx, MAXSPEED), -MAXSPEED)
+        otherBall.vy = Math.max(Math.min(otherBall.vy, MAXSPEED), -MAXSPEED)
+
         // both has same state, so nothing to do
         if (this.state === state) return
         // if any is recovered, then nothing happens
         if (this.state === STATES.recovered || state === STATES.recovered) return
+        // if any is in quarantine, then nothing happens
+        if (this.state === STATES.quarantine || state === STATES.quarantine) return
         // then, if some is infected, then we make both infected
         if (this.state === STATES.infected || state === STATES.infected) {
-          if (this.hasAppInstalled && otherBall.hasAppInstalled) return
+          // this and otherBall came in touch, update their contact list
+          if (this.contacts.indexOf(otherBall) === -1) {
+            this.contacts.push(otherBall)
+            otherBall.contacts.push(this)
+          }
           this.state = otherBall.state = STATES.infected
           RUN.results[STATES.infected]++
           RUN.results[STATES.well]--

src/app.js

@@ -10,6 +10,7 @@ import {
 
 import {
   replayButton,
+  appUsersPercSelect,
   deathFilter,
   stayHomeFilter
 } from './dom.js'
@@ -36,6 +37,7 @@ export const canvas = new window.p5(sketch => { // eslint-disable-line
         const hasMovement = RUN.filters.stayHome
           ? sketch.random(0, 100) < STATIC_PEOPLE_PERCENTATGE || state === STATES.infected
           : true
+        const hasAppInstalled = (Math.random() * 100) < RUN.filters.appUsersPercentage
 
         balls[id] = new Ball({
           id,
@@ -44,7 +46,7 @@ export const canvas = new window.p5(sketch => { // eslint-disable-line
           hasMovement,
           x: sketch.random(BALL_RADIUS, sketch.width - BALL_RADIUS),
           y: sketch.random(BALL_RADIUS, sketch.height - BALL_RADIUS),
-          has_app_installed: (Math.random() * 100) < peopleWithAppInPercentage.value
+          has_app_installed: hasAppInstalled
         })
         id++
       })
@@ -75,15 +77,21 @@ export const canvas = new window.p5(sketch => { // eslint-disable-line
       resetValues()
     }
 
-    deathFilter.onclick = () => {
-      RUN.filters.death = !RUN.filters.death
+    deathFilter.onchange = () => {
+      RUN.filters.death = deathFilter.checked
       document.getElementById('death-count').classList.toggle('show', RUN.filters.death)
       startBalls()
       resetValues()
     }
 
     stayHomeFilter.onchange = () => {
-      RUN.filters.stayHome = !RUN.filters.stayHome
+      RUN.filters.stayHome = stayHomeFilter.checked
+      startBalls()
+      resetValues()
+    }
+
+    appUsersPercSelect.onchange = () => {
+      RUN.filters.appUsersPercentage = parseInt(appUsersPercSelect.value)
       startBalls()
       resetValues()
     }

src/dom.js

@@ -1,6 +1,7 @@
 const $ = id => document.getElementById(id)
 
 export const replayButton = $('replay')
+export const appUsersPercSelect = $('app-users')
 export const deathFilter = $('deaths')
 export const stayHomeFilter = $('stay-home')
 export const graphElement = $('graph')

src/index.html

@@ -180,25 +180,29 @@ <h1>COVID-19 Spread Simulator 🦠</h1>
   <main>
     <header>
       <form>
+        <label aria-label="Set App Users percentage" title "App users">
+          <select id="app-users">
+            <option  value="0">0%</option>
+            <option selected="selected" value="25">25%</option>
+            <option value="50">50%</option>
+            <option value="65">65%</option>
+            <option value="80">80%</option>
+            <option value="100">100%</option>
+          </select>📱 App users&nbsp;
+	</label>
         <label aria-label="Activate People Stay At Home filter" title="People stay at home">
           <input id="stay-home" type="checkbox">🏠 Stay At Home
         </label>
         <label aria-label="Activate Deaths provoked by virus" title="Deaths provoked by virus">
-          <input id="deaths" type="checkbox">☠️ Show deaths
+          <input id="deaths" type="checkbox">☠️  Show deaths
         </label>
       </form>
 
       <div id="count">
-        <div>App users<br /><span id="app_users_span"><select id="app_users">
-          <option  value="0">0%</option>
-          <option selected="selected" value="25">25%</option>
-          <option value="50">50%</option>
-          <option value="60">60%</option>
-          <option value="80">80%</option>
-        </select></span></div>
         <div>Healthy<br /><span id="well">0</span></div>
-        <div>Recovered<br /><span id="recovered">0</span></div>
         <div>Sick<br /><span id="infected">0</span></div>
+        <div>Quarantine<br /><span id="quarantine">0</span></div>
+        <div>Recovered<br /><span id="recovered">0</span></div>
         <div id="death-count">Deaths<br /><span id="death">0</span></div>
         <div>Max Concurrently Sick<br /><span id="max-concurrent-infected">0</span></div>
       </div>
@@ -218,4 +222,4 @@ <h1>COVID-19 Spread Simulator 🦠</h1>
     Based on <a target="_blank" rel="noopener nofollow" href='https://www.washingtonpost.com/graphics/2020/world/corona-simulator/'>Washington Post article</a> | <a href='https://github.com/noiapp/covid-19-spread-simulator' target="_blank" rel="noopener nofollow">Source Code</a> | By <a href='https://midu.dev'>@midudev</a>
   </footer>
 </body>
-</html>
+</html>

src/options.js

@@ -1,4 +1,5 @@
 const DEFAULT_FILTERS = {
+  appUsersPercentage: 25,
   death: false,
   stayHome: false
 }
@@ -18,12 +19,14 @@ export const COLORS = {
   death: '#c50000',
   recovered: '#D88DBC',
   infected: '#5ABA4A',
+  quarantine: '#FF8136',
   well: '#63C8F2',
   app_installed: '#000000'
 }
 
 export const STATES = {
   infected: 'infected',
+  quarantine: 'quarantine',
   well: 'well',
   recovered: 'recovered',
   death: 'death'
@@ -41,6 +44,7 @@ export const COUNTERS = {
 
 export const STARTING_BALLS = {
   [STATES.infected]: 1,
+  [STATES.quarantine]: 0,
   [STATES.well]: 199,
   [STATES.recovered]: 0,
   [STATES.death]: 0,
@@ -54,7 +58,9 @@ export const RUN = {
 }
 
 export const MORTALITY_PERCENTATGE = 5
+export const SYMPTOMATIC_PERCENTAGE = 15
 export const SPEED = 1
+export const MAXSPEED = 10
 export const TOTAL_TICKS = 1600
 export const TICKS_TO_RECOVER = 500
 export const STATIC_PEOPLE_PERCENTATGE = 25