Merge pull request #5 from minetoblend/feat/add-preferences

Feat/add preferences

Caddyfile

@@ -1,11 +1,16 @@
 osucad.com {
 
-    reverse_proxy http://localhost:3000
+  reverse_proxy http://localhost:3000
 
 	@frontend {
 	    not {
 	        path /api*
-            path /auth*
+          path /auth*
+          path /metrics*
+          path /editor*
+          path /socket.io*
 	    }
 	}
+
+	reverse_proxy @frontend http://localhost:5173
 }

packages/client/android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-app')
 
 }
 

packages/client/android/app/src/main/AndroidManifest.xml

@@ -10,20 +10,30 @@
         android:theme="@style/AppTheme">
 
         <activity
+            android:name="MainActivity"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-            android:name=".MainActivity"
+            android:exported="true"
             android:label="@string/title_activity_main"
-            android:theme="@style/AppTheme.NoActionBarLaunch"
             android:launchMode="singleTask"
-            android:exported="true"
             android:screenOrientation="landscape"
-        >
+            android:theme="@style/AppTheme.NoActionBar">
 
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
 
+            <intent-filter android:autoVerify="true">
+                <action android:name="android.intent.action.VIEW" />
+
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data android:scheme="https" />
+                <data android:scheme="osucad" />
+                <data android:host="dev.osucad.com" />
+            </intent-filter>
+
         </activity>
 
         <provider

packages/client/android/app/src/main/java/com/osucad/MainActivity.java

@@ -1,6 +1,9 @@
 package com.osucad;
 
+import android.content.Intent;
+import android.net.Uri;
 import android.os.Bundle;
+import android.view.ActionMode;
 import android.view.Window;
 import android.view.WindowManager;
 
@@ -10,7 +13,30 @@ public class MainActivity extends BridgeActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         requestWindowFeature(Window.FEATURE_NO_TITLE);
+
+        Intent intent = getIntent();
+
+        if (intent != null) {
+            String action = intent.getAction();
+            Uri data = intent.getData();
+
+            if (action != null && action.equals(Intent.ACTION_VIEW) && data != null) {
+                if (data.getScheme() != "https") {
+                    intent.setData(
+                            Uri.parse(
+                                    data.toString().replace(
+                                            data.getScheme() + "://",
+                                            "https://"
+                                    )
+                            )
+                    );
+                }
+            }
+        }
+
+
         super.onCreate(savedInstanceState);
+
         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                 WindowManager.LayoutParams.FLAG_FULLSCREEN);
     }

packages/client/android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
+    <color name="ic_launcher_background">#1A1A20</color>
 </resources>

packages/client/android/app/src/main/res/values/styles.xml

@@ -12,10 +12,9 @@
     <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="windowActionBar">false</item>
         <item name="windowNoTitle">true</item>
-        <item name="android:background">@null</item>
+        <item name="android:background">#1A1A20</item>
     </style>
 
-
     <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
         <item name="android:background">@drawable/splash</item>
     </style>

packages/client/android/capacitor.settings.gradle

@@ -1,3 +1,6 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../../../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../../../node_modules/@capacitor/app/android')

packages/client/capacitor.config.ts

@@ -1,13 +1,12 @@
-import { CapacitorConfig } from '@capacitor/cli';
+import {CapacitorConfig} from '@capacitor/cli';
 
 const config: CapacitorConfig = {
   appId: 'com.osucad',
   appName: 'osucad',
-  webDir: 'dist',
+  webDir: 'mobile-dist',
   server: {
     androidScheme: 'https',
-    url: 'https://osucad.com',
-    allowNavigation: ['osucad.com', 'osu.ppy.sh'],
+    allowNavigation: ['dev.osucad.com', 'osu.ppy.sh'],
   }
 };
 

packages/client/components.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppNavbar: typeof import('./src/components/AppNavbar.vue')['default']
+    AudioPreferencesForm: typeof import('./src/components/preferences/AudioPreferencesForm.vue')['default']
+    BehaviorPreferencesForm: typeof import('./src/components/preferences/BehaviorPreferencesForm.vue')['default']
+    Button: typeof import('./src/components/Button.vue')['default']
+    ButtonGroup: typeof import('./src/components/ButtonGroup.vue')['default']
+    Card: typeof import('./src/components/card/Card.vue')['default']
+    Checkbox: typeof import('./src/components/Checkbox.vue')['default']
+    Dropzone: typeof import('./src/components/Dropzone.vue')['default']
+    FormField: typeof import('./src/components/FormField.vue')['default']
+    GraphicsPreferencesForm: typeof import('./src/components/preferences/GraphicsPreferencesForm.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    ImportOszCard: typeof import('./src/components/beatmap/ImportOszCard.vue')['default']
+    MapsetCard: typeof import('./src/components/beatmap/MapsetCard.vue')['default']
+    OperatorBox: typeof import('./src/components/operator/OperatorBox.vue')['default']
+    PreferencesForm: typeof import('./src/components/preferences/PreferencesForm.vue')['default']
+    ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
+    QColor: typeof import('quasar')['QColor']
+    QLinearProgress: typeof import('quasar')['QLinearProgress']
+    QSlider: typeof import('quasar')['QSlider']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Switch: typeof import('./src/components/Switch.vue')['default']
+    TabList: typeof import('./src/components/tabList/TabList.vue')['default']
+    UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
+    Vec2ParameterControl: typeof import('./src/components/operator/Vec2ParameterControl.vue')['default']
+    ViewportPreferencesForm: typeof import('./src/components/preferences/ViewportPreferencesForm.vue')['default']
+    VNodes: typeof import('./src/components/VNodes.vue')['default']
+  }
+}

packages/client/index.html

@@ -9,6 +9,5 @@
 <body>
 <div id="app"></div>
 <script type="module" src="/src/main.ts"></script>
-<!-- USER_DATA -->
 </body>
 </html>

packages/client/mobile-dist/index.html

@@ -0,0 +1,15 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script>
+      window.location.href = "https://dev.osucad.com";
+    </script>
+</head>
+<body>
+
+</body>
+</html>

packages/client/package.json

@@ -10,30 +10,36 @@
   },
   "dependencies": {
     "@capacitor/android": "^5.6.0",
-    "@capacitor/core": "^5.6.0",
+    "@capacitor/app": "^5.0.7",
+    "@capacitor/core": "^5.7.0",
     "@fontsource/nunito-sans": "^5.0.8",
     "@fontsource/saira": "^5.0.20",
+    "@quasar/extras": "^1.16.9",
     "@vueuse/core": "^10.7.0",
     "@ygoe/msgpack": "^1.0.3",
     "any-touch": "^2.2.0",
     "axios": "^1.6.2",
     "gsap": "^3.12.4",
     "path": "^0.12.7",
-    "pixi.js": "8.0.0-rc.4",
+    "pixi.js": "8.0.0-rc.6",
     "primeflex": "^3.3.1",
     "primevue": "^3.46.0",
+    "quasar": "^2.14.3",
     "socket.io-client": "^4.7.2",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "zingtouch": "^1.0.6"
   },
   "devDependencies": {
-    "@capacitor/cli": "^5.6.0",
+    "@capacitor/assets": "^3.0.4",
+    "@capacitor/cli": "^5.7.0",
+    "@quasar/vite-plugin": "^1.6.0",
     "@types/node": "^20.10.5",
     "@vitejs/plugin-vue": "^4.2.3",
-    "sass": "^1.69.5",
+    "sass": "^1.33.0",
     "typescript": "^5.0.2",
     "unplugin-auto-import": "^0.17.2",
+    "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-router": "^0.7.0",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"

packages/client/public/.well-known/assetlinks.json

@@ -0,0 +1,14 @@
+[
+  {
+    "relation": [
+      "delegate_permission/common.handle_all_urls"
+    ],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.osucad",
+      "sha256_cert_fingerprints": [
+        "15:AD:4D:63:F5:10:6D:39:16:88:F1:8A:14:87:B4:04:9C:97:06:6E:F4:55:A5:F1:86:A9:C0:33:1A:BC:3E:17"
+      ]
+    }
+  }
+]

packages/client/src/App.vue

@@ -4,10 +4,34 @@ import TitleBar from "./components/AppNavbar.vue";
 </script>
 
 <template>
-  <div>
+  <div class="app">
     <TitleBar/>
     <main>
       <RouterView/>
     </main>
+    <div id="dpi"/>
   </div>
-</template>
+</template>
+
+<style lang="scss">
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+
+  main {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+}
+
+#dpi {
+  height: 1cm;
+  left: -100%;
+  position: absolute;
+  top: -100%;
+  width: 1cm;
+}
+</style>

packages/client/src/components/AppNavbar.vue

@@ -1,17 +1,26 @@
 <script setup lang="ts">
-
 import UserAvatar from "./UserAvatar.vue";
 import {useCurrentUser} from "../composables/useCurrentUser.ts";
+import {isMobile} from "@/util/isMobile.ts";
+import {useRoute} from "vue-router";
+
+const mobile = isMobile();
 
-const { user } = useCurrentUser();
+const {user} = useCurrentUser();
 const loginUrl = computed(() => {
   return `/auth/login?redirect=${encodeURIComponent(window.location.pathname)}`;
 });
 
+const route = useRoute();
+const isVisible = computed(() => {
+  console.log(route.fullPath)
+  if (route.fullPath.startsWith('/edit') && mobile) return false
+  return true
+})
 </script>
 
 <template>
-  <nav class="oc-navbar">
+  <nav class="oc-navbar" v-show="isVisible">
     <RouterLink class="oc-navbar-logo" to="/">
       <img src="@/assets/logo-text.svg" alt="osucad logo" height="48">
     </RouterLink>
@@ -50,4 +59,10 @@ const loginUrl = computed(() => {
   gap: 0.5em;
 }
 
+@media (max-width: 1024px) {
+  .oc-navbar {
+    height: 48px;
+  }
+}
+
 </style>

packages/client/src/components/Button.vue

@@ -5,13 +5,18 @@ const props = defineProps<{
   variant?: "primary" | "accent";
   size?: "sm" | "md" | "lg";
   disabled?: boolean;
+  outline?: boolean;
 }>();
 const classes = computed(() => {
   const classes: string[] = [
     `oc-btn--${props.variant ?? "primary"}`,
     `oc-btn--${props.size ?? "md"}`,
   ];
 
+  if (props.outline) {
+    classes.push("oc-btn--outline");
+  }
+
   return classes;
 });
 
@@ -55,10 +60,23 @@ const classes = computed(() => {
         transform: scale(0.98)
       }
 
-      &:active, &:focus {
+      &:focus-visible {
         box-shadow: 0 0 0 $focus-ring-width rgba($color, $focus-ring-alpha);
       }
+
+      &.oc-btn--outline {
+        background-color: transparent;
+        border: 1px solid $color;
+        color: $color;
+
+        &:hover {
+          background-color: rgba($color, 0.1);
+          color: $text-color;
+        }
+      }
     }
+
+
   }
 
   &--sm {