packages = new PackageList(this).getPackages();
27 | // Packages that cannot be autolinked yet can be added manually here, for example:
28 | // packages.add(new MyReactNativePackage());
29 | return packages;
30 | }
31 |
32 | @Override
33 | protected String getJSMainModuleName() {
34 | return "index";
35 | }
36 | };
37 |
38 | @Override
39 | public ReactNativeHost getReactNativeHost() {
40 | return mReactNativeHost;
41 | }
42 |
43 | @Override
44 | public void onCreate() {
45 | super.onCreate();
46 | SoLoader.init(this, /* native exopackage */ false);
47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
48 | }
49 |
50 | /**
51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like
52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
53 | *
54 | * @param context
55 | * @param reactInstanceManager
56 | */
57 | private static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
58 | if (BuildConfig.DEBUG) {
59 | try {
60 | /*
61 | We use reflection here to pick up the class that initializes Flipper,
62 | since Flipper library is not available in release mode
63 | */
64 | Class aClass = Class.forName("com.mmazzarolo.ReactNativeFlipper");
65 | aClass
66 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
67 | .invoke(null, context, reactInstanceManager);
68 | } catch (ClassNotFoundException e) {
69 | e.printStackTrace();
70 | } catch (NoSuchMethodException e) {
71 | e.printStackTrace();
72 | } catch (IllegalAccessException e) {
73 | e.printStackTrace();
74 | } catch (InvocationTargetException e) {
75 | e.printStackTrace();
76 | }
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/ios/OrdinaryPuzzles/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images": [
3 | {
4 | "filename": "ios_marketing1024x1024.png",
5 | "idiom": "ios-marketing",
6 | "size": "1024x1024",
7 | "scale": "1x"
8 | },
9 | {
10 | "filename": "iphone_notification20x20@2x.png",
11 | "idiom": "iphone",
12 | "size": "20x20",
13 | "scale": "2x"
14 | },
15 | {
16 | "filename": "iphone_notification20x20@3x.png",
17 | "idiom": "iphone",
18 | "size": "20x20",
19 | "scale": "3x"
20 | },
21 | {
22 | "filename": "iphone_settings29x29@2x.png",
23 | "idiom": "iphone",
24 | "size": "29x29",
25 | "scale": "2x"
26 | },
27 | {
28 | "filename": "iphone_settings29x29@3x.png",
29 | "idiom": "iphone",
30 | "size": "29x29",
31 | "scale": "3x"
32 | },
33 | {
34 | "filename": "iphone_spotlight40x40@2x.png",
35 | "idiom": "iphone",
36 | "size": "40x40",
37 | "scale": "2x"
38 | },
39 | {
40 | "filename": "iphone_spotlight40x40@3x.png",
41 | "idiom": "iphone",
42 | "size": "40x40",
43 | "scale": "3x"
44 | },
45 | {
46 | "filename": "iphone_app60x60@2x.png",
47 | "idiom": "iphone",
48 | "size": "60x60",
49 | "scale": "2x"
50 | },
51 | {
52 | "filename": "iphone_app60x60@3x.png",
53 | "idiom": "iphone",
54 | "size": "60x60",
55 | "scale": "3x"
56 | },
57 | {
58 | "filename": "ipad_notification20x20.png",
59 | "idiom": "ipad",
60 | "size": "20x20",
61 | "scale": "1x"
62 | },
63 | {
64 | "filename": "ipad_notification20x20@2x.png",
65 | "idiom": "ipad",
66 | "size": "20x20",
67 | "scale": "2x"
68 | },
69 | {
70 | "filename": "ipad_settings29x29.png",
71 | "idiom": "ipad",
72 | "size": "29x29",
73 | "scale": "1x"
74 | },
75 | {
76 | "filename": "ipad_settings29x29@2x.png",
77 | "idiom": "ipad",
78 | "size": "29x29",
79 | "scale": "2x"
80 | },
81 | {
82 | "filename": "ipad_spotlight40x40.png",
83 | "idiom": "ipad",
84 | "size": "40x40",
85 | "scale": "1x"
86 | },
87 | {
88 | "filename": "ipad_spotlight40x40@2x.png",
89 | "idiom": "ipad",
90 | "size": "40x40",
91 | "scale": "2x"
92 | },
93 | {
94 | "filename": "ipad_app76x76.png",
95 | "idiom": "ipad",
96 | "size": "76x76",
97 | "scale": "1x"
98 | },
99 | {
100 | "filename": "ipad_app76x76@2x.png",
101 | "idiom": "ipad",
102 | "size": "76x76",
103 | "scale": "2x"
104 | },
105 | {
106 | "filename": "ipad_pro_app83.5x83.5@2x.png",
107 | "idiom": "ipad",
108 | "size": "83.5x83.5",
109 | "scale": "2x"
110 | }
111 | ],
112 | "info": {
113 | "version": 1,
114 | "author": "xcode"
115 | }
116 | }
--------------------------------------------------------------------------------
/src/op-stats/Stats.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useRef } from "react";
2 | import { Animated } from "react-native";
3 | import { observer } from "mobx-react";
4 | import { useCoreStores } from "op-core";
5 | import { BottomNav, Button, Text, getBottomNavHeight } from "op-common";
6 | import { metrics, animations } from "op-design";
7 | import {
8 | useAnimation,
9 | useOnMount,
10 | useScale,
11 | useHardwareBackButton,
12 | ScalingFunc,
13 | } from "op-utils";
14 |
15 | export const Stats: FC = observer(function () {
16 | const scale = useScale();
17 | const styles = createStyles({ scale });
18 | const { stats, router } = useCoreStores();
19 | const interactionsDisabledRef = useRef(false);
20 |
21 | // Routing setup
22 | const navigateToHome = () => router.changeRoute("home");
23 | useHardwareBackButton(navigateToHome);
24 |
25 | // Animations setup
26 | const fadeRootInAnimDuration = 400;
27 | const fadeRootOutAnimDuration = 200;
28 | const fadeRootAnim = useAnimation(0);
29 | const fadeRootIn = () =>
30 | fadeRootAnim.setup({ duration: fadeRootInAnimDuration });
31 | const fadeRootOut = () =>
32 | fadeRootAnim.setup({ duration: fadeRootOutAnimDuration, toValue: 0 });
33 |
34 | useOnMount(() => {
35 | fadeRootIn().start();
36 | });
37 |
38 | // Callback handlers
39 | const handleMenuPress = () => {
40 | if (interactionsDisabledRef.current) return;
41 | interactionsDisabledRef.current = true;
42 | fadeRootOut().start(() => {
43 | navigateToHome();
44 | });
45 | };
46 |
47 | return (
48 |
49 |
52 |
53 | Statistics
54 |
55 |
56 | small: {stats.completedPuzzles["small"].length}/99
57 |
58 |
59 | medium: {stats.completedPuzzles["medium"].length}/99
60 |
61 |
62 | large: {stats.completedPuzzles["large"].length}/99
63 |
64 |
65 | score: {stats.score}
66 |
67 |
68 |
69 |
70 |
71 |
72 | );
73 | });
74 |
75 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
76 | root: {
77 | flex: 1,
78 | marginHorizontal: metrics.screenMargin,
79 | },
80 | middle: {
81 | flex: 1,
82 | marginTop: getBottomNavHeight,
83 | justifyContent: "center",
84 | },
85 | title: {
86 | fontSize: scale(48),
87 | },
88 | score: {
89 | fontSize: scale(36),
90 | marginTop: scale(36),
91 | },
92 | progress: {
93 | fontSize: scale(36),
94 | marginTop: scale(14),
95 | },
96 | });
97 |
--------------------------------------------------------------------------------
/src/op-intro/Intro.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useRef } from "react";
2 | import { StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
3 | import { animations, metrics } from "op-design";
4 | import { AnimatedLetter } from "op-common";
5 | import {
6 | useAnimation,
7 | scaleTextToFit,
8 | delay,
9 | useOnMount,
10 | useScale,
11 | } from "op-utils";
12 | import { useCoreStores } from "op-core";
13 |
14 | const asyncAnimationStart = (anim: Animated.CompositeAnimation) =>
15 | new Promise((resolve) => anim.start(resolve));
16 |
17 | export const Intro: FC = function () {
18 | const { puzzle, router } = useCoreStores();
19 | const skippingEnabledRef = useRef(true);
20 | const hasSkippedRef = useRef(false);
21 |
22 | const scale = useScale();
23 |
24 | // Routing setup
25 | const handleComplete = () => router.changeRoute("game");
26 |
27 | // Animation setup
28 | const showAnimDuration = 400;
29 | const animDelay = 1000;
30 | const hideAnimDuration = 400;
31 | const showAnim = useAnimation();
32 | const hideAnim = useAnimation(1);
33 | const animate = async () => {
34 | await asyncAnimationStart(showAnim.setup({ duration: showAnimDuration }));
35 | await delay(animDelay);
36 | skippingEnabledRef.current = false;
37 | if (!hasSkippedRef.current) {
38 | await asyncAnimationStart(hideAnim.setup({ duration: hideAnimDuration }));
39 | handleComplete();
40 | }
41 | };
42 | useOnMount(() => {
43 | animate();
44 | });
45 |
46 | // If the user touches the screen, end the animation early
47 | const handlePress = () => {
48 | if (!skippingEnabledRef.current || hasSkippedRef.current) return;
49 | hasSkippedRef.current = true;
50 | hideAnim.setup({ duration: hideAnimDuration }).start(handleComplete);
51 | };
52 |
53 | // Split the title into multiple charaters to animate them asynchronously
54 | const fitFontSize = scaleTextToFit(scale, `${puzzle.prefix} ${puzzle.name}`);
55 | const digitList = puzzle.prefix.split("");
56 | const letterList = puzzle.name.split("");
57 | const chars = digitList
58 | .map((digit) => ({ type: "digit", value: digit }))
59 | .concat({ type: "space", value: " " })
60 | .concat(letterList.map((letter) => ({ type: "letter", value: letter })));
61 |
62 | return (
63 |
64 |
67 | {chars.map((char, index) => {
68 | const delay = (1 / chars.length) * index;
69 | return (
70 |
78 | );
79 | })}
80 |
81 |
82 | );
83 | };
84 |
85 | const styles = StyleSheet.create({
86 | root: {
87 | marginHorizontal: metrics.screenMargin,
88 | flex: 1,
89 | alignItems: "center",
90 | flexDirection: "row",
91 | },
92 | letter: {},
93 | });
94 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
Ordinary Puzzles: A minimalistic puzzle game built with React-Native.
6 |
7 |
8 |
9 | 
15 |
16 |
17 | 
23 |
24 |
25 | 
31 |
32 |
33 |
34 |
35 | 
36 |
37 |
38 |
39 |
40 | 
41 |
42 |
43 | 
44 |
45 |
46 |
47 | ## Overview
48 |
49 | Ordinary Puzzles is a minimalistic puzzle game build with [React Native](https://facebook.github.io/react-native/), [React Native for Web](https://github.com/necolas/react-native-web), [TypeScript](https://www.typescriptlang.org/) and [MobX](https://mobx.js.org/README.html).
50 | Ordinary Puzzles is free, has no ads, and no in-app purchases.
51 | You can download it on the [Google Play Store](https://play.google.com/store/apps/details?id=com.mmazzarolo.ordinarypuzzles), on the [Apple App Store](https://apps.apple.com/us/app/ordinary-puzzles/id1489599807), or play it directly [on the web](https://ordinarypuzzles.com/play) as a Progressive Web App.
52 |
53 | ## Some Background
54 |
55 | Ordinary Puzzles is a game inspired by [Juho Snellman](https://www.snellman.net/)'s [Linjat](https://linjat.snellman.net/#fp).
56 | I discovered Linjat a while ago on Hacker News. I liked the concept of its Picross-like puzzles, so after a quick chat with Juho I decided to port it to a mobile game.
57 |
58 | The font used across the entire app is [Averta](https://www.myfonts.com/fonts/intelligent-foundry/averta/), by [Kostas Bartsokas](http://www.kostasbartsokas.com/).
59 |
60 | ## Contributing
61 |
62 | See [CONTRIBUTING.md](./CONTRIBUTING.md).
63 | Pull requests are welcome. File an issue for ideas, conversation or feedback.
64 |
--------------------------------------------------------------------------------
/src/op-message/Message.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import { View, Animated } from "react-native";
3 | import { Text, Button, BottomNav } from "op-common";
4 | import {
5 | useAnimation,
6 | useOnMount,
7 | useScale,
8 | useHardwareBackButton,
9 | ScalingFunc,
10 | } from "op-utils";
11 | import { animations } from "op-design";
12 | import { useCoreStores } from "op-core";
13 |
14 | export const Message: FC = function () {
15 | const scale = useScale();
16 | const styles = createStyles({ scale });
17 | const { router, puzzle, stats } = useCoreStores();
18 |
19 | // Routing setup
20 | const navigateToHome = () => router.changeRoute("home");
21 | useHardwareBackButton(navigateToHome);
22 |
23 | // Animations setup
24 | const fadeInTitleAnimDuration = 200;
25 | const fadeInMessageAnimDuration = 200;
26 | const fadeInBottomAnimDuration = 200;
27 | const fadeInStaggerDuration = 200;
28 | const fadeOutAnimDuration = 200;
29 | const fadeTitleAnim = useAnimation();
30 | const fadeMessageAnim = useAnimation();
31 | const fadeBottomAnim = useAnimation();
32 |
33 | const fadeIn = () =>
34 | Animated.stagger(fadeInStaggerDuration, [
35 | fadeTitleAnim.setup({ duration: fadeInTitleAnimDuration }),
36 | fadeMessageAnim.setup({ duration: fadeInMessageAnimDuration }),
37 | fadeBottomAnim.setup({ duration: fadeInBottomAnimDuration }),
38 | ]);
39 |
40 | const fadeOut = () =>
41 | Animated.parallel([
42 | fadeTitleAnim.setup({ duration: fadeOutAnimDuration, toValue: 0 }),
43 | fadeMessageAnim.setup({ duration: fadeOutAnimDuration, toValue: 0 }),
44 | fadeBottomAnim.setup({ duration: fadeOutAnimDuration, toValue: 0 }),
45 | ]);
46 |
47 | useOnMount(() => {
48 | fadeIn().start();
49 | });
50 |
51 | // Callback handlers
52 | const handleButtonPress = () => {
53 | fadeOut().start(() => {
54 | stats.updateCompletedPuzzles("tutorial", 0);
55 | navigateToHome();
56 | });
57 | };
58 |
59 | return (
60 |
61 |
62 |
69 | {puzzle.tutorialTitle}
70 |
71 |
78 | {puzzle.tutorialMessage}
79 |
80 |
81 |
82 |
83 |
84 |
85 | );
86 | };
87 |
88 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
89 | root: {
90 | margin: scale(20),
91 | flex: 1,
92 | },
93 | top: {
94 | flexDirection: "column",
95 | flex: 1,
96 | justifyContent: "center",
97 | },
98 | title: {
99 | fontSize: scale(42),
100 | },
101 | message: {
102 | fontSize: scale(26),
103 | },
104 | });
105 |
--------------------------------------------------------------------------------
/src/op-utils/pickPuzzle.test.ts:
--------------------------------------------------------------------------------
1 | import times from "lodash/times";
2 | import { pickRandomPuzzle } from "./pickPuzzle";
3 |
4 | describe("pickRandomPuzzle", () => {
5 | const allPuzzlesLength = 6;
6 | describe("with 6 available puzzles", () => {
7 | describe("with no puzzles played yet", () => {
8 | it("should return the puzzle with index 0", () => {
9 | expect(
10 | pickRandomPuzzle({
11 | allPuzzlesLength: allPuzzlesLength,
12 | playedHistory: [],
13 | })
14 | ).toBe(0);
15 | });
16 | });
17 |
18 | describe("with 1 puzzle played", () => {
19 | it("should return the second puzzle", () => {
20 | expect(
21 | pickRandomPuzzle({
22 | allPuzzlesLength: allPuzzlesLength,
23 | playedHistory: [0],
24 | })
25 | ).toBe(1);
26 | });
27 | });
28 |
29 | describe("with 2 puzzle played", () => {
30 | it("should return the third puzzle", () => {
31 | expect(
32 | pickRandomPuzzle({
33 | allPuzzlesLength: allPuzzlesLength,
34 | playedHistory: [0, 1],
35 | })
36 | ).toBe(2);
37 | });
38 | });
39 |
40 | describe("with 3 puzzle played", () => {
41 | it("should return the fourth puzzle", () => {
42 | expect(
43 | pickRandomPuzzle({
44 | allPuzzlesLength: allPuzzlesLength,
45 | playedHistory: [0, 1, 2],
46 | })
47 | ).toBe(3);
48 | });
49 | });
50 |
51 | describe("with 4 puzzle played", () => {
52 | it("should return the fifth puzzle", () => {
53 | expect(
54 | pickRandomPuzzle({
55 | allPuzzlesLength: allPuzzlesLength,
56 | playedHistory: [0, 1, 2, 3],
57 | })
58 | ).toBe(4);
59 | });
60 | });
61 |
62 | describe("with 5 puzzle played", () => {
63 | it("should return the sixth puzzle", () => {
64 | expect(
65 | pickRandomPuzzle({
66 | allPuzzlesLength: allPuzzlesLength,
67 | playedHistory: [0, 1, 2, 3, 4],
68 | })
69 | ).toBe(5);
70 | });
71 | });
72 |
73 | describe("with all puzzles played", () => {
74 | describe("with all puzzles completed", () => {
75 | const randomTestSuite = times(10);
76 | it.each(randomTestSuite)(
77 | "should return a random non-recently played puzzle",
78 | () => {
79 | const randomPuzzle = pickRandomPuzzle({
80 | allPuzzlesLength: allPuzzlesLength,
81 | playedHistory: [0, 1, 2, 3, 4, 5],
82 | completedHistory: [0, 1, 2, 3, 4, 5],
83 | });
84 | expect([0, 1, 2]).toContain(randomPuzzle);
85 | }
86 | );
87 | });
88 |
89 | describe("with at least a non-completed puzzle", () => {
90 | it("should return a non-completed puzzle", () => {
91 | const pickedPuzzle = pickRandomPuzzle({
92 | allPuzzlesLength: allPuzzlesLength,
93 | playedHistory: [0, 1, 2, 3, 4, 5],
94 | completedHistory: [0, 1, 4, 5],
95 | });
96 | expect(pickedPuzzle).toBe(2);
97 | });
98 | });
99 | });
100 | });
101 | });
102 |
--------------------------------------------------------------------------------
/src/service-worker.ts:
--------------------------------------------------------------------------------
1 | ///
2 | /* eslint-disable no-restricted-globals */
3 |
4 | // This service worker can be customized!
5 | // See https://developers.google.com/web/tools/workbox/modules
6 | // for the list of available Workbox modules, or add any other
7 | // code you'd like.
8 | // You can also remove this file if you'd prefer not to use a
9 | // service worker, and the Workbox build step will be skipped.
10 |
11 | import { clientsClaim } from "workbox-core";
12 | import { ExpirationPlugin } from "workbox-expiration";
13 | import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
14 | import { registerRoute } from "workbox-routing";
15 | import { StaleWhileRevalidate } from "workbox-strategies";
16 |
17 | declare const self: ServiceWorkerGlobalScope;
18 |
19 | clientsClaim();
20 |
21 | // Precache all of the assets generated by your build process.
22 | // Their URLs are injected into the manifest variable below.
23 | // This variable must be present somewhere in your service worker file,
24 | // even if you decide not to use precaching. See https://cra.link/PWA
25 | precacheAndRoute(self.__WB_MANIFEST);
26 |
27 | // Set up App Shell-style routing, so that all navigation requests
28 | // are fulfilled with your index.html shell. Learn more at
29 | // https://developers.google.com/web/fundamentals/architecture/app-shell
30 | const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$");
31 | registerRoute(
32 | // Return false to exempt requests from being fulfilled by index.html.
33 | ({ request, url }: { request: Request; url: URL }) => {
34 | // If this isn't a navigation, skip.
35 | if (request.mode !== "navigate") {
36 | return false;
37 | }
38 |
39 | // If this is a URL that starts with /_, skip.
40 | if (url.pathname.startsWith("/_")) {
41 | return false;
42 | }
43 |
44 | // If this looks like a URL for a resource, because it contains
45 | // a file extension, skip.
46 | if (url.pathname.match(fileExtensionRegexp)) {
47 | return false;
48 | }
49 |
50 | // Return true to signal that we want to use the handler.
51 | return true;
52 | },
53 | createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
54 | );
55 |
56 | // An example runtime caching route for requests that aren't handled by the
57 | // precache, in this case same-origin .png requests like those from in public/
58 | registerRoute(
59 | // Add in any other file extensions or routing criteria as needed.
60 | ({ url }) =>
61 | url.origin === self.location.origin &&
62 | (url.pathname.endsWith(".png") ||
63 | url.pathname.endsWith(".css") ||
64 | url.pathname.endsWith(".woff") ||
65 | url.pathname.endsWith(".woff2")),
66 | // Customize this strategy as needed, e.g., by changing to CacheFirst.
67 | new StaleWhileRevalidate({
68 | cacheName: "public",
69 | plugins: [
70 | // Ensure that once this runtime cache reaches a maximum size the
71 | // least-recently used images are removed.
72 | new ExpirationPlugin({ maxEntries: 50 }),
73 | ],
74 | })
75 | );
76 |
77 | // This allows the web app to trigger skipWaiting via
78 | // registration.waiting.postMessage({type: 'SKIP_WAITING'})
79 | self.addEventListener("message", (event) => {
80 | if (event.data && event.data.type === "SKIP_WAITING") {
81 | self.skipWaiting();
82 | }
83 | });
84 |
85 | // Any other custom service worker logic can go here.
86 |
--------------------------------------------------------------------------------
/android/app/src/debug/java/com/mmazzarolo/ordinarypuzzles/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.rndiffapp;
8 | import android.content.Context;
9 | import com.facebook.flipper.android.AndroidFlipperClient;
10 | import com.facebook.flipper.android.utils.FlipperUtils;
11 | import com.facebook.flipper.core.FlipperClient;
12 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
13 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
14 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
15 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
16 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
17 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
18 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
19 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
21 | import com.facebook.react.ReactInstanceManager;
22 | import com.facebook.react.bridge.ReactContext;
23 | import com.facebook.react.modules.network.NetworkingModule;
24 | import okhttp3.OkHttpClient;
25 | public class ReactNativeFlipper {
26 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
27 | if (FlipperUtils.shouldEnableFlipper(context)) {
28 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
29 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
30 | client.addPlugin(new ReactFlipperPlugin());
31 | client.addPlugin(new DatabasesFlipperPlugin(context));
32 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
33 | client.addPlugin(CrashReporterPlugin.getInstance());
34 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
35 | NetworkingModule.setCustomClientBuilder(
36 | new NetworkingModule.CustomClientBuilder() {
37 | @Override
38 | public void apply(OkHttpClient.Builder builder) {
39 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
40 | }
41 | });
42 | client.addPlugin(networkFlipperPlugin);
43 | client.start();
44 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
45 | // Hence we run if after all native modules have been initialized
46 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
47 | if (reactContext == null) {
48 | reactInstanceManager.addReactInstanceEventListener(
49 | new ReactInstanceManager.ReactInstanceEventListener() {
50 | @Override
51 | public void onReactContextInitialized(ReactContext reactContext) {
52 | reactInstanceManager.removeReactInstanceEventListener(this);
53 | reactContext.runOnNativeModulesQueueThread(
54 | new Runnable() {
55 | @Override
56 | public void run() {
57 | client.addPlugin(new FrescoFlipperPlugin());
58 | }
59 | });
60 | }
61 | });
62 | } else {
63 | client.addPlugin(new FrescoFlipperPlugin());
64 | }
65 | }
66 | }
67 | }
--------------------------------------------------------------------------------
/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto init
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto init
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :init
68 | @rem Get command-line arguments, handling Windows variants
69 |
70 | if not "%OS%" == "Windows_NT" goto win9xME_args
71 |
72 | :win9xME_args
73 | @rem Slurp the command line arguments.
74 | set CMD_LINE_ARGS=
75 | set _SKIP=2
76 |
77 | :win9xME_args_slurp
78 | if "x%~1" == "x" goto execute
79 |
80 | set CMD_LINE_ARGS=%*
81 |
82 | :execute
83 | @rem Setup the command line
84 |
85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
86 |
87 | @rem Execute Gradle
88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
89 |
90 | :end
91 | @rem End local scope for the variables with windows NT shell
92 | if "%ERRORLEVEL%"=="0" goto mainEnd
93 |
94 | :fail
95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
96 | rem the _cmd.exe /c_ return code!
97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
98 | exit /b 1
99 |
100 | :mainEnd
101 | if "%OS%"=="Windows_NT" endlocal
102 |
103 | :omega
--------------------------------------------------------------------------------
/ios/OrdinaryPuzzles.xcodeproj/xcshareddata/xcschemes/OrdinaryPuzzles.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/src/op-splash/Splash.native.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useRef } from "react";
2 | import { Animated, TouchableWithoutFeedback } from "react-native";
3 | import { Text } from "op-common";
4 | import {
5 | useAnimation,
6 | useOnMount,
7 | useScale,
8 | delay,
9 | ScalingFunc,
10 | } from "op-utils";
11 | import { animations, metrics, colors } from "op-design";
12 | import { credits } from "op-config";
13 |
14 | const asyncAnimationStart = (anim: Animated.CompositeAnimation) =>
15 | new Promise((resolve) => anim.start(resolve));
16 |
17 | interface SplashProps {
18 | onHide: () => void;
19 | }
20 |
21 | export const Splash: FC = function ({ onHide }) {
22 | const scale = useScale();
23 | const styles = createStyles({ scale });
24 | const skippingEnabledRef = useRef(true);
25 | const hasSkippedRef = useRef(false);
26 |
27 | // Animations setup
28 | const fadeCreditsAnimDuration = 200;
29 | const fadeCreditsStaggerDuration = 100;
30 | const backgroundColorAnimDuration = 200;
31 | // We can use hooks in loops in this case because "credits" is a constant
32 | // eslint-disable-next-line react-hooks/rules-of-hooks
33 | const fadeCreditsAnims = credits.map(() => useAnimation());
34 | const backgroundColorAnim = useAnimation();
35 | const splashDuration = 2000;
36 | const showAnim = Animated.stagger(
37 | fadeCreditsStaggerDuration,
38 | fadeCreditsAnims.map((anim) =>
39 | anim.setup({ duration: fadeCreditsAnimDuration })
40 | )
41 | );
42 |
43 | const hideAnim = Animated.sequence([
44 | Animated.stagger(
45 | fadeCreditsStaggerDuration,
46 | fadeCreditsAnims.map((anim) =>
47 | anim.setup({ duration: fadeCreditsAnimDuration, toValue: 0 })
48 | )
49 | ),
50 | backgroundColorAnim.setup({
51 | duration: backgroundColorAnimDuration,
52 | useNativeDriver: false,
53 | }),
54 | ]);
55 |
56 | const animate = async () => {
57 | await asyncAnimationStart(showAnim);
58 | await delay(splashDuration);
59 | skippingEnabledRef.current = false;
60 | if (!hasSkippedRef.current) {
61 | await asyncAnimationStart(hideAnim);
62 | onHide();
63 | }
64 | };
65 |
66 | useOnMount(() => {
67 | animate();
68 | });
69 |
70 | const rootAnimStyle = {
71 | backgroundColor: backgroundColorAnim.value.interpolate({
72 | inputRange: [0, 1],
73 | outputRange: [colors.splash, colors.primary[9]],
74 | }),
75 | };
76 |
77 | // If the user touches the screen, end the animation early
78 | const handlePress = () => {
79 | if (!skippingEnabledRef.current || hasSkippedRef.current) return;
80 | hasSkippedRef.current = true;
81 | hideAnim.start(onHide);
82 | };
83 |
84 | return (
85 |
86 |
87 | {credits.map((credit, index) => (
88 |
96 | {credit}
97 |
98 | ))}
99 |
100 |
101 | );
102 | };
103 |
104 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
105 | root: {
106 | padding: metrics.screenMargin,
107 | flex: 1,
108 | flexDirection: "column",
109 | justifyContent: "center",
110 | backgroundColor: colors.splash,
111 | },
112 | credit: {
113 | color: "white",
114 | fontSize: scale(28),
115 | marginVertical: scale(12),
116 | },
117 | });
118 |
--------------------------------------------------------------------------------
/ios/OrdinaryPuzzles.xcodeproj/xcshareddata/xcschemes/OrdinaryPuzzles-tvOS.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/src/op-success/Success.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useRef } from "react";
2 | import { View, Animated, Platform, ViewStyle } from "react-native";
3 | import { observer } from "mobx-react";
4 | import KeepAwake from "op-native/react-native-keep-awake";
5 | import { useCoreStores } from "op-core";
6 | import { BottomNav, Button, Header, Score, Text } from "op-common";
7 | import { metrics, animations } from "op-design";
8 | import {
9 | useAnimation,
10 | useOnMount,
11 | useScale,
12 | scaleTextToFit,
13 | ScalingFunc,
14 | } from "op-utils";
15 |
16 | export const Success: FC = observer(function () {
17 | const scale = useScale();
18 | const styles = createStyles({ scale });
19 | const { puzzle, router } = useCoreStores();
20 | const interactionsDisabledRef = useRef(false);
21 |
22 | // Routing setup
23 | const startNewGame = () => router.changeRoute("intro");
24 | const navigateToHome = () => router.changeRoute("home");
25 |
26 | // Animations setup
27 | // https://github.com/facebook/react-native/issues/27146
28 | const maxOpacity = Platform.OS === "android" ? 0.99 : 1;
29 | const fadeInterfaceInAnimDuration = 400;
30 | const fadeInterfaceInStaggerDuration = 200;
31 | const fadeRootOutDuration = 200;
32 | const fadeTitleAnim = useAnimation();
33 | const fadeSubtilteAnim = useAnimation();
34 | const fadeBottomNavAnim = useAnimation();
35 | const fadeScoreAnim = useAnimation();
36 | const fadeRootAnim = useAnimation(maxOpacity);
37 | const fadeInterfaceIn = () =>
38 | Animated.stagger(fadeInterfaceInStaggerDuration, [
39 | fadeTitleAnim.setup({ duration: fadeInterfaceInAnimDuration }),
40 | fadeSubtilteAnim.setup({ duration: fadeInterfaceInAnimDuration }),
41 | fadeBottomNavAnim.setup({ duration: fadeInterfaceInAnimDuration }),
42 | fadeScoreAnim.setup({ duration: fadeInterfaceInAnimDuration }),
43 | ]);
44 | const fadeRootOut = () =>
45 | fadeRootAnim.setup({ duration: fadeRootOutDuration });
46 |
47 | useOnMount(() => {
48 | fadeInterfaceIn().start();
49 | });
50 |
51 | // Callback handlers
52 | const handleMenuPress = () => {
53 | if (interactionsDisabledRef.current) return;
54 | interactionsDisabledRef.current = true;
55 | fadeRootOut().start(() => {
56 | navigateToHome();
57 | });
58 | };
59 | const handleNewPuzzlePress = () => {
60 | if (interactionsDisabledRef.current) return;
61 | interactionsDisabledRef.current = true;
62 | fadeRootOut().start(startNewGame);
63 | };
64 |
65 | const fitFontSize = scaleTextToFit(scale, `${puzzle.prefix} ${puzzle.name}`);
66 |
67 | const scoreStyle: ViewStyle = {
68 | top: metrics.screenMargin,
69 | };
70 |
71 | return (
72 |
73 |
74 | {puzzle.increasesScore && (
75 |
80 | )}
81 |
82 |
88 |
95 | Completed
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | );
104 | });
105 |
106 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
107 | root: {
108 | flex: 1,
109 | marginHorizontal: metrics.screenMargin,
110 | },
111 | middle: {
112 | flex: 1,
113 | justifyContent: "center",
114 | },
115 | textCompleted: {
116 | fontSize: scale(36),
117 | },
118 | textScoreValue: {
119 | fontSize: scale(32),
120 | },
121 | completedWrapper: {
122 | flexDirection: "row",
123 | },
124 | });
125 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "OrdinaryPuzzles",
3 | "version": "0.0.1",
4 | "private": true,
5 | "author": "Mazzarolo Matteo",
6 | "description": "Minimalistic puzzle game inspired by Picross and Sudoku.",
7 | "main": "./public/electron.js",
8 | "scripts": {
9 | "android:dev": "react-native run-android",
10 | "ios:dev": "react-native run-ios",
11 | "web:dev": "PUBLIC_URL='/play' react-app-rewired start",
12 | "web:build": "PUBLIC_URL='/play' NODE_ENV=production react-app-rewired build",
13 | "electron:dev": "run-p --print-label electron:dev:*",
14 | "electron:dev:cra": "PUBLIC_URL='./' BROWSER=none ELECTRON=true react-app-rewired start",
15 | "electron:dev:start": "wait-on tcp:3000 && ELECTRON_START_URL=http://localhost:3000 electron .",
16 | "electron:build": "run-s --print-label electron:build:*",
17 | "electron:build:cra": "PUBLIC_URL='./' NODE_ENV=production ELECTRON=true react-app-rewired build",
18 | "electron:build:package": "electron-builder build --mac -c.extraMetadata.main=build/electron.js --publish never",
19 | "start": "react-native start",
20 | "test": "jest",
21 | "test:watch": "jest --watch",
22 | "lint": "eslint 'src/' --ext .js,.jsx,.ts,.tsx",
23 | "lint:fix": "yarn lint --fix",
24 | "typecheck": "tsc",
25 | "xcode": "open ios/OrdinaryPuzzles.xcworkspace",
26 | "studio": "open -a /Applications/Android\\ Studio.app ./android/",
27 | "postinstall": "electron-builder install-app-deps"
28 | },
29 | "dependencies": {
30 | "@react-native-community/async-storage": "^1.12.1",
31 | "lodash": "^4.17.20",
32 | "mobx": "^6.0.1",
33 | "mobx-logger": "^0.7.1",
34 | "mobx-react": "^7.0.0",
35 | "react": "16.13.1",
36 | "react-dom": "^17.0.1",
37 | "react-native": "0.63.3",
38 | "react-native-bootsplash": "^1.0.3",
39 | "react-native-haptic": "oblador/react-native-haptic#package-cleanup",
40 | "react-native-immersive": "^2.0.0",
41 | "react-native-keep-awake": "corbt/react-native-keep-awake#146c2db",
42 | "react-native-sound": "^0.11.0",
43 | "react-native-web": "^0.14.4",
44 | "tinycolor2": "^1.4.2"
45 | },
46 | "devDependencies": {
47 | "@babel/core": "^7.8.4",
48 | "@babel/plugin-proposal-class-properties": "^7.8.4",
49 | "@babel/runtime": "^7.8.4",
50 | "@types/jest": "^26.0.14",
51 | "@types/lodash": "^4.14.162",
52 | "@types/react": "^16.9.34",
53 | "@types/react-native": "^0.63.25",
54 | "@types/react-test-renderer": "^16.9.3",
55 | "@types/tinycolor2": "^1.4.2",
56 | "babel-jest": "^24.9.0",
57 | "babel-plugin-module-resolver": "^4.0.0",
58 | "babel-plugin-transform-remove-console": "^6.9.4",
59 | "cross-env": "^7.0.3",
60 | "customize-cra": "^1.0.0",
61 | "electron": "^13.1.7",
62 | "electron-builder": "^22.11.7",
63 | "eslint": "^7.11.0",
64 | "eslint-config-prettier": "^6.12.0",
65 | "eslint-plugin-prettier": "^3.1.4",
66 | "husky": "^4.3.0",
67 | "jest": "^26.5.2",
68 | "lint-staged": "^10.4.0",
69 | "metro-react-native-babel-preset": "^0.59.0",
70 | "npm-run-all": "^4.1.5",
71 | "prettier": "^2.1.2",
72 | "react-app-rewired": "^2.1.6",
73 | "react-scripts": "^4.0.0",
74 | "react-test-renderer": "16.13.1",
75 | "typescript": "^4.0.3",
76 | "wait-on": "^6.0.0"
77 | },
78 | "jest": {
79 | "preset": "react-native"
80 | },
81 | "husky": {
82 | "hooks": {
83 | "pre-commit": "lint-staged",
84 | "pre-push": "npm run typecheck && npm run lint && npm run test"
85 | }
86 | },
87 | "lint-staged": {
88 | "*.{js,jsx,ts,tsx}": [
89 | "eslint --fix"
90 | ],
91 | "*.md": [
92 | "prettier --write"
93 | ]
94 | },
95 | "build": {
96 | "appId": "com.mmazzarolo.ordinarypuzzles",
97 | "files": [
98 | "**/*",
99 | "build/**/*",
100 | "node_modules/**/*"
101 | ],
102 | "directories": {
103 | "buildResources": "public"
104 | },
105 | "mac": {
106 | "target": "dmg",
107 | "category": "public.app-category.puzzle-games"
108 | },
109 | "win": {
110 | "target": "nsis"
111 | },
112 | "linux": {
113 | "target": "deb",
114 | "category": "Games"
115 | }
116 | },
117 | "browserslist": {
118 | "production": [
119 | ">0.2%",
120 | "not dead",
121 | "not op_mini all"
122 | ],
123 | "development": [
124 | "last 1 chrome version",
125 | "last 1 firefox version",
126 | "last 1 safari version"
127 | ]
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/src/op-tutorial/Tutorial.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useRef, useState } from "react";
2 | import {
3 | View,
4 | LayoutChangeEvent,
5 | LayoutRectangle,
6 | Platform,
7 | Dimensions,
8 | useWindowDimensions,
9 | } from "react-native";
10 | import { observer } from "mobx-react";
11 | import KeepAwake from "op-native/react-native-keep-awake";
12 | import { Board } from "op-board";
13 | import { useBoardStores } from "op-board";
14 | import { useCoreStores } from "op-core";
15 | import { metrics } from "op-design";
16 | import { BottomNav, Button, getBottomNavHeight } from "op-common";
17 | import {
18 | useAnimation,
19 | useOnMount,
20 | useHardwareBackButton,
21 | useScale,
22 | ScalingFunc,
23 | } from "op-utils";
24 | import { Description } from "./Description";
25 | import { clamp } from "lodash";
26 |
27 | export const Tutorial: FC = observer(function () {
28 | const scale = useScale();
29 | const styles = createStyles({ scale });
30 | const { board } = useBoardStores();
31 | const { puzzle, router } = useCoreStores();
32 |
33 | // Screen width/height setup
34 | const windowDimensions = useWindowDimensions();
35 | const screenWidth = Platform.select({
36 | native: Dimensions.get("screen").width,
37 | default: clamp(windowDimensions.width, metrics.webBoardMaxLayoutWidth),
38 | });
39 | const screenHeight = Platform.select({
40 | native: Dimensions.get("screen").height,
41 | default: windowDimensions.height,
42 | });
43 |
44 | // Routing setup
45 | const navigateToHome = () => router.changeRoute("home");
46 | const goToNextTutorial = () => puzzle.nextPuzzle();
47 | useHardwareBackButton(navigateToHome);
48 |
49 | // Disable interactions while animating
50 | const isUnmountingRef = useRef(false);
51 |
52 | // Fade UI animation
53 | const fadeInterfaceInAnimDuration = 200;
54 | const fadeInterfaceOutAnimDuration = 200;
55 | const fadeInterfaceAnim = useAnimation();
56 | useOnMount(() => {
57 | fadeInterfaceAnim.setup({ duration: fadeInterfaceInAnimDuration }).start();
58 | return () => {
59 | board.destroy();
60 | };
61 | });
62 |
63 | // Wait for every HUD pieces to be mounted so that we can measure their height
64 | // and make sure we can fit the board
65 | const [
66 | descriptionLayout,
67 | setDescriptionLayout,
68 | ] = useState(null);
69 | const handleDescriptionLayout = (event: LayoutChangeEvent) => {
70 | if (descriptionLayout?.height !== event.nativeEvent.layout.height) {
71 | setDescriptionLayout(event.nativeEvent.layout);
72 | }
73 | };
74 | const availableHorizontalSpace = screenWidth - metrics.screenMargin * 2;
75 | const availableVerticalSpace = descriptionLayout
76 | ? screenHeight -
77 | descriptionLayout.height -
78 | getBottomNavHeight(scale) -
79 | metrics.screenMargin * 8 // Additional vertical padding
80 | : undefined;
81 |
82 | // Callback handlers
83 | const handleMenuPress = () => {
84 | if (!isUnmountingRef.current) {
85 | navigateToHome();
86 | }
87 | };
88 | const handleBoardClearedAnimStart = () => {
89 | isUnmountingRef.current = true;
90 | fadeInterfaceAnim
91 | .setup({ duration: fadeInterfaceOutAnimDuration, toValue: 0 })
92 | .start();
93 | };
94 | const handleBoardClearedAnimEnd = () => {
95 | goToNextTutorial();
96 | };
97 |
98 | return (
99 |
100 |
101 |
107 |
108 | {puzzle.data && availableVerticalSpace && (
109 |
116 | )}
117 |
118 | {board.isInitialized && (
119 |
120 |
121 |
122 | )}
123 |
124 | );
125 | });
126 |
127 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
128 | root: {
129 | flex: 1,
130 | marginHorizontal: metrics.screenMargin,
131 | },
132 | boardWrapper: {
133 | flex: 1,
134 | justifyContent: "center",
135 | alignItems: "center",
136 | },
137 | });
138 |
--------------------------------------------------------------------------------
/src/op-game/Game.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useRef } from "react";
2 | import {
3 | View,
4 | Animated,
5 | Platform,
6 | Dimensions,
7 | useWindowDimensions,
8 | } from "react-native";
9 | import { observer } from "mobx-react";
10 | import KeepAwake from "op-native/react-native-keep-awake";
11 | import { Board } from "op-board";
12 | import { useCoreStores } from "op-core";
13 | import { useBoardStores } from "op-board";
14 | import {
15 | BottomNav,
16 | getBottomNavHeight,
17 | Button,
18 | Header,
19 | getHeaderHeight,
20 | } from "op-common";
21 | import { metrics, animations } from "op-design";
22 | import {
23 | useAnimation,
24 | useOnMount,
25 | useHardwareBackButton,
26 | useScale,
27 | ScalingFunc,
28 | } from "op-utils";
29 | import { clamp } from "lodash";
30 |
31 | export const Game: FC = observer(function () {
32 | const { puzzle, router } = useCoreStores();
33 | const { board } = useBoardStores();
34 | const interactionsDisabledRef = useRef(false);
35 |
36 | const scale = useScale();
37 | const styles = createStyles({ scale });
38 |
39 | // Screen width/height setup
40 | const windowDimensions = useWindowDimensions();
41 | const screenWidth = Platform.select({
42 | native: Dimensions.get("screen").width,
43 | default: clamp(windowDimensions.width, metrics.webBoardMaxLayoutWidth),
44 | });
45 | const screenHeight = Platform.select({
46 | native: Dimensions.get("screen").height,
47 | default: windowDimensions.height,
48 | });
49 |
50 | // Routing setup
51 | const navigateToHome = () => router.changeRoute("home");
52 | const navigateToSuccess = () => router.changeRoute("success");
53 | useHardwareBackButton(navigateToHome);
54 |
55 | // Animations setup
56 | // https://github.com/facebook/react-native/issues/27146
57 | const maxOpacity = Platform.OS === "android" ? 0.99 : 1;
58 | const fadeInterfaceInAnimDuration = 400;
59 | const fadeInterfaceOutAnimDuration = 200;
60 | const fadeRootOutDuration = 200;
61 | const fadeInterfaceAnim = useAnimation();
62 | const fadeRootAnim = useAnimation(maxOpacity);
63 | const fadeInterfaceIn = () =>
64 | fadeInterfaceAnim.setup({ duration: fadeInterfaceInAnimDuration });
65 | const fadeInterfaceOut = () =>
66 | fadeInterfaceAnim.setup({
67 | duration: fadeInterfaceOutAnimDuration,
68 | toValue: 0,
69 | });
70 | const fadeRootOut = () =>
71 | fadeRootAnim.setup({ duration: fadeRootOutDuration });
72 |
73 | useOnMount(() => {
74 | fadeInterfaceIn().start();
75 | });
76 |
77 | // Callback handlers
78 | const handleMenuPress = () => {
79 | if (interactionsDisabledRef.current) return;
80 | interactionsDisabledRef.current = true;
81 | fadeRootOut().start(navigateToHome);
82 | };
83 | const handleResetPress = () => {
84 | if (interactionsDisabledRef.current) return;
85 | board.reset();
86 | };
87 | const handleBoardClearedAnimStart = () => {
88 | interactionsDisabledRef.current = true;
89 | puzzle.onPuzzleCompleted();
90 | };
91 | const handleBoardClearedAnimEnd = () => {
92 | board.destroy();
93 | fadeInterfaceOut().start(navigateToSuccess);
94 | };
95 |
96 | // Calculate the available space for the board
97 | const availableHorizontalSpace = screenWidth - metrics.screenMargin * 2;
98 | const availableVerticalSpace =
99 | screenHeight -
100 | metrics.screenMargin * 2 -
101 | getBottomNavHeight(scale) -
102 | getHeaderHeight(scale) -
103 | metrics.screenMargin * 4; // Additional vertical padding
104 |
105 | return (
106 |
107 |
108 |
113 |
114 | {puzzle.data && (
115 |
121 | )}
122 |
123 |
124 |
125 |
126 |
127 |
128 | );
129 | });
130 |
131 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
132 | root: {
133 | marginHorizontal: metrics.screenMargin,
134 | flex: 1,
135 | },
136 | boardWrapper: {
137 | flex: 1,
138 | justifyContent: "center",
139 | alignItems: "center",
140 | },
141 | });
142 |
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable/ic_launcher_background.xml:
--------------------------------------------------------------------------------
1 |
2 |
8 |
10 |
12 |
14 |
16 |
18 |
20 |
22 |
24 |
26 |
28 |
30 |
32 |
34 |
36 |
38 |
40 |
42 |
44 |
46 |
48 |
50 |
52 |
54 |
56 |
58 |
60 |
62 |
64 |
66 |
68 |
70 |
72 |
74 |
75 |
--------------------------------------------------------------------------------
/src/op-home/Home.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useState } from "react";
2 | import { View, Animated, Platform, ViewStyle } from "react-native";
3 | import { observer } from "mobx-react";
4 | import { useCoreStores, PuzzleMode } from "op-core";
5 | import { useBoardStores } from "op-board";
6 | import { metrics, animations } from "op-design";
7 | import { useScale, useAnimation, useOnMount, ScalingFunc } from "op-utils";
8 | import { Score } from "op-common";
9 | import { Logo } from "./Logo";
10 | import { Menu, MenuItem } from "./Menu";
11 | import { About } from "./About";
12 |
13 | export const Home: FC = observer(function () {
14 | const scale = useScale();
15 | const styles = createStyles({ scale });
16 |
17 | // Initialization
18 | const { router, stats } = useCoreStores();
19 | const { board } = useBoardStores();
20 |
21 | // Animations setup
22 | // https://github.com/facebook/react-native/issues/27146
23 | const maxOpacity = Platform.OS === "android" ? 0.99 : 1;
24 | const animateInSequence = !router.hasLoadedHomeOnce;
25 | const titleAnimDuration = 600;
26 | const menuAnimDuration = 600;
27 | const dotAnimDuration = 200;
28 | const rootFadeInAnimDuration = 200;
29 | const rootFadeOutAnimDuration = 200;
30 | const [isMenuDisabled, setIsMenuDisabled] = useState(true);
31 | const titleAnim = useAnimation(animateInSequence ? 0 : 1);
32 | const menuAnim = useAnimation(animateInSequence ? 0 : 1);
33 | const dotAnim = useAnimation(animateInSequence ? 0 : 1);
34 | const rootFadeAnim = useAnimation(animateInSequence ? maxOpacity : 0);
35 | useOnMount(() => {
36 | if (router.hasLoadedHomeOnce) {
37 | rootFadeAnim.setup({ duration: rootFadeInAnimDuration }).start(() => {
38 | setIsMenuDisabled(false);
39 | });
40 | } else {
41 | Animated.sequence([
42 | titleAnim.setup({ duration: titleAnimDuration }),
43 | dotAnim.setup({ duration: dotAnimDuration }),
44 | ]).start(() => {
45 | setIsMenuDisabled(false);
46 | menuAnim.setup({ duration: menuAnimDuration }).start();
47 | });
48 | }
49 | });
50 |
51 | // Menu items setup
52 | const canContinue = board.isInitialized;
53 | const handleItemPress = (value: PuzzleMode | "continue") => {
54 | if (isMenuDisabled) return;
55 | setIsMenuDisabled(true);
56 | rootFadeAnim
57 | .setup({ duration: rootFadeOutAnimDuration, toValue: 0 })
58 | .start(() => {
59 | if (value === "tutorial") {
60 | router.changeRoute(value);
61 | } else {
62 | router.changeRoute("intro", value);
63 | }
64 | });
65 | };
66 | const menuItems: MenuItem[] = [
67 | {
68 | label: "tutorial",
69 | value: "tutorial",
70 | onPress: handleItemPress,
71 | highlighted: !canContinue,
72 | starred: !stats.tutorialCompleted && !canContinue,
73 | },
74 | {
75 | label: "small",
76 | value: "small",
77 | onPress: handleItemPress,
78 | highlighted: !canContinue,
79 | },
80 | {
81 | label: "medium",
82 | value: "medium",
83 | onPress: handleItemPress,
84 | highlighted: !canContinue,
85 | },
86 | {
87 | label: "large",
88 | value: "large",
89 | onPress: handleItemPress,
90 | highlighted: !canContinue,
91 | },
92 | ];
93 | if (canContinue) {
94 | menuItems.unshift({
95 | label: "continue",
96 | value: "continue",
97 | onPress: handleItemPress,
98 | highlighted: true,
99 | });
100 | }
101 |
102 | // Score setup
103 | const scoreStyle: ViewStyle = {
104 | top: metrics.screenMargin,
105 | right: metrics.screenMargin,
106 | };
107 | const handleScorePress = () => {
108 | if (isMenuDisabled) return;
109 | setIsMenuDisabled(true);
110 | rootFadeAnim
111 | .setup({ duration: rootFadeOutAnimDuration, toValue: 0 })
112 | .start(() => {
113 | router.changeRoute("stats");
114 | });
115 | };
116 |
117 | return (
118 |
119 |
120 |
121 |
122 |
123 |
128 |
129 |
135 | {Platform.OS === "web" && (
136 |
137 | )}
138 |
139 | );
140 | });
141 |
142 | const createStyles = ({ scale }: { scale: ScalingFunc }): any => ({
143 | root: {
144 | flex: 1,
145 | paddingVertical: metrics.screenMargin * 2,
146 | paddingHorizontal: metrics.screenMargin,
147 | },
148 | top: {
149 | flex: 1,
150 | justifyContent: "center",
151 | },
152 | bottom: {
153 | flex: 1,
154 | flexDirection: "column",
155 | justifyContent: "flex-end",
156 | },
157 | about: {
158 | position: "absolute",
159 | alignItems: "flex-end",
160 | bottom: metrics.screenMargin * 2 + scale(5),
161 | right: metrics.screenMargin,
162 | },
163 | });
164 |
--------------------------------------------------------------------------------
/src/op-board/Board.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, useEffect } from "react";
2 | import { View, StyleSheet, Animated, Platform } from "react-native";
3 | import { reaction } from "mobx";
4 | import { observer } from "mobx-react";
5 | import { animations, useColors } from "op-design";
6 | import { useAnimation, useOnMount, hapticFeedback } from "op-utils";
7 | import { useCoreStores } from "op-core";
8 | import { autoSolve } from "op-config";
9 | import { useBoardStores } from "./store";
10 | import { Tile } from "./Tile";
11 | import { PointerAwareView } from "./PointerAwareView";
12 |
13 | const isAndroid = Platform.OS === "android";
14 |
15 | interface BoardProps {
16 | availableHorizontalSpace: number;
17 | availableVerticalSpace: number;
18 | onClearedAnimEnd?: () => void;
19 | onClearedAnimStart?: () => void;
20 | }
21 |
22 | export const Board: FC = observer(function ({
23 | availableHorizontalSpace,
24 | availableVerticalSpace,
25 | onClearedAnimEnd = () => undefined,
26 | onClearedAnimStart = () => undefined,
27 | }) {
28 | const { board, interactions } = useBoardStores();
29 | const { puzzle } = useCoreStores();
30 | const colors = useColors();
31 |
32 | // Animations setup
33 | const fadeInAnimDuration = 400;
34 | const fadeOutAnimDuration = 200;
35 | const successAnimDuration = 200;
36 | const successAnimDelay = 400;
37 | const fadeAnim = useAnimation();
38 | const successAnim = useAnimation();
39 | const animateSuccess = () => {
40 | onClearedAnimStart();
41 | Animated.sequence([
42 | successAnim.setup({
43 | duration: successAnimDuration,
44 | useNativeDriver: false,
45 | }),
46 | Animated.delay(successAnimDelay),
47 | fadeAnim.setup({ duration: fadeOutAnimDuration, toValue: 0 }),
48 | ]).start(onClearedAnimEnd);
49 | };
50 |
51 | useOnMount(() => {
52 | fadeAnim.setup({ duration: fadeInAnimDuration }).start();
53 | });
54 |
55 | // Auto-solve the puzzle in development mode if needed
56 | if (autoSolve) {
57 | useOnMount(() => {
58 | setTimeout(animateSuccess, 2000);
59 | });
60 | }
61 |
62 | // - Trigger an light haptic feedback when a cell is pressed
63 | // - Trigger the success animation when the board is cleared
64 | useEffect(() => {
65 | if (!puzzle.data) {
66 | throw new Error('Board » missing "puzzle.data"');
67 | }
68 | const isContinuing = puzzle.id === board.puzzleId;
69 | if (!isContinuing) {
70 | board.initialize(puzzle.id, puzzle.data);
71 | }
72 | const disposeHapticReaction = reaction(
73 | () => interactions.hoveredCell,
74 | () => hapticFeedback.generate("impactLight")
75 | );
76 | const disposeClearedReaction = reaction(
77 | () => board.cleared,
78 | (didSucceed) => {
79 | if (didSucceed) animateSuccess();
80 | }
81 | );
82 | return () => {
83 | disposeHapticReaction();
84 | disposeClearedReaction();
85 | };
86 | // eslint-disable-next-line react-hooks/exhaustive-deps
87 | }, [puzzle.id]);
88 |
89 | // Don't show the board unless initializes, otherwise the cells might not
90 | // work correctly
91 | if (!board.isInitialized) return null;
92 |
93 | // Scale the board given the vertical and horizontal contraints defined
94 | // in the pros
95 | const doesBoardFitVertically =
96 | (availableHorizontalSpace / board.colsCount) * board.rowsCount <
97 | availableVerticalSpace;
98 | const tileSize = doesBoardFitVertically
99 | ? Math.floor(availableHorizontalSpace / board.colsCount)
100 | : Math.floor(availableVerticalSpace / board.rowsCount);
101 |
102 | // On Android transitioning the opacity of the root view causes a janky
103 | // animation. As a workaround we place an absolutely positioned layer on top
104 | // of the UI and transition its opacity instead.
105 | const androidOpacityStyle = {
106 | backgroundColor: colors.primary[9],
107 | opacity: fadeAnim.value.interpolate({
108 | inputRange: [0, 1],
109 | outputRange: [1, 0],
110 | }),
111 | };
112 |
113 | return (
114 | interactions.onGridPointerDown(coords)}
116 | onPointerMove={(coords) => interactions.onGridPointerMove(coords)}
117 | onPointerUp={(coords) => interactions.onGridPointerUp(coords)}
118 | onLayout={(e) => interactions.enableInteraction(e)}
119 | pointerEnabled={!board.cleared}
120 | style={styles.root}
121 | >
122 |
123 | {board.grid.map((cellsRow, rowIndex) => (
124 |
125 | {cellsRow.map((cell) => (
126 |
132 | ))}
133 |
134 | ))}
135 |
136 | {isAndroid && (
137 |
141 | )}
142 |
143 | );
144 | });
145 |
146 | const styles = StyleSheet.create({
147 | root: {},
148 | row: {
149 | flexDirection: "row",
150 | },
151 | androidOpacity: {
152 | position: "absolute",
153 | top: -5,
154 | left: -5,
155 | right: -5,
156 | bottom: -5,
157 | },
158 | });
159 |
--------------------------------------------------------------------------------
/src/serviceWorkerRegistration.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://cra.link/PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === "localhost" ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === "[::1]" ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
32 | if (publicUrl.origin !== window.location.origin) {
33 | // Our service worker won't work if PUBLIC_URL is on a different origin
34 | // from what our page is served on. This might happen if a CDN is used to
35 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
36 | return;
37 | }
38 |
39 | window.addEventListener("load", () => {
40 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
41 |
42 | if (isLocalhost) {
43 | // This is running on localhost. Let's check if a service worker still exists or not.
44 | checkValidServiceWorker(swUrl, config);
45 |
46 | // Add some additional logging to localhost, pointing developers to the
47 | // service worker/PWA documentation.
48 | navigator.serviceWorker.ready.then(() => {
49 | console.log(
50 | "This web app is being served cache-first by a service " +
51 | "worker. To learn more, visit https://cra.link/PWA"
52 | );
53 | });
54 | } else {
55 | // Is not localhost. Just register service worker
56 | registerValidSW(swUrl, config);
57 | }
58 | });
59 | }
60 | }
61 |
62 | function registerValidSW(swUrl: string, config?: Config) {
63 | navigator.serviceWorker
64 | .register(swUrl)
65 | .then((registration) => {
66 | registration.onupdatefound = () => {
67 | const installingWorker = registration.installing;
68 | if (installingWorker == null) {
69 | return;
70 | }
71 | installingWorker.onstatechange = () => {
72 | if (installingWorker.state === "installed") {
73 | if (navigator.serviceWorker.controller) {
74 | // At this point, the updated precached content has been fetched,
75 | // but the previous service worker will still serve the older
76 | // content until all client tabs are closed.
77 | console.log(
78 | "New content is available and will be used when all " +
79 | "tabs for this page are closed. See https://cra.link/PWA."
80 | );
81 |
82 | // Execute callback
83 | if (config && config.onUpdate) {
84 | config.onUpdate(registration);
85 | }
86 | } else {
87 | // At this point, everything has been precached.
88 | // It's the perfect time to display a
89 | // "Content is cached for offline use." message.
90 | console.log("Content is cached for offline use.");
91 |
92 | // Execute callback
93 | if (config && config.onSuccess) {
94 | config.onSuccess(registration);
95 | }
96 | }
97 | }
98 | };
99 | };
100 | })
101 | .catch((error) => {
102 | console.error("Error during service worker registration:", error);
103 | });
104 | }
105 |
106 | function checkValidServiceWorker(swUrl: string, config?: Config) {
107 | // Check if the service worker can be found. If it can't reload the page.
108 | fetch(swUrl, {
109 | headers: { "Service-Worker": "script" },
110 | })
111 | .then((response) => {
112 | // Ensure service worker exists, and that we really are getting a JS file.
113 | const contentType = response.headers.get("content-type");
114 | if (
115 | response.status === 404 ||
116 | (contentType != null && contentType.indexOf("javascript") === -1)
117 | ) {
118 | // No service worker found. Probably a different app. Reload the page.
119 | navigator.serviceWorker.ready.then((registration) => {
120 | registration.unregister().then(() => {
121 | window.location.reload();
122 | });
123 | });
124 | } else {
125 | // Service worker found. Proceed as normal.
126 | registerValidSW(swUrl, config);
127 | }
128 | })
129 | .catch(() => {
130 | console.log(
131 | "No internet connection found. App is running in offline mode."
132 | );
133 | });
134 | }
135 |
136 | export function unregister() {
137 | if ("serviceWorker" in navigator) {
138 | navigator.serviceWorker.ready
139 | .then((registration) => {
140 | registration.unregister();
141 | })
142 | .catch((error) => {
143 | console.error(error.message);
144 | });
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/op-board/Tile.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 | import {
3 | StyleSheet,
4 | View,
5 | TextStyle,
6 | ViewStyle,
7 | Animated,
8 | Platform,
9 | } from "react-native";
10 | import { observer } from "mobx-react";
11 | import { useColors } from "op-design";
12 | import { Text } from "op-common";
13 | import { Cell } from "./store";
14 |
15 | interface Props {
16 | cell: Cell;
17 | size: number;
18 | successAnimValue: Animated.Value;
19 | }
20 |
21 | export const calculateFontSize = (size: number) => size * 0.6;
22 |
23 | export const calculateBorderWidth = (size: number) => Math.floor(size / 14);
24 |
25 | const adjustBorderForOrientation = (cell: Cell, style: ViewStyle) => {
26 | if (cell.orientation === "horizontal-left") {
27 | style.borderRightWidth = 0;
28 | }
29 | if (cell.orientation === "horizontal-middle") {
30 | style.borderRightWidth = 0;
31 | style.borderLeftWidth = 0;
32 | }
33 | if (cell.orientation === "horizontal-right") {
34 | style.borderLeftWidth = 0;
35 | }
36 | if (cell.orientation === "vertical-top") {
37 | style.borderBottomWidth = 0;
38 | }
39 | if (cell.orientation === "vertical-middle") {
40 | style.borderBottomWidth = 0;
41 | style.borderTopWidth = 0;
42 | }
43 | if (cell.orientation === "vertical-bottom") {
44 | style.borderTopWidth = 0;
45 | }
46 | };
47 |
48 | export const Tile: FC = observer(function (props) {
49 | const colors = useColors();
50 | const { cell, size, successAnimValue } = props;
51 |
52 | // Border width
53 | const borderWidth = calculateBorderWidth(size);
54 |
55 | // Tile size
56 | let tileStyle: ViewStyle = {};
57 | tileStyle.width = size;
58 | tileStyle.height = size;
59 | if (cell.col === 0) {
60 | tileStyle.width = size + borderWidth;
61 | }
62 | if (cell.row === 0) {
63 | tileStyle.height = size + borderWidth;
64 | }
65 |
66 | // Tile border style
67 | tileStyle.borderColor = colors.primary[7];
68 | tileStyle.borderRightWidth = borderWidth;
69 | tileStyle.borderBottomWidth = borderWidth;
70 | if (cell.col === 0) {
71 | tileStyle.borderLeftWidth = borderWidth;
72 | }
73 | if (cell.row === 0) {
74 | tileStyle.borderTopWidth = borderWidth;
75 | }
76 | adjustBorderForOrientation(cell, tileStyle);
77 | // @ts-ignore
78 | tileStyle.borderColor = successAnimValue.interpolate({
79 | inputRange: [0, 1],
80 | outputRange: [colors.primary[7], colors.primary[9]],
81 | });
82 |
83 | // Tile background color
84 | tileStyle.backgroundColor = "transparent";
85 | if (cell.completed) {
86 | tileStyle.backgroundColor = colors.primary[3];
87 | } else if (cell.orientation !== "none") {
88 | tileStyle.backgroundColor = colors.primary[5];
89 | }
90 |
91 | // Content color (shouldn't be needed, but declaring it here fixes some a
92 | // couple of white gaps on Android)
93 | const contentStyle: ViewStyle = {};
94 | if (cell.completed) {
95 | contentStyle.backgroundColor = colors.primary[3];
96 | } else if (cell.orientation !== "none") {
97 | contentStyle.backgroundColor = colors.primary[5];
98 | }
99 |
100 | // Content border
101 | if (cell.orientation !== "none") {
102 | contentStyle.borderColor = colors.primary[1];
103 | contentStyle.borderTopWidth = borderWidth;
104 | contentStyle.borderRightWidth = borderWidth;
105 | contentStyle.borderBottomWidth = borderWidth;
106 | contentStyle.borderLeftWidth = borderWidth;
107 | }
108 | adjustBorderForOrientation(cell, contentStyle);
109 |
110 | // Content position
111 | contentStyle.top = -borderWidth;
112 | contentStyle.left = -borderWidth;
113 | contentStyle.right = -borderWidth;
114 | contentStyle.bottom = -borderWidth;
115 |
116 | // Text style
117 | const textStyle: TextStyle = {};
118 | if (cell.value === "." && cell.orientation === "none") {
119 | textStyle.color = colors.primary[0];
120 | } else {
121 | textStyle.color = "#fff";
122 | }
123 | textStyle.fontSize = calculateFontSize(size);
124 | if (Platform.OS === "android" || Platform.OS === "ios") {
125 | textStyle.paddingRight = borderWidth / 2;
126 | textStyle.paddingBottom = borderWidth;
127 | if (cell.col === 0) {
128 | textStyle.paddingRight = 0;
129 | }
130 | if (cell.row === 0) {
131 | textStyle.paddingBottom = 0;
132 | }
133 | } else {
134 | // For some reasons on the web the text centering glitches a bit when a cell
135 | // is extended... I suppose there might be some differences on who the cell
136 | // border is kept into account for the centering calculation.
137 | if (
138 | cell.orientation === "horizontal-middle" ||
139 | cell.orientation === "horizontal-left"
140 | ) {
141 | textStyle.paddingRight = borderWidth;
142 | }
143 | if (
144 | cell.orientation === "vertical-middle" ||
145 | cell.orientation === "vertical-top"
146 | ) {
147 | textStyle.paddingBottom = borderWidth;
148 | }
149 | }
150 |
151 | if (Platform.OS !== "android" && Platform.OS !== "ios") {
152 | // @ts-ignore
153 | textStyle.userSelect = "none";
154 | }
155 |
156 | // Hover style
157 | const hoverStyle: ViewStyle = {};
158 | hoverStyle.backgroundColor = colors.primary[9];
159 |
160 | // Symbol
161 | const symbol = cell.value === "." ? "•" : cell.value;
162 |
163 | return (
164 |
165 |
166 |
171 | {symbol}
172 |
173 | {cell.highlighted && }
174 |
175 | );
176 | });
177 |
178 | const styles = StyleSheet.create({
179 | root: {
180 | position: "relative",
181 | justifyContent: "center",
182 | alignItems: "center",
183 | },
184 | text: {
185 | position: "absolute",
186 | textAlign: "center",
187 | justifyContent: "center",
188 | alignItems: "center",
189 | },
190 | content: {
191 | position: "absolute",
192 | justifyContent: "center",
193 | alignItems: "center",
194 | },
195 | hover: {
196 | position: "absolute",
197 | opacity: 0.5,
198 | top: 0,
199 | left: 0,
200 | right: 0,
201 | bottom: 0,
202 | },
203 | });
204 |
--------------------------------------------------------------------------------
/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 | # Determine the Java command to use to start the JVM.
86 | if [ -n "$JAVA_HOME" ] ; then
87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
88 | # IBM's JDK on AIX uses strange locations for the executables
89 | JAVACMD="$JAVA_HOME/jre/sh/java"
90 | else
91 | JAVACMD="$JAVA_HOME/bin/java"
92 | fi
93 | if [ ! -x "$JAVACMD" ] ; then
94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
95 |
96 | Please set the JAVA_HOME variable in your environment to match the
97 | location of your Java installation."
98 | fi
99 | else
100 | JAVACMD="java"
101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
102 |
103 | Please set the JAVA_HOME variable in your environment to match the
104 | location of your Java installation."
105 | fi
106 |
107 | # Increase the maximum file descriptors if we can.
108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
109 | MAX_FD_LIMIT=`ulimit -H -n`
110 | if [ $? -eq 0 ] ; then
111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
112 | MAX_FD="$MAX_FD_LIMIT"
113 | fi
114 | ulimit -n $MAX_FD
115 | if [ $? -ne 0 ] ; then
116 | warn "Could not set maximum file descriptor limit: $MAX_FD"
117 | fi
118 | else
119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
120 | fi
121 | fi
122 |
123 | # For Darwin, add options to specify how the application appears in the dock
124 | if $darwin; then
125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
126 | fi
127 |
128 | # For Cygwin or MSYS, switch paths to Windows format before running java
129 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
132 | JAVACMD=`cygpath --unix "$JAVACMD"`
133 |
134 | # We build the pattern for arguments to be converted via cygpath
135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
136 | SEP=""
137 | for dir in $ROOTDIRSRAW ; do
138 | ROOTDIRS="$ROOTDIRS$SEP$dir"
139 | SEP="|"
140 | done
141 | OURCYGPATTERN="(^($ROOTDIRS))"
142 | # Add a user-defined pattern to the cygpath arguments
143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
145 | fi
146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
147 | i=0
148 | for arg in "$@" ; do
149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
151 |
152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
154 | else
155 | eval `echo args$i`="\"$arg\""
156 | fi
157 | i=`expr $i + 1`
158 | done
159 | case $i in
160 | 0) set -- ;;
161 | 1) set -- "$args0" ;;
162 | 2) set -- "$args0" "$args1" ;;
163 | 3) set -- "$args0" "$args1" "$args2" ;;
164 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
165 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
166 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
167 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
168 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
169 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
170 | esac
171 | fi
172 |
173 | # Escape application args
174 | save () {
175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
176 | echo " "
177 | }
178 | APP_ARGS=`save "$@"`
179 |
180 | # Collect all arguments for the java command, following the shell quoting and substitution rules
181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
182 |
183 | exec "$JAVACMD" "$@"
--------------------------------------------------------------------------------
/src/op-core/store.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from "react";
2 | import {
3 | observable,
4 | action,
5 | computed,
6 | toJS,
7 | runInAction,
8 | makeObservable,
9 | } from "mobx";
10 | import { rehydrateObject, persistObject, pickRandomPuzzle } from "op-utils";
11 | import uniq from "lodash/uniq";
12 | import puzzles from "./puzzles.json";
13 |
14 | export type Route =
15 | | "home"
16 | | "game"
17 | | "intro"
18 | | "tutorial"
19 | | "success"
20 | | "stats";
21 | export type PuzzleMode = "tutorial" | "small" | "medium" | "large";
22 |
23 | const sum = (a: number, b: number) => a + b;
24 |
25 | class RouterStore {
26 | root: RootStore;
27 |
28 | currentRoute: Route;
29 | routesHistory = observable.array();
30 |
31 | constructor(rootStore: RootStore) {
32 | this.root = rootStore;
33 | this.currentRoute = "home";
34 | this.routesHistory.replace(["home"]);
35 |
36 | makeObservable(this, {
37 | currentRoute: observable,
38 | routesHistory: observable,
39 | hasLoadedHomeOnce: computed,
40 | changeRoute: action,
41 | });
42 | }
43 |
44 | get hasLoadedHomeOnce() {
45 | return (
46 | this.routesHistory.length > 1 &&
47 | this.routesHistory.filter((x) => x === "home").length > 1
48 | );
49 | }
50 |
51 | changeRoute(route: Route, puzzleMode?: PuzzleMode | "continue") {
52 | switch (route) {
53 | case "intro": {
54 | if (puzzleMode !== "continue") {
55 | this.root.puzzle.setRandomPuzzle(puzzleMode);
56 | }
57 | break;
58 | }
59 | case "tutorial": {
60 | this.root.puzzle.setPuzzle("tutorial", 0);
61 | break;
62 | }
63 | case "home":
64 | case "game":
65 | case "success":
66 | case "stats": {
67 | break;
68 | }
69 | default: {
70 | throw new Error(`"RouterStore.changeRoute » Invalid route ${route}`);
71 | }
72 | }
73 | this.currentRoute = route;
74 | this.routesHistory.push(route);
75 | }
76 | }
77 |
78 | class PuzzleStore {
79 | root: RootStore;
80 |
81 | mode?: PuzzleMode = undefined;
82 | index?: number = undefined;
83 | increasesScore: boolean = false;
84 |
85 | constructor(rootStore: RootStore) {
86 | this.root = rootStore;
87 | this.increasesScore = false;
88 |
89 | makeObservable(this, {
90 | mode: observable,
91 | index: observable,
92 | increasesScore: observable,
93 | current: computed,
94 | name: computed,
95 | prefix: computed,
96 | id: computed,
97 | data: computed,
98 | type: computed,
99 | score: computed,
100 | isTutorialEnd: computed,
101 | tutorialTitle: computed,
102 | tutorialMessage: computed,
103 | setPuzzle: action,
104 | setRandomPuzzle: action,
105 | nextPuzzle: action,
106 | onPuzzleCompleted: action,
107 | reset: action,
108 | });
109 | }
110 |
111 | get current() {
112 | if (this.mode && this.index !== undefined) {
113 | return puzzles[this.mode][this.index];
114 | } else {
115 | return undefined;
116 | }
117 | }
118 |
119 | get name() {
120 | return this.current?.name || "";
121 | }
122 |
123 | get prefix() {
124 | const modePrefix = {
125 | tutorial: "xs",
126 | small: "sm",
127 | medium: "md",
128 | large: "lg",
129 | };
130 | return this.mode ? modePrefix[this.mode] : "ko";
131 | }
132 |
133 | get id() {
134 | return this.name;
135 | }
136 |
137 | get data() {
138 | return this.current?.data;
139 | }
140 |
141 | get type() {
142 | // @ts-ignore
143 | return this.current?.type || "puzzle";
144 | }
145 |
146 | get score() {
147 | return this.current?.score || 0;
148 | }
149 |
150 | /* ===================
151 | * TUTORIAL
152 | * =================== */
153 | get isTutorialEnd() {
154 | return (
155 | this.mode === "tutorial" && this.index === puzzles.tutorial.length - 1
156 | );
157 | }
158 |
159 | get tutorialTitle() {
160 | // @ts-ignore
161 | return this.current?.title || "";
162 | }
163 |
164 | get tutorialMessage() {
165 | // @ts-ignore
166 | return this.current?.message || "";
167 | }
168 |
169 | /* ===================
170 | * GENERIC ACTIONS
171 | * =================== */
172 | setPuzzle(mode: PuzzleMode = this.mode || "small", index: number) {
173 | this.mode = mode;
174 | this.index = index;
175 | this.root.stats.updatePlayedPuzzles(mode, index);
176 | this.increasesScore =
177 | this.root.stats.completedPuzzles[this.mode]?.indexOf(this.index) === -1;
178 | }
179 |
180 | setRandomPuzzle(mode: PuzzleMode = this.mode || "small") {
181 | const randomPuzzleIndex = pickRandomPuzzle({
182 | allPuzzlesLength: puzzles[mode].length,
183 | playedHistory: this.root.stats.playedPuzzles[mode],
184 | completedHistory: this.root.stats.completedPuzzles[mode],
185 | });
186 | this.setPuzzle(mode, randomPuzzleIndex);
187 | }
188 |
189 | nextPuzzle() {
190 | if (this.index !== undefined) this.index = this.index + 1;
191 | }
192 |
193 | onPuzzleCompleted() {
194 | this.root.stats.updateCompletedPuzzles(this.mode, this.index);
195 | }
196 |
197 | reset() {
198 | this.mode = undefined;
199 | this.index = undefined;
200 | }
201 | }
202 |
203 | const emptyPuzzleHistory: Record = {
204 | tutorial: [],
205 | small: [],
206 | medium: [],
207 | large: [],
208 | };
209 |
210 | class StatsStore {
211 | root: RootStore;
212 |
213 | initialized: boolean;
214 | playedPuzzles: Record;
215 | completedPuzzles: Record;
216 |
217 | constructor(rootStore: RootStore) {
218 | this.root = rootStore;
219 | this.initialized = false;
220 | this.playedPuzzles = emptyPuzzleHistory;
221 | this.completedPuzzles = emptyPuzzleHistory;
222 |
223 | makeObservable(this, {
224 | initialized: observable,
225 | playedPuzzles: observable,
226 | completedPuzzles: observable,
227 | initializeStore: action,
228 | score: computed,
229 | tutorialCompleted: computed,
230 | updateCompletedPuzzles: action,
231 | updatePlayedPuzzles: action,
232 | });
233 | }
234 |
235 | async initializeStore() {
236 | const playedPuzzles = await rehydrateObject("playedPuzzles");
237 | runInAction(() => {
238 | this.playedPuzzles = playedPuzzles || emptyPuzzleHistory;
239 | });
240 | const completedPuzzles = await rehydrateObject("completedPuzzles");
241 | runInAction(() => {
242 | this.completedPuzzles = completedPuzzles || emptyPuzzleHistory;
243 | });
244 | runInAction(() => {
245 | this.initialized = true;
246 | });
247 | }
248 |
249 | get score() {
250 | const _score = (Object.keys(this.completedPuzzles) as PuzzleMode[])
251 | .map((mode) => {
252 | return this.completedPuzzles[mode]
253 | .map((index) => {
254 | const puzzleScore = puzzles[mode]?.[index]?.score || 0;
255 | return puzzleScore;
256 | })
257 | .reduce(sum, 0);
258 | })
259 | .reduce(sum, 0);
260 |
261 | return _score;
262 | }
263 |
264 | get tutorialCompleted() {
265 | return this.completedPuzzles["tutorial"].length > 0;
266 | }
267 |
268 | updateCompletedPuzzles(mode?: PuzzleMode, index?: number) {
269 | if (mode && index !== undefined) {
270 | this.completedPuzzles[mode] = uniq(
271 | this.completedPuzzles[mode] || []
272 | ).filter((x) => x !== index);
273 | this.completedPuzzles[mode].push(index);
274 | persistObject("completedPuzzles", toJS(this.completedPuzzles));
275 | }
276 | }
277 |
278 | updatePlayedPuzzles(mode?: PuzzleMode, index?: number) {
279 | if (mode && index !== undefined) {
280 | this.playedPuzzles[mode] = uniq(this.playedPuzzles[mode] || []).filter(
281 | (x) => x !== index
282 | );
283 | this.playedPuzzles[mode].push(index);
284 | persistObject("playedPuzzles", toJS(this.playedPuzzles));
285 | }
286 | }
287 | }
288 |
289 | class RootStore {
290 | puzzle: PuzzleStore;
291 | router: RouterStore;
292 | stats: StatsStore;
293 |
294 | constructor() {
295 | this.puzzle = new PuzzleStore(this);
296 | this.router = new RouterStore(this);
297 | this.stats = new StatsStore(this);
298 | }
299 |
300 | async initializeStore() {
301 | await rootStore.stats.initializeStore();
302 | }
303 | }
304 |
305 | const rootStore = new RootStore();
306 |
307 | export const storesContext = createContext({
308 | initializeStore: rootStore.initializeStore,
309 | puzzle: rootStore.puzzle,
310 | router: rootStore.router,
311 | stats: rootStore.stats,
312 | });
313 |
314 | export const useCoreStores = () => useContext(storesContext);
315 |
--------------------------------------------------------------------------------
/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 |
3 | import com.android.build.OutputFile
4 |
5 | /**
6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
7 | * and bundleReleaseJsAndAssets).
8 | * These basically call `react-native bundle` with the correct arguments during the Android build
9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
10 | * bundle directly from the development server. Below you can see all the possible configurations
11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
12 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
13 | *
14 | * project.ext.react = [
15 | * // the name of the generated asset file containing your JS bundle
16 | * bundleAssetName: "index.android.bundle",
17 | *
18 | * // the entry file for bundle generation. If none specified and
19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is
20 | * // default. Can be overridden with ENTRY_FILE environment variable.
21 | * entryFile: "index.android.js",
22 | *
23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format
24 | * bundleCommand: "ram-bundle",
25 | *
26 | * // whether to bundle JS and assets in debug mode
27 | * bundleInDebug: false,
28 | *
29 | * // whether to bundle JS and assets in release mode
30 | * bundleInRelease: true,
31 | *
32 | * // whether to bundle JS and assets in another build variant (if configured).
33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
34 | * // The configuration property can be in the following formats
35 | * // 'bundleIn${productFlavor}${buildType}'
36 | * // 'bundleIn${buildType}'
37 | * // bundleInFreeDebug: true,
38 | * // bundleInPaidRelease: true,
39 | * // bundleInBeta: true,
40 | *
41 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
42 | * // for example: to disable dev mode in the staging build type (if configured)
43 | * devDisabledInStaging: true,
44 | * // The configuration property can be in the following formats
45 | * // 'devDisabledIn${productFlavor}${buildType}'
46 | * // 'devDisabledIn${buildType}'
47 | *
48 | * // the root of your project, i.e. where "package.json" lives
49 | * root: "../../",
50 | *
51 | * // where to put the JS bundle asset in debug mode
52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
53 | *
54 | * // where to put the JS bundle asset in release mode
55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
56 | *
57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
58 | * // require('./image.png')), in debug mode
59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
60 | *
61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
62 | * // require('./image.png')), in release mode
63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
64 | *
65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
69 | * // for example, you might want to remove it from here.
70 | * inputExcludes: ["android/**", "ios/**"],
71 | *
72 | * // override which node gets called and with what additional arguments
73 | * nodeExecutableAndArgs: ["node"],
74 | *
75 | * // supply additional arguments to the packager
76 | * extraPackagerArgs: []
77 | * ]
78 | */
79 |
80 | project.ext.react = [
81 | enableHermes: false, // clean and rebuild if changing
82 | ]
83 |
84 | apply from: "../../node_modules/react-native/react.gradle"
85 |
86 | /**
87 | * Retrieve the Keystore password from the MacOS keychain
88 | */
89 | def getPassword(String currentUser, String keyChain) {
90 | def stdout = new ByteArrayOutputStream()
91 | def stderr = new ByteArrayOutputStream()
92 | exec {
93 | commandLine 'security', '-q', 'find-generic-password', '-a', currentUser, '-s', keyChain, '-w'
94 | standardOutput = stdout
95 | errorOutput = stderr
96 | ignoreExitValue true
97 | }
98 | //noinspection GroovyAssignabilityCheck
99 | stdout.toString().trim()
100 | }
101 |
102 | /**
103 | * Set this to true to create two separate APKs instead of one:
104 | * - An APK that only works on ARM devices
105 | * - An APK that only works on x86 devices
106 | * The advantage is the size of the APK is reduced by about 4MB.
107 | * Upload all the APKs to the Play Store and people will download
108 | * the correct one based on the CPU architecture of their device.
109 | */
110 | def enableSeparateBuildPerCPUArchitecture = true
111 |
112 | /**
113 | * Run Proguard to shrink the Java bytecode in release builds.
114 | */
115 | def enableProguardInReleaseBuilds = true
116 |
117 | /**
118 | * The preferred build flavor of JavaScriptCore.
119 | *
120 | * For example, to use the international variant, you can use:
121 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
122 | *
123 | * The international variant includes ICU i18n library and necessary data
124 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
125 | * give correct results when using with locales other than en-US. Note that
126 | * this variant is about 6MiB larger per architecture than default.
127 | */
128 | def jscFlavor = 'org.webkit:android-jsc:+'
129 |
130 | /**
131 | * Whether to enable the Hermes VM.
132 | *
133 | * This should be set on project.ext.react and mirrored here. If it is not set
134 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
135 | * and the benefits of using Hermes will therefore be sharply reduced.
136 | */
137 | def enableHermes = project.ext.react.get("enableHermes", false);
138 |
139 | android {
140 | compileSdkVersion rootProject.ext.compileSdkVersion
141 |
142 | compileOptions {
143 | sourceCompatibility JavaVersion.VERSION_1_8
144 | targetCompatibility JavaVersion.VERSION_1_8
145 | }
146 |
147 | defaultConfig {
148 | applicationId "com.mmazzarolo.ordinarypuzzles"
149 | minSdkVersion rootProject.ext.minSdkVersion
150 | targetSdkVersion rootProject.ext.targetSdkVersion
151 | versionCode 7
152 | versionName "1.2"
153 | }
154 | splits {
155 | abi {
156 | reset()
157 | enable enableSeparateBuildPerCPUArchitecture
158 | universalApk false // If true, also generate a universal APK
159 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
160 | }
161 | }
162 | signingConfigs {
163 | debug {
164 | storeFile file('debug.keystore')
165 | storePassword 'android'
166 | keyAlias 'androiddebugkey'
167 | keyPassword 'android'
168 | }
169 | release {
170 | if (project.hasProperty('ORDINARY_PUZZLES_RELEASE_STORE_FILE')) {
171 | storeFile file(ORDINARY_PUZZLES_RELEASE_STORE_FILE)
172 | storePassword getPassword("mmazzarolo", "OrdinaryPuzzles Android Keystore")
173 | keyAlias ORDINARY_PUZZLES_RELEASE_KEY_ALIAS
174 | keyPassword getPassword("mmazzarolo", "OrdinaryPuzzles Android Keystore")
175 | }
176 | }
177 | }
178 | buildTypes {
179 | debug {
180 | signingConfig signingConfigs.debug
181 | }
182 | release {
183 | // Caution! In production, you need to generate your own keystore file.
184 | // see https://reactnative.dev/docs/signed-apk-android.
185 | signingConfig signingConfigs.release
186 | minifyEnabled enableProguardInReleaseBuilds
187 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
188 | }
189 | }
190 | // applicationVariants are e.g. debug, release
191 | applicationVariants.all { variant ->
192 | variant.outputs.each { output ->
193 | // For each separate APK per architecture, set a unique version code as described here:
194 | // https://developer.android.com/studio/build/configure-apk-splits.html
195 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
196 | def abi = output.getFilter(OutputFile.ABI)
197 | if (abi != null) { // null for the universal-debug, universal-release variants
198 | output.versionCodeOverride =
199 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
200 | }
201 |
202 | }
203 | }
204 | }
205 |
206 | dependencies {
207 | implementation fileTree(dir: "libs", include: ["*.jar"])
208 | //noinspection GradleDynamicVersion
209 | implementation "com.facebook.react:react-native:+" // From node_modules
210 |
211 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
212 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
213 | exclude group:'com.facebook.fbjni'
214 | }
215 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
216 | exclude group:'com.facebook.flipper'
217 | exclude group:'com.squareup.okhttp3', module:'okhttp'
218 | }
219 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
220 | exclude group:'com.facebook.flipper'
221 | }
222 |
223 | if (enableHermes) {
224 | def hermesPath = "../../node_modules/hermes-engine/android/";
225 | debugImplementation files(hermesPath + "hermes-debug.aar")
226 | releaseImplementation files(hermesPath + "hermes-release.aar")
227 | } else {
228 | implementation jscFlavor
229 | }
230 | }
231 |
232 | // Run this once to be able to run the application with BUCK
233 | // puts all compile dependencies into folder libs for BUCK to use
234 | task copyDownloadableDepsToLibs(type: Copy) {
235 | from configurations.compile
236 | into 'libs'
237 | }
238 |
239 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
240 |
--------------------------------------------------------------------------------