` values and the `.watch` class' CSS.
-# Step 4: _Time for Action_ - Making it interactive
+# Step 4: _Time for Action_ - Making things interactive
-Alright, so we've got a watch; time (heh) to make it tick!
+Alright, so we've got a watch; time (heh) to make it tick!
In the spirit of old school digital watches, let's have a `time` display and - when the screen is "clicked" with a VR controller - switch to a `date` display. We'll start by adding a "watchDisplay" string and an instance of a new `watchDisplayType` enum to our state interface, to manage the display state:
```tsx
-enum watchDisplayType
-{
- Time,
- Date
+enum watchDisplayType {
+ Time,
+ Date,
}
-interface WatchState
-{
- watchDisplayTypeInstance: watchDisplayType;
- watchDisplay: string;
+interface WatchState {
+ watchDisplayTypeInstance: watchDisplayType;
+ watchDisplay: string;
}
```
-In the `WatchGadget` class, we'll:
-* initialize this state in the constructor
-* create class methods `getTime()` to keep time & `changeDisplay()` update the display state (note that `this.getTime()` will update the `watchDisplay` state every second);
+In the `WatchGadget` class, we'll:
-```tsx
-class WatchGadget extends React.Component<{}, WatchState>
-{
+- initialize this state in the constructor
+- create class methods `getTime()` to keep time & `changeDisplay()` update the display state (note that `this.getTime()` will update the `watchDisplay` state every second);
- constructor(props: any)
- {
- super(props);
- this.state =
- {
- watchDisplayTypeInstance: watchDisplayType.Time,
- watchDisplay: ""
- };
- }
-
- componentDidMount()
- {
- setInterval(this.getTime, 1000);
+```tsx
+class WatchGadget extends React.Component<{}, WatchState> {
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ watchDisplayTypeInstance: watchDisplayType.Time,
+ watchDisplay: "",
+ };
+ }
+
+ componentDidMount() {
+ setInterval(this.getTime, 1000);
+ }
+
+ @bind
+ private getTime() {
+ switch (this.state.watchDisplayTypeInstance) {
+ case watchDisplayType.Time:
+ this.setState({ watchDisplay: new Date().toLocaleTimeString() });
+ break;
+
+ case watchDisplayType.Date:
+ this.setState({
+ watchDisplay: new Date().toLocaleDateString(undefined, {
+ month: "2-digit",
+ day: "2-digit",
+ year: "2-digit",
+ }),
+ });
+ break;
+
+ default:
+ break;
}
-
- @bind
- private getTime()
- {
- switch (this.state.watchDisplayTypeInstance)
- {
- case watchDisplayType.Time:
- this.setState({ watchDisplay: new Date().toLocaleTimeString() });
- break;
-
- case watchDisplayType.Date:
- this.setState({ watchDisplay: new Date().toLocaleDateString(
- undefined,
- { month: "2-digit", day: "2-digit", year: "2-digit" })});
- break;
-
- default:
- break;
- }
- }
-
- @bind
- public changeDisplay()
- {
- this.state.watchDisplayTypeInstance == watchDisplayType.Date ?
- this.setState({ watchDisplayTypeInstance: watchDisplayType.Time }) :
- this.setState({ watchDisplayTypeInstance: watchDisplayType.Date });
- }
-}
+ }
+
+ @bind
+ public changeDisplay() {
+ this.state.watchDisplayTypeInstance == watchDisplayType.Date
+ ? this.setState({ watchDisplayTypeInstance: watchDisplayType.Time })
+ : this.setState({ watchDisplayTypeInstance: watchDisplayType.Date });
+ }
+// (the rest of our code...)
```
-finally, we'll update what we're displaying in the `Watch` div and add an `onMouseDown` event handler, in order to trigger the display change:
+finally, in our render method, we'll update what we're displaying in the `watch` div and add an `onMouseDown` event handler, in order to trigger the display change:
```tsx
-
- {this.state.watchDisplay}
-
+
+ {this.state.watchDisplay}
+
```
Here's `main.tsx` after all our additions:
```tsx
+import { AvPanel, AvStandardGrabbable, AvTransform, DefaultLanding } from '@aardvarkxr/aardvark-react';
+import { Av } from '@aardvarkxr/aardvark-shared';
+import bind from 'bind-decorator';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import bind from 'bind-decorator';
-
-import { AvGadget, AvTransform, AvPanel, AvStandardGrabbable } from '@aardvarkxr/aardvark-react';
-
-enum watchDisplayType
-{
+enum watchDisplayType {
Time,
- Date
+ Date,
+ }
+
+interface WatchState {
+watchDisplayTypeInstance: watchDisplayType;
+watchDisplay: string;
}
-interface WatchState
+class WatchGadget extends React.Component< {}, WatchState >
{
- watchDisplayTypeInstance: watchDisplayType;
- watchDisplay: string;
-}
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ watchDisplayTypeInstance: watchDisplayType.Time,
+ watchDisplay: "",
+ };
+ }
+
+ componentDidMount() {
+ setInterval(this.getTime, 1000);
+ }
+
+ @bind
+ private getTime() {
+ switch (this.state.watchDisplayTypeInstance) {
+ case watchDisplayType.Time:
+ this.setState({ watchDisplay: new Date().toLocaleTimeString() });
+ break;
+
+ case watchDisplayType.Date:
+ this.setState({
+ watchDisplay: new Date().toLocaleDateString(undefined, {
+ month: "2-digit",
+ day: "2-digit",
+ year: "2-digit",
+ }),
+ });
+ break;
+
+ default:
+ break;
+ }
+ }
-class WatchGadget extends React.Component<{}, WatchState>
-{
- constructor(props: any)
- {
- super(props);
- this.state =
- {
- watchDisplayTypeInstance: watchDisplayType.Time,
- watchDisplay: ""
- }
- }
+ @bind
+ public changeDisplay() {
+ this.state.watchDisplayTypeInstance == watchDisplayType.Date
+ ? this.setState({ watchDisplayTypeInstance: watchDisplayType.Time })
+ : this.setState({ watchDisplayTypeInstance: watchDisplayType.Date });
+ }
- componentDidMount()
+ public render()
{
- setInterval(this.getTime, 1000);
+ return (
+
+
+
+
+
+ {this.state.watchDisplay}
+
+
+
+
+