{"id":18525181,"url":"https://github.com/leifgehrmann/setzen","last_synced_at":"2025-04-09T12:31:05.373Z","repository":{"id":92189000,"uuid":"480550186","full_name":"leifgehrmann/setzen","owner":"leifgehrmann","description":"A multiplayer collaborative canvas – Projected on a globe! 🌐","archived":false,"fork":false,"pushed_at":"2025-02-27T17:29:08.000Z","size":2123,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T05:34:50.412Z","etag":null,"topics":["aws","collaborative-editing","games","serverless","web-app"],"latest_commit_sha":null,"homepage":"https://setzen.leifgehrmann.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leifgehrmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-11T21:00:36.000Z","updated_at":"2025-02-27T17:29:12.000Z","dependencies_parsed_at":"2023-06-07T22:00:42.983Z","dependency_job_id":"825b6b0f-4d91-4e44-a350-af5f92c25bcc","html_url":"https://github.com/leifgehrmann/setzen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifgehrmann%2Fsetzen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifgehrmann%2Fsetzen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifgehrmann%2Fsetzen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifgehrmann%2Fsetzen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leifgehrmann","download_url":"https://codeload.github.com/leifgehrmann/setzen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248040144,"owners_count":21037822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","collaborative-editing","games","serverless","web-app"],"created_at":"2024-11-06T17:44:40.101Z","updated_at":"2025-04-09T12:31:05.365Z","avatar_url":"https://github.com/leifgehrmann.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"![SETZEN](setzen.png)\n\n𝐒𝐄𝐓𝐙𝐄𝐍 is a multiplayer collaborative canvas where you place tiles on a globe\nconsisting of a million 'trixels'. It is a remix of Reddit’s [April Fools experiment r/place](https://en.wikipedia.org/wiki/R/place).\n\nYou can find an archived demo at [setzen.leifgehrmann.com](https://setzen.leifgehrmann.com/), which no longer is multiplayer, but the interactivity still works.\n\n# Server\n\nSETZEN exclusively uses the AWS Serverless Application Model.\n\n## Deployment\n\nIn this guide we use [AWS SAM CLI] to deploy the application.\n\n### Installing the CLI\n\nAmazon has their own guide for [installing the AWS SAM CLI].\n\nBut if you have Docker installed, you can use the `Dockerfile` without\ninstalling AWS SAM CLI on your host machine.\n\n```\n$ cd server\n$ make build\n```\n\nOnce the image has built, you will be able to start a shell using the following commands.\n\n```\n$ make aws-shell\n```\n\n### Credentials\n\nOnce you are in the interactive shell, you will need to configure aws-cli so\nthat it has the correct credentials. These instructions will guide you on how\nto create a user with programmatic access. **Once the application is deployed,\nit's recommend to revoke the credentials.** Basically, anyone with these\ncredentials could nuke your account, so be very careful. (I don't know really\nif this is how you are _supposed_ to use CloudFormation, but it really does\nnot feel safe. 😅)\n\n1. In the AWS Console, navigate to IAM and create a new user:\n   https://us-east-1.console.aws.amazon.com/iam/home#/users$new?step=details\n2. For the \"Details\" step:\n    * Enter a user name. (Example: `setzen`)\n    * Select \"Access key - Programmatic access\" as the AWS access type.\n    * Proceed to \"Permissions\" step.\n3. For the Permissions step:\n    * Click \"Create group\":\n        * Enter a group name. (Example: `Setzen`)\n        * Under policies, check the following permission policies:\n           * \"IAMFullAccess\"\n           * \"AmazonS3FullAccess\"\n           * \"AmazonDynamoDBFullAccess\"\n           * \"AmazonAPIGatewayAdministrator\"\n           * \"AWSCloudFormationFullAccess\"\n           * \"AWSLambda_FullAccess\"\n        * Click \"Create group\".\n    * Proceed to the \"Tags\" step.\n4. Optionally add tags to help with remembering details about this IAM user.\n   Proceed to the \"Review\" step.\n5. Confirm the details and proceed to the next step.\n6. Make sure to copy the \"Access key ID\" and the \"Secret access key\" and\n   store it in a secure location. After this step, if you have forgotten\n   to copy the credentials you will need to delete and recreate the user.\n\nWith the credentials, you can now configure by running `aws configure`\nand supplying the credentials in the prompts.\n\n```\n$ aws configure\nAWS Access Key ID [None]: your_access_key_id\nAWS Secret Access Key [None]: your_secret_access_key\nDefault region name [None]: \nDefault output format [None]: \n```\n\n### Guided deploy\n\nFinally, you can deploy the application using `sam deploy`.\n\n```\n$ sam deploy --guided\n```\n\nThe first time you deploy, you will be prompted for some deployment\nconfigurations.\n\n* Stack Name (Example: `setzen-websockets-app`)\n* AWS Region\n* Parameters (The name of the dynamoDB tables)\n* Confirm changes before deploy (Y is recommended)\n* Allow SAM CLI IAM role creation (Y is recommended)\n* Disable rollback (N is recommended)\n* Save arguments to configuration file (Y is recommended)\n* SAM configuration file\n* SAM configuration environment\n\nOnce complete, you should see in the output the deployed WebSocketURI.\nKeep a note of this for later when setting up the client.\n\n### Testing the websocket\n\n```\n$ cd test-wscast\n$ npm install\n$ npx wscat -c wss://{YOUR-API-ID}.execute-api.{YOUR-REGION}.amazonaws.com/Prod\n\u003e { \"action\": \"sendmessage\", \"data\": {\"type\": \"readChunkInfo\" } }\n\u003c {\"type\":\"queue\",\"data\":{\"positions\":[],\"colorIds\":[],\"times\":[]}}\n```\n\n# Client\n\nIn a console, change to the `client` directory.\n\nWith NPM installed, run the following commands:\n\n**Install dependencies**\n\n```\n$ npm install\n```\n\n**To configure**\n\n`SETZEN_WEBSOCKET_URL` is the only variable that must be defined for the\napplication to function. The rest of the details are merely presentational,\nbut useful if you want to customise the info page.\n\n```\n$ export SETZEN_WEBSOCKET_URL='wss://xxxxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/Prod'\n$ export SETZEN_WEBAPP_HOST='example.com'\n$ export SETZEN_CONTACT_EMAIL='admin@example.com'\n$ export SETZEN_CONTACT_URL='https://example.com/admin'\n$ export SETZEN_CONTACT_ISSUES_URL='https://example.com/setzen/issues'\n$ export SETZEN_CONTACT_PROJECT_URL='https://example.com/setzen'\n```\n\nTo use the app in an archived mode, set the variables as:\n\n```\n$ export SETZEN_ARCHIVE_URL='https://example.com/archive/'\n```\n\n**To view**\n\n```\n$ npm run build\n$ npm run preview\n```\n\n**To develop**\n\n```\n$ npm run dev\n```\n\n**To develop with archived mode**\n\n```\n$ export SETZEN_ARCHIVE_URL='http://localhost:5173/archive-2025-02-02/'\n$ npm run dev\n```\n\n# Attribution\n\nWebsocket code originally based on [simple-websockets-chat-app].\n\n[simple-websockets-chat-app]: https://github.com/aws-samples/simple-websockets-chat-app\n[AWS SAM CLI]: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-reference.html\n[installing the AWS SAM CLI]: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install.html\n[correct credentials]: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-getting-started-set-up-credentials.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleifgehrmann%2Fsetzen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleifgehrmann%2Fsetzen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleifgehrmann%2Fsetzen/lists"}