ADD - initial commit

2026-08-28 22:01:40 +00:00 · 2026-08-03 15:10:43 +02:00
parent f43223a250
commit 1dd1d05afd
32 changed files with 3568 additions and 0 deletions
@@ -0,0 +1,2 @@
+@AGENTS.md
+
@@ -0,0 +1,25 @@
+# sky_phone
+
+FiveM phone scaffold for Sky-Systems, using Vue 3 and Konsta UI.
+
+## Development
+
+```powershell
+cd frontend
+pnpm install
+pnpm dev
+```
+
+The development command starts Vite and a small mock server for NUI callbacks. The phone opens
+automatically in browser development mode.
+
+## Build
+
+```powershell
+cd frontend
+pnpm build
+```
+
+The production build is published to `sky_phone/source/html/`. In FiveM, ensure `sky_base` before
+`sky_phone` and use `/phone` to toggle the UI.
+
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.local
+
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
+
@@ -0,0 +1,31 @@
+const fs = require('node:fs')
+const path = require('node:path')
+
+const frontendRoot = __dirname
+const sourceDirectory = path.join(frontendRoot, 'dist')
+const targetDirectory = path.join(
+  frontendRoot,
+  '..',
+  'sky_phone',
+  'source',
+  'html',
+)
+
+if (!fs.existsSync(sourceDirectory)) {
+  throw new Error(
+    'Missing frontend/dist. Run vite build before publishing the NUI.',
+  )
+}
+
+fs.rmSync(targetDirectory, { force: true, recursive: true })
+fs.mkdirSync(targetDirectory, { recursive: true })
+fs.cpSync(sourceDirectory, targetDirectory, { recursive: true })
+
+const targetIndex = path.join(targetDirectory, 'index.html')
+const normalizedIndex = fs
+  .readFileSync(targetIndex, 'utf8')
+  .replace(/\r\n?/g, '\n')
+  .replace(/\n[ \t]*\n([ \t]*<\/body>)/g, '\n$1')
+fs.writeFileSync(targetIndex, normalizedIndex)
+
+console.log(`Published NUI to ${targetDirectory}`)
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+interface Window {
+  GetParentResourceName?: () => string
+}
+
@@ -0,0 +1,13 @@
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import { globalIgnores } from 'eslint/config'
+import pluginVue from 'eslint-plugin-vue'
+
+export default defineConfigWithVueTs(
+  { files: ['**/*.{ts,mts,tsx,vue}'], name: 'app/files-to-lint' },
+  globalIgnores(['**/dist/**', 'testserver/**', 'build.cjs']),
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  skipFormatting,
+)
+
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sky Phone</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+
@@ -0,0 +1,40 @@
+{
+  "name": "sky-phone-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently -k -n FRONTEND,BACKEND -c cyan,green \"vite\" \"node testserver/index.cjs\"",
+    "build": "pnpm typecheck && pnpm build-only",
+    "build-only": "vite build && node build.cjs",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --build",
+    "lint": "eslint .",
+    "format": "prettier --write src/ testserver/ build.cjs",
+    "test": "node --test"
+  },
+  "dependencies": {
+    "konsta": "~5.2.0",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.15.32",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.1",
+    "@vue/tsconfig": "^0.7.0",
+    "concurrently": "^9.2.0",
+    "cors": "^2.8.5",
+    "eslint": "^9.29.0",
+    "eslint-plugin-vue": "~10.2.0",
+    "prettier": "3.5.3",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.0",
+    "vue-tsc": "^2.2.10"
+  }
+}
@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { kApp } from 'konsta/vue'
+import { onBeforeUnmount, onMounted } from 'vue'
+
+import { usePhoneStore, type PhoneOpenPayload } from '@/stores/phone'
+import { nuiCall } from '@/utils/nui'
+
+type AppMessage = {
+  type?: string
+  data?: PhoneOpenPayload
+}
+
+const phone = usePhoneStore()
+
+function onMessage(event: MessageEvent<AppMessage>): void {
+  if (event.data?.type === 'app:open') {
+    phone.open(event.data.data)
+  } else if (event.data?.type === 'app:close') {
+    phone.close()
+  }
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || !phone.isOpen) return
+
+  phone.close()
+  void nuiCall('close')
+}
+
+onMounted(() => {
+  window.addEventListener('message', onMessage)
+  window.addEventListener('keydown', onKeydown)
+  void nuiCall('ui:ready')
+
+  if (import.meta.env.DEV) {
+    phone.open()
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', onMessage)
+  window.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<template>
+  <main v-if="phone.isOpen" class="phone-stage">
+    <section class="phone-device" aria-label="Phone preview">
+      <div class="phone-device__speaker" aria-hidden="true"></div>
+      <div class="phone-screen">
+        <k-app theme="ios" safe-areas class="phone-app">
+          <RouterView />
+        </k-app>
+      </div>
+    </section>
+  </main>
+</template>
@@ -0,0 +1,111 @@
+@import 'tailwindcss';
+@import 'konsta/vue/theme.css';
+
+@theme {
+  --color-brand-primary: #007aff;
+}
+
+:root {
+  color-scheme: light;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial,
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: transparent;
+  user-select: none;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.phone-stage {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.phone-device {
+  position: relative;
+  width: min(39vh, 390px);
+  aspect-ratio: 390 / 844;
+  padding: min(1.05vh, 10px);
+  overflow: hidden;
+  pointer-events: auto;
+  background: linear-gradient(145deg, #303238 0%, #090a0d 38%, #25272d 100%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: min(5.2vh, 52px);
+  box-shadow:
+    0 4vh 10vh rgba(0, 0, 0, 0.55),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+
+.phone-device__speaker {
+  position: absolute;
+  top: min(2.1vh, 21px);
+  left: 50%;
+  z-index: 20;
+  width: min(9vh, 90px);
+  height: min(2.8vh, 28px);
+  transform: translateX(-50%);
+  background: #08090b;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.05);
+}
+
+.phone-screen {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #f2f2f7;
+  border-radius: min(4.25vh, 42px);
+}
+
+.phone-app {
+  width: 100%;
+  height: 100%;
+}
+
+.phone-home {
+  height: 100%;
+  padding-top: min(2.8vh, 28px);
+  background:
+    radial-gradient(
+      circle at 20% 22%,
+      rgba(66, 165, 245, 0.28),
+      transparent 38%
+    ),
+    radial-gradient(
+      circle at 80% 58%,
+      rgba(175, 82, 222, 0.2),
+      transparent 42%
+    ),
+    linear-gradient(160deg, #f8fbff 0%, #edf0f8 48%, #f8f3fb 100%);
+}
+
+.phone-home__content {
+  display: grid;
+  gap: 1.5rem;
+  align-content: start;
+  padding-top: 1rem;
+}
@@ -0,0 +1,8 @@
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import router from './router'
+import './assets/main.css'
+
+createApp(App).use(createPinia()).use(router).mount('#app')
@@ -0,0 +1,13 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+import PhoneHomeView from '@/views/PhoneHomeView.vue'
+
+export default createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      component: PhoneHomeView,
+      path: '/',
+    },
+  ],
+})
@@ -0,0 +1,56 @@
+import { defineStore } from 'pinia'
+
+type LocaleTree = Record<string, unknown>
+
+export type PhoneOpenPayload = {
+  lang?: string
+  locales?: LocaleTree
+}
+
+const defaultLocales: LocaleTree = {
+  Phone: {
+    close: 'Close',
+    readyBody: 'Konsta UI is connected to the FiveM NUI bridge.',
+    readyTitle: 'Boilerplate ready',
+    title: 'Phone',
+  },
+}
+
+function getByPath(source: LocaleTree, path: string): unknown {
+  return path.split('.').reduce<unknown>((current, segment) => {
+    if (
+      typeof current !== 'object' ||
+      current === null ||
+      Array.isArray(current)
+    )
+      return undefined
+    return (current as LocaleTree)[segment]
+  }, source)
+}
+
+export const usePhoneStore = defineStore('phone', {
+  state: () => ({
+    isOpen: false,
+    lang: 'en',
+    locales: defaultLocales,
+  }),
+  actions: {
+    close(): void {
+      this.isOpen = false
+    },
+    open(payload: PhoneOpenPayload = {}): void {
+      this.lang = payload.lang ?? 'en'
+      this.locales = payload.locales ?? defaultLocales
+      this.isOpen = true
+    },
+    t(path: string): string {
+      const translated = getByPath(this.locales, path)
+      const fallback = getByPath(defaultLocales, path)
+      return typeof translated === 'string'
+        ? translated
+        : typeof fallback === 'string'
+          ? fallback
+          : path
+    },
+  },
+})
@@ -0,0 +1,37 @@
+const resourceName = window.GetParentResourceName?.() ?? 'sky_phone'
+
+export type NuiResponse<T = unknown> = {
+  success: boolean
+  data?: T
+  error?: string
+}
+
+export async function nuiCall<T = unknown>(
+  endpoint: string,
+  data: Record<string, unknown> = {},
+): Promise<NuiResponse<T>> {
+  const baseUrl = import.meta.env.DEV
+    ? 'http://localhost:3001/api'
+    : `https://${resourceName}`
+
+  try {
+    const response = await fetch(`${baseUrl}/${endpoint}`, {
+      body: JSON.stringify(data),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    })
+
+    if (!response.ok) {
+      const error = `${response.status} ${response.statusText}`
+      console.error(`[NUI] ${endpoint} failed: ${error}`)
+      return { error, success: false }
+    }
+
+    const body = await response.text()
+    return body ? (JSON.parse(body) as NuiResponse<T>) : { success: true }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error'
+    console.error(`[NUI] ${endpoint} failed:`, error)
+    return { error: message, success: false }
+  }
+}
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { kBlock, kButton, kGlass, kNavbar, kPage } from 'konsta/vue'
+
+import { usePhoneStore } from '@/stores/phone'
+import { nuiCall } from '@/utils/nui'
+
+const phone = usePhoneStore()
+
+function closePhone(): void {
+  phone.close()
+  void nuiCall('close')
+}
+</script>
+
+<template>
+  <k-page class="phone-home">
+    <k-navbar :title="phone.t('Phone.title')" class="top-0 sticky" />
+
+    <div class="phone-home__content">
+      <k-glass class="mx-4 rounded-3xl p-4">
+        <h1 class="mb-2 text-xl font-semibold">
+          {{ phone.t('Phone.readyTitle') }}
+        </h1>
+        <p class="text-sm leading-6 text-black/60">
+          {{ phone.t('Phone.readyBody') }}
+        </p>
+      </k-glass>
+
+      <k-block inset>
+        <k-button large rounded @click="closePhone">
+          {{ phone.t('Phone.close') }}
+        </k-button>
+      </k-block>
+    </div>
+  </k-page>
+</template>
@@ -0,0 +1,17 @@
+const cors = require('cors')
+const express = require('express')
+
+const app = express()
+const port = 3001
+
+app.use(cors())
+app.use(express.json())
+
+app.post('/api/:endpoint', (request, response) => {
+  console.log(`[NUI] ${request.params.endpoint}`, request.body)
+  response.json({ success: true })
+})
+
+app.listen(port, () => {
+  console.log(`Mock NUI server listening on http://localhost:${port}`)
+})
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  }
+}
+
@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
+
@@ -0,0 +1,11 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": ["vite.config.ts"],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  }
+}
@@ -0,0 +1,28 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: './',
+  build: {
+    assetsDir: 'assets',
+    emptyOutDir: true,
+    outDir: 'dist',
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/sky-[name]-[hash].[ext]',
+        chunkFileNames: 'assets/sky-[name]-[hash].js',
+        entryFileNames: 'assets/sky-[name]-[hash].js',
+      },
+    },
+  },
+  plugins: [tailwindcss(), vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})
+
@@ -0,0 +1,2 @@
+Config.Command = "phone"
+
@@ -0,0 +1,3 @@
+Config = Config or {}
+Locales = Locales or {}
+
@@ -0,0 +1,12 @@
+Locales["en"] = {
+    CommandDescription = "Open your phone.",
+    Nui = {
+        Phone = {
+            title = "Phone",
+            readyTitle = "Boilerplate ready",
+            readyBody = "Konsta UI is connected to the FiveM NUI bridge.",
+            close = "Close",
+        },
+    },
+}
+
@@ -0,0 +1,30 @@
+fx_version 'cerulean'
+game 'gta5'
+lua54 'yes'
+
+author 'Sky-Systems'
+description 'Sky Phone'
+version '0.1.0'
+
+escrow_ignore 'config/**'
+
+shared_scripts {
+    '@sky_base/source/import.lua',
+    'config/init.lua',
+}
+
+client_scripts {
+    'config/config.lua',
+    'config/locales/*.lua',
+    'source/client/main.lua',
+}
+
+files {
+    'source/html/index.html',
+    'source/html/assets/**',
+}
+
+ui_page 'source/html/index.html'
+
+dependency 'sky_base'
+
@@ -0,0 +1,73 @@
+local is_open = false
+
+local function get_locale()
+    return Locales[Sky.Config.locale] or Locales["en"]
+end
+
+local function send_open_message()
+    SendNUIMessage({
+        type = "app:open",
+        data = {
+            lang = Sky.Config.locale,
+            locales = get_locale().Nui,
+        },
+    })
+end
+
+local function open_phone()
+    if is_open then
+        return
+    end
+
+    is_open = true
+    SetNuiFocus(true, true)
+    send_open_message()
+end
+
+local function close_phone()
+    if not is_open then
+        return
+    end
+
+    is_open = false
+    SetNuiFocus(false, false)
+    SendNUIMessage({ type = "app:close" })
+end
+
+RegisterCommand(Config.Command, function()
+    if is_open then
+        close_phone()
+        return
+    end
+
+    open_phone()
+end, false)
+
+RegisterNUICallback("ui:ready", function(_, cb)
+    if is_open then
+        send_open_message()
+    end
+
+    cb({ success = true })
+end)
+
+RegisterNUICallback("close", function(_, cb)
+    close_phone()
+    cb({ success = true })
+end)
+
+CreateThread(function()
+    TriggerEvent("chat:addSuggestion", "/" .. Config.Command, get_locale().CommandDescription)
+end)
+
+AddEventHandler("onResourceStop", function(resource_name)
+    if resource_name ~= GetCurrentResourceName() then
+        return
+    end
+
+    if is_open then
+        SetNuiFocus(false, false)
+    end
+
+    TriggerEvent("chat:removeSuggestion", "/" .. Config.Command)
+end)
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sky Phone</title>
+    <script type="module" crossorigin src="./assets/sky-index-D5IGMOYX.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-DMw9emdW.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+