[ { "path": ".editorconfig", "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\nend_of_line = lf\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintrc.json", "content": "{\n \"root\": true,\n \"ignorePatterns\": [\"**/*\"],\n \"plugins\": [\"@nrwl/nx\"],\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n \"rules\": {\n \"@nrwl/nx/enforce-module-boundaries\": [\n \"error\",\n {\n \"enforceBuildableLibDependency\": true,\n \"allow\": [],\n \"depConstraints\": [\n {\n \"sourceTag\": \"*\",\n \"onlyDependOnLibsWithTags\": [\"*\"]\n }\n ]\n }\n ]\n }\n },\n {\n \"files\": [\"*.ts\", \"*.tsx\"],\n \"extends\": [\"plugin:@nrwl/nx/typescript\"],\n \"rules\": {}\n },\n {\n \"files\": [\"*.js\", \"*.jsx\"],\n \"extends\": [\"plugin:@nrwl/nx/javascript\"],\n \"rules\": {}\n }\n ]\n}\n" }, { "path": ".gitattributes", "content": "# Often used LFS tracks\n# https://gist.github.com/ma-al/019f7f76498c55f0061120a5b13c6d88\n# ------------------------------------------------\n# Usual image types\n*.png filter=lfs diff=lfs merge=lfs -text\n*.jpeg filter=lfs diff=lfs merge=lfs -text\n*.jpg filter=lfs diff=lfs merge=lfs -text\n*.bmp filter=lfs diff=lfs merge=lfs -text\n*.svg filter=lfs diff=lfs merge=lfs -text\n*.sketch filter=lfs diff=lfs merge=lfs -text\n*.gif filter=lfs diff=lfs merge=lfs -text\n# ------------------------------------------------\n\n# Audio files\n*.ogg filter=lfs diff=lfs merge=lfs -text\n*.mp3 filter=lfs diff=lfs merge=lfs -text\n*.wav filter=lfs diff=lfs merge=lfs -text\n\n# osu! related files\n*.osr filter=lfs diff=lfs merge=lfs -text\n*.db filter=lfs diff=lfs merge=lfs -text\n*.osu filter=lfs diff=lfs merge=lfs -text\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: bug\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce** (optional)\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Version [e.g. 22]\n\n**Additional context**\n\n**Please** also provide the following if they are mentioned and related:\n* Beatmap\n* Replay\n* Skin\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: enhancement\nassignees: ''\n\n---\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Additional context** (optional)\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/workflows/build-release.yml", "content": "name: Build/release v2\n\non:\n push:\n workflow_dispatch:\n\njobs:\n release:\n runs-on: ${{ matrix.os }}\n\n strategy:\n matrix:\n os: [ ubuntu-latest, windows-latest, macos-latest ]\n\n steps:\n - name: Checkout code\n uses: nschloe/action-cached-lfs-checkout@v1\n\n - name: Install Node.js, NPM and Yarn\n uses: actions/setup-node@v3\n with:\n node-version: 20\n cache: 'npm'\n\n - name: Build/release Electron app\n uses: Yan-Jobs/action-electron-builder@v1.7.0\n with:\n # GitHub token, automatically provided to the action\n # (No need to define this secret in the repo settings)\n github_token: ${{ secrets.github_token }}\n\n # If the commit is tagged with a version (e.g. \"v1.0.0\"),\n # release the app after building\n release: ${{ startsWith(github.ref, 'refs/tags/v') }}\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# compiled output\n/dist\n/tmp\n/out-tsc\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n# misc\n/.sass-cache\n/connect.lock\n/coverage\n/libpeerconnection.log\nnpm-debug.log\nyarn-error.log\ntestem.log\n/typings\n\n# System Files\n.DS_Store\nThumbs.db\n\n# Custom\n/logs/\n" }, { "path": ".gitmodules", "content": "[submodule \"testdata/osu-testdata\"]\n\tpath = testdata/osu-testdata\n\turl = https://github.com/abstrakt8/osu-testdata\n" }, { "path": ".prettierignore", "content": "# Add files here to ignore them from prettier formatting\n\n/dist\n/coverage\n" }, { "path": ".prettierrc", "content": "{\n \"printWidth\": 120,\n \"tabWidth\": 2,\n \"trailingComma\": \"all\",\n \"endOfLine\": \"lf\"\n}\n" }, { "path": ".storybook/main.js", "content": "module.exports = {\n stories: [],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"storybook-css-modules-preset\",\n {\n name: \"@storybook/addon-postcss\",\n options: {\n postcssLoaderOptions: {\n implementation: require(\"postcss\"),\n },\n },\n },\n ],\n};\n" }, { "path": ".storybook/preview.js", "content": "export const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n}" }, { "path": ".storybook/tsconfig.json", "content": "{\n \"extends\": \"../tsconfig.base.json\",\n \"exclude\": [\n \"../**/*.spec.js\",\n \"../**/*.spec.ts\",\n \"../**/*.spec.tsx\",\n \"../**/*.spec.jsx\"\n ],\n \"include\": [\"../**/*\"]\n}\n" }, { "path": ".storybook/webpack.config.js", "content": "/**\n * Export a function. Accept the base config as the only param.\n * @param {Object} options\n * @param {Required} options.config\n * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.\n */\nmodule.exports = async ({ config, mode }) => {\n // Make whatever fine-grained changes you need\n\n // Return the altered config\n return config;\n};\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\n \"nrwl.angular-console\",\n \"esbenp.prettier-vscode\",\n \"firsttris.vscode-jest-runner\",\n \"dbaeumer.vscode-eslint\"\n ]\n}\n" }, { "path": ".yarnrc", "content": "# https://github.com/yarnpkg/yarn/issues/5540\n# because of material-ui icons\nnetwork-timeout 600000\n\n\n" }, { "path": "CONTRIBUTION.md", "content": "Project Structure\n===\n\nGeneral\n---\n\nThis repository is a mono-repo that is currently focused on the development of the Rewind desktop application. However,\nas we are working with web technologies (WebGL, JS), there are also plans to implement a Rewind web version.\n\nThis mono-repo is powered by the [nx](https://nx.dev/) build system.\n\nIn `apps` you will find the applications - every folder corresponds to one \"product\".\n\nIn `libs` you will find the common code that is shared across all the applications.\n\nIn `tests` you will find the integration tests that will test the correctness of the libraries. Generally speaking,\ntests that have some external dependencies (such as a beatmap or replay file) will belong here. Unit tests should be\nwritten in the corresponding library `src` folder with `*.spec.ts` filename extension.\n\n> Familiarity with [Electron's process model](https://www.electronjs.org/docs/latest/tutorial/process-model) required.\n \nSetup\n===\nBasics\n---\n\nInstall the following:\n\n* Latest Node.js LTS version (e.g. `nvm install --lts`)\n* [`git-lfs`](https://git-lfs.github.com/) for the test data in `testdata/`\n\n\nWhen changes have been done to some submodules, you need to merge them as follows:\n```\ngit submodule update --remote --merge\n```\n\nBuilding\n---\n\n```bash\nyarn install\nyarn run build\n```\n\nDeveloping\n---\n\nFirst start the `desktop-frontend` to expose the frontend on port 4200 with \"Hot Reloading\" enabled.\n\n```bash\nyarn run desktop-frontend:dev\n```\n\nThen start the Electron application:\n\n```bash\nyarn run desktop-main:dev\n```\n\nIf you make a change in the `desktop-main` package, you will need to rerun the command above again.\n\n\nReleasing\n---\n\nWhen you want to create a new release, follow these steps:\n\n1. Update the version in your project's `package.json` file (e.g. `1.2.3`)\n2. Commit that change (`git commit -am v1.2.3`)\n3. Tag your commit (`git tag v1.2.3`). Make sure your tag name's format is `v*.*.*`. Your workflow will use this tag to detect when to create a release\n4. Push your changes to GitHub (`git push && git push --tags`)\n\nAfter building successfully, the action will publish your release artifacts. By default, a new release draft will be created on GitHub with download links for your app. If you want to change this behavior, have a look at the [`electron-builder` docs](https://www.electron.build).\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) 2021 abstrakt\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "

Rewind

\n\n![Github releases](https://img.shields.io/github/v/release/abstrakt8/rewind?label=stable)\n![Github releases](https://img.shields.io/github/v/release/abstrakt8/rewind?include_prereleases&label=latest)\n[![GitHub Releases Downloads](https://img.shields.io/github/downloads/abstrakt8/rewind/total?label=Downloads)](https://github.com/abstrakt8/rewind/releases/latest)\n[![Discord](https://img.shields.io/discord/841454370888351784.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/QubdHdnBVg)\n\nRewind is a beatmap/replay analyzer for [osu!](https://osu.ppy.sh/) and is currently in development phase.\n\n\"BTMC
\n\n## Features\n\nThis [video](https://www.youtube.com/watch?v=KDatdxvjdmc) shows most of the features listed down below:\n\n* Music playback\n* Speed change 0.25x-4.0x\n* Scrubbing (jumping to a specific time)\n* Toggling the \"Hidden\" mod\n* Analysis cursor\n* Slider dev mode\n* Hit error bar (slightly improved)\n* Statistics such as UR\n* Watching frame by frame\n* Skin support\n* Difficulty graph on the timeline\n* Gameplay events (Miss/SB/50/100) in the timeline\n* Support for unsubmitted maps\n* File watcher\n* Customizability of many elements (e.g. cursor size)\n* Shortcuts\n* ...\n\n## Download\n\nThe latest release for Windows/Linux can be found at the [release page](https://github.com/abstrakt8/rewind/releases).\n\n## Questions / Feedback / Discussions\n\nIf you have any questions about Rewind or want to contribute by submitting ideas, feel free to join\nthe [osu! University Discord](https://discord.gg/QubdHdnBVg). It is an improvement-focused osu! hub, osu!\ncoaching hub, and a platform for experienced players to spread their game knowledge to the public.\n\n## Contribution (development, testing, documentation, ...)\n\nIf you want to contribute, please join the [Dev Discord](https://discord.gg/pwCVATunVt).\n\nCurrently, a large portion of the code is in a \"volatile\" / \"prototype\" / \"proof of concept\" state. So if you want to contribute by developing, please notify me beforehand.\n" }, { "path": "apps/desktop/README.md", "content": "The Rewind desktop application consists of two renderers which are implemented in `backend` and `frontend`.\n\nThe entry point of this application is implemented in \"main.js\".\n" }, { "path": "apps/desktop/frontend/.babelrc", "content": "{\n \"presets\": [\n [\n \"@nrwl/react/babel\",\n {\n \"runtime\": \"automatic\"\n }\n ]\n ],\n \"plugins\": []\n}\n" }, { "path": "apps/desktop/frontend/.browserslistrc", "content": "# This file is used by:\n# 1. autoprefixer to adjust CSS to support the below specified browsers\n# 2. babel preset-env to adjust included polyfills\n#\n# For additional information regarding the format and rule options, please see:\n# https://github.com/browserslist/browserslist#queries\n#\n# If you need to support different browsers in production, you may tweak the list below.\n\nlast 1 Chrome version\nlast 1 Firefox version\nlast 2 Edge major versions\nlast 2 Safari major version\nlast 2 iOS major versions\nFirefox ESR\nnot IE 9-11 # For IE 9-11 support, remove 'not'." }, { "path": "apps/desktop/frontend/.eslintrc.json", "content": "{\n \"extends\": [\"plugin:@nrwl/nx/react\", \"../../../.eslintrc.json\"],\n \"ignorePatterns\": [\"!**/*\"],\n \"overrides\": [\n {\n \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n \"rules\": {}\n },\n {\n \"files\": [\"*.ts\", \"*.tsx\"],\n \"rules\": {}\n },\n {\n \"files\": [\"*.js\", \"*.jsx\"],\n \"rules\": {}\n }\n ]\n}\n" }, { "path": "apps/desktop/frontend/.storybook/main.js", "content": "const rootMain = require(\"../../../../.storybook/main\");\n\n// Use the following syntax to add addons!\n// rootMain.addons.push('');\nrootMain.stories.push(...[\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|ts|tsx)\"]);\n\nmodule.exports = rootMain;\n" }, { "path": "apps/desktop/frontend/.storybook/preview.js", "content": "import React from \"react\";\n\nimport { addDecorator } from \"@storybook/react\";\n\nimport { ThemeProvider as EmotionThemeProvider } from \"emotion-theming\";\nimport { rewindTheme } from \"../src/app/styles/theme\";\nimport { CssBaseline, ThemeProvider } from \"@mui/material\";\n\nconst defaultTheme = rewindTheme;\n\nexport const parameters = {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/,\n },\n },\n};\n\nconst withThemeProvider = (Story, context) => {\n return (\n \n \n \n \n \n \n );\n};\n\naddDecorator(withThemeProvider);\n" }, { "path": "apps/desktop/frontend/.storybook/tsconfig.json", "content": "{\n \"extends\": \"../../../../libs/feature-replay-viewer/tsconfig.json\",\n \"compilerOptions\": {\n \"emitDecoratorMetadata\": true,\n \"outDir\": \"tsconfig\"\n },\n \"files\": [\n \"../../node_modules/@nrwl/react/typings/cssmodule.d.ts\",\n \"../../node_modules/@nrwl/react/typings/image.d.ts\"\n ],\n \"exclude\": [\n \"../**/*.spec.ts\",\n \"../**/*.test.ts\",\n \"../**/*.spec.js\",\n \"../**/*.test.js\",\n \"../**/*.spec.tsx\",\n \"../**/*.test.tsx\",\n \"../**/*.spec.jsx\",\n \"../**/*.test.jsx\"\n ],\n \"include\": [\n \"../src/**/*\",\n \"*.js\"\n ]\n}\n" }, { "path": "apps/desktop/frontend/.storybook/webpack.config.js", "content": "const TsconfigPathsPlugin = require(\"tsconfig-paths-webpack-plugin\");\nconst rootWebpackConfig = require(\"../../../../.storybook/webpack.config\");\n/**\n * Export a function. Accept the base config as the only param.\n *\n * @param {Parameters[0]} options\n */\nmodule.exports = async ({ config, mode }) => {\n config = await rootWebpackConfig({ config, mode });\n\n const tsPaths = new TsconfigPathsPlugin({\n configFile: \"./tsconfig.base.json\",\n });\n\n config.resolve.plugins ? config.resolve.plugins.push(tsPaths) : (config.resolve.plugins = [tsPaths]);\n\n // Found this here: https://github.com/nrwl/nx/issues/2859\n // And copied the part of the solution that made it work\n\n const svgRuleIndex = config.module.rules.findIndex((rule) => {\n const { test } = rule;\n\n // @rewind: very important to have test?.\n return test?.toString().startsWith(\"/\\\\.(svg|ico\");\n });\n config.module.rules[svgRuleIndex].test = /\\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\?.*)?$/;\n\n config.module.rules.push(\n {\n test: /\\.(png|jpe?g|gif|webp)$/,\n loader: require.resolve(\"url-loader\"),\n options: {\n limit: 10000, // 10kB\n name: \"[name].[hash:7].[ext]\",\n },\n },\n {\n test: /\\.svg$/,\n oneOf: [\n // If coming from JS/TS file, then transform into React component using SVGR.\n {\n issuer: {\n test: /\\.[jt]sx?$/,\n },\n use: [\n {\n loader: require.resolve(\"@svgr/webpack\"),\n options: {\n svgo: false,\n titleProp: true,\n ref: true,\n },\n },\n {\n loader: require.resolve(\"url-loader\"),\n options: {\n limit: 10000, // 10kB\n name: \"[name].[hash:7].[ext]\",\n esModule: false,\n },\n },\n ],\n },\n // Fallback to plain URL loader.\n {\n use: [\n {\n loader: require.resolve(\"url-loader\"),\n options: {\n limit: 10000, // 10kB\n name: \"[name].[hash:7].[ext]\",\n },\n },\n ],\n },\n ],\n },\n );\n\n return config;\n};\n" }, { "path": "apps/desktop/frontend/README.md", "content": "This is the frontend that gets deployed with the Electron app. That's why there is\n\nSome notes:\n\n- Uses `redux` for state management.\n- The `rewind` app is kind of a standalone application, therefore it's not really connected to the redux state\n management.\n" }, { "path": "apps/desktop/frontend/jest.config.ts", "content": "/* eslint-disable */\nexport default {\n displayName: \"frontend\",\n preset: \"../../../jest.preset.js\",\n transform: {\n \"^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)\": \"@nrwl/react/plugins/jest\",\n \"^.+\\\\.[tj]sx?$\": \"babel-jest\",\n },\n moduleFileExtensions: [\"ts\", \"tsx\", \"js\", \"jsx\"],\n coverageDirectory: \"../../../coverage/apps/frontend\",\n};\n" }, { "path": "apps/desktop/frontend/proxy.conf.json", "content": "{\n \"/api\": {\n \"target\": \"http://localhost:3333\",\n \"secure\": false\n },\n \"/desktop-backend-api\": {\n \"target\": \"http://localhost:3333\",\n \"secure\": false\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/RewindApp.tsx", "content": "import { useAppDispatch } from \"./hooks/redux\";\nimport { Outlet, Routes, Route, useNavigate } from \"react-router-dom\";\nimport { LeftMenuSidebar } from \"./components/sidebar/LeftMenuSidebar\";\nimport { SplashScreen } from \"./screens/splash/SplashScreen\";\nimport { HomeScreen } from \"./screens/home/HomeScreen\";\nimport { Box, Divider, Stack } from \"@mui/material\";\nimport { UpdateModal } from \"./components/update/UpdateModal\";\nimport { useEffect } from \"react\";\nimport { downloadFinished, downloadProgressed, newVersionAvailable } from \"./store/update/slice\";\nimport { frontendAPI } from \"./api\";\nimport { ipcRenderer } from \"electron\";\nimport { useTheaterContext } from \"./providers/TheaterProvider\";\nimport { ELECTRON_UPDATE_FLAG } from \"./utils/constants\";\nimport { Analyzer } from \"./screens/analyzer/Analyzer\";\nimport { SetupScreen } from \"./screens/setup/SetupScreen\";\n\nfunction NormalView() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport function RewindApp() {\n const navigate = useNavigate();\n const dispatch = useAppDispatch();\n const theater = useTheaterContext();\n\n useEffect(() => {\n void theater.common.initialize();\n\n // For now, we will just navigate to the analyzer app since we only have one tool\n ipcRenderer.on(\"onManualReplayOpen\", (event, file) => {\n navigate(\"/app/analyzer\");\n void theater.analyzer.loadReplay(file);\n });\n\n (async function () {\n if (!(await theater.analyzer.osuFolderService.hasValidOsuFolderSet())) {\n console.log(\"osu! folder was not set, redirecting to the setup screen.\");\n navigate(\"/setup\");\n } else {\n console.log(`osu! folder = ${theater.analyzer.osuFolderService.getOsuFolder()}`);\n console.log(`osu!/Songs folder = ${theater.analyzer.osuFolderService.songsFolder$.getValue()}`);\n console.log(`osu!/Replays folder = ${theater.analyzer.osuFolderService.replaysFolder$.getValue()}`);\n navigate(\"/app/analyzer\");\n }\n })();\n\n if (ELECTRON_UPDATE_FLAG) {\n frontendAPI.onUpdateAvailable((version) => {\n dispatch(newVersionAvailable(version));\n });\n frontendAPI.onDownloadFinished(() => {\n dispatch(downloadFinished());\n });\n frontendAPI.onUpdateDownloadProgress((updateInfo) => {\n const { total, bytesPerSecond, transferred } = updateInfo;\n dispatch(downloadProgressed({ downloadedBytes: transferred, totalBytes: total, bytesPerSecond }));\n });\n // We start checking for update on the front end, otherwise if we start it from the Electron main process, the\n // notification might get lost (probably need a message queue if we want to start from the Electron main process)\n frontendAPI.checkForUpdate();\n }\n }, []);\n\n return (\n \n } />\n } />\n }>\n } />\n } />\n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/api.ts", "content": "import { ipcRenderer } from \"electron\";\n\ntype Listener = (...args: any) => any;\n\n// Maybe use it for onUpdateDownloadProgress\ninterface UpdateInfo {\n total: number;\n transferred: number;\n bytesPerSecond: number;\n}\n\nexport const frontendAPI = {\n getPath: (type: string) => ipcRenderer.invoke(\"getPath\", type),\n selectDirectory: (defaultPath: string) => ipcRenderer.invoke(\"selectDirectory\", defaultPath),\n selectFile: (defaultPath: string) => ipcRenderer.invoke(\"selectFile\", defaultPath),\n reboot: () => ipcRenderer.invoke(\"reboot\"),\n getAppVersion: () => ipcRenderer.invoke(\"getAppVersion\"),\n getPlatform: () => ipcRenderer.invoke(\"getPlatform\"),\n onManualReplayOpen: (listener: Listener) => ipcRenderer.on(\"onManualReplayOpen\", (event, file) => listener(file)),\n onUpdateAvailable: (listener: Listener) => ipcRenderer.on(\"onUpdateAvailable\", (event, version) => listener(version)),\n onUpdateDownloadProgress: (listener: Listener) =>\n ipcRenderer.on(\"onUpdateDownloadProgress\", (event, info) => listener(info)),\n startDownloadingUpdate: () => ipcRenderer.invoke(\"startDownloadingUpdate\"),\n onDownloadFinished: (listener: Listener) => ipcRenderer.on(\"onDownloadFinished\", (event) => listener()),\n checkForUpdate: () => ipcRenderer.invoke(\"checkForUpdate\"),\n quitAndInstall: () => ipcRenderer.invoke(\"quitAndInstall\"),\n};\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseAudioSettingsPanel.tsx", "content": "import { Box, Slider, Stack, Tooltip, Typography } from \"@mui/material\";\nimport { VolumeDown, VolumeUp } from \"@mui/icons-material\";\n\ntype Change = (x: number) => void;\n\ninterface BaseAudioSettingsPanelProps {\n master: number;\n effects: number;\n music: number;\n\n onMasterChange: Change;\n onEffectsChange: Change;\n onMusicChange: Change;\n onMutedChange: (muted: boolean) => unknown;\n}\n\nexport function VolumeSlider({ disabled, onChange, value }: { disabled?: boolean; onChange: Change; value: number }) {\n return (\n \n \n onChange((x as number) / 100)}\n />\n \n \n );\n}\n\nexport function BaseAudioSettingsPanel(props: BaseAudioSettingsPanelProps) {\n const { master, effects, music, onMasterChange, onEffectsChange, onMusicChange, onMutedChange } = props;\n return (\n \n \n \n Master Volume\n \n \n \n\n \n \n Music Volume\n \n \n \n \n \n Effects Volume\n \n \n {/*https://mui.com/components/tooltips/#disabled-elements*/}\n \n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseCurrentTime.stories.tsx", "content": "import { Meta, Story } from \"@storybook/react\";\nimport { Paper } from \"@mui/material\";\nimport { BaseCurrentTime, GameCurrentTimeProps } from \"./BaseCurrentTime\";\n\nexport default {\n component: BaseCurrentTime,\n title: \"BaseCurrentTime\",\n argTypes: {\n onClick: { action: \"onClick executed!\" },\n },\n} as Meta;\n\nconst Template: Story = (args) => (\n \n \n \n);\n\nexport const Time200ms = Template.bind({});\nTime200ms.args = {\n currentTimeInMs: 200,\n};\n\nexport const Time1727ms = Template.bind({});\nTime1727ms.args = {\n currentTimeInMs: 1727,\n};\n\nexport const TimeHour = Template.bind({});\nTimeHour.args = {\n currentTimeInMs: 60 * 60 * 1000 + 727,\n};\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseCurrentTime.tsx", "content": "import React, { forwardRef, ForwardRefRenderFunction, useImperativeHandle, useRef } from \"react\";\nimport { formatGameTime } from \"@osujs/math\";\nimport { darken, Typography } from \"@mui/material\";\n\nexport type GameCurrentTimeProps = Record;\n\nexport interface GameCurrentTimeHandle {\n updateTime: (timeInMs: number) => void;\n}\n\nconst ForwardCurrentTime: ForwardRefRenderFunction = (props, ref) => {\n const refMain = useRef(null);\n const refMs = useRef(null);\n\n useImperativeHandle(ref, () => ({\n updateTime(timeInMs) {\n const [timeHMS, timeMS] = formatGameTime(timeInMs, true).split(\".\");\n if (refMain.current) refMain.current.textContent = timeHMS;\n if (refMs.current) refMs.current.textContent = \".\" + timeMS;\n },\n }));\n return (\n \n 0:00\n\n darken(theme.palette.text.primary, 0.6) }} ref={refMs}>\n .000\n \n \n );\n};\n\nexport const BaseCurrentTime = forwardRef(ForwardCurrentTime);\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseDialog.tsx", "content": "import { IconButton, Link, Typography } from \"@mui/material\";\nimport { FaDiscord } from \"react-icons/fa\";\nimport React from \"react\";\nimport { RewindLinks } from \"../../utils/constants\";\nimport { useCommonManagers } from \"../../providers/TheaterProvider\";\n\nexport function PromotionFooter() {\n const appVersion = useCommonManagers().appInfoService.version;\n return (\n \n Rewind {appVersion} by{\" \"}\n \n abstrakt\n {\" \"}\n | osu! University\n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseGameTimeSlider.stories.tsx", "content": "import { Box } from \"@mui/material\";\nimport { Meta, Story } from \"@storybook/react\";\nimport { BaseGameTimeSlider, BaseGameTimeSliderProps } from \"./BaseGameTimeSlider\";\n\nexport default {\n component: BaseGameTimeSlider,\n title: \"BaseGameTimeSlider\",\n argTypes: {\n onClick: { action: \"onClick executed!\" },\n },\n} as Meta;\n\nconst Template: Story = (args) => (\n \n \n \n);\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n backgroundEnable: true,\n};\n\nexport const NotEnabled = Template.bind({});\nNotEnabled.args = {\n backgroundEnable: false,\n};\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseGameTimeSlider.tsx", "content": "import { Box, Slider, styled } from \"@mui/material\";\nimport { formatGameTime, rgbToInt } from \"@osujs/math\";\nimport { ignoreFocus } from \"../../utils/focus\";\nimport { useEffect, useRef } from \"react\";\nimport { Renderer, Sprite, Texture } from \"pixi.js\";\nimport { AdjustmentFilter } from \"@pixi/filter-adjustment\";\nimport { Container } from \"@pixi/display\";\nimport { Chart, registerables } from \"chart.js\";\nimport colorString from \"color-string\";\n\n//\nChart.register(...registerables);\n\ninterface EventLineProps {\n color: string;\n tooltip: string;\n positions: number[];\n}\n\ntype EventType = { timings: number[]; tooltip: string; color: string };\n\nexport interface BaseGameTimeSliderProps {\n backgroundEnable?: boolean;\n // Duration in ms\n duration: number;\n // Time in ms\n currentTime: number;\n // When the slider is dragged\n onChange: (value: number) => any;\n\n events: EventType[];\n difficulties: number[];\n}\n\nfunction drawPlaybarEvents(canvas: HTMLCanvasElement, eventTypes: EventType[], duration: number) {\n const renderer = new Renderer({ view: canvas, backgroundAlpha: 0.0 });\n const stage = new Container();\n const { height, width } = renderer.screen;\n const eventLineHeight = height / eventTypes.length;\n for (let i = 0; i < eventTypes.length; i++) {\n const eventType = eventTypes[i];\n const container = new Container();\n const descriptor = colorString.get(eventType.color);\n if (!descriptor) break;\n const tint = rgbToInt(descriptor.value);\n // console.log(`Event ${i} has color ${tint} and ${descriptor.value}`);\n for (const timing of eventType.timings) {\n const sprite = Sprite.from(Texture.WHITE);\n sprite.tint = tint;\n // TODO: This needs to be centered -> but doesn't really matter since it's kinda negligible\n sprite.width = 1;\n sprite.height = eventLineHeight;\n sprite.position.set((timing / duration) * width, 0);\n container.addChild(sprite);\n }\n stage.addChild(container);\n container.position.set(0, i * eventLineHeight);\n }\n stage.filters = [new AdjustmentFilter({ brightness: 0.7 })];\n\n stage.interactive = false;\n stage.interactiveChildren = false;\n renderer.render(stage);\n // Doesn't need ticker right?\n}\n\nconst PlaybarEventsCanvas = styled(\"canvas\")`\n //background: aqua;\n position: absolute;\n height: 40px;\n width: 100%;\n top: 0;\n left: 0;\n transform: translate(0, -50%);\n`;\n\nconst DifficultyCanvas = styled(\"canvas\")`\n //position: absolute;\n //top: 0;\n //left: 0;\n //transform: translate(0, -100%);\n //background: aqua;\n`;\n\nfunction drawDifficulty(canvas: HTMLCanvasElement, data: number[]) {\n // const labels = [0, 20, 40, 50, 99, 1000];\n const labels = data.map((_) => \"\");\n\n const chart = new Chart(canvas, {\n type: \"line\",\n options: {\n maintainAspectRatio: false,\n\n // To hide the little \"knobs\"\n elements: {\n point: {\n radius: 0,\n },\n },\n scales: {\n x: {\n display: false,\n },\n y: {\n display: false,\n },\n },\n plugins: {\n legend: {\n display: false,\n },\n tooltip: {\n enabled: false,\n },\n },\n },\n data: {\n labels,\n datasets: [\n {\n data,\n fill: true,\n // borderColor: \"rgba(255, 255, 255, 0.5)\",\n // borderColor: \"hsla(0,4%,31%,0.77)\",\n backgroundColor: \"hsla(0, 2%, 44%, 0.3)\",\n tension: 0.5,\n },\n ],\n },\n });\n chart.draw();\n return chart;\n}\n\nexport function BaseGameTimeSlider(props: BaseGameTimeSliderProps) {\n const { backgroundEnable, duration, currentTime, onChange, events, difficulties } = props;\n const valueLabelFormat = (value: number) => formatGameTime(value);\n\n const eventsCanvas = useRef(null!);\n const difficultyCanvas = useRef(null!);\n\n useEffect(() => {\n drawPlaybarEvents(eventsCanvas.current, events, duration);\n }, [eventsCanvas, events, duration]);\n useEffect(() => {\n const chart = drawDifficulty(difficultyCanvas.current, difficulties);\n return () => {\n chart.destroy();\n };\n }, [difficultyCanvas, difficulties]);\n\n return (\n \n \n \n \n \n \n \n onChange(x as number)}\n getAriaValueText={valueLabelFormat}\n valueLabelFormat={valueLabelFormat}\n valueLabelDisplay={\"auto\"}\n step={16}\n max={duration}\n />\n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseSettingsModal.stories.tsx", "content": "import { Meta, Story } from \"@storybook/react\";\nimport { BaseSettingsModal, SettingsProps } from \"./BaseSettingsModal\";\nimport { Paper } from \"@mui/material\";\n\nexport default {\n component: BaseSettingsModal,\n title: \"BaseSettingsModal\",\n argTypes: {\n onClose: { action: \"onClick executed!\" },\n },\n} as Meta;\n\nconst Template: Story = (args) => (\n \n \n \n);\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n tabs: [\n { component:
General
, label: \"General\" },\n { component:
Skinning
, label: \"Cool\" },\n ],\n};\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/BaseSettingsModal.tsx", "content": "import { Box, Divider, IconButton, Paper, Slider, Stack, Tab, Tabs, Typography } from \"@mui/material\";\nimport React from \"react\";\nimport { Close, Settings as SettingsIcon, Visibility, VisibilityOff } from \"@mui/icons-material\";\nimport { PromotionFooter } from \"./BaseDialog\";\n\ninterface SettingTab {\n component: React.ReactNode;\n label: string;\n}\n\nexport interface SettingsProps {\n onClose?: () => void;\n tabs: Array;\n\n opacity: number;\n onOpacityChange: (o: number) => unknown;\n\n tabIndex: number;\n onTabIndexChange: (i: number) => unknown;\n}\n\nconst MIN_OPACITY = 25;\nconst MAX_OPACITY = 100;\n\nexport function BaseSettingsModal(props: SettingsProps) {\n const { onClose, tabs, opacity, onOpacityChange, tabIndex, onTabIndexChange } = props;\n\n const handleTabChange = (event: any, newValue: any) => {\n onTabIndexChange(newValue);\n };\n\n const displayedTab = tabs[tabIndex].component;\n\n return (\n \n \n \n Settings\n \n \n \n \n \n \n \n {/*TODO: Holy moly, the CSS here needs to be changed a bit*/}\n \n {tabs.map(({ label }, index) => (\n \n ))}\n \n {/*TODO: For example this should not (?) be hardcoded */}\n {displayedTab}\n \n \n \n \n \n \n onOpacityChange(MIN_OPACITY)}>\n \n \n onOpacityChange(v as number)}\n step={5}\n min={MIN_OPACITY}\n max={MAX_OPACITY}\n valueLabelFormat={(value: number) => `${value}%`}\n sx={{ width: \"12em\" }}\n valueLabelDisplay={\"auto\"}\n />\n onOpacityChange(MAX_OPACITY)}>\n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/GameCanvas.tsx", "content": "import React, { useEffect, useRef } from \"react\";\nimport { useAnalysisApp } from \"../../providers/TheaterProvider\";\nimport { Box, CircularProgress, IconButton, Stack, Tooltip, Typography } from \"@mui/material\";\nimport { useObservable } from \"rxjs-hooks\";\nimport { LightningBoltIcon } from \"@heroicons/react/solid\";\nimport InfoIcon from \"@mui/icons-material/Info\";\nimport { ignoreFocus } from \"../../utils/focus\";\nimport CloseIcon from \"@mui/icons-material/Close\";\n\nfunction EmptyState() {\n return (\n \n \n \n No replay loaded\n \n \n \n \n In osu! press F2 while being at a score/fail screen to load the replay\n \n \n \n \n \n You can also load a replay with the menu action \"File > Open Replay (Ctrl+O)\"\n \n \n \n );\n}\n\nexport const GameCanvas = () => {\n const canvas = useRef(null);\n const containerRef = useRef(null);\n const analysisApp = useAnalysisApp();\n const { status } = useObservable(() => analysisApp.scenarioManager.scenario$, { status: \"DONE\" });\n\n const showOverlay = status !== \"DONE\";\n\n useEffect(() => {\n if (containerRef.current) {\n containerRef.current.append(analysisApp.stats());\n }\n }, [analysisApp]);\n useEffect(() => {\n if (status === \"INIT\") {\n analysisApp.stats().hidden = true;\n } else {\n analysisApp.stats().hidden = false;\n }\n }, [status, analysisApp]);\n\n useEffect(() => {\n if (canvas.current) {\n console.log(\"Initializing renderer to the canvas\");\n analysisApp.onEnter(canvas.current);\n }\n return () => analysisApp.onHide();\n }, [analysisApp]);\n\n return (\n \n {status === \"DONE\" && (\n \n analysisApp.scenarioManager.clearReplay()}\n onFocus={ignoreFocus}\n >\n \n \n \n )}\n \n {/*Overlay*/}\n {showOverlay && (\n \n {status === \"INIT\" && }\n {status === \"LOADING\" && }\n {status === \"ERROR\" && Something wrong happened...}\n \n )}\n \n );\n};\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/HelpModal.stories.tsx", "content": "import { Meta, Story } from \"@storybook/react\";\nimport { HelpBox } from \"./HelpModal\";\n\nexport default {\n component: HelpBox,\n title: \"HelpModal\",\n argTypes: {\n onClose: { action: \"onClose executed!\" },\n },\n} as Meta;\n\nconst Template: Story = (args) => {}} />;\n\nexport const Primary = Template.bind({});\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/HelpModal.tsx", "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Box, Divider, IconButton, Modal, Paper, Stack, Typography } from \"@mui/material\";\nimport { Close, Help } from \"@mui/icons-material\";\nimport { PromotionFooter } from \"./BaseDialog\";\n\nexport function Key({ text }: { text: string }) {\n return (\n \n {text}\n \n // \n // {text}\n // \n );\n}\n\nconst ShortcutBox = styled.div`\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 1em;\n grid-row-gap: 0.5em;\n align-items: center;\n justify-content: center;\n`;\n\nconst leftArrowKey = \"←\";\nconst rightArrowKey = \"→\";\nconst upArrowKey = \"↑\";\nconst downArrowKey = \"↓\";\n\nconst leftKeys = [leftArrowKey, \"a\"];\nconst rightKeys = [rightArrowKey, \"d\"];\n\nfunction KeyBindings({ separator = \"+\", keys, inline }: { separator?: string; keys: string[]; inline?: boolean }) {\n return (\n
\n {keys.map((k, i) => (\n \n \n {i + 1 < keys.length && ` ${separator} `}\n \n ))}\n
\n );\n}\n\nfunction Title({ children }: any) {\n return {children};\n}\n\n// Which one?\nconst orSeparator = \" or \";\n\n// const orSeparator = \" , \";\n\nfunction PlaybarNavigationShortcuts() {\n return (\n \n Shortcuts\n \n Start / Pause\n Increase speed\n Decrease speed\n Small jump back\n Small jump forward\n {/*
*/}\n {/* + */}\n {/*
*/}\n \n Micro jump back\n {/*
*/}\n {/* + */}\n {/*
*/}\n \n Micro jump forward\n {/*
*/}\n {/* + */}\n {/*
*/}\n \n Large jump back\n {/*
*/}\n {/* + */}\n {/*
*/}\n \n Large jump forward\n Toggle hidden\n \n \n );\n}\n\ninterface HelpModalProps {\n isOpen: boolean;\n onClose: () => void;\n}\n\nexport function HelpBox(props: Pick) {\n const { onClose } = props;\n return (\n \n {/*MenuBar could be reused*/}\n \n \n Help\n \n \n \n \n \n \n\n \n {/**/}\n {/*Footer*/}\n \n \n \n \n \n );\n}\n\nexport function HelpModalDialog(props: HelpModalProps) {\n const { isOpen, onClose } = props;\n\n return (\n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/PlayBar.tsx", "content": "import {\n Box,\n Button,\n Divider,\n IconButton,\n ListItemIcon,\n ListItemText,\n Menu,\n MenuItem,\n MenuList,\n Popover,\n Stack,\n Tooltip,\n Typography,\n} from \"@mui/material\";\nimport {\n Help,\n MoreVert,\n PauseCircle,\n PhotoCamera,\n PlayCircle,\n Settings,\n VolumeOff,\n VolumeUp,\n} from \"@mui/icons-material\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { BaseAudioSettingsPanel } from \"./BaseAudioSettingsPanel\";\nimport { BaseGameTimeSlider } from \"./BaseGameTimeSlider\";\nimport { useGameClockControls, useGameClockTime } from \"../../hooks/game-clock\";\nimport { formatGameTime } from \"@osujs/math\";\nimport { useAudioSettings, useAudioSettingsService } from \"../../hooks/audio\";\nimport { useModControls } from \"../../hooks/mods\";\nimport modHiddenImg from \"../../../assets/mod_hidden.png\";\nimport { ALLOWED_SPEEDS, PlaybarColors } from \"../../utils/constants\";\n\nimport { useSettingsModalContext } from \"../../providers/SettingsProvider\";\nimport { ReplayAnalysisEvent } from \"@osujs/core\";\nimport { useObservable } from \"rxjs-hooks\";\nimport FiberManualRecordIcon from \"@mui/icons-material/FiberManualRecord\";\nimport { HelpModalDialog } from \"./HelpModal\";\nimport { BaseCurrentTime, GameCurrentTimeHandle } from \"./BaseCurrentTime\";\nimport { ignoreFocus } from \"../../utils/focus\";\nimport { useAnalysisApp, useCommonManagers } from \"../../providers/TheaterProvider\";\nimport { DEFAULT_PLAY_BAR_SETTINGS } from \"../../services/common/playbar\";\n\nconst centerUp = {\n anchorOrigin: {\n vertical: \"top\",\n horizontal: \"center\",\n },\n transformOrigin: {\n vertical: \"bottom\",\n horizontal: \"center\",\n },\n};\n\nfunction MoreMenu() {\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n const handleClick = (event: any) => {\n setAnchorEl(event.currentTarget);\n };\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const analyzer = useAnalysisApp();\n const handleTakeScreenshot = () => {\n analyzer.screenshotTaker.takeScreenshot();\n handleClose();\n };\n\n const [helpOpen, setHelpOpen] = useState(false);\n\n const handleOpenHelp = () => {\n setHelpOpen(true);\n handleClose();\n };\n\n return (\n <>\n setHelpOpen(false)} />\n \n \n \n \n \n \n \n \n Take Screenshot\n \n \n \n \n \n Help\n \n \n \n );\n}\n\nfunction AudioButton() {\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n const handlePopOverOpen = (event: any) => {\n setAnchorEl(event.currentTarget);\n };\n const handleClose = () => {\n setAnchorEl(null);\n };\n const { volume, muted } = useAudioSettings();\n const service = useAudioSettingsService();\n\n const handleClick = () => {\n service.toggleMuted();\n };\n return (\n <>\n {muted ? : }\n \n \n service.setMuted(x)}\n onMasterChange={(x) => service.setMasterVolume(x)}\n onMusicChange={(x) => service.setMusicVolume(x)}\n onEffectsChange={(x) => service.setEffectsVolume(x)}\n />\n \n \n \n );\n}\n\n// Connected\nfunction PlayButton() {\n const { isPlaying, toggleClock } = useGameClockControls();\n const Icon = !isPlaying ? PlayCircle : PauseCircle;\n\n return (\n \n \n \n );\n}\n\n// https://css-tricks.com/using-requestanimationframe-with-react-hooks/\nconst timeAnimateFPS = 30;\n\nfunction CurrentTime() {\n const analyzer = useAnalysisApp();\n const requestRef = useRef(0);\n const timeRef = useRef(null);\n\n // const animate = () => {};\n\n useEffect(() => {\n // requestRef.current = requestAnimationFrame(animate);\n let last = -1;\n const requiredElapsed = 1000 / timeAnimateFPS;\n\n function animate(currentTimestamp: number) {\n const elapsed = currentTimestamp - last;\n if (elapsed > requiredElapsed) {\n if (timeRef.current) timeRef.current.updateTime(analyzer.gameClock.timeElapsedInMs);\n last = currentTimestamp;\n }\n requestRef.current = requestAnimationFrame(animate);\n }\n\n requestRef.current = requestAnimationFrame(animate);\n return () => {\n if (requestRef.current) cancelAnimationFrame(requestRef.current);\n };\n }, [analyzer]);\n return (\n // We MUST fix the width because the font is not monospace e.g. \"111\" is thinner than \"000\"\n // Also if the duration is more than an hour there will also be a slight shift\n \n \n \n );\n}\n\nfunction groupTimings(events: ReplayAnalysisEvent[]) {\n const missTimings: number[] = [];\n const mehTimings: number[] = [];\n const okTimings: number[] = [];\n const sliderBreakTimings: number[] = [];\n\n events.forEach((e) => {\n switch (e.type) {\n case \"HitObjectJudgement\":\n // TODO: for lazer style, this needs some rework\n if (e.isSliderHead) {\n if (e.verdict === \"MISS\") sliderBreakTimings.push(e.time);\n return;\n } else {\n if (e.verdict === \"MISS\") missTimings.push(e.time);\n if (e.verdict === \"MEH\") mehTimings.push(e.time);\n if (e.verdict === \"OK\") okTimings.push(e.time);\n }\n // if(e.verdict === \"GREAT\" && show300s) events.push(); // Not sure if this will ever be implemented\n break;\n case \"CheckpointJudgement\":\n if (!e.hit && !e.isLastTick) sliderBreakTimings.push(e.time);\n break;\n case \"UnnecessaryClick\":\n // TODO\n break;\n }\n });\n return { missTimings, mehTimings, okTimings, sliderBreakTimings };\n}\n\nfunction GameTimeSlider() {\n // TODO: Depending on if replay is loaded and settings\n const backgroundEnable = true;\n const currentTime = useGameClockTime(15);\n const { seekTo, duration } = useGameClockControls();\n const { gameSimulator } = useAnalysisApp();\n const { playbarSettingsStore } = useCommonManagers();\n const replayEvents = useObservable(() => gameSimulator.replayEvents$, []);\n const difficulties = useObservable(() => gameSimulator.difficulties$, []);\n const playbarSettings = useObservable(() => playbarSettingsStore.settings$, DEFAULT_PLAY_BAR_SETTINGS);\n\n const events = useMemo(() => {\n const { sliderBreakTimings, missTimings, mehTimings, okTimings } = groupTimings(replayEvents);\n return [\n { color: PlaybarColors.MISS, timings: missTimings, tooltip: \"Misses\" },\n { color: PlaybarColors.SLIDER_BREAK, timings: sliderBreakTimings, tooltip: \"Sliderbreaks\" },\n { color: PlaybarColors.MEH, timings: mehTimings, tooltip: \"50s\" },\n { color: PlaybarColors.OK, timings: okTimings, tooltip: \"100s\" },\n ];\n }, [replayEvents]);\n\n return (\n \n );\n}\n\nfunction Duration() {\n const { duration } = useGameClockControls();\n const f = formatGameTime(duration);\n\n return {f};\n}\n\nfunction HiddenButton() {\n const { setHidden, hidden: hiddenEnabled } = useModControls();\n const handleClick = useCallback(() => setHidden(!hiddenEnabled), [hiddenEnabled, setHidden]);\n\n return (\n \n );\n}\n\nfunction SettingsButton() {\n const { onSettingsModalOpenChange } = useSettingsModalContext();\n return (\n onSettingsModalOpenChange(true)} onFocus={ignoreFocus}>\n \n \n );\n}\n\ninterface BaseSpeedButtonProps {\n value: number;\n onChange: (value: number) => any;\n}\n\nconst speedLabels: Record = { 0.75: \"HT\", 1.5: \"DT\" } as const;\n\nfunction BaseSpeedButton(props: BaseSpeedButtonProps) {\n const { value, onChange } = props;\n\n const [anchorEl, setAnchorEl] = useState(null);\n const open = Boolean(anchorEl);\n const handleClick = (event: any) => {\n setAnchorEl(event.currentTarget);\n };\n const handleClose = () => {\n setAnchorEl(null);\n };\n const formatSpeed = (s: number) => `${s}x`;\n\n // Floating point issues?\n\n return (\n <>\n \n {formatSpeed(value)}\n {/*{formatSpeed(value)}*/}\n \n \n \n {ALLOWED_SPEEDS.map((s) => (\n {\n onChange(s);\n handleClose();\n }}\n sx={{ width: \"120px\", maxWidth: \"100%\" }}\n >\n {formatSpeed(s)}\n \n {speedLabels[s] ?? \"\"}\n \n \n ))}\n \n \n \n );\n}\n\nfunction SpeedButton() {\n const { speed, setSpeed } = useGameClockControls();\n return (\n // \n \n // \n );\n}\n\nfunction RecordButton() {\n // TODO: Probably stop at a certain time otherwise the program might crash due to memory issue\n const { clipRecorder } = useAnalysisApp();\n const recordingSince = useObservable(() => clipRecorder.recordingSince$, 0);\n\n const isRecording = recordingSince > 0;\n\n const recordingTime = \"3:00\";\n\n const handleClick = useCallback(() => {\n if (isRecording) {\n clipRecorder.stopRecording();\n } else {\n clipRecorder.startRecording();\n }\n }, [isRecording, clipRecorder]);\n\n return (\n \n \n \n \n \n );\n}\n\nconst VerticalDivider = () => ;\n\nexport function PlayBar() {\n return (\n \n \n \n \n \n \n \n \n \n \n {/**/}\n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/analyzer/SettingsModal.tsx", "content": "import { useSettingsModalContext } from \"../../providers/SettingsProvider\";\nimport {\n Autocomplete,\n Box,\n Button,\n FormControlLabel,\n FormGroup,\n Modal,\n Paper,\n Slider,\n Stack,\n Switch,\n TextField,\n Typography,\n} from \"@mui/material\";\nimport { BaseSettingsModal } from \"./BaseSettingsModal\";\nimport { useCommonManagers } from \"../../providers/TheaterProvider\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport { useObservable } from \"rxjs-hooks\";\nimport { DEFAULT_HIT_ERROR_BAR_SETTINGS } from \"../../services/common/hit-error-bar\";\nimport { DEFAULT_PLAY_BAR_SETTINGS } from \"../../services/common/playbar\";\nimport { DEFAULT_OSU_SKIN_ID, DEFAULT_REWIND_SKIN_ID, SkinId, SkinSource, stringToSkinId } from \"../../model/SkinId\";\nimport { DEFAULT_BEATMAP_RENDER_SETTINGS } from \"../../services/common/beatmap-render\";\nimport { DEFAULT_SKIN_SETTINGS } from \"../../services/common/skin\";\nimport { DEFAULT_REPLAY_CURSOR_SETTINGS } from \"../../services/common/replay-cursor\";\nimport { DEFAULT_ANALYSIS_CURSOR_SETTINGS } from \"../../services/analysis/analysis-cursor\";\nimport { frontendAPI } from \"../../api\";\n\nconst sourceName: Record = {\n osu: \"osu!/Skins Folder\",\n rewind: \"Rewind\",\n};\n\nconst formatToPercent = (value: number) => `${value}%`;\n\nfunction BeatmapBackgroundSettings() {\n const theater = useCommonManagers();\n const { beatmapBackgroundSettingsStore } = theater;\n const settings = useObservable(() => beatmapBackgroundSettingsStore.settings$, { blur: 0, enabled: false, dim: 0 });\n return (\n \n \n Beatmap Background\n \n Blur\n beatmapBackgroundSettingsStore.setBlur((v as number) / 100)}\n valueLabelDisplay={\"auto\"}\n valueLabelFormat={formatToPercent}\n />\n Dim\n beatmapBackgroundSettingsStore.setDim((v as number) / 100)}\n valueLabelDisplay={\"auto\"}\n valueLabelFormat={formatToPercent}\n />\n \n \n \n );\n}\n\nfunction BeatmapRenderSettings() {\n const { beatmapRenderSettingsStore } = useCommonManagers();\n const settings = useObservable(() => beatmapRenderSettingsStore.settings$, DEFAULT_BEATMAP_RENDER_SETTINGS);\n\n return (\n \n \n beatmapRenderSettingsStore.setSliderDevMode(event.target.checked)}\n />\n }\n label={\"Slider Dev Mode\"}\n />\n \n {/* draw slider ends*/}\n \n );\n}\n\nfunction AnalysisCursorSettingsSection() {\n const { analysisCursorSettingsStore } = useCommonManagers();\n const settings = useObservable(() => analysisCursorSettingsStore.settings$, DEFAULT_ANALYSIS_CURSOR_SETTINGS);\n\n return (\n \n \n Analysis Cursor\n \n analysisCursorSettingsStore.setEnabled(event.target.checked)}\n />\n }\n label={\"Enabled\"}\n />\n \n \n \n );\n}\n\nfunction ReplayCursorSettingsSection() {\n const { replayCursorSettingsStore } = useCommonManagers();\n const settings = useObservable(() => replayCursorSettingsStore.settings$, DEFAULT_REPLAY_CURSOR_SETTINGS);\n\n return (\n \n \n Replay Cursor\n \n \n replayCursorSettingsStore.changeSettings((s) => (s.enabled = event.target.checked))\n }\n />\n }\n label={\"Enabled\"}\n />\n \n \n \n replayCursorSettingsStore.changeSettings((s) => (s.smoothCursorTrail = event.target.checked))\n }\n />\n }\n label={\"Smooth Cursor Trail\"}\n />\n \n Scale\n replayCursorSettingsStore.changeSettings((s) => (s.scale = (v as number) / 100))}\n valueLabelDisplay={\"auto\"}\n />\n \n \n );\n}\n\nfunction HitErrorBarSettingsSection() {\n const { hitErrorBarSettingsStore } = useCommonManagers();\n const settings = useObservable(() => hitErrorBarSettingsStore.settings$, DEFAULT_HIT_ERROR_BAR_SETTINGS);\n return (\n \n \n {/*TODO: Enabled*/}\n Hit Error Bar Scaling\n hitErrorBarSettingsStore.changeSettings((s) => (s.scale = (v as number) / 100))}\n valueLabelDisplay={\"auto\"}\n />\n \n \n );\n}\n\nfunction PlaybarSettingsSection() {\n const { playbarSettingsStore } = useCommonManagers();\n const settings = useObservable(() => playbarSettingsStore.settings$, DEFAULT_PLAY_BAR_SETTINGS);\n\n return (\n \n \n Playbar\n \n \n playbarSettingsStore.changeSettings((s) => (s.difficultyGraphEnabled = event.target.checked))\n }\n />\n }\n label={\"Show difficulty graph\"}\n />\n \n \n \n );\n}\n\nfunction ResetAllSettingsSection() {\n const resetSettings = useCallback(() => {\n localStorage.clear();\n frontendAPI.reboot();\n }, []);\n return (\n \n );\n}\n\nfunction OtherSettings() {\n return (\n \n \n \n );\n}\n\nfunction GameplaySettings() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction SkinsSettings() {\n // TODO: Button for synchronizing skin list again\n\n const theater = useCommonManagers();\n\n const { preferredSkinId } = useObservable(() => theater.skinSettingsStore.settings$, DEFAULT_SKIN_SETTINGS);\n const chosenSkinId = stringToSkinId(preferredSkinId);\n const skins = useObservable(() => theater.skinManager.skinList$, []);\n\n const skinOptions: SkinId[] = useMemo(\n () => [DEFAULT_OSU_SKIN_ID, DEFAULT_REWIND_SKIN_ID].concat(skins.map((name) => ({ source: \"osu\", name }))),\n [skins],\n );\n\n useEffect(() => {\n theater.skinManager.loadSkinList();\n }, [theater]);\n\n // TODO:\n\n const handleSkinChange = useCallback(\n (skinId: SkinId) => {\n (async function () {\n try {\n await theater.skinManager.loadSkin(skinId);\n } catch (e) {\n // Show some error dialog\n console.error(`Could not load skin ${skinId}`);\n }\n })();\n // TODO: Error handling\n },\n [theater],\n );\n\n return (\n \n sourceName[option.source]}\n value={chosenSkinId}\n onChange={(event, newValue) => {\n if (newValue) {\n handleSkinChange(newValue as SkinId);\n }\n }}\n getOptionLabel={(option: SkinId) => option.name}\n sx={{ width: 300 }}\n renderInput={(params) => }\n isOptionEqualToValue={(option, value) => option.name === value.name && option.source === value.source}\n />\n \n );\n}\n\nexport function SettingsModal() {\n const { onSettingsModalOpenChange, settingsModalOpen, opacity, onTabIndexChange, onOpacityChange, tabIndex } =\n useSettingsModalContext();\n const onClose = () => onSettingsModalOpenChange(false);\n\n return (\n \n \n },\n {\n label: \"Skins\",\n component: ,\n },\n { label: \"Other\", component: },\n ]}\n />\n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/logo/RewindLogo.tsx", "content": "import { Stack, Typography } from \"@mui/material\";\nimport { FastRewind } from \"@mui/icons-material\";\n\nexport const RewindLogo = () => (\n \n \n \n REWIND\n \n \n);\n" }, { "path": "apps/desktop/frontend/src/app/components/sidebar/LeftMenuSidebar.tsx", "content": "import { RewindLogo } from \"../logo/RewindLogo\";\nimport { Badge, Box, Divider, IconButton, Stack, Tooltip } from \"@mui/material\";\nimport { Home } from \"@mui/icons-material\";\nimport { FaMicroscope } from \"react-icons/fa\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks/redux\";\nimport UpdateIcon from \"@mui/icons-material/Update\";\nimport { setUpdateModalOpen } from \"../../store/update/slice\";\nimport { Link, useLocation, useNavigate } from \"react-router-dom\";\nimport { ELECTRON_UPDATE_FLAG } from \"../../utils/constants\";\nimport { useAppInfo } from \"../../hooks/app-info\";\n\nconst tooltipPosition = {\n anchorOrigin: {\n vertical: \"center\",\n horizontal: \"right\",\n },\n transformOrigin: {\n vertical: \"center\",\n horizontal: \"left\",\n },\n};\n\nconst repoOwner = \"abstrakt8\";\nconst repoName = \"rewind\";\n\nconst latestReleaseUrl = `https://github.com/${repoOwner}/${repoName}/releases/latest`;\nconst latestReleaseApi = `https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`;\n\nfunction useCheckForUpdate() {\n const { appVersion } = useAppInfo();\n const { newVersion } = useAppSelector((state) => state.updater);\n const [state, setState] = useState<{ hasNewUpdate: boolean; latestVersion: string }>({\n hasNewUpdate: false,\n latestVersion: \"\",\n });\n useEffect(() => {\n (async function () {\n const response = await fetch(latestReleaseApi);\n const json = await response.json();\n\n // Should be something like \"v0.1.0\"\n const tagName = json[\"tag_name\"] as string;\n if (!tagName) {\n return;\n }\n // Removes the \"v\" prefix\n const latestVersion = tagName.substring(1);\n const hasNewUpdate = appVersion !== latestVersion;\n setState({ hasNewUpdate, latestVersion });\n console.log(\n `Current release: ${appVersion} and latest release: ${latestVersion}, therefore hasNewUpdate=${hasNewUpdate}`,\n );\n })();\n }, [appVersion]);\n\n if (ELECTRON_UPDATE_FLAG) {\n return { hasNewUpdate: newVersion !== appVersion, latestVersion: newVersion };\n } else {\n return state;\n }\n}\n\nexport function LeftMenuSidebar() {\n const dispatch = useAppDispatch();\n const location = useLocation();\n const navigate = useNavigate();\n\n const state = useCheckForUpdate();\n\n const openUpdateModal = () => dispatch(setUpdateModalOpen(true));\n\n const onNewUpdateAvailableButtonClick = useCallback(() => {\n if (ELECTRON_UPDATE_FLAG) {\n openUpdateModal();\n } else {\n window.open(latestReleaseUrl);\n }\n }, []);\n const handleLinkClick = (to: string) => () => navigate(to);\n const buttonColor = (name: string) => (location.pathname.endsWith(name) ? \"primary\" : \"default\");\n\n return (\n theme.spacing(10),\n paddingBottom: 2,\n }}\n gap={1}\n p={1}\n alignItems={\"center\"}\n component={\"nav\"}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/*Nothing*/}\n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/components/update/UpdateModal.tsx", "content": "import { Box, Button, Divider, IconButton, LinearProgress, Link, Modal, Paper, Stack, Typography } from \"@mui/material\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks/redux\";\nimport { setUpdateModalOpen } from \"../../store/update/slice\";\nimport { Close } from \"@mui/icons-material\";\nimport React from \"react\";\nimport { frontendAPI } from \"../../api\";\nimport { useAppInfo } from \"../../hooks/app-info\";\n\nconst units = [\"bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\"];\n\nfunction niceBytes(x: any) {\n let l = 0,\n n = parseInt(x, 10) || 0;\n while (n >= 1024 && ++l) {\n n = n / 1024;\n }\n return n.toFixed(n < 10 && l > 0 ? 1 : 0) + \" \" + units[l];\n}\n\nfunction versionUrl(version: string) {\n const repoOwner = \"abstrakt8\";\n const repoName = \"rewind\";\n // The version does not contain \"v\"\n return `https://github.com/${repoOwner}/${repoName}/releases/v${version}`;\n}\n\nexport function UpdateModal() {\n const { modalOpen, newVersion, isDownloading, downloadedBytes, bytesPerSecond, downloadFinished, error, totalBytes } =\n useAppSelector((state) => state.updater);\n const dispatch = useAppDispatch();\n const handleClose = () => dispatch(setUpdateModalOpen(false));\n const { appVersion } = useAppInfo();\n\n const updateAvailable = newVersion !== null;\n const title = updateAvailable ? `Update available` : `Up to date`;\n\n const downloadProgress = (downloadedBytes / totalBytes) * 100;\n\n return (\n \n \n \n \n {title}\n \n \n \n \n \n \n \n {!updateAvailable && You are on the latest version: {appVersion}}\n {updateAvailable && (\n \n \n New Rewind version available:{\" \"}\n \n {newVersion}\n \n \n {isDownloading && (\n \n {downloadFinished ? \"Finished downloading!\" : \"Downloading...\"}{\" \"}\n \n {`${niceBytes(downloadedBytes)} / ${niceBytes(totalBytes)} (${downloadProgress.toFixed(2)} %)`}\n \n \n )}\n {isDownloading && }\n {downloadFinished && (\n Installation will happen when you close the application.\n )}\n \n {!downloadFinished && (\n frontendAPI.startDownloadingUpdate()}\n disabled={isDownloading}\n >\n Download update\n \n )}\n {downloadFinished && (\n \n )}\n \n \n )}\n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/hooks/app-info.ts", "content": "import { useCommonManagers } from \"../providers/TheaterProvider\";\n\n\nexport function useAppInfo() {\n const { appInfoService } = useCommonManagers();\n\n return {\n appVersion: appInfoService.version,\n platform: appInfoService.platform,\n };\n}\n" }, { "path": "apps/desktop/frontend/src/app/hooks/audio.ts", "content": "import { useCommonManagers } from \"../providers/TheaterProvider\";\nimport { useObservable } from \"rxjs-hooks\";\nimport { AudioSettings } from \"../services/common/audio/settings\";\n\nexport function useAudioSettingsService() {\n const theater = useCommonManagers();\n return theater.audioSettingsService;\n}\n\nconst defaultSettings: AudioSettings = { volume: { effects: 0, master: 0, music: 0 }, muted: true };\n\nexport function useAudioSettings() {\n const audioSettingsService = useAudioSettingsService();\n return useObservable(() => audioSettingsService.settings$, defaultSettings);\n}\n" }, { "path": "apps/desktop/frontend/src/app/hooks/energy-saver.ts", "content": "// import { useStageContext } from \"../components/StageProvider/StageProvider\";\n\n// export function useEnergySaver(enabled = true) {\n// const isVisible = usePageVisibility();\n// // const { stage } = useStageContext();\n// const { pauseClock } = useGameClockContext();\n//\n// useEffect(() => {\n// if (!enabled) {\n// return;\n// }\n// if (!isVisible) {\n// pauseClock();\n// stage.stopTicker();\n// } else {\n// stage.startTicker();\n// }\n// }, [isVisible, stage, pauseClock, enabled]);\n// }\n" }, { "path": "apps/desktop/frontend/src/app/hooks/game-clock.ts", "content": "import { useCallback, useState } from \"react\";\nimport { useObservable } from \"rxjs-hooks\";\nimport { useAnalysisApp } from \"../providers/TheaterProvider\";\nimport { ALLOWED_SPEEDS } from \"../utils/constants\";\nimport { useInterval } from \"./interval\";\n\nexport function useGameClock() {\n const analyzer = useAnalysisApp();\n return analyzer.gameClock;\n}\n\n// TODO: FLOATING POINT EQUALITY ALERT\nconst speedIndex = (speed: number) => ALLOWED_SPEEDS.indexOf(speed);\nconst nextSpeed = (speed: number) => ALLOWED_SPEEDS[Math.min(ALLOWED_SPEEDS.length - 1, speedIndex(speed) + 1)];\nconst prevSpeed = (speed: number) => ALLOWED_SPEEDS[Math.max(0, speedIndex(speed) - 1)];\n\nexport function useGameClockControls() {\n const clock = useGameClock();\n\n const isPlaying = useObservable(() => clock.isPlaying$, false);\n const duration = useObservable(() => clock.durationInMs$, 0);\n const speed = useObservable(() => clock.speed$, 1.0);\n\n const toggleClock = useCallback(() => clock.toggle(), [clock]);\n const seekTo = useCallback((timeInMs: number) => clock.seekTo(timeInMs), [clock]);\n\n const setSpeed = useCallback((x: number) => clock.setSpeed(x), [clock]);\n const increaseSpeed = useCallback(() => clock.setSpeed(nextSpeed(clock.speed)), [clock]);\n const decreaseSpeed = useCallback(() => clock.setSpeed(prevSpeed(clock.speed)), [clock]);\n\n const seekForward = useCallback((timeInMs: number) => clock.seekTo(clock.timeElapsedInMs + timeInMs), [clock]);\n const seekBackward = useCallback((timeInMs: number) => clock.seekTo(clock.timeElapsedInMs - timeInMs), [clock]);\n\n return {\n isPlaying,\n duration,\n speed,\n // Actions\n setSpeed,\n increaseSpeed,\n decreaseSpeed,\n toggleClock,\n seekTo,\n seekForward,\n seekBackward,\n };\n}\n\n// 60FPS by default\nexport function useGameClockTime(fps = 60) {\n const gameClock = useGameClock();\n const [time, setTime] = useState(0);\n useInterval(() => {\n setTime(gameClock.timeElapsedInMs);\n }, 1000 / fps);\n return time;\n}\n" }, { "path": "apps/desktop/frontend/src/app/hooks/interval.ts", "content": "import { useEffect, useRef } from \"react\";\n\nexport function useInterval(callback: () => void, delay: number | null) {\n const savedCallback = useRef(callback);\n\n // Remember the latest callback if it changes.\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n // Set up the interval.\n useEffect(() => {\n // Don't schedule if no delay is specified.\n if (delay === null) {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }\n\n const id = setInterval(() => savedCallback.current(), delay);\n\n return () => clearInterval(id);\n }, [delay]);\n}\n" }, { "path": "apps/desktop/frontend/src/app/hooks/mods.ts", "content": "import { useAnalysisApp } from \"../providers/TheaterProvider\";\nimport { useObservable } from \"rxjs-hooks\";\nimport { useCallback } from \"react\";\n\nexport function useModControls() {\n const { modSettingsService } = useAnalysisApp();\n\n const modSettings = useObservable(() => modSettingsService.modSettings$, { flashlight: false, hidden: false });\n const setHidden = useCallback((value: boolean) => modSettingsService.setHidden(value), [modSettingsService]);\n\n return { ...modSettings, setHidden };\n}\n" }, { "path": "apps/desktop/frontend/src/app/hooks/redux.ts", "content": "import { TypedUseSelectorHook, useDispatch, useSelector } from \"react-redux\";\nimport { AppDispatch, RootState } from \"../store\";\n\nexport const useAppDispatch = () => useDispatch(); // Export a hook that can be reused to resolve types\nexport const useAppSelector: TypedUseSelectorHook = useSelector;\n" }, { "path": "apps/desktop/frontend/src/app/hooks/shortcuts.ts", "content": "import { useHotkeys } from \"react-hotkeys-hook\";\nimport { useGameClockControls } from \"./game-clock\";\nimport { useModControls } from \"./mods\";\n\n// TODO: Configurable\n\n// These should stay constant or make them dynamic depending on gameClock speed\nconst microscopeJump = 1;\nconst frameJump = 16; // Assuming 16fps\nconst mediumJump = 1 * 1000;\nconst largeJump = 15 * 1000;\n\nconst leftKeys = [\"a\", \"left\"];\nconst rightKeys = [\"d\", \"right\"];\n\nconst upKeys = [\"w\", \"up\"];\nconst downKeys = [\"s\", \"down\"];\n\nconst generateKeyComboSimple = (keys: string[]) => keys.join(\", \");\nconst generateKeyCombo = (modifier = \"\", keys: string[]) => keys.map((k) => `${modifier}+${k}`).join(\", \");\n\n// TODO: Get platform from AppInfo, so that we can also support MacOS (currently they are hardcoded for Windows/Linux)\nexport function useShortcuts() {\n const { toggleClock, seekBackward, seekForward, increaseSpeed, decreaseSpeed } = useGameClockControls();\n const { setHidden, hidden } = useModControls();\n\n useHotkeys(generateKeyComboSimple(upKeys), () => increaseSpeed(), [increaseSpeed]);\n useHotkeys(generateKeyComboSimple(downKeys), () => decreaseSpeed(), [decreaseSpeed]);\n useHotkeys(\"space\", () => toggleClock(), [toggleClock]);\n\n useHotkeys(generateKeyCombo(\"shift\", leftKeys), () => seekBackward(mediumJump), [seekBackward]);\n useHotkeys(generateKeyCombo(\"shift\", rightKeys), () => seekForward(mediumJump), [seekForward]);\n useHotkeys(generateKeyCombo(\"ctrl\", leftKeys), () => seekBackward(microscopeJump), [seekBackward]);\n useHotkeys(generateKeyCombo(\"ctrl\", rightKeys), () => seekForward(microscopeJump), [seekForward]);\n useHotkeys(generateKeyComboSimple(leftKeys), () => seekBackward(frameJump), [seekBackward]);\n useHotkeys(generateKeyComboSimple(rightKeys), () => seekForward(frameJump), [seekForward]);\n\n // These have really bad collisions\n // useHotkeys(`alt+${leftKey}`, () => seekBackward(frameJump), [seekBackward]);\n // useHotkeys(`alt+${rightKey}`, () => seekForward(frameJump), [seekForward]);\n // useHotkeys(`ctrl+${leftKey}`, () => seekBackward(largeJump), [seekBackward]);\n // useHotkeys(`ctrl+${rightKey}`, () => seekForward(largeJump), [seekForward]);\n\n useHotkeys(\"f\", () => setHidden(!hidden), [hidden, setHidden]);\n}\n" }, { "path": "apps/desktop/frontend/src/app/model/BlueprintInfo.ts", "content": "export interface BlueprintInfo {\n md5Hash: string;\n lastPlayed: Date;\n title: string;\n artist: string;\n creator: string;\n // This is assuming that they are in the folderName\n folderName: string;\n audioFileName: string;\n osuFileName: string;\n\n // [Events]\n bgFileName?: string; // Usually unknown unless .osu file is parsed\n}\n" }, { "path": "apps/desktop/frontend/src/app/model/OsuReplay.ts", "content": "// TODO: Rename this to replay or something\nimport { OsuClassicMod, ReplayFrame } from \"@osujs/core\";\n\nexport type OsuReplay = {\n md5hash: string;\n beatmapMd5: string;\n gameVersion: number;\n mods: OsuClassicMod[];\n player: string; // Could be useful to draw\n frames: ReplayFrame[];\n};\n" }, { "path": "apps/desktop/frontend/src/app/model/Skin.ts", "content": "import { rgbToInt } from \"@osujs/math\";\nimport { Texture } from \"@pixi/core\";\nimport {\n comboDigitFonts,\n defaultDigitFonts,\n generateDefaultSkinConfig,\n hitCircleDigitFonts,\n OsuSkinTextures,\n SkinConfig,\n} from \"@rewind/osu/skin\";\n\nexport type SkinTexturesByKey = Partial>;\n\n// Read\n// https://github.com/pixijs/pixi.js/blob/dev/packages/loaders/src/TextureLoader.ts\nexport interface ISkin {\n config: SkinConfig;\n\n getComboColorForIndex(i: number): number;\n\n getTexture(key: OsuSkinTextures): Texture;\n\n getTextures(key: OsuSkinTextures): Texture[];\n\n getHitCircleNumberTextures(): Texture[];\n\n getComboNumberTextures(): Texture[];\n}\n\nexport class EmptySkin implements ISkin {\n config = generateDefaultSkinConfig(false);\n\n getComboColorForIndex(): number {\n return 0;\n }\n\n getComboNumberTextures(): [] {\n return [];\n }\n\n getHitCircleNumberTextures(): Texture[] {\n return [];\n }\n\n getTexture() {\n return Texture.EMPTY;\n }\n\n getTextures(): Texture[] {\n return [Texture.EMPTY];\n }\n}\n\n/**\n * A simple skin that can provide the basic information a beatmap needs.\n */\nexport class Skin implements ISkin {\n static EMPTY = new Skin(generateDefaultSkinConfig(false), {});\n\n constructor(public readonly config: SkinConfig, public readonly textures: SkinTexturesByKey) {}\n\n getComboColorForIndex(i: number): number {\n const comboColors = this.config.colors.comboColors;\n return rgbToInt(comboColors[i % comboColors.length]);\n }\n\n getTexture(key: OsuSkinTextures): Texture {\n return this.getTextures(key)[0];\n }\n\n getTextures(key: OsuSkinTextures): Texture[] {\n if (!(key in this.textures)) {\n return [Texture.EMPTY];\n // throw new Error(\"Texture key not found\");\n }\n const list = this.textures[key] as Texture[];\n if (list.length === 0) {\n return [Texture.EMPTY];\n } else {\n return list;\n }\n }\n\n getHitCircleNumberTextures(): Texture[] {\n return hitCircleDigitFonts.map((h) => this.getTexture(h));\n }\n\n getComboNumberTextures(): Texture[] {\n return comboDigitFonts.map((h) => this.getTexture(h));\n }\n\n // The textures that are used for every other numbers on the interface (except combo)\n getScoreTextures(): Texture[] {\n return defaultDigitFonts.map((h) => this.getTexture(h));\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/model/SkinId.ts", "content": "export type SkinSource = \"rewind\" | \"osu\";\n\nexport interface SkinId {\n source: SkinSource;\n name: string;\n}\n\nexport function skinIdToString({ source, name }: SkinId) {\n return `${source}:${name}`;\n}\n\nconst isSkinSource = (s: string): s is SkinSource => s === \"rewind\" || s === \"osu\";\n\nexport function stringToSkinId(str: string): SkinId {\n const [source, name] = str.split(\":\");\n if (isSkinSource(source)) {\n return { source, name };\n } else {\n throw Error(\"Skin source wrong\");\n }\n}\n\nexport const DEFAULT_OSU_SKIN_ID: SkinId = { source: \"rewind\", name: \"OsuDefaultSkin\" };\nexport const DEFAULT_REWIND_SKIN_ID: SkinId = { source: \"rewind\", name: \"RewindDefaultSkin\" };\n" }, { "path": "apps/desktop/frontend/src/app/providers/SettingsProvider.tsx", "content": "import React, { createContext, useContext, useState } from \"react\";\n\ntype ISettingsContext = {\n settingsModalOpen: boolean;\n onSettingsModalOpenChange: (open: boolean) => unknown;\n\n opacity: number;\n onOpacityChange: (opacity: number) => unknown;\n\n tabIndex: number;\n onTabIndexChange: (index: number) => unknown;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\nexport const SettingsContext = createContext(null!);\n\ninterface SettingsModalProps {\n children: React.ReactNode;\n defaultOpen?: boolean;\n}\n\nconst DEFAULT_OPACITY = 100; // maxOpacity = 100%\n\nexport function SettingsModalProvider({ children, defaultOpen = false }: SettingsModalProps) {\n const [settingsModalOpen, setSettingsModalOpen] = useState(defaultOpen);\n const [opacity, onOpacityChange] = useState(DEFAULT_OPACITY);\n const [tabIndex, onTabIndexChange] = useState(0);\n\n return (\n setSettingsModalOpen(b),\n opacity,\n onOpacityChange,\n tabIndex,\n onTabIndexChange,\n }}\n >\n {children}\n \n );\n}\n\nexport function useSettingsModalContext() {\n const context = useContext(SettingsContext);\n if (!context) {\n throw Error(\"useSettingsModalContext can only be used within a SettingsModalProvider\");\n }\n return context;\n}\n" }, { "path": "apps/desktop/frontend/src/app/providers/TheaterProvider.tsx", "content": "import React, { createContext, useContext } from \"react\";\nimport { RewindTheater } from \"../services/common/CommonManagers\";\n\n// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\nexport const TheaterContext = createContext(null!);\n\ninterface TheaterProviderProps {\n theater: RewindTheater;\n children: React.ReactNode;\n}\n\nexport function TheaterProvider({ theater, children }: TheaterProviderProps) {\n return {children};\n}\n\nexport function useTheaterContext() {\n const context = useContext(TheaterContext);\n if (!context) {\n throw Error(\"useTheaterContext can only be used within a TheaterProvider\");\n }\n return context;\n}\n\nexport function useCommonManagers() {\n const theater = useTheaterContext();\n return theater.common;\n}\n\nexport function useAnalysisApp() {\n const theater = useTheaterContext();\n return theater.analyzer;\n}\n" }, { "path": "apps/desktop/frontend/src/app/screens/analyzer/Analyzer.tsx", "content": "import { Paper, Stack } from \"@mui/material\";\nimport { PlayBar } from \"../../components/analyzer/PlayBar\";\nimport { useShortcuts } from \"../../hooks/shortcuts\";\nimport { GameCanvas } from \"../../components/analyzer/GameCanvas\";\nimport { SettingsModal } from \"../../components/analyzer/SettingsModal\";\nimport { SettingsModalProvider } from \"../../providers/SettingsProvider\";\nimport { useEffect } from \"react\";\nimport { environment } from \"../../../environments/environment\";\nimport { useAnalysisApp } from \"../../providers/TheaterProvider\";\n\nexport function Analyzer() {\n const analyzer = useAnalysisApp();\n // Shortcuts will then only be available when this page is is open\n useShortcuts();\n\n useEffect(() => {\n void analyzer.initialize();\n if (environment.debugAnalyzer) {\n void analyzer.loadReplay(environment.debugAnalyzer.replayPath);\n }\n }, [analyzer]);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/screens/home/HomeScreen.tsx", "content": "import React from \"react\";\nimport { FaDiscord, FaTwitter, FaYoutube } from \"react-icons/fa\";\nimport { IconButton, Link, Stack, Typography } from \"@mui/material\";\nimport { FastRewind } from \"@mui/icons-material\";\nimport { useAppInfo } from \"../../hooks/app-info\";\nimport { discordUrl, RewindLinks, twitterUrl, youtubeUrl } from \"../../utils/constants\";\n\n// This page is actually just a placeholder for an overview page that can show things such as \"Recently Played\", etc.\n\nexport function HomeScreen() {\n const { appVersion } = useAppInfo();\n return (\n \n \n \n \n REWIND\n \n \n Rewind {appVersion} by{\" \"}\n \n abstrakt\n \n \n \n osu! University\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/screens/setup/SetupScreen.tsx", "content": "import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { Alert, Badge, Box, Button, IconButton, InputBase, Paper, Stack } from \"@mui/material\";\nimport { RewindLogo } from \"../../components/logo/RewindLogo\";\nimport { Help, RocketLaunch } from \"@mui/icons-material\";\nimport FolderIcon from \"@mui/icons-material/Folder\";\nimport { frontendAPI } from \"../../api\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAnalysisApp } from \"../../providers/TheaterProvider\";\n\ninterface DirectorySelectionProps {\n value: string | null;\n onChange: (value: string | null) => void;\n placeHolder: string;\n badgeOnEmpty?: boolean;\n}\n\nfunction DirectorySelection({ value, onChange, placeHolder, badgeOnEmpty }: DirectorySelectionProps) {\n const handleSelectFolderClick = useCallback(() => {\n frontendAPI.selectDirectory(value ?? \"\").then((path) => {\n if (path !== null) {\n onChange(path);\n }\n });\n }, [onChange, value]);\n\n const onInputChange = useCallback(\n (event: any) => {\n onChange(event.target.value);\n },\n [onChange],\n );\n\n const invisibleBadge = !badgeOnEmpty || !!value;\n return (\n \n {/*{value ?? placeHolder}*/}\n \n \n \n \n \n \n \n );\n}\n\nconst setupWikiUrl = \"https://github.com/abstrakt8/rewind/wiki/Setup\";\n\n// TODO: Maybe tell which file is actually missing\nexport function SetupScreen() {\n // TODO: Add a guess for directory path\n const [directoryPath, setDirectoryPath] = useState(null);\n const [saveEnabled, setSaveEnabled] = useState(false);\n const navigate = useNavigate();\n const analyzer = useAnalysisApp();\n // const [updateOsuDirectory, updateState] = useUpdateOsuDirectoryMutation();\n const [showErrorMessage, setShowErrorMessage] = useState(false);\n\n const handleConfirmClick = useCallback(async () => {\n if (!directoryPath) {\n return;\n }\n const isValid = await analyzer.osuFolderService.isValidOsuFolder(directoryPath);\n if (isValid) {\n analyzer.osuFolderService.setOsuFolder(directoryPath);\n navigate(\"/app/analyzer\");\n } else {\n setShowErrorMessage(true);\n }\n }, [navigate, analyzer.osuFolderService, directoryPath]);\n\n const handleOnDirectoryChange = useCallback(\n (path: string | null) => {\n setDirectoryPath(path);\n // TODO: Just directly validate since it's so fast\n setShowErrorMessage(false);\n },\n [setShowErrorMessage],\n );\n\n // Makes sure that the button is only clickable when it's allowed.\n useEffect(() => {\n setSaveEnabled(directoryPath !== null);\n }, [directoryPath]);\n\n return (\n \n \n \n \n {showErrorMessage && (\n <>\n \n
Does not look a valid osu! directory!
\n \n \n )}\n \n \n }\n disabled={!saveEnabled}\n onClick={handleConfirmClick}\n >\n Save & Continue\n \n \n \n \n \n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/screens/splash/SplashScreen.tsx", "content": "import { HashLoader } from \"react-spinners\";\nimport { Stack } from \"@mui/material\";\n\nexport function SplashScreen() {\n return (\n \n \n
Services are getting ready ...
\n \n );\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/AnalysisApp.ts", "content": "import { ReplayService } from \"../common/local/ReplayService\";\nimport { GameplayClock } from \"../common/game/GameplayClock\";\nimport { BeatmapManager } from \"../manager/BeatmapManager\";\nimport { GameSimulator } from \"../common/game/GameSimulator\";\nimport { injectable } from \"inversify\";\nimport { PixiRendererManager } from \"../renderers/PixiRendererManager\";\nimport { AnalysisSceneManager } from \"../manager/AnalysisSceneManager\";\nimport { GameLoop } from \"../common/game/GameLoop\";\nimport { ScenarioManager } from \"../manager/ScenarioManager\";\nimport { ReplayFileWatcher } from \"../common/local/ReplayFileWatcher\";\nimport { OsuFolderService } from \"../common/local/OsuFolderService\";\nimport { ClipRecorder } from \"../manager/ClipRecorder\";\nimport { ModSettingsService } from \"./mod-settings\";\nimport { ScreenshotTaker } from \"./screenshot\";\n\n@injectable()\nexport class AnalysisApp {\n constructor(\n public readonly gameClock: GameplayClock,\n public readonly gameSimulator: GameSimulator,\n public readonly scenarioManager: ScenarioManager,\n public readonly modSettingsService: ModSettingsService,\n public readonly replayWatcher: ReplayFileWatcher,\n public readonly screenshotTaker: ScreenshotTaker,\n public readonly clipRecorder: ClipRecorder,\n public readonly osuFolderService: OsuFolderService,\n private readonly replayService: ReplayService,\n private readonly gameLoop: GameLoop,\n private readonly beatmapManager: BeatmapManager,\n private readonly sceneManager: AnalysisSceneManager,\n private readonly pixiRenderer: PixiRendererManager,\n ) {}\n\n stats() {\n return this.gameLoop.stats();\n }\n\n initialize() {\n console.log(\"AnalysisApp: Initialize\");\n this.replayWatcher.startWatching();\n this.scenarioManager.initialize();\n }\n\n close() {}\n\n onEnter(canvas: HTMLCanvasElement) {\n this.pixiRenderer.initializeRenderer(canvas);\n // this.gameLoop.startTicker();\n }\n\n onHide() {\n this.gameClock.pause();\n this.pixiRenderer.destroy();\n // this.gameLoop.stopTicker();\n }\n\n /**\n * Loads the replay and the corresponding beatmap and makes the application ready to visualize the replay.\n *\n * Note: This procedure can be optimized in the future, but for now it's ok.\n *\n * @param replayId the id of the replay to load\n */\n async loadReplay(replayId: string) {\n return this.scenarioManager.loadReplay(replayId);\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/analysis-cursor.ts", "content": "import { PersistentService } from \"../core/service\";\nimport { injectable } from \"inversify\";\nimport { JSONSchemaType } from \"ajv\";\nimport { CursorSettings } from \"../common/cursor\";\n\nexport interface AnalysisCursorSettings extends CursorSettings {\n colorKey1: number;\n colorKey2: number;\n colorNoKeys: number;\n colorBothKeys: number;\n}\n\nexport const DEFAULT_ANALYSIS_CURSOR_SETTINGS: AnalysisCursorSettings = Object.freeze({\n scale: 0.8,\n enabled: true,\n scaleWithCS: true,\n colorNoKeys: 0x5d6463, // gray\n colorKey1: 0xffa500, // orange)\n colorKey2: 0x00ff00, // green)\n colorBothKeys: 0x3cbdc1, // cyan)\n});\n\nexport const AnalysisCursorSettingsSchema: JSONSchemaType = {\n type: \"object\",\n properties: {\n scale: { type: \"number\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.scale },\n enabled: { type: \"boolean\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.enabled },\n scaleWithCS: { type: \"boolean\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.scaleWithCS },\n colorNoKeys: { type: \"number\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.colorNoKeys },\n colorKey1: { type: \"number\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.colorKey1 },\n colorKey2: { type: \"number\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.colorKey2 },\n colorBothKeys: { type: \"number\", default: DEFAULT_ANALYSIS_CURSOR_SETTINGS.colorBothKeys },\n },\n required: [],\n};\n\n@injectable()\nexport class AnalysisCursorSettingsStore extends PersistentService {\n key = \"analysis-cursor\";\n schema: JSONSchemaType = AnalysisCursorSettingsSchema;\n getDefaultValue(): AnalysisCursorSettings {\n return DEFAULT_ANALYSIS_CURSOR_SETTINGS;\n }\n\n setEnabled(enabled: boolean) {\n this.changeSettings((s) => (s.enabled = enabled));\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/createRewindAnalysisApp.ts", "content": "import { Container } from \"inversify\";\nimport { AnalysisApp } from \"./AnalysisApp\";\nimport { PixiRendererManager } from \"../renderers/PixiRendererManager\";\nimport { GameplayClock } from \"../common/game/GameplayClock\";\nimport { EventEmitter2 } from \"eventemitter2\";\nimport { BeatmapManager } from \"../manager/BeatmapManager\";\nimport { ReplayManager } from \"../manager/ReplayManager\";\nimport { GameSimulator } from \"../common/game/GameSimulator\";\nimport { AnalysisSceneManager } from \"../manager/AnalysisSceneManager\";\nimport { SceneManager } from \"../common/scenes/SceneManager\";\nimport { GameLoop } from \"../common/game/GameLoop\";\nimport { AnalysisScene } from \"./scenes/AnalysisScene\";\nimport { BeatmapBackgroundFactory } from \"../renderers/components/background/BeatmapBackground\";\nimport { TextureManager } from \"../textures/TextureManager\";\nimport { AnalysisStage } from \"../renderers/components/stage/AnalysisStage\";\nimport { ForegroundHUDPreparer } from \"../renderers/components/hud/ForegroundHUDPreparer\";\nimport { PlayfieldFactory } from \"../renderers/components/playfield/PlayfieldFactory\";\nimport { PlayfieldBorderFactory } from \"../renderers/components/playfield/PlayfieldBorderFactory\";\nimport { HitObjectsContainerFactory } from \"../renderers/components/playfield/HitObjectsContainerFactory\";\nimport { HitCircleFactory } from \"../renderers/components/playfield/HitCircleFactory\";\nimport { SliderFactory } from \"../renderers/components/playfield/SliderFactory\";\nimport { SpinnerFactory } from \"../renderers/components/playfield/SpinnerFactory\";\nimport { SliderTextureManager } from \"../renderers/components/sliders/SliderTextureManager\";\nimport { CursorPreparer } from \"../renderers/components/playfield/CursorPreparer\";\nimport { JudgementPreparer } from \"../renderers/components/playfield/JudgementPreparer\";\nimport { AudioEngine } from \"../common/audio/AudioEngine\";\nimport { ScenarioManager } from \"../manager/ScenarioManager\";\nimport { ReplayFileWatcher } from \"../common/local/ReplayFileWatcher\";\nimport { ClipRecorder } from \"../manager/ClipRecorder\";\nimport { IdleScene } from \"./scenes/IdleScene\";\nimport { KeyPressWithNoteSheetPreparer } from \"../renderers/components/keypresses/KeyPressOverlay\";\nimport { ModSettingsService } from \"./mod-settings\";\nimport { ScreenshotTaker } from \"./screenshot\";\nimport { STAGE_TYPES } from \"../types\";\n\n/**\n * This is a Rewind specific constructor of the \"Analysis\" tool (not to be used outside of Rewind).\n *\n * Reason is that many \"Rewind\" tools share the same services in order to provide smoother experiences.\n *\n * Example: If I use the \"Cutter\" tool then I want to use the same preferred skin that is used across Rewind.\n *\n * The analysis tool can be used as a standalone app though.\n */\nexport function createRewindAnalysisApp(commonContainer: Container) {\n const container = new Container({ defaultScope: \"Singleton\" });\n container.parent = commonContainer;\n container.bind(STAGE_TYPES.EVENT_EMITTER).toConstantValue(new EventEmitter2());\n\n container.bind(ReplayManager).toSelf();\n container.bind(BeatmapManager).toSelf();\n container.bind(GameplayClock).toSelf();\n container.bind(ScenarioManager).toSelf();\n container.bind(ModSettingsService).toSelf();\n container.bind(GameSimulator).toSelf();\n container.bind(PixiRendererManager).toSelf();\n\n // Plugins ?\n container.bind(ScreenshotTaker).toSelf();\n container.bind(ClipRecorder).toSelf();\n container.bind(ReplayFileWatcher).toSelf();\n\n // Assets\n container.bind(TextureManager).toSelf();\n container.bind(AudioEngine).toSelf();\n\n // Scenes\n container.bind(AnalysisSceneManager).toSelf();\n container.bind(SceneManager).toSelf();\n\n // Skin is given by above\n // container.bind(SkinManager).toSelf();\n\n // AnalysisScenes\n container.bind(AnalysisScene).toSelf();\n container.bind(IdleScene).toSelf();\n\n // Sliders\n container.bind(SliderTextureManager).toSelf();\n\n container.bind(AnalysisStage).toSelf();\n {\n container.bind(BeatmapBackgroundFactory).toSelf();\n container.bind(ForegroundHUDPreparer).toSelf();\n container.bind(KeyPressWithNoteSheetPreparer).toSelf();\n container.bind(PlayfieldFactory).toSelf();\n {\n container.bind(PlayfieldBorderFactory).toSelf();\n container.bind(HitObjectsContainerFactory).toSelf();\n container.bind(HitCircleFactory).toSelf();\n container.bind(SliderFactory).toSelf();\n container.bind(SpinnerFactory).toSelf();\n\n container.bind(CursorPreparer).toSelf();\n container.bind(JudgementPreparer).toSelf();\n }\n }\n\n container.bind(GameLoop).toSelf();\n\n container.bind(AnalysisApp).toSelf();\n return container.get(AnalysisApp);\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/mod-settings.ts", "content": "import { injectable } from \"inversify\";\nimport { BehaviorSubject } from \"rxjs\";\n\ninterface AnalysisModSettings {\n hidden: boolean;\n flashlight: boolean;\n}\n\n@injectable()\nexport class ModSettingsService {\n modSettings$: BehaviorSubject;\n\n constructor() {\n this.modSettings$ = new BehaviorSubject({\n flashlight: false,\n hidden: false,\n });\n }\n\n get modSettings() {\n return this.modSettings$.getValue();\n }\n\n setHidden(hidden: boolean) {\n this.modSettings$.next({ ...this.modSettings, hidden });\n }\n\n setFlashlight(flashlight: boolean) {\n this.modSettings$.next({ ...this.modSettings, flashlight });\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/scenes/AnalysisScene.ts", "content": "import { UserScene } from \"../../common/scenes/IScene\";\nimport { injectable } from \"inversify\";\nimport { AnalysisStage } from \"../../renderers/components/stage/AnalysisStage\";\nimport { GameplayClock } from \"../../common/game/GameplayClock\";\nimport { GameSimulator } from \"../../common/game/GameSimulator\";\n\n// Just the normal analysis scene that updates according to a virtual game clock.\n@injectable()\nexport class AnalysisScene implements UserScene {\n constructor(\n private readonly gameClock: GameplayClock,\n private readonly gameSimulator: GameSimulator,\n private readonly analysisStage: AnalysisStage,\n ) {}\n\n update() {\n this.gameClock.tick();\n this.gameSimulator.simulate(this.gameClock.timeElapsedInMs);\n this.analysisStage.updateAnalysisStage();\n }\n\n get stage() {\n return this.analysisStage.stage;\n }\n\n destroy(): void {\n this.analysisStage.destroy();\n }\n\n init(data: unknown): void {\n // Do nothing\n }\n\n preload(): Promise {\n return Promise.resolve(undefined);\n }\n\n create(): void {\n // Do nothing\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/scenes/IdleScene.ts", "content": "// Usually if there is no replay loaded\n// Just show a text\n// In the future -> show a cool looking logo\n\nimport { UserScene } from \"../../common/scenes/IScene\";\nimport { Container } from \"pixi.js\";\nimport { injectable } from \"inversify\";\n\n@injectable()\nexport class IdleScene implements UserScene {\n stage = new Container();\n\n destroy(): void {\n this.stage.destroy();\n }\n\n init(data: string): void {}\n\n async preload(): Promise {\n // Do nothing\n }\n\n update(): void {\n // Do nothing\n }\n\n create(): void {\n this.stage = new Container();\n // const text = new Text(\"Load a beatmap/replay to get started!\", {\n // fontSize: 16,\n // fill: 0xeeeeee,\n // fontFamily: \"Arial\",\n // align: \"left\",\n // });\n // // Maybe center it somewhere\n // this.stage.addChild(text);\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/scenes/LoadingScene.ts", "content": "// Very simple loading scene that shows the progress of the loading\nimport { UserScene } from \"../../common/scenes/IScene\";\nimport { Container, Text } from \"pixi.js\";\n\nexport class LoadingScene implements UserScene {\n stage: Container = new Container();\n\n destroy(): void {}\n\n init(): void {\n //\n }\n\n async preload(): Promise {\n //\n }\n\n update(): void {\n //\n }\n\n create(): void {\n this.stage = new Container();\n\n const text = new Text(\"LoadingScene...\", {\n fontSize: 16,\n fill: 0xeeeeee,\n fontFamily: \"Arial\",\n align: \"left\",\n });\n // Maybe center it somewhere\n this.stage.addChild(text);\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/scenes/ResultsScreenScene.ts", "content": "// Should be shown after the replay or can be manually triggered\n" }, { "path": "apps/desktop/frontend/src/app/services/analysis/screenshot.ts", "content": "import { injectable } from \"inversify\";\nimport { AnalysisScene } from \"./scenes/AnalysisScene\";\nimport { PixiRendererManager } from \"../renderers/PixiRendererManager\";\n\n@injectable()\nexport class ScreenshotTaker {\n constructor(private readonly analysisScene: AnalysisScene, private readonly pixiRenderer: PixiRendererManager) {\n }\n\n takeScreenshot() {\n const renderer = this.pixiRenderer.getRenderer();\n if (!renderer) return;\n\n const canvas: HTMLCanvasElement = renderer.plugins.extract.canvas(this.analysisScene.stage);\n canvas.toBlob(\n (blob) => {\n const a = document.createElement(\"a\");\n a.download = `Rewind Screenshot ${new Date().toISOString()}.jpg`;\n a.href = URL.createObjectURL(blob!);\n a.click();\n a.remove();\n },\n \"image/jpeg\",\n 0.9,\n );\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/common/CommonManagers.ts", "content": "import { Container, injectable } from \"inversify\";\nimport { ReplayService } from \"./local/ReplayService\";\nimport { SkinLoader } from \"./local/SkinLoader\";\nimport { AudioService } from \"./audio/AudioService\";\nimport { createRewindAnalysisApp } from \"../analysis/createRewindAnalysisApp\";\nimport { AudioSettingsStore } from \"./audio/settings\";\nimport { BeatmapBackgroundSettingsStore } from \"./beatmap-background\";\nimport { PlayfieldBorderSettingsStore } from \"./playfield-border\";\nimport { AnalysisCursorSettingsStore } from \"../analysis/analysis-cursor\";\nimport { ReplayCursorSettingsStore } from \"./replay-cursor\";\nimport { SkinHolder, SkinManager, SkinSettingsStore } from \"./skin\";\nimport { HitErrorBarSettingsStore } from \"./hit-error-bar\";\nimport { PlaybarSettingsStore } from \"./playbar\";\nimport { OsuFolderService } from \"./local/OsuFolderService\";\nimport { OsuDBDao } from \"./local/OsuDBDao\";\nimport { BlueprintLocatorService } from \"./local/BlueprintLocatorService\";\nimport { BeatmapRenderService } from \"./beatmap-render\";\nimport { STAGE_TYPES } from \"../types\";\nimport { AppInfoService } from \"./app-info\";\n\n/**\n * Creates the services that support all the osu! tools such as the Analyzer.\n * Common settings are set here so that they can be shared with other tools.\n * Example: Preferred skin can be set at only one place and is shared among all tools.\n */\n@injectable()\nexport class CommonManagers {\n constructor(\n public readonly skinManager: SkinManager,\n public readonly skinSettingsStore: SkinSettingsStore,\n public readonly audioSettingsService: AudioSettingsStore,\n public readonly beatmapBackgroundSettingsStore: BeatmapBackgroundSettingsStore,\n public readonly beatmapRenderSettingsStore: BeatmapRenderService,\n public readonly hitErrorBarSettingsStore: HitErrorBarSettingsStore,\n public readonly analysisCursorSettingsStore: AnalysisCursorSettingsStore,\n public readonly replayCursorSettingsStore: ReplayCursorSettingsStore,\n public readonly playbarSettingsStore: PlaybarSettingsStore,\n public readonly appInfoService: AppInfoService,\n ) {}\n\n async initialize() {\n await this.skinManager.loadPreferredSkin();\n }\n}\n\ninterface Settings {\n rewindSkinsFolder: string;\n appVersion: string;\n appPlatform: string;\n}\n\nexport function createRewindTheater({ rewindSkinsFolder, appPlatform, appVersion }: Settings) {\n // Regarding `skipBaseClassChecks`: https://github.com/inversify/InversifyJS/issues/522#issuecomment-682246076\n const container = new Container({ defaultScope: \"Singleton\" });\n container.bind(STAGE_TYPES.AUDIO_CONTEXT).toConstantValue(new AudioContext());\n container.bind(STAGE_TYPES.REWIND_SKINS_FOLDER).toConstantValue(rewindSkinsFolder);\n container.bind(STAGE_TYPES.APP_PLATFORM).toConstantValue(appPlatform);\n container.bind(STAGE_TYPES.APP_VERSION).toConstantValue(appVersion);\n container.bind(OsuFolderService).toSelf();\n container.bind(OsuDBDao).toSelf();\n container.bind(BlueprintLocatorService).toSelf();\n container.bind(ReplayService).toSelf();\n container.bind(SkinLoader).toSelf();\n container.bind(SkinHolder).toSelf();\n container.bind(AudioService).toSelf();\n container.bind(SkinManager).toSelf();\n container.bind(AppInfoService).toSelf();\n\n // General settings stores\n container.bind(AudioSettingsStore).toSelf();\n container.bind(AnalysisCursorSettingsStore).toSelf();\n container.bind(BeatmapBackgroundSettingsStore).toSelf();\n container.bind(BeatmapRenderService).toSelf();\n container.bind(HitErrorBarSettingsStore).toSelf();\n container.bind(PlayfieldBorderSettingsStore).toSelf();\n container.bind(ReplayCursorSettingsStore).toSelf();\n container.bind(SkinSettingsStore).toSelf();\n container.bind(PlaybarSettingsStore).toSelf();\n\n // Theater facade\n container.bind(CommonManagers).toSelf();\n\n return {\n common: container.get(CommonManagers),\n analyzer: createRewindAnalysisApp(container),\n };\n}\n\nexport type RewindTheater = ReturnType;\n" }, { "path": "apps/desktop/frontend/src/app/services/common/app-info.ts", "content": "import { inject, injectable } from \"inversify\";\nimport { STAGE_TYPES } from \"../types\";\n\n@injectable()\nexport class AppInfoService {\n constructor(\n @inject(STAGE_TYPES.APP_PLATFORM) public readonly platform: string,\n @inject(STAGE_TYPES.APP_VERSION) public readonly version: string,\n ) {\n }\n}\n" }, { "path": "apps/desktop/frontend/src/app/services/common/audio/AudioEngine.ts", "content": "import { inject, injectable, postConstruct } from \"inversify\";\nimport { AudioSettings, AudioSettingsStore } from \"./settings\";\nimport { STAGE_TYPES } from \"../../types\";\nimport { GameplayClock } from \"../game/GameplayClock\";\n\n// HTML5 Audio supports time stretching without pitch changing (otherwise sounds like night core)\n// Chromium's implementation of