Merge pull request #3 from fkleon/feature-local-storage-and-header-de…

…sign

Local storage and updated header design

src/models/constants.ts

@@ -0,0 +1,37 @@
+export const LOCAL_STORAGE_KEY = 'growth-data';
+
+export const TAGLINES = [
+  {
+    quote: 'Because paper charts are hard.',
+    author: 'Millenial',
+    source: 'Tales of the Digital Age',
+  },
+  {
+    quote: "Who's got the time and energy to find the damn paper?",
+    author: 'A new parent',
+    source: 'Children of Fury',
+  },
+  {
+    quote: 'My toddler destroyed the original!',
+    author: 'Anonymous parent',
+    source: 'Chronicles of the Twisted Paper',
+  },
+];
+
+// see chart.scss
+export const COLOURS = [
+  '#0544d3',
+  '#d17905',
+  '#59922b',
+  '#d70206',
+  '#6b0392',
+  '#f4c63d',
+  '#453d3f',
+  '#e6805e',
+  '#dda458',
+  '#eacf7d',
+  '#86797d',
+  '#b2c326',
+  '#6188e2',
+  '#a748ca',
+];

src/models/export.ts

@@ -22,7 +22,11 @@ const reviver = (key: string, value: any): any => {
 };
 
 function exportState<T>(state: T): string {
-  const serialisedState = JSON.stringify(state);
+  return JSON.stringify(state);
+}
+
+function exportStateBase64Url<T>(state: T): string {
+  const serialisedState = exportState(state);
   const encodedState = b64EncodeUnicode(serialisedState);
   return `data:application/json;base64,${encodedState}`;
 }
@@ -31,4 +35,4 @@ function importState<T>(state: string): T {
   return JSON.parse(state, reviver);
 }
 
-export {exportState, importState};
+export {exportState, exportStateBase64Url, importState};

src/models/state.ts

@@ -1,6 +1,7 @@
 import {LocalDate, Period} from '@js-joda/core';
 import charts, {ChartConfig} from '../data/who';
 import {SeriesObject} from 'chartist';
+import {COLOURS, TAGLINES} from './constants';
 
 // State and actions definitions
 type MitosisAttr<S, A> = {
@@ -10,11 +11,17 @@ type MitosisAttr<S, A> = {
 
 // Root
 interface App {
+  tagline: {
+    quote: string;
+    author: string;
+    source: string;
+  };
   children: Child[];
   chart: Chart;
 }
 
 const AppState = (): App => ({
+  tagline: TAGLINES[Math.floor(Math.random() * TAGLINES.length)],
   children: [ChildState()],
   chart: ChartState(),
 });
@@ -28,6 +35,9 @@ interface IAppActions {
 
 const AppActions = (app: App): IAppActions => ({
   addChild: (child: Child = ChildState()) => {
+    if (child.open) {
+      app.children.forEach(c => (c.open = false));
+    }
     app.children.push(child);
   },
   removeChild: (idx: number) => {
@@ -40,30 +50,13 @@ const AppActions = (app: App): IAppActions => ({
 
 type Sex = 'female' | 'male';
 
-// see chart.scss
-const COLOURS = [
-  '#0544d3',
-  '#d17905',
-  '#59922b',
-  '#d70206',
-  '#6b0392',
-  '#f4c63d',
-  '#453d3f',
-  '#e6805e',
-  '#dda458',
-  '#eacf7d',
-  '#86797d',
-  '#b2c326',
-  '#6188e2',
-  '#a748ca',
-];
-
 // Child
 interface Child {
   idx: number;
   name: string | null;
   dateOfBirth?: LocalDate;
   sex: Sex | null;
+  open: boolean;
   colourHex?: string;
   age?: Period; // computed
   measurements: Measurement[];
@@ -83,6 +76,7 @@ interface IChildActions {
 
 const ChildState = (): Child => ({
   idx: 0,
+  open: true,
   name: null,
   dateOfBirth: undefined,
   sex: null,
@@ -216,5 +210,4 @@ export {
   ChartState,
   IChartActions,
   ChartActions,
-  COLOURS,
 };

src/styles/index.scss

@@ -1,42 +1,92 @@
 @import url('https://fonts.googleapis.com/css2?family=Jersey+15&display=swap');
 
 body {
-  min-width: 300px;
-  background-image: linear-gradient(
-    to bottom,
-    #fae0b4 200px,
-    white 250px,
-    white 100%
-  );
+  min-width: 350px;
+
+  background-image: linear-gradient(to bottom,
+      #fae0b4 200px,
+      white 275px,
+      white 100%);
+}
+
+h2 {
+  font-family: 'Jersey 15', sans-serif;
+  font-weight: 400;
+  font-size: 3em;
+  text-transform: uppercase;
+
+  &::before {
+    content: '> ';
+  }
+
+  &::after {
+    content: ' <';
+  }
+}
+
+header {
+  // flex row layout
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
 }
 
 .logo {
   background-clip: content-box;
-
-  background-color: #fcfcfc;
   background-image: url('../assets/logo.png');
   background-position: left;
   background-repeat: no-repeat;
   background-size: contain;
 
-  border-style: solid;
   border-radius: 40px;
+  border-width: 8px;
+  border-top-style: dashed;
+  border-top-width: 3px;
+  border-bottom-style: dashed;
+  border-bottom-width: 3px;
+  border-right-style: solid;
+  border-left-style: solid;
+
+  margin: 5px 5px;
+
+  width: 200px;
+  min-width: 200px;
+  height: 200px;
 
+  &:hover {
+    transform: scale(-1, 1);
+  }
+}
+
+.title-container {
+  // flex column layout
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+}
 
-  height: 200px;
+.title {
+  font-family: 'Jersey 15', sans-serif;
+  font-weight: 400;
+  font-style: bold;
+  font-size: calc(2em + 2 * (100vw - 120px) / 100);
 
-  .title {
-    margin-left: 200px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.tagline {
+  text-align: center;
+}
 
-    font-family: 'Jersey 15', sans-serif;
-    font-weight: 400;
-    font-style: bold;
-    font-size: calc(2em + 2 * (100vw - 120px) / 100);
+blockquote {
+  p::before {
+    content: '\201C';
+  }
 
-    text-transform: uppercase;
+  p::after {
+    content: '\201D';
   }
 }
 
@@ -104,7 +154,7 @@ input:invalid {
   padding-left: 0.5em;
 }
 
-input:not(:placeholder-shown):invalid + .error {
+input:not(:placeholder-shown):invalid+.error {
   display: inline-block;
 }
 
@@ -141,6 +191,7 @@ caption {
 
 // Small screens
 @media only screen and (max-width: 820px) {
+
   // Force table to not display like tables anymore
   table,
   thead,
@@ -182,4 +233,4 @@ caption {
     font-weight: bold;
     content: attr(data-label);
   }
-}
+}