diff --git a/docs/getting-started/add-to-existing-project.md b/docs/getting-started/add-to-existing-project.md index e9a5aff..cc4793f 100644 --- a/docs/getting-started/add-to-existing-project.md +++ b/docs/getting-started/add-to-existing-project.md @@ -71,12 +71,10 @@ If your application was configured correctly, the URL to your deployed applicati ```shell ❯ npx syncosaurus deploy - 🦖 syncosaurus 0.7.1 +Checking for Syncosaurus installation...... found +Deploying your Syncosaurus worker...... done! -------------------------------------------------- - -Evolving your Syncosaurus server... done! - -✅ Success! Your Syncosaurus server is available at https://dino-arcade.petrie.workers.dev +🦖 Your deployed Syncosaurus worker is ready at https://dino-arcade.petrie.workers.dev ``` To deploy your frontend, simply add the provided Syncosaurus server URL as an environment variable to your frontend deployment. diff --git a/docs/getting-started/requirements.md b/docs/getting-started/requirements.md new file mode 100644 index 0000000..5399d20 --- /dev/null +++ b/docs/getting-started/requirements.md @@ -0,0 +1,19 @@ +--- +sidebar_position: 1 +--- + +# Requirements + +Before using Syncosaurus, ensure the following requirements are met: + +- [Node](https://nodejs.org/en) v18+ +- [npm](https://www.npmjs.com/) +- A frontend that utilizes [React](https://react.dev/) v16.8+ +- Paid Cloudflare account with access to [Durable Objects](https://developers.cloudflare.com/durable-objects/) +- Access to the [Syncosaurus CLI](https://github.com/syncosaurus/syncosaurus-cli) + - This requirement can be fulfilled in two ways: + - *Recommended*: Use the [`npx`](https://www.npmjs.com/package/npx) feature to directly run Syncosaurus CLI commands without installing the Syncosaurus CLI application + - Alternatively, you may also install the Syncosaurus CLI locally: + ```shell + npm install -g syncosaurus-cli + ``` diff --git a/docs/getting-started/start-a-new-project.md b/docs/getting-started/start-a-new-project.md index debc02c..19fef64 100644 --- a/docs/getting-started/start-a-new-project.md +++ b/docs/getting-started/start-a-new-project.md @@ -24,7 +24,7 @@ npx syncosaurus dev If your file structure adheres to Syncosaurus rules, and your configuration settings are correct, two localhost addresses will be displayed in your terminal output: - a localhost address for your local Syncosaurus server - - The port used will be the port you designated in the `syncosaurus.json` file. If one is not specified there, the local Syncosaurus server will default to port 3001. + - The port used will be the port you designated in the `syncosaurus.json` file. If one is not specified there, the local Syncosaurus server will default to port 8787. - a localhost address for your local Vite UI server - The port used will be determined by Vite. Vite's default port is port 5173. If that port is being used, Vite will find and designate the next available port. @@ -81,12 +81,10 @@ If your application was configured correctly, the URL to your deployed applicati ```shell ❯ npx syncosaurus deploy - 🦖 syncosaurus 0.7.1 +Checking for Syncosaurus installation...... found +Deploying your Syncosaurus worker...... done! -------------------------------------------------- - -Evolving your Syncosaurus server... done! - -✅ Success! Your Syncosaurus server is available at https://dino-arcade.ducky.workers.dev +🦖 Your deployed Syncosaurus worker is ready at https://dino-arcade.ducky.workers.dev ``` To deploy your frontend, simply add the provided Syncosaurus server URL as an environment variable to your frontend deployment. diff --git a/docs/getting-started/walkthrough.md b/docs/getting-started/walkthrough.md deleted file mode 100644 index 469a669..0000000 --- a/docs/getting-started/walkthrough.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Walkthrough \ No newline at end of file diff --git a/docs/guides/analytics.md b/docs/guides/analytics.md index 5d4ba54..8a5ca91 100644 --- a/docs/guides/analytics.md +++ b/docs/guides/analytics.md @@ -8,7 +8,7 @@ Syncosaurus includes an application analytics tool to easily view and analyze ag ## Setup -1. Clone the repository to your local environment, and install the required dependencies: +1. Clone the following repository to your local environment: ```shell git clone https://github.com/syncosaurus/syncosaurus-dashboard.git ``` diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index dd8ad76..19a3a94 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -16,7 +16,7 @@ This is the name of your Syncosaurus project. This value will be used when deplo ### `msgFrequency` -This is the amount of time (in milliseconds) that subsequent message broadcast of app updates should be delayed. +This is the amount of time (in milliseconds) that subsequent message broadcasts of app updates should be delayed. The default value of `msgFrequency` is `16` (ms), which equates to approximately 62.5 broadcasted updates per second. ### `useStorage` diff --git a/docs/guides/syncosaurus-cli.md b/docs/guides/syncosaurus-cli.md new file mode 100644 index 0000000..40d37e0 --- /dev/null +++ b/docs/guides/syncosaurus-cli.md @@ -0,0 +1,93 @@ +--- +sidebar_position: 4 +--- + +# Syncosaurus CLI + +The Syncosaurus CLI application is used to conveniently create, configure, manage, and deploy Syncosaurus applications. Built in Typescript with the [oclif](https://oclif.io/) framework. + +## Installation + +- It is recommended to utilize the Syncosaurus CLI with `npx` commands, without having to install the application locally. +- If you still wish to install the Syncosaurus CLI locally, run `npm install -g syncosaurus-cli`. + +## Setup and Development Commands + +If you are electing to run the Syncosaurus CLI locally, simply remove the `npx` at the beginning of the commands below. + +### `syncosaurus init` + +- Create a new React application, pre-configured with a Syncosaurus multiplayer backend. Note that this command will create a `syncosaurus.json` configuration file in your root directory. + + ```bash + npx syncosaurus init + ``` + +### `syncosaurus setup` + +- Add Syncosaurus to an existing React-based application. Note that this command will also create a `syncosaurus.json` configuration file in your root directory. + + ```bash + npx syncosaurus setup + ``` + +### `syncosaurus dev` + +- Start a local Syncosaurus development environment. Run without any flags to start up both a local Syncosaurus server and a local Vite UI server. Run with the `-b`/`-backendOnly` flag to start up only a local Syncosaurus server. + - The local Syncosaurus server will use the designated port, as specified by a `PORT` value in your local `.env` file. If no such value exists, it will default to port 8787. + + ```bash + npx syncosaurus dev [-b] + ``` +

+## Deployment Commands + +### `syncosaurus deploy` + +- Deploy your Syncosaurus application. You must be logged in to use this command. + + ```bash + npx syncosaurus deploy + ``` + +### `syncosaurus destroy` + +- Delete your most recent deployment, only if that deployment matches the current project. You must be logged in to use this command. + + ```bash + npx syncosaurus destroy + ``` + +### `syncosaurus tail` + +- Setup a tail log stream for a deployed Syncosaurus worker. + + ```bash + npx syncosaurus tail + ``` + +## Authentication Commands + +### `syncosaurus login` + +- Login to Synocosaurus through OAuth or API token. + + ```bash + npx syncosaurus login + ``` + +### `syncosaurus logout` + +- Logout of Syncosaurus. + + ```bash + npx syncosaurus logout + ``` + +### `syncosaurus whoami` + +- Check your current Syncosaurus login status. + + ```bash + npx syncosaurus whoami + ``` \ No newline at end of file diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index 4870dc8..819e0b2 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -1,7 +1,3 @@ -import clsx from 'clsx' -import Heading from '@theme/Heading' -import styles from './styles.module.css' - import FadeInSection from './FadeInSection' export default function HomepageFeatures() { @@ -20,7 +16,7 @@ export default function HomepageFeatures() {
@@ -34,11 +30,11 @@ export default function HomepageFeatures() { real-time, collaborative web applications. But what happens when multiple clients make conflicting changes simultaneously?



- Synocusaurus provides the backbone for - both performant state synchronization and flexible - conflict resolution logic using client-side prediction and - server reconcilliation, techniques developed originally - for multi-player video games. + Synocusaurus provides the backbone for both performant + state synchronization and flexible conflict + resolution logic using client-side prediction and server + reconcilliation, techniques developed originally for + multi-player video games.

@@ -56,8 +52,8 @@ export default function HomepageFeatures() { Easy Development and Deployment

- Seamlessly create, iterate, deploy, and manage your Syncosaurus - applications with our convenient CLI tool. + Seamlessly create, iterate, deploy, and manage your + Syncosaurus applications with our convenient CLI tool.

@@ -95,8 +91,9 @@ export default function HomepageFeatures() { Built-in Analytics

- Monitor your collaborative application's usage metrics, in aggregate or on a - per-room basis, with our beautiful dashboard application. + Monitor your collaborative application's usage metrics, in + aggregate or on a per-room basis, with our beautiful + dashboard application.

diff --git a/src/components/LatencySlider/VerticalSlider.js b/src/components/LatencySlider/VerticalSlider.js index fe898e0..1c03268 100644 --- a/src/components/LatencySlider/VerticalSlider.js +++ b/src/components/LatencySlider/VerticalSlider.js @@ -51,6 +51,7 @@ const Slider = styled(BaseSlider)( display: inline-block; position: relative; margin-top: 0.75rem; + margin-right: 3.25rem; cursor: ${delay === 0 ? "pointer" : null}; touch-action: none; -webkit-tap-highlight-color: transparent; diff --git a/src/components/LatencySlider/VerticalSliderContainer.js b/src/components/LatencySlider/VerticalSliderContainer.js index ce8fe0a..25ee39c 100644 --- a/src/components/LatencySlider/VerticalSliderContainer.js +++ b/src/components/LatencySlider/VerticalSliderContainer.js @@ -5,10 +5,9 @@ const VerticalSliderContainer = styled(Box)(({ theme }) => ({ justifyContent: 'center', alignItems: 'center', padding: '3rem', - margin: '5rem', marginBottom: '0.75rem', marginTop: '0.75rem', - gap: theme.spacing(50), // Adjust the gap between sliders + gap: theme.spacing(50, 'auto'), // Adjust the gap between sliders })); export default VerticalSliderContainer; \ No newline at end of file