get geolocation from weather app, revise clock appearance to match new

launch page

pkg/arvo/app/clock.hoon

@@ -8,7 +8,17 @@
   ==
 =,  format
 ::
+|%
+::
++$  card  card:agent:gall
++$  versioned-state
+  $%  state-zero
+  ==
++$  state-zero  [%0 data=json]
+--
 %+  verb  |
+=|  state-zero
+=*  state  -
 ^-  agent:gall
 |_  =bowl:gall
 +*  this  .
@@ -17,7 +27,7 @@
 ++  on-init
   ^-  (quip card:agent:gall _this)
   =/  launcha
-    [%launch-action !>([%clock /tile '/~clock/js/tile.js'])]
+    [%launch-action !>([%clock /clocktile '/~clock/js/tile.js'])]
   :_  this
   :~  [%pass / %arvo %e %connect [~ /'~clock'] %clock]
       [%pass /clock %agent [our.bowl %launch] %poke launcha]
@@ -39,6 +49,9 @@
 ++  on-poke
   |=  [=mark =vase]
   ^-  (quip card:agent:gall _this)
+  |^
+  ?:  ?=(%json mark)
+    (poke-json !<(json vase))
   ?.  ?=(%handle-http-request mark)
     (on-poke:def mark vase)
   =+  !<([eyre-id=@ta =inbound-request:eyre] vase)
@@ -59,15 +72,23 @@
   ?:  =(name 'tile')
     (js-response:gen tile-js)
   not-found:gen
+  ::
+  ++  poke-json
+    |=  jon=json
+    ^-  (quip card:agent:gall _this)
+    =.  data.state  jon
+    :_  this
+    [%give %fact ~[/clocktile] %json !>(jon)]~
+  --
 ::
 ++  on-watch
   |=  =path
   ^-  (quip card:agent:gall _this)
   ?:  ?=([%http-response *] path)
     `this
-  ?.  =(/tile path)
+  ?.  =(/clocktile path)
     (on-watch:def path)
-  [[%give %fact ~ %json !>(*json)]~ this]
+  [[%give %fact ~ %json !>(data.state)]~ this]
 ::
 ++  on-leave  on-leave:def
 ++  on-peek   on-peek:def

pkg/arvo/app/launch/js/index.js

@@ -41025,6 +41025,7 @@
               }
 
               handleEvent(diff) {
+                console.log(diff);
                 store.handleEvent(diff);
               }
 
@@ -48634,7 +48635,7 @@
             var dist_3 = dist.sigil;
             var dist_4 = dist.stringRenderer;
 
-            const _jsxFileName = "/Users/matilde/git/urbit/pkg/interface/launch/src/js/components/sigil.js";
+            const _jsxFileName = "/Users/gavinatkinson/Documents/Apps/urbit/pkg/interface/launch/src/js/components/sigil.js";
             class Sigil extends react_1 {
               render() {
                 const { props } = this;
@@ -48664,7 +48665,7 @@
               }
             }
 
-            const _jsxFileName$1 = "/Users/matilde/git/urbit/pkg/interface/launch/src/js/components/header.js";
+            const _jsxFileName$1 = "/Users/gavinatkinson/Documents/Apps/urbit/pkg/interface/launch/src/js/components/header.js";
             class Header extends react_1 {
               render() {
                 return (
@@ -48689,7 +48690,7 @@
 
             }
 
-            const _jsxFileName$2 = "/Users/matilde/git/urbit/pkg/interface/launch/src/js/components/tile.js";
+            const _jsxFileName$2 = "/Users/gavinatkinson/Documents/Apps/urbit/pkg/interface/launch/src/js/components/tile.js";
             class Tile extends react_1 {
 
               constructor(props) {
@@ -48712,7 +48713,7 @@
 
             }
 
-            const _jsxFileName$3 = "/Users/matilde/git/urbit/pkg/interface/launch/src/js/components/home.js";
+            const _jsxFileName$3 = "/Users/gavinatkinson/Documents/Apps/urbit/pkg/interface/launch/src/js/components/home.js";
 
             class Home extends react_1 {
 
@@ -48742,7 +48743,7 @@
 
             }
 
-            const _jsxFileName$4 = "/Users/matilde/git/urbit/pkg/interface/launch/src/js/app.js";
+            const _jsxFileName$4 = "/Users/gavinatkinson/Documents/Apps/urbit/pkg/interface/launch/src/js/app.js";
             class App extends react_1 {
 
               constructor() {
@@ -48776,7 +48777,7 @@
 
             window.app = App;
 
-            const _jsxFileName$5 = "/Users/matilde/git/urbit/pkg/interface/launch/src/index.js";
+            const _jsxFileName$5 = "/Users/gavinatkinson/Documents/Apps/urbit/pkg/interface/launch/src/index.js";
 
             subscription.setAuthTokens({
               ship: window.ship

pkg/interface/clock/tile/tile.js

@@ -3,8 +3,8 @@ import classnames from 'classnames';
 import moment from 'moment'
 import SunCalc from 'suncalc'
 
-const outerSize = 126; //tile size
-const innerSize = 110; //clock size
+const outerSize = 124; //tile size
+const innerSize = 124; //clock size
 
 //polar to cartesian
 // var ptc = function(r, theta) {
@@ -105,17 +105,12 @@ class Clock extends Component {
 
   }
 
-  componentDidMount() {
-    this.canvas = initCanvas(
-      this.canvasRef,
-      { x: innerSize, y: innerSize },
-      4
-    );
-
-    navigator.geolocation.getCurrentPosition((res) => {
-
-      const lat = res.coords.latitude
-      const lon = res.coords.longitude
+  initGeolocation() {
+    if (typeof this.props.data === 'string') {
+      // console.log(typeof this.props.data)
+      const latlon = this.props.data.split(',')
+      const lat = latlon[0]
+      const lon = latlon[1]
 
       const suncalc = SunCalc.getTimes(new Date(), lat, lon)
 
@@ -137,10 +132,25 @@ class Clock extends Component {
         lon,
         ...convertedSunCalc,
         geolocationSuccess: true,
-      }, (err) => {
-        if (err) console.log(err);
-      }, { maximumAge: Infinity, timeout: 10000 });
-    });
+      })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps !== this.props) {
+      this.initGeolocation()
+    }
+  }
+
+
+  componentDidMount() {
+    this.canvas = initCanvas(
+      this.canvasRef,
+      { x: innerSize, y: innerSize },
+      4
+    );
+
+    this.initGeolocation()
     this.animate()
   }
 
@@ -161,8 +171,8 @@ class Clock extends Component {
     var cx = ctr
     var cy = ctr
     this.angle = degToRad(convert(time, this.referenceTime))
-    var newX = cx + (ctr - 24) * Math.cos(this.angle);
-    var newY = cy + (ctr - 24) * Math.sin(this.angle);
+    var newX = cx + (ctr - 15) * Math.cos(this.angle);
+    var newY = cy + (ctr - 15) * Math.sin(this.angle);
 
     // Initial background
     circle(
@@ -296,13 +306,25 @@ class Clock extends Component {
       ctx,
       ctr,
       ctr,
-      ctr,
+      ctr-1,
       -1,
       2 * Math.PI,
       '#000000',
       1
     );
 
+    // Outer borders
+    circleOutline(
+      ctx,
+      ctr,
+      ctr,
+      ctr,
+      -1,
+      2 * Math.PI,
+      '#FFFFFF',
+      1
+    );
+
     // Center white circle with time and date
     circle(
       ctx,
@@ -311,7 +333,7 @@ class Clock extends Component {
       ctr/1.85,
       -1,
       2 * Math.PI,
-      '#000000'
+      '#FFFFFF'
     )
 
     // Center white circle border
@@ -322,7 +344,7 @@ class Clock extends Component {
       ctr/1.85,
       -1,
       2 * Math.PI,
-      'rgb(26, 26, 26)',
+      '#000000',
       1
     );
 
@@ -332,12 +354,12 @@ class Clock extends Component {
       : moment().format('h:mm A')
     const dateText = moment().format('MMM Do')
     ctx.textAlign = 'center'
-    ctx.fillStyle = '#FFFFFF'
+    ctx.fillStyle = '#000000'
     ctx.font = '12px Inter'
-    ctx.fillText(timeText, ctr, ctr + 6 - 12)
+    ctx.fillText(timeText, ctr, ctr + 6 - 7)
     ctx.fillStyle = '#B1B1B1'
     ctx.font = '12px Inter'
-    ctx.fillText(dateText, ctr, ctr + 6 + 12)
+    ctx.fillText(dateText, ctr, ctr + 6 + 7)
 
     ctx.restore();
   }
@@ -359,7 +381,7 @@ export default class ClockTile extends Component {
 
   renderWrapper(child) {
     return (
-      <div className="pa2" style={{
+      <div className="" style={{
         width: outerSize,
         height: outerSize,
         background: '#fff'
@@ -371,9 +393,8 @@ export default class ClockTile extends Component {
 
   render() {
     let data = !!this.props.data ? this.props.data : {};
-
     return this.renderWrapper((
-      <Clock/>
+      <Clock data={data}/>
     ));
 
   }

pkg/interface/weather/tile/tile.js

@@ -31,13 +31,13 @@ export default class WeatherTile extends Component {
 
   locationSubmit() {
     navigator.geolocation.getCurrentPosition((res) => {
-      console.log(res);
       let latlng = `${res.coords.latitude},${res.coords.longitude}`;
       this.setState({
         latlng
       }, (err) => {
         console.log(err);
       }, { maximumAge: Infinity, timeout: 10000 });
+      api.action("clock", "json", latlng);
       api.action('weather', 'json', latlng);
     });
   }
@@ -50,6 +50,7 @@ export default class WeatherTile extends Component {
     if (latlngParse.test(latlngNoSpace)) {
       let latlng = latlngNoSpace;
       this.setState({latlng}, (err) => {console.log(err)}, {maximumAge: Infinity, timeout: 10000});
+      api.action("clock", "json", latlng);
       api.action('weather', 'json', latlng);
       this.setState({manualEntry: !this.state.manualEntry});
     }