Add in notepad rings, see: #102

phetsims · Nov 1, 2022 · 3b9ae89 · 3b9ae89
1 parent 4d52c25
commit 3b9ae89
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 6 deletions.
diff --git a/images/license.json b/images/license.json
@@ -110,5 +110,13 @@
     "projectURL": "https://phet.colorado.edu",
     "license": "contact [email protected]",
     "notes": "created by Mariah Hermsmeyer"
+  },
+  "notepadRing.png": {
+    "text": [
+      "Copyright 2022 University of Colorado Boulder"
+    ],
+    "projectURL": "https://phet.colorado.edu",
+    "license": "contact [email protected]",
+    "notes": "created by Mariah Hermsmeyer"
   }
 }
diff --git a/images/notepadRing.png b/images/notepadRing.png
diff --git a/images/notepadRing_png.ts b/images/notepadRing_png.ts
@@ -0,0 +1,8 @@
+/* eslint-disable */
+import asyncLoader from '../../phet-core/js/asyncLoader.js';
+
+const image = new Image();
+const unlock = asyncLoader.createLock( image );
+image.onload = unlock;
+image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABFCAYAAAAB8xWyAAAACXBIWXMAAAsSAAALEgHS3X78AAALGUlEQVRoge1bb0xUVxb/3Znn/AHmOTPSNwrY6kQUFQobm5Htuls2U6OtQpnNplu7CtvW4r9JQzbtBlNbN5oITUhBM7YfmuxGE0B3NVBda2mlywdpELoV9qGwoRkJ9d88YJjM8KbwZvDuB4QFZN7MIHVw018yH+bec887v5x7zz33vvMIpRT/j2DmWiEhRA8g32QyvUIpXeHxeFIkSVKP96tUqhGWZXsUCsW/BEH4O4BGSqlnzu2YK48RQnI4jvtAEATLM888E0hNTV2Qnp4Ok8kEjuMm5ARBgMvlQkdHB9rb24PXr19njEZjk9vtPkApbZwTYzAHxAghOSzLnlywYMESm83GWK1WxMfHRzxeEAQ0NDSgrq7uXnx8fHd/f//uuSA4a2KEED3LsrWSJP1y+/btyry8vIcyRBRFnDt3DrW1tUGWZf8mCMK+h5misyJGCMlKSEhoXLt27cLi4uKoPBQOgiCgsrISN2/evO3xeLZQSttmoydqYkajce/g4ODxnTt34mG9JIeamhqcPXtWkiTpd5TSumjHR0XMaDTu/eGHH4699957yoyMjGifFTUaGhpw9OhRGAyGfW63+6NoxkZMbJxUWVmZ0mw2z8rQ2cDpdKKkpGRUq9W+FQ05RSRChJD8WJACALPZjF27dilFUawghGRFOi4sMUJIlkqlOr1r165HTmocVqsVe/bsUalUqub7CUBYhM08WJY9t2XLFpXVao3KGEEQwPM8nE4nbty4MdGekZEBjuOQnZ0dVTS1Wq3geV599erVywDSw8nLrjGDwfCXpKSkHWVlZRGnXjzPo6qqKnj9+nWG47iWoaGhf/r9/s/vd+sTExNzFArFzwVBsKxfvx55eXmINBCJooiSkpLRvr6+clEUS2ZFjBCSo9FovnQ4HMzklEjuoZWVlbh69eoIwzCVfr+/TG6DJYToExMT/+z1evds2LBB9eabb0bkQafTieLiYgBYTintCSUXco2xLHvSZrNFRIrnebz22muj3d3d5yVJWiyKYkm4rIFS6unr6yuWJMnU1tbWZLfbg06nM+yzzGYzcnNzwbKs7N42IzGj0bhXpVIlb9u2LeyDGhoa8O6770Kr1b41MDCQF20aRCn1DAwMbJAk6f2SkpLRSMi9+uqrCAQCGYSQnFAyMxILBAJHioqKwkbM5uZmHD16FABs0W6g0+H1eku1Wu1bkZCLj49HUVGRQqvVngkl84DxRqNx75NPPhmfnZ0tq9zpdOLDDz8cNRgM+2aT8swEt9v90Tg5QRBkZa1WK+Li4hYSQv4wU/8DxAKBwJH8/HzZKCiKIioqKkYVCkX5w3pqOtxu90csy54+fPjwaDjZ7du3M4mJiTNGxynECCH5arU6rLeqq6sxODjYES7kzhYul+v3g4ODt2tqamTlrFYrhoaGVsyUkUwhxnHcfpvNJustnudRX18veb3e/FlZHSG8Xm9eTU0Nwk3JjRs3Ko1G46Hp7RPECCHLBEGwhMswqqqqggzDVMjtIXMBSmmbXq//a3V1tazcSy+9hKGhoU3TU60JYjqdbtv69etlN0me59Hb2yv6/f6yhzU8Eng8nj9evnxZkouSHMdhyZIlSgBTZtBkj+0Jt7aqqqqChJAPfoxbpZlAKfWwLPvxuXPnZOU2btyo5Dhuz+Q2BTCW3ni93qVyxARBwHfffXfP5/N9PBdGR4r+/v7Kr776SnatZWdnw+PxZE5uG/dY/po1a4Jy0/DTTz9FQkJC/aPy1jgopT0cx7U0NzeHlOE4DjqdTjk5E1EAgNFo/E1mZqZsNGxqapLcbvf7c2VwNBAEobS+vl6Sk3n22WeZxMTEiXWmAIB79+6tS08PfcRxOp0YHh4WZ3tj9LCglNa5XC4qNx3vH302j/9XEEL0Ho8nSe5MdOXKFSQkJFycS2OjhV6vb5ebjmazGf39/avG/zMAshYtWhTkeT7kVPz6669H79+zxwyCIHzM87wl1JUfx3HQaDRBQkgWpbSNAeBRqVS3HA5HSKWBQGAYQOOPYnHkaGtvbw9C5jpjxYoVTEdHxzIAbcz9dbPsERk3a1BK29Rq9aggCCEPvxkZGXA6ndkA6iK6fpsvYFm2x+VyheyPj4+HTqfLAiK8V5wv0Gq1HR0dHSH7ly9fDkmSUoDHjNj333/fMTQ0JCuj0WgSgMeMGIC2yXeU02E2m3Hnzp2ngMePmCcYDA6H6pycEj5uxMa3nrB47IhFip+IPW74idh8gVKpjOjNz5xX5swVCCHL8L8cdgWALwFApVIlRDJ+XhEjhGRxHHdoeHj4VwAWrlmzxsMwjP7GjRvw+XwAALkNmud5GI1GFzBPiBFClhkMhjqtVrt28+bNjM1mQ1paGgBMuSu0WCwghMjqYhhmCJgHxAgh+RqN5nRubq7KbrdDp9OFlPX7/diwYUPIfkEQEAwG7wIxJvbEE0/sjYuLO3bgwAGlzWYLKz86OopVq1aF7BcEAXFxcR1ADIkRQrI0Gk1FeXm5UqfTYfoJnmVZWCyW8SmJ+vp6AMDWrVtD6nQ6nbh582YzEENiBoPhc5PJpNq/fz+Sk5ORlpaG5OTkif7Ozk6cOHECAGCz2dDa2gqGkTe3u7tbAtADxIgYy7JHfD6f6bnnnoPD4ZhCaDpaWlrgcDjQ2tqKxYsXh5QTRRFut1sFoA2I0QatVCoL3nnnHZSWlsqSAsYi4cmTJwEA+fmh31x9++234x7NB2JAjBCybGRkxPT6669HPObtt98GIQQvvvhiSBmn04nU1FSkpKS8AsRmKv5Wr9czBQUF6Orqgs/nQ1paGnQ6HZ5//nlYrdYHvHjp0iUkJSXJKr148SJeeOEFNDY2ZgAxIGYwGH6WkpKCwsJC6HQ6JCcn49atW7h169bEekpLS4PdbofFYsHly5cxMjKCnTt3htQpiiL8fj8KCgpw9uzZJCAGxJKSkgIWiwWT35yOe8hms8Hn8+HEiROw2+2w2Wy4cOECNBoN1q1bF1LnmTNnoNVqsXLlyom2eZfd63Q62O121NbW4osvvsDAwADeeOMN2TFNTU1Yu3btlLZHTuzatWs9ANDV1SUrl5ycjIGBAahUKmzatCmknCiKuHv3LnJzcycSZSA2Hmv75JNPYLPZsHr1alitVpSWlk4xCgB27NiBQCCAgwcPyiqrqxurnXn55ZfR2dmJRYsW3QZiREySJLS0tKCzsxPHjx+H1+uF1WpFbW0tgLEI98033yAzMzNsyd+FCxfo008/DWCsrgtAPRCD4EEp7VmyZMl/Ll26tGr8eFJaWoqWlhbY7XZ4PB6Ul5dDq9WipES+PobneYiiSIqKiuDz+XDmzJlRv99/DJjDT0CiASEkx2QyfXn+/Hlm8jGlsbER+/btA6UU1dXVYesXd+/efe/27duKzs5OOBwOnD59+lpfX186EKOoSCltlCTp2pEjRybafD7fxHqqqKgIS4rnedy5c0eh1+vR1dWF48ePo7+/f/t4f0w8BoyVYKjV6rsHDx5Ur169GoWFhfD7/Th8+PADoXsmFBYWAgAyMzPR2tp6b8GCBQcGBwdLJ/TH8vux+xXirYFAgNFqtTh27BgiqWg9deoUqqurkZqait7eXrpw4cJ/uFyuKe9wY7pBU0rbJEn6NaVU9Pv9OHToUNiiMFEUcerUKaxcuRLd3d1Qq9WHp5MCYuyxCSPGCrxOAdgEjG3OOTk52Lp168Ra++yzz3DlyhW0t7eDUoqlS5fW9/b2/olS+u8ZlVJK580PY/eIlwghfgB0+o8QMqpQKLoB/CKcrnnhMTkQQvSzKXP6L1hkJqxfcnS/AAAAAElFTkSuQmCC';
+export default image;
diff --git a/js/common/MeanShareAndBalanceConstants.ts b/js/common/MeanShareAndBalanceConstants.ts
@@ -52,11 +52,11 @@ const MeanShareAndBalanceConstants = {
   CHOCOLATE_HEIGHT: 12,
   PERSON_WIDTH: 105,
 
-  PLATE_CHOCOLATE_CENTER_Y: 250,
+  PLATE_CHOCOLATE_CENTER_Y: 310,
   PEOPLE_CENTER_Y: 500,
   MAX_NUMBER_OF_CHOCOLATES: 10,
   MIN_NUMBER_OF_CHOCOLATES: 0,
-  NOTEBOOK_PAPER_CENTER_Y: 240
+  NOTEBOOK_PAPER_CENTER_Y: 220
 
 };
 

diff --git a/js/common/view/NoteBookPaperNode.ts b/js/common/view/NoteBookPaperNode.ts
@@ -8,15 +8,41 @@
  */
 
 import meanShareAndBalance from '../../meanShareAndBalance.js';
-import { Node, Image } from '../../../../scenery/js/imports.js';
+import { Node, Rectangle, Image } from '../../../../scenery/js/imports.js';
 import MeanShareAndBalanceConstants from '../MeanShareAndBalanceConstants.js';
-import notebookPaperBackground_png from '../../../images/notebookPaperBackground_png.js';
+import notepadRing_png from '../../../images/notepadRing_png.js';
 
 export default class NoteBookPaperNode extends Node {
 
   public constructor() {
-    const background = new Image( notebookPaperBackground_png, { scale: 0.48 } );
-    super( { children: [ background ], centerY: MeanShareAndBalanceConstants.NOTEBOOK_PAPER_CENTER_Y } );
+
+    const paperStackNode = new Node();
+    const paperWidth = 700;
+    const paperHeight = 240;
+    const paperStackHeight = 4;
+    const stackOffset = 3;
+
+    for ( let i = paperStackHeight; i > 0; i-- ) {
+      const xOffset = i * -stackOffset;
+      const yOffset = i * stackOffset;
+      const paper = new Rectangle( xOffset, yOffset, paperWidth, paperHeight, {
+        fill: 'white',
+        stroke: 'black',
+        cornerRadius: 10
+      } );
+      paperStackNode.addChild( paper );
+    }
+
+    const rings = [];
+    const numberOfRings = 6;
+
+    for ( let i = 0; i < numberOfRings; i++ ) {
+      const x = i * ( ( paperWidth - 20 ) / numberOfRings ) + 30;
+
+      rings.push( new Image( notepadRing_png, { x: x, y: -21.5, scale: 0.8 } ) );
+    }
+
+    super( { children: [ paperStackNode, ...rings ], centerY: MeanShareAndBalanceConstants.NOTEBOOK_PAPER_CENTER_Y } );
   }
 }