working version
This commit is contained in:
Matteo Rosati
34
.gitignore
vendored
Normal file
34
.gitignore
vendored
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
# dependencies (bun install)
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# output
|
||||||
|
out
|
||||||
|
dist
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# code coverage
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# logs
|
||||||
|
logs
|
||||||
|
_.log
|
||||||
|
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# caches
|
||||||
|
.eslintcache
|
||||||
|
.cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# IntelliJ based IDEs
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Finder (MacOS) folder config
|
||||||
|
.DS_Store
|
||||||
10
.kilocode/rules/agents.md
Normal file
10
.kilocode/rules/agents.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# AGENT FILES
|
||||||
|
|
||||||
|
Always search the root folder for the following files, if they exist:
|
||||||
|
|
||||||
|
- `AGENTS.md`
|
||||||
|
- `CONSTITUTION.md`
|
||||||
|
- `GEMINI.md`
|
||||||
|
- `CLAUDE.md`
|
||||||
|
|
||||||
|
These files are generally used to configure the agent's behavior and capabilities. They are not required, but are recommended for most agents.
|
||||||
18
.kilocode/rules/plan.md
Normal file
18
.kilocode/rules/plan.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
# PLANNING
|
||||||
|
|
||||||
|
You are an expert senior software engineer with 20+ years of experience in software development. You excel in planning and designing software systems.
|
||||||
|
|
||||||
|
**PLAN AND WAIT**: Before any code implementation you craft a complete, solid and detailed execution plan. You are a master of breaking down complex problems into smaller, manageable tasks. You are also a master of identifying dependencies and creating a clear roadmap for the project.
|
||||||
|
|
||||||
|
**ACTIONABLE PLANS**: Your plans are actionable and can be executed step by step, to track the progress of the implementation.
|
||||||
|
|
||||||
|
You will be given a problem to solve and you will create a plan to solve it. The plan will include:
|
||||||
|
|
||||||
|
1. A list of tasks to be completed
|
||||||
|
2. A list of dependencies between tasks
|
||||||
|
3. A list of resources needed to complete the tasks
|
||||||
|
4. A list of risks and mitigation strategies
|
||||||
|
5. A list of success criteria
|
||||||
|
|
||||||
|
**NEVER EXECUTE**: You will never execute the plan automatically. You will only create the plan and present it to the user.
|
||||||
|
**ALWAYS ASK**: You will always ask the user to execute the plan. You will then review the results and provide a detailed report on them.
|
||||||
21
.kilocode/rules/python.md
Normal file
21
.kilocode/rules/python.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
# PYTHON RULES
|
||||||
|
|
||||||
|
You are a Python expert with 15+ years of experience. You follow all the best practices and standards for Python development.
|
||||||
|
|
||||||
|
## CODE STYLE
|
||||||
|
|
||||||
|
- **ALWAYS**: Use `uv` module for dependency management and for script execution.
|
||||||
|
- **PREFER**: Use PEP 8 style guide for Python code.
|
||||||
|
- **ALWAYS**: Use type hints for function parameters and return values.
|
||||||
|
- **ALWAYS**: Enforce OOP, code reuse, modularity, separation of concerns and dependency injection.
|
||||||
|
- **ALWAYS**: Use docstrings for all functions and classes.
|
||||||
|
- **ALWAYS**: Use descriptive variable names.
|
||||||
|
- **ALWAYS**: Use constants for values that do not change.
|
||||||
|
- **ALWAYS**: Use list comprehensions instead of for loops when possible.
|
||||||
|
- **ALWAYS**: Use `with` statement for file operations.
|
||||||
|
- **PREFER**: Use `try`/`except` blocks for error handling.
|
||||||
|
- **ALWAYS**: Use `logging` module for logging.
|
||||||
|
- **PREFER**: Use `argparse` module for command line arguments.
|
||||||
|
- **ALWAYS**: Use `pyright` module for type checking before committing to a final code change (`uv run pyright <file>`).
|
||||||
|
- **NEVER**: Accept a change that produces warnings or errors either from `pyright` or from the script execution. If so, you must find a solution and address the issue.
|
||||||
|
- **NEVER**: Use outdated syntax, antipatterns, or deprecated features.
|
||||||
5
.kilocode/rules/search.md
Normal file
5
.kilocode/rules/search.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# SEARCH
|
||||||
|
|
||||||
|
You have access to the Brave search tool. You can use it to search for information on the web.
|
||||||
|
|
||||||
|
**ALWAYS** use the Brave search tool to search for information about the user request. Use the information you get to get additional context.
|
||||||
26
.kilocode/rules/typescript.md
Normal file
26
.kilocode/rules/typescript.md
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# TYPESCRIPT RULES
|
||||||
|
|
||||||
|
You are a TypeScript expert with 15+ years of experience. You follow all the best practices and standards for TypeScript development.
|
||||||
|
|
||||||
|
## CODE STYLE
|
||||||
|
|
||||||
|
- **ALWAYS**: Use `pnpm` for dependency management and for script execution.
|
||||||
|
- **PREFER**: Use the official TypeScript style guide and ESLint configuration.
|
||||||
|
- **ALWAYS**: Use type annotations for function parameters and return values.
|
||||||
|
- **ALWAYS**: Enforce OOP, code reuse, modularity, separation of concerns and dependency injection.
|
||||||
|
- **ALWAYS**: Use JSDoc comments for all functions and classes.
|
||||||
|
- **ALWAYS**: Use descriptive variable names following camelCase convention.
|
||||||
|
- **ALWAYS**: Use `const` and `readonly` for values that do not change.
|
||||||
|
- **ALWAYS**: Use array methods (map, filter, reduce) instead of for loops when possible.
|
||||||
|
- **ALWAYS**: Use `try`/`catch` blocks for error handling.
|
||||||
|
- **ALWAYS**: Use a logging library (e.g., winston, pino) for logging.
|
||||||
|
- **PREFER**: Use a CLI library (e.g., commander, yargs) for command line arguments.
|
||||||
|
- **ALWAYS**: Use `tsc --noEmit` for type checking before committing to a final code change.
|
||||||
|
- **ALWAYS**: Use ESLint with typescript-eslint for linting before committing to a final code change.
|
||||||
|
- **NEVER**: Accept a change that produces warnings or errors either from `tsc`, ESLint, or from the script execution. If so, you must find a solution and address the issue.
|
||||||
|
- **NEVER**: Use `any` type unless absolutely necessary. Use `unknown` instead when the type is truly unknown.
|
||||||
|
- **NEVER**: Use outdated syntax, antipatterns, or deprecated features.
|
||||||
|
- **ALWAYS**: Enable strict mode in tsconfig.json for comprehensive type checking.
|
||||||
|
- **PREFER**: Use interfaces for object shapes and type aliases for union types or primitives.
|
||||||
|
- **ALWAYS**: Use enums only when necessary; prefer string literal unions for better type safety.
|
||||||
|
- **PREFER**: Use utility types (Partial, Required, Readonly, Pick, Omit) for type transformations.
|
||||||
16
.kilocode/rules/ultrathink.md
Normal file
16
.kilocode/rules/ultrathink.md
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# ROSI'S ULTRATHINK PROTOCOL™
|
||||||
|
|
||||||
|
The Rosi's Ultrathink Protocol™ is used only if explicitly requested by the user. It adds an extra layer of reasoning to the standard workflow.
|
||||||
|
|
||||||
|
# STEPS
|
||||||
|
|
||||||
|
When in Ultrathink mode, you will:
|
||||||
|
|
||||||
|
1. **ALWAYS**: You will always notify the user when we're in Ultrathink mode with "🧠 ULTRATHINK MODE ACTIVATED 🧠".
|
||||||
|
2. **THINKING**: You will first think deeply about the user's request, the context of the conversation and the current codebase.
|
||||||
|
3. **BEST SOLUTION**: You accept a solution only if it is the best possible to the problem.
|
||||||
|
4. **ANALYZE**: You will analyze the solution and validate it only if it respects the current tools, versions and libraries.
|
||||||
|
5. **THINK AGAIN**: If an immediate solution is possible, hold on and think again. Challenge yourself and investigate if other possible better implementations are possible. If you find a better solution, you will use it instead of the first one, or merge the best ideas of the two solutions into a single, refined one.
|
||||||
|
6. **ZERO LAZINESS**: Being lazy is strictly prohibited. Do not propose something because "it's easier" or "it's faster". You will always find the best solution, even if it takes more time.
|
||||||
|
7. **LOW TRUST ON KNOWLEDGE**: Your knowledge is limited and likely outdated. You have at your disposal a web search tool via Brave, use it as much as you need.
|
||||||
|
8. **NO ASSUMPTIONS**: You will not make any assumptions about the user's intent or the context of the conversation. You will always ask for clarification if needed.
|
||||||
21
README.md
Normal file
21
README.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
# bun-react-template
|
||||||
|
|
||||||
|
To install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
To start a development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
To run for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun start
|
||||||
|
```
|
||||||
|
|
||||||
|
This project was created using `bun init` in bun v1.3.5. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
|
||||||
17
bun-env.d.ts
vendored
Normal file
17
bun-env.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
// Generated by `bun init`
|
||||||
|
|
||||||
|
declare module "*.svg" {
|
||||||
|
/**
|
||||||
|
* A path to the SVG file
|
||||||
|
*/
|
||||||
|
const path: `${string}.svg`;
|
||||||
|
export = path;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.module.css" {
|
||||||
|
/**
|
||||||
|
* A record of class names to their corresponding CSS module classes
|
||||||
|
*/
|
||||||
|
const classes: { readonly [key: string]: string };
|
||||||
|
export = classes;
|
||||||
|
}
|
||||||
133
bun.lock
Normal file
133
bun.lock
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
{
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"configVersion": 1,
|
||||||
|
"workspaces": {
|
||||||
|
"": {
|
||||||
|
"name": "bun-react-template",
|
||||||
|
"dependencies": {
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
|
"react": "^19",
|
||||||
|
"react-dom": "^19",
|
||||||
|
"react-leaflet": "^5.0.0",
|
||||||
|
"recharts": "^3.6.0",
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bun": "latest",
|
||||||
|
"@types/leaflet": "^1.9.21",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"@react-leaflet/core": ["@react-leaflet/core@3.0.0", "", { "peerDependencies": { "leaflet": "^1.9.0", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ=="],
|
||||||
|
|
||||||
|
"@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
|
||||||
|
|
||||||
|
"@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
|
||||||
|
|
||||||
|
"@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
|
||||||
|
|
||||||
|
"@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
|
||||||
|
|
||||||
|
"@types/d3-array": ["@types/d3-array@3.2.2", "", {}, "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="],
|
||||||
|
|
||||||
|
"@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
|
||||||
|
|
||||||
|
"@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
|
||||||
|
|
||||||
|
"@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
|
||||||
|
|
||||||
|
"@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
|
||||||
|
|
||||||
|
"@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
|
||||||
|
|
||||||
|
"@types/d3-shape": ["@types/d3-shape@3.1.8", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w=="],
|
||||||
|
|
||||||
|
"@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
|
||||||
|
|
||||||
|
"@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
|
||||||
|
|
||||||
|
"@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
|
||||||
|
|
||||||
|
"@types/leaflet": ["@types/leaflet@1.9.21", "", { "dependencies": { "@types/geojson": "*" } }, "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w=="],
|
||||||
|
|
||||||
|
"@types/node": ["@types/node@25.0.9", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-/rpCXHlCWeqClNBwUhDcusJxXYDjZTyE8v5oTO7WbL8eij2nKhUeU89/6xgjU7N4/Vh3He0BtyhJdQbDyhiXAw=="],
|
||||||
|
|
||||||
|
"@types/react": ["@types/react@19.2.8", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg=="],
|
||||||
|
|
||||||
|
"@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
|
||||||
|
|
||||||
|
"@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
|
||||||
|
|
||||||
|
"bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
|
||||||
|
|
||||||
|
"clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
|
||||||
|
|
||||||
|
"csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
|
||||||
|
|
||||||
|
"d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
|
||||||
|
|
||||||
|
"d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
|
||||||
|
|
||||||
|
"d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
|
||||||
|
|
||||||
|
"d3-format": ["d3-format@3.1.2", "", {}, "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg=="],
|
||||||
|
|
||||||
|
"d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
|
||||||
|
|
||||||
|
"d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
|
||||||
|
|
||||||
|
"d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
|
||||||
|
|
||||||
|
"d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
|
||||||
|
|
||||||
|
"d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
|
||||||
|
|
||||||
|
"d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
|
||||||
|
|
||||||
|
"d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
|
||||||
|
|
||||||
|
"decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
|
||||||
|
|
||||||
|
"es-toolkit": ["es-toolkit@1.44.0", "", {}, "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg=="],
|
||||||
|
|
||||||
|
"eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
|
||||||
|
|
||||||
|
"immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
|
||||||
|
|
||||||
|
"internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
|
||||||
|
|
||||||
|
"leaflet": ["leaflet@1.9.4", "", {}, "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="],
|
||||||
|
|
||||||
|
"react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
|
||||||
|
|
||||||
|
"react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
|
||||||
|
|
||||||
|
"react-is": ["react-is@19.2.3", "", {}, "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA=="],
|
||||||
|
|
||||||
|
"react-leaflet": ["react-leaflet@5.0.0", "", { "dependencies": { "@react-leaflet/core": "^3.0.0" }, "peerDependencies": { "leaflet": "^1.9.0", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw=="],
|
||||||
|
|
||||||
|
"react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
|
||||||
|
|
||||||
|
"recharts": ["recharts@3.6.0", "", { "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg=="],
|
||||||
|
|
||||||
|
"redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
|
||||||
|
|
||||||
|
"redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
|
||||||
|
|
||||||
|
"reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
|
||||||
|
|
||||||
|
"scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
|
||||||
|
|
||||||
|
"tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
|
||||||
|
|
||||||
|
"undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
|
||||||
|
|
||||||
|
"use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
|
||||||
|
|
||||||
|
"victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
|
||||||
|
|
||||||
|
"@reduxjs/toolkit/immer": ["immer@11.1.3", "", {}, "sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q=="],
|
||||||
|
}
|
||||||
|
}
|
||||||
2
bunfig.toml
Normal file
2
bunfig.toml
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
[serve.static]
|
||||||
|
env = "BUN_PUBLIC_*"
|
||||||
BIN
debug-screenshot.png
Normal file
BIN
debug-screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "bun-react-template",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "bun --hot src/index.ts",
|
||||||
|
"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
|
||||||
|
"start": "NODE_ENV=production bun src/index.ts"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
|
"react": "^19",
|
||||||
|
"react-dom": "^19",
|
||||||
|
"react-leaflet": "^5.0.0",
|
||||||
|
"recharts": "^3.6.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bun": "latest",
|
||||||
|
"@types/leaflet": "^1.9.21",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19"
|
||||||
|
}
|
||||||
|
}
|
||||||
39
src/APITester.tsx
Normal file
39
src/APITester.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import { useRef, type FormEvent } from "react";
|
||||||
|
|
||||||
|
export function APITester() {
|
||||||
|
const responseInputRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
|
const testEndpoint = async (e: FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const form = e.currentTarget;
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const endpoint = formData.get("endpoint") as string;
|
||||||
|
const url = new URL(endpoint, location.href);
|
||||||
|
const method = formData.get("method") as string;
|
||||||
|
const res = await fetch(url, { method });
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
responseInputRef.current!.value = JSON.stringify(data, null, 2);
|
||||||
|
} catch (error) {
|
||||||
|
responseInputRef.current!.value = String(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="api-tester">
|
||||||
|
<form onSubmit={testEndpoint} className="endpoint-row">
|
||||||
|
<select name="method" className="method">
|
||||||
|
<option value="GET">GET</option>
|
||||||
|
<option value="PUT">PUT</option>
|
||||||
|
</select>
|
||||||
|
<input type="text" name="endpoint" defaultValue="/api/hello" className="url-input" placeholder="/api/hello" />
|
||||||
|
<button type="submit" className="send-button">
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<textarea ref={responseInputRef} readOnly placeholder="Response will appear here..." className="response-area" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
81
src/App.tsx
Normal file
81
src/App.tsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { PlayerMap } from "./components/PlayerMap";
|
||||||
|
import { StatsDashboard } from "./components/StatsDashboard";
|
||||||
|
import { fetchPlexts } from "./api";
|
||||||
|
import type { ApiResponse } from "./types";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
const [data, setData] = useState<ApiResponse>({ count: 0, plexts: [] });
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
const result = await fetchPlexts();
|
||||||
|
setData(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading data:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
// Refresh data every 60 seconds
|
||||||
|
const interval = setInterval(loadData, 60000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app">
|
||||||
|
<header className="app-header">
|
||||||
|
<div className="header-content">
|
||||||
|
<h1 className="app-title">Ingress Player Activity Dashboard</h1>
|
||||||
|
<p className="app-subtitle">Real-time player actions and locations</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="app-main">
|
||||||
|
{loading ? (
|
||||||
|
<div className="loading-container">
|
||||||
|
<div className="loading-spinner"></div>
|
||||||
|
<p>Loading player data...</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* Map Section */}
|
||||||
|
<section className="map-section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h2>Player Locations</h2>
|
||||||
|
<p>View player activity on the map</p>
|
||||||
|
</div>
|
||||||
|
<div className="map-wrapper">
|
||||||
|
<PlayerMap plexts={data.plexts} />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<section className="stats-section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h2>Activity Statistics</h2>
|
||||||
|
<p>Comprehensive analysis of player actions</p>
|
||||||
|
</div>
|
||||||
|
<StatsDashboard plexts={data.plexts} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="app-footer">
|
||||||
|
<div className="footer-content">
|
||||||
|
<p>Ingress Player Dashboard • Data from localhost:7001</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
27
src/api.ts
Normal file
27
src/api.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import type { ApiResponse } from "./types";
|
||||||
|
|
||||||
|
const API_BASE_URL = "http://localhost:7001";
|
||||||
|
const API_ENDPOINT = "/plexts/from-db";
|
||||||
|
const AUTH_CREDENTIALS = "root:root";
|
||||||
|
|
||||||
|
export async function fetchPlexts(): Promise<ApiResponse> {
|
||||||
|
const headers = new Headers();
|
||||||
|
headers.set("Authorization", `Basic ${btoa(AUTH_CREDENTIALS)}`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${API_BASE_URL}${API_ENDPOINT}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching plexts:", error);
|
||||||
|
return { count: 0, plexts: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
82
src/components/PlayerMap.tsx
Normal file
82
src/components/PlayerMap.tsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
||||||
|
import L from "leaflet";
|
||||||
|
import "leaflet/dist/leaflet.css";
|
||||||
|
import type { Plext } from "../types";
|
||||||
|
|
||||||
|
// Fix Leaflet marker icons
|
||||||
|
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
||||||
|
L.Icon.Default.mergeOptions({
|
||||||
|
iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
|
||||||
|
iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
|
||||||
|
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||||
|
});
|
||||||
|
|
||||||
|
interface PlayerMapProps {
|
||||||
|
plexts: Plext[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PlayerMap({ plexts }: PlayerMapProps) {
|
||||||
|
// Get player locations from plexts
|
||||||
|
const playerLocations = plexts
|
||||||
|
.map((plext) => {
|
||||||
|
const player = plext.markup.find((item) => item.type === "PLAYER");
|
||||||
|
if (player && player.plain && plext.coordinates && plext.coordinates.coordinates) {
|
||||||
|
return {
|
||||||
|
name: player.plain,
|
||||||
|
team: player.team || "NEUTRAL",
|
||||||
|
coordinates: [plext.coordinates.coordinates[1], plext.coordinates.coordinates[0]] as [number, number], // [lat, lon]
|
||||||
|
eventType: plext.event_type,
|
||||||
|
timestamp: plext.timestamp,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="map-container" style={{ height: "600px", width: "100%" }}>
|
||||||
|
<MapContainer
|
||||||
|
center={[45.57, 12.36]} // Default to Veneto region
|
||||||
|
zoom={12}
|
||||||
|
style={{ height: "100%", width: "100%" }}
|
||||||
|
scrollWheelZoom={true}
|
||||||
|
>
|
||||||
|
<TileLayer
|
||||||
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
/>
|
||||||
|
{playerLocations.map((location, index) => {
|
||||||
|
if (!location) return null;
|
||||||
|
|
||||||
|
const markerColor = location.team === "RESISTANCE" ? "blue" : "green";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Marker
|
||||||
|
key={index}
|
||||||
|
position={location.coordinates}
|
||||||
|
icon={new L.Icon({
|
||||||
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${markerColor}.png`,
|
||||||
|
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41],
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Popup>
|
||||||
|
<div className="marker-popup">
|
||||||
|
<h4 style={{ color: location.team === "RESISTANCE" ? "#0066ff" : "#00cc00" }}>
|
||||||
|
{location.name}
|
||||||
|
</h4>
|
||||||
|
<p><strong>Team:</strong> {location.team}</p>
|
||||||
|
<p><strong>Event:</strong> {location.eventType}</p>
|
||||||
|
<p><strong>Time:</strong> {new Date(location.timestamp).toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</Marker>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</MapContainer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
206
src/components/StatsDashboard.tsx
Normal file
206
src/components/StatsDashboard.tsx
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
||||||
|
import type { Plext, EventStats, TeamStats, PlayerData } from "../types";
|
||||||
|
|
||||||
|
interface StatsDashboardProps {
|
||||||
|
plexts: Plext[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const EVENT_COLORS = {
|
||||||
|
RESONATOR_DEPLOYED: "#3b82f6",
|
||||||
|
RESONATOR_DESTROYED: "#ef4444",
|
||||||
|
PORTAL_CAPTURED: "#10b981",
|
||||||
|
PORTAL_NEUTRALIZED: "#f59e0b",
|
||||||
|
PORTAL_UNDER_ATTACK: "#8b5cf6",
|
||||||
|
LINK_CREATED: "#06b6d4",
|
||||||
|
LINK_DESTROYED: "#ec4899",
|
||||||
|
CONTROL_FIELD_CREATED: "#14b8a6",
|
||||||
|
UNKNOWN: "#6b7280",
|
||||||
|
};
|
||||||
|
|
||||||
|
const TEAM_COLORS = {
|
||||||
|
RESISTANCE: "#0066ff",
|
||||||
|
ENLIGHTENED: "#00cc00",
|
||||||
|
NEUTRAL: "#6b7280",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function StatsDashboard({ plexts }: StatsDashboardProps) {
|
||||||
|
// Calculate event stats
|
||||||
|
const eventStats: EventStats = {};
|
||||||
|
plexts.forEach((plext) => {
|
||||||
|
eventStats[plext.event_type] = (eventStats[plext.event_type] || 0) + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate team stats
|
||||||
|
const teamStats: TeamStats = {
|
||||||
|
RESISTANCE: 0,
|
||||||
|
ENLIGHTENED: 0,
|
||||||
|
NEUTRAL: 0,
|
||||||
|
};
|
||||||
|
plexts.forEach((plext) => {
|
||||||
|
const player = plext.markup.find((item) => item.type === "PLAYER");
|
||||||
|
if (player && player.team) {
|
||||||
|
teamStats[player.team]++;
|
||||||
|
} else {
|
||||||
|
teamStats.NEUTRAL++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate player stats
|
||||||
|
const playerStats: PlayerData[] = [];
|
||||||
|
const playerMap = new Map<string, PlayerData>();
|
||||||
|
|
||||||
|
plexts.forEach((plext) => {
|
||||||
|
const player = plext.markup.find((item) => item.type === "PLAYER");
|
||||||
|
if (player && player.plain) {
|
||||||
|
if (!playerMap.has(player.plain) && plext.coordinates && plext.coordinates.coordinates) {
|
||||||
|
playerMap.set(player.plain, {
|
||||||
|
name: player.plain,
|
||||||
|
team: player.team || "NEUTRAL",
|
||||||
|
events: 0,
|
||||||
|
lastSeen: plext.timestamp,
|
||||||
|
coordinates: [
|
||||||
|
plext.coordinates.coordinates[1],
|
||||||
|
plext.coordinates.coordinates[0],
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const playerData = playerMap.get(player.plain)!;
|
||||||
|
playerData.events++;
|
||||||
|
if (plext.timestamp > playerData.lastSeen && plext.coordinates && plext.coordinates.coordinates) {
|
||||||
|
playerData.lastSeen = plext.timestamp;
|
||||||
|
playerData.coordinates = [
|
||||||
|
plext.coordinates.coordinates[1],
|
||||||
|
plext.coordinates.coordinates[0],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedPlayers = Array.from(playerMap.values()).sort((a, b) => b.events - a.events);
|
||||||
|
|
||||||
|
// Prepare chart data
|
||||||
|
const eventChartData = Object.entries(eventStats).map(([type, count]) => ({
|
||||||
|
name: type,
|
||||||
|
count,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const teamChartData = Object.entries(teamStats)
|
||||||
|
.filter(([team]) => team !== "NEUTRAL")
|
||||||
|
.map(([team, count]) => ({
|
||||||
|
name: team,
|
||||||
|
count,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="stats-dashboard">
|
||||||
|
<div className="stats-grid">
|
||||||
|
{/* Total Events */}
|
||||||
|
<div className="stat-card">
|
||||||
|
<div className="stat-label">Total Events</div>
|
||||||
|
<div className="stat-value">{plexts.length}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Active Players */}
|
||||||
|
<div className="stat-card">
|
||||||
|
<div className="stat-label">Active Players</div>
|
||||||
|
<div className="stat-value">{playerMap.size}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Resistance */}
|
||||||
|
<div className="stat-card">
|
||||||
|
<div className="stat-label">Resistance</div>
|
||||||
|
<div className="stat-value" style={{ color: TEAM_COLORS.RESISTANCE }}>
|
||||||
|
{teamStats.RESISTANCE}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enlightened */}
|
||||||
|
<div className="stat-card">
|
||||||
|
<div className="stat-label">Enlightened</div>
|
||||||
|
<div className="stat-value" style={{ color: TEAM_COLORS.ENLIGHTENED }}>
|
||||||
|
{teamStats.ENLIGHTENED}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="charts-grid">
|
||||||
|
{/* Event Types Chart */}
|
||||||
|
<div className="chart-card">
|
||||||
|
<h3>Event Types</h3>
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<BarChart data={eventChartData}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
|
||||||
|
<XAxis dataKey="name" stroke="#9ca3af" />
|
||||||
|
<YAxis stroke="#9ca3af" />
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: "#1f2937",
|
||||||
|
border: "1px solid #374151",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Legend />
|
||||||
|
<Bar dataKey="count" fill="#3b82f6" radius={[8, 8, 0, 0]} />
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Team Distribution Chart */}
|
||||||
|
<div className="chart-card">
|
||||||
|
<h3>Team Distribution</h3>
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={teamChartData}
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
labelLine={false}
|
||||||
|
label={({ name, percent }) => `${name} ${((percent || 0) * 100).toFixed(0)}%`}
|
||||||
|
outerRadius={100}
|
||||||
|
fill="#8884d8"
|
||||||
|
dataKey="count"
|
||||||
|
>
|
||||||
|
{teamChartData.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={TEAM_COLORS[entry.name as keyof typeof TEAM_COLORS]} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: "#1f2937",
|
||||||
|
border: "1px solid #374151",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Top Players Chart */}
|
||||||
|
<div className="chart-card">
|
||||||
|
<h3>Top Players</h3>
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<BarChart data={sortedPlayers.slice(0, 10)}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
|
||||||
|
<XAxis dataKey="name" stroke="#9ca3af" />
|
||||||
|
<YAxis stroke="#9ca3af" />
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: "#1f2937",
|
||||||
|
border: "1px solid #374151",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Legend />
|
||||||
|
<Bar
|
||||||
|
dataKey="events"
|
||||||
|
fill="#10b981"
|
||||||
|
radius={[8, 8, 0, 0]}
|
||||||
|
label={{ position: "top" }}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
26
src/frontend.tsx
Normal file
26
src/frontend.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
/**
|
||||||
|
* This file is the entry point for the React app, it sets up the root
|
||||||
|
* element and renders the App component to the DOM.
|
||||||
|
*
|
||||||
|
* It is included in `src/index.html`.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import { App } from "./App";
|
||||||
|
|
||||||
|
const elem = document.getElementById("root")!;
|
||||||
|
const app = (
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (import.meta.hot) {
|
||||||
|
// With hot module reloading, `import.meta.hot.data` is persisted.
|
||||||
|
const root = (import.meta.hot.data.root ??= createRoot(elem));
|
||||||
|
root.render(app);
|
||||||
|
} else {
|
||||||
|
// The hot module reloading API is not available in production.
|
||||||
|
createRoot(elem).render(app);
|
||||||
|
}
|
||||||
323
src/index.css
Normal file
323
src/index.css
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
||||||
|
color: #e0e0e0;
|
||||||
|
min-height: 100vh;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.app-header {
|
||||||
|
background: rgba(26, 26, 46, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #06b6d4);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-subtitle {
|
||||||
|
color: #9ca3af;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
.app-main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading */
|
||||||
|
.loading-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 3px solid rgba(59, 130, 246, 0.3);
|
||||||
|
border-top-color: #3b82f6;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Headers */
|
||||||
|
.section-header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f3f4f6;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header p {
|
||||||
|
color: #9ca3af;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Map Section */
|
||||||
|
.map-section {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-wrapper {
|
||||||
|
background: rgba(26, 26, 46, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Section */
|
||||||
|
.stats-section {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-dashboard {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Grid */
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: rgba(26, 26, 46, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
|
||||||
|
border-color: rgba(59, 130, 246, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: #9ca3af;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Charts Grid */
|
||||||
|
.charts-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
background: rgba(26, 26, 46, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card h3 {
|
||||||
|
color: #f3f4f6;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.app-footer {
|
||||||
|
background: rgba(26, 26, 46, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
margin-top: auto;
|
||||||
|
text-align: center;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.app-header {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-main {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-wrapper {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.app-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-wrapper {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Leaflet Marker Popup */
|
||||||
|
.marker-popup {
|
||||||
|
color: #1a1a2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker-popup h4 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker-popup p {
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Recharts Overrides */
|
||||||
|
.recharts-wrapper {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharts-text {
|
||||||
|
fill: #9ca3af !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharts-cartesian-grid-horizontal line,
|
||||||
|
.recharts-cartesian-grid-vertical line {
|
||||||
|
stroke: #374151 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharts-xAxis .recharts-text,
|
||||||
|
.recharts-yAxis .recharts-text {
|
||||||
|
fill: #9ca3af !important;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card,
|
||||||
|
.chart-card {
|
||||||
|
animation: fadeIn 0.5s ease-out;
|
||||||
|
}
|
||||||
13
src/index.html
Normal file
13
src/index.html
Normal file
@@ -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" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
|
||||||
|
<title>Bun + React</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="./frontend.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
src/index.ts
Normal file
41
src/index.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { serve } from "bun";
|
||||||
|
import index from "./index.html";
|
||||||
|
|
||||||
|
const server = serve({
|
||||||
|
routes: {
|
||||||
|
// Serve index.html for all unmatched routes.
|
||||||
|
"/*": index,
|
||||||
|
|
||||||
|
"/api/hello": {
|
||||||
|
async GET(req) {
|
||||||
|
return Response.json({
|
||||||
|
message: "Hello, world!",
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async PUT(req) {
|
||||||
|
return Response.json({
|
||||||
|
message: "Hello, world!",
|
||||||
|
method: "PUT",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"/api/hello/:name": async req => {
|
||||||
|
const name = req.params.name;
|
||||||
|
return Response.json({
|
||||||
|
message: `Hello, ${name}!`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
development: process.env.NODE_ENV !== "production" && {
|
||||||
|
// Enable browser hot reloading in development
|
||||||
|
hmr: true,
|
||||||
|
|
||||||
|
// Echo console logs from the browser to the server
|
||||||
|
console: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`🚀 Server running at ${server.url}`);
|
||||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
8
src/react.svg
Normal file
8
src/react.svg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
|
||||||
|
<circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
|
||||||
|
<g stroke="#61dafb" stroke-width="1" fill="none">
|
||||||
|
<ellipse rx="11" ry="4.2"/>
|
||||||
|
<ellipse rx="11" ry="4.2" transform="rotate(60)"/>
|
||||||
|
<ellipse rx="11" ry="4.2" transform="rotate(120)"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 338 B |
59
src/types.ts
Normal file
59
src/types.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
export type Team = "RESISTANCE" | "ENLIGHTENED" | "NEUTRAL";
|
||||||
|
|
||||||
|
export type EventType =
|
||||||
|
| "RESONATOR_DEPLOYED"
|
||||||
|
| "RESONATOR_DESTROYED"
|
||||||
|
| "PORTAL_CAPTURED"
|
||||||
|
| "PORTAL_NEUTRALIZED"
|
||||||
|
| "PORTAL_UNDER_ATTACK"
|
||||||
|
| "LINK_CREATED"
|
||||||
|
| "LINK_DESTROYED"
|
||||||
|
| "CONTROL_FIELD_CREATED"
|
||||||
|
| "UNKNOWN";
|
||||||
|
|
||||||
|
export interface Coordinates {
|
||||||
|
coordinates: [number, number]; // [lon, lat]
|
||||||
|
type: "Point";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MarkupItem {
|
||||||
|
address?: string;
|
||||||
|
latE6?: number;
|
||||||
|
lngE6?: number;
|
||||||
|
name?: string;
|
||||||
|
plain?: string;
|
||||||
|
team?: Team;
|
||||||
|
type: "PLAYER" | "TEXT" | "PORTAL";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Plext {
|
||||||
|
categories: number;
|
||||||
|
coordinates: Coordinates;
|
||||||
|
event_type: EventType;
|
||||||
|
id: string;
|
||||||
|
markup: MarkupItem[];
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiResponse {
|
||||||
|
count: number;
|
||||||
|
plexts: Plext[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PlayerData {
|
||||||
|
name: string;
|
||||||
|
team: Team;
|
||||||
|
events: number;
|
||||||
|
lastSeen: number;
|
||||||
|
coordinates: [number, number]; // [lat, lon]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EventStats {
|
||||||
|
[eventType: string]: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TeamStats {
|
||||||
|
RESISTANCE: number;
|
||||||
|
ENLIGHTENED: number;
|
||||||
|
NEUTRAL: number;
|
||||||
|
}
|
||||||
36
tsconfig.json
Normal file
36
tsconfig.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
// Environment setup & latest features
|
||||||
|
"lib": ["ESNext", "DOM"],
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "Preserve",
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"allowJs": true,
|
||||||
|
|
||||||
|
// Bundler mode
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
// Best practices
|
||||||
|
"strict": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedIndexedAccess": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Some stricter flags (disabled by default)
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"noUnusedParameters": false,
|
||||||
|
"noPropertyAccessFromIndexSignature": false
|
||||||
|
},
|
||||||
|
|
||||||
|
"exclude": ["dist", "node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user