🍏🛌Apple Bedtime (#16)

season2/apple-bedtime/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "react-native-wcandillon",
+  "rules": {
+    "react-native/no-color-literals": 0
+  }
+}

season2/apple-bedtime/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

season2/apple-bedtime/.watchmanconfig

@@ -0,0 +1 @@
+{}

season2/apple-bedtime/App.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import Slider from "./components/Slider";
+
+export default () => (
+  <View style={styles.container}>
+    <Slider />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "black",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

season2/apple-bedtime/app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "apple-bedtime",
+    "slug": "apple-bedtime",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

season2/apple-bedtime/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

season2/apple-bedtime/components/Cursor.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { DangerZone, GestureHandler } from "expo";
+import { StyleSheet } from "react-native";
+import { atan2 } from "./Math";
+
+const { Animated } = DangerZone;
+const {
+  Value, event, block, cond, eq, set, add, sub, multiply, sin, cos, debug,
+} = Animated;
+type Value = typeof Value;
+const { PanGestureHandler, State } = GestureHandler;
+
+interface CursorProps {
+  radius: number;
+  angle: Value;
+}
+
+export default ({ radius, angle }: CursorProps) => {
+  const α = new Value(0);
+  const x = new Value(0);
+  const y = new Value(0);
+  const xOffset = new Value(0);
+  const yOffset = new Value(0);
+  const translateX = new Value(0);
+  const translateY = new Value(0);
+  const translationX = new Value(0);
+  const translationY = new Value(0);
+  const state = new Value(State.UNDETERMINED);
+  const onGestureEvent = event(
+    [
+      {
+        nativeEvent: {
+          translationX,
+          translationY,
+          state,
+        },
+      },
+    ],
+  );
+  return (
+    <>
+      <Animated.Code>
+        {
+          () => block([
+            cond(eq(state, State.ACTIVE), [
+              set(x, add(xOffset, translationX)),
+              set(y, add(yOffset, translationY)),
+            ]),
+            cond(eq(state, State.END), [
+              set(xOffset, x),
+              set(yOffset, y),
+            ]),
+            set(α, atan2(add(multiply(y, -1), radius), sub(x, radius))),
+            set(angle, α),
+            set(translateX, add(multiply(radius, cos(α)), radius)),
+            set(translateY, add(multiply(-1 * radius, sin(α)), radius)),
+          ])
+        }
+      </Animated.Code>
+      <PanGestureHandler onHandlerStateChange={onGestureEvent} {...{ onGestureEvent }}>
+        <Animated.View
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            backgroundColor: "white",
+            width: 50,
+            height: 50,
+            borderRadius: 25,
+            transform: [
+              { translateX },
+              { translateY },
+            ],
+          }}
+        />
+      </PanGestureHandler>
+    </>
+  );
+};

season2/apple-bedtime/components/Math.ts

@@ -0,0 +1,32 @@
+import { DangerZone } from "expo";
+
+const { Animated } = DangerZone;
+const {
+  Value, cond, eq, add, sqrt, or, neq, pow, sub, and, greaterThan, modulo, greaterOrEq, lessOrEq, multiply, lessThan, divide, abs, cos, sin,
+} = Animated;
+
+type Value = typeof Value;
+type MixedValue = Value | number;
+
+export const toRad = (deg: MixedValue): MixedValue => multiply(deg, Math.PI / 180);
+export const toDeg = (rad: MixedValue): MixedValue => multiply(rad, 180 / Math.PI);
+
+// https://stackoverflow.com/questions/42537957/fast-accurate-atan-arctan-approximation-algorithm
+export const atan = (x: Value): Value => sub(
+  multiply(Math.PI / 4, x),
+  multiply(multiply(x, sub(abs(x), 1)), add(0.2447, multiply(0.0663, abs(x)))),
+);
+
+// https://en.wikipedia.org/wiki/Atan2
+// https://www.gamedev.net/forums/topic/441464-manually-implementing-atan2-or-atan/
+export const atan2 = (y: Value, x: Value): Value => {
+  const coeff1 = Math.PI / 4;
+  const coeff2 = 3 * coeff1;
+  const absY = abs(y);
+  const angle = cond(greaterOrEq(x, 0), [
+    sub(coeff1, multiply(coeff1, divide(sub(x, absY), add(x, absY)))),
+  ], [
+    sub(coeff2, multiply(coeff1, divide(add(x, absY), sub(absY, x)))),
+  ]);
+  return cond(lessThan(y, 0), multiply(angle, -1), angle);
+};

season2/apple-bedtime/package.json

@@ -0,0 +1,23 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject",
+    "lint": "eslint App.tsx components/*",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "@types/expo": "^32.0.11",
+    "babel-preset-expo": "^5.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-react-native-wcandillon": "^1.0.6"
+  },
+  "private": true
+}

season2/apple-bedtime/tsconfig.json

@@ -0,0 +1,62 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+//    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": ["es6"],             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": true,                           /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": true,                /* Report errors on unused locals. */
+    "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    "forceConsistentCasingInFileNames": true,
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */                     /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */                 /* List of folders to include type definitions from. */
+    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    // "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    "types": [
+      "react",
+      "react-native"
+    ]
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": [
+    "App.tsx"
+  ]
+}