diff --git a/Dockerfile b/Dockerfile index 2c45fc6..db3df47 100644 --- a/Dockerfile +++ b/Dockerfile @@ -45,11 +45,7 @@ cp ./target/release/$APP_NAME /bin/server # runtime dependencies for the application. This often uses a different base # image from the build stage where the necessary files are copied from the build # stage. -# -# The example below uses the alpine image as the foundation for running the app. -# By specifying the "3.18" tag, it will use version 3.18 of alpine. If -# reproducability is important, consider using a digest -# (e.g., alpine@sha256:664888ac9cfd28068e062c991ebcff4b4c7307dc8dd4df9e728bedde5c449d91). + FROM alpine AS final # Create a non-privileged user that the app will run under. diff --git a/README.Docker.md b/README.Docker.md deleted file mode 100644 index 74a174f..0000000 --- a/README.Docker.md +++ /dev/null @@ -1,22 +0,0 @@ -### Building and running your application - -When you're ready, start your application by running: -`docker compose up --build`. - -Your application will be available at http://localhost:3000. - -### Deploying your application to the cloud - -First, build your image, e.g.: `docker build -t myapp .`. -If your cloud uses a different CPU architecture than your development -machine (e.g., you are on a Mac M1 and your cloud provider is amd64), -you'll want to build the image for that platform, e.g.: -`docker build --platform=linux/amd64 -t myapp .`. - -Then, push it to your registry, e.g. `docker push myregistry.com/myapp`. - -Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/) -docs for more detail on building and pushing. - -### References -* [Docker's Rust guide](https://docs.docker.com/language/rust/) \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..cf64161 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# Battleship Online + +Play the classic game of Battleship against your friends online! Each player will take turns guessing the location of the other player's ships. The first player to sink all of the other player's ships wins! + +![Screenshot](demo/1.png) +![Screenshot](demo/2.png) + +## Development Guide + +The client is built using SvelteKit (static site) and the server uses Axum framework (Rust). The client and server communicate using Socket.io (WebSockets). PostgreSQL is used as a database to store the game state. + +The client can be started using `npm run dev` inside `app` directory. + +The server and the database services are containarized. Just run `docker compose up` to start the server and database services if you are working on the frontend. + +If you are working on the server, you can run `cargo watch -i app -x run` to automatically restart the server when the source code changes, and `docker compose up -d db` to start the database service in the background. + +SQLx is used as the database driver for Rust. The driver automatically tests the SQL query macros at compile time. This can fail the rust-analyzer or `cargo build` if the database isn't setup/running. You can run `docker compose up db` to start the database service. To disable this check altogether, set the `SQLX_OFFLINE` environment variable to `true`. \ No newline at end of file diff --git a/app/src/lib/state.svelte.ts b/app/src/lib/state.svelte.ts index ce74893..4e85bea 100644 --- a/app/src/lib/state.svelte.ts +++ b/app/src/lib/state.svelte.ts @@ -13,7 +13,8 @@ export class State { socket: Socket; constructor() { - this.socket = io(`wss://battleship.icyground-d91964e0.centralindia.azurecontainerapps.io`, { + const url = import.meta.env.DEV ? 'ws://localhost:3000' : 'wss://battleship.icyground-d91964e0.centralindia.azurecontainerapps.io'; + this.socket = io(url, { transports: ['websocket'], auth: { session: sessionStorage.getItem('session') } }); diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 13c482b..6fd09b7 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -1,22 +1,22 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{html,js,svelte,ts}'], - theme: { - extend: {}, - }, - plugins: [ - require('daisyui'), // eslint-disable-line - ], + content: ['./src/**/*.{html,js,svelte,ts}'], + theme: { + extend: {}, + }, + plugins: [ + require('daisyui'), // eslint-disable-line + ], - daisyui: { - themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] - darkTheme: "cupcake", // name of one of the included themes for dark mode - base: true, // applies background color and foreground color for root element by default - styled: true, // include daisyUI colors and design decisions for all components - utils: true, // adds responsive and modifier utility classes - prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) - logs: true, // Shows info about daisyUI version and used config in the console when building your CSS - themeRoot: ":root", // The element that receives theme color CSS variables - }, + daisyui: { + themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] + darkTheme: "night", // name of one of the included themes for dark mode + base: true, // applies background color and foreground color for root element by default + styled: true, // include daisyUI colors and design decisions for all components + utils: true, // adds responsive and modifier utility classes + prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) + logs: true, // Shows info about daisyUI version and used config in the console when building your CSS + themeRoot: ":root", // The element that receives theme color CSS variables + }, } diff --git a/compose.yaml b/compose.yaml index 571e380..ca6038b 100644 --- a/compose.yaml +++ b/compose.yaml @@ -1,15 +1,5 @@ -# Comments are provided throughout this file to help you get started. -# If you need more help, visit the Docker Compose reference guide at -# https://docs.docker.com/go/compose-spec-reference/ - -# Here the instructions define your application as a service called "server". -# This service is built from the Dockerfile in the current directory. -# You can add other services your application may depend on here, such as a -# database or a cache. For examples, see the Awesome Compose repository: -# https://github.com/docker/awesome-compose services: server: - image: ${DOCKER_IMAGE_PATH} build: context: . target: final @@ -21,15 +11,6 @@ services: db: condition: service_healthy -# The commented out section below is an example of how to define a PostgreSQL -# database that your application can use. `depends_on` tells Docker Compose to -# start the database before your application. The `db-data` volume persists the -# database data between container restarts. The `db-password` secret is used -# to set the database password. You must create `db/password.txt` and add -# a password of your choosing to it before running `docker compose up`. -# depends_on: -# db: -# condition: service_healthy db: image: postgres restart: always @@ -39,6 +20,8 @@ services: environment: POSTGRES_DB: ${DATABASE_NAME} POSTGRES_PASSWORD: ${DATABASE_PASSWORD} + ports: + - 5432:5432 expose: - 5432 healthcheck: diff --git a/demo/1.png b/demo/1.png new file mode 100644 index 0000000..3009069 Binary files /dev/null and b/demo/1.png differ diff --git a/demo/2.png b/demo/2.png new file mode 100644 index 0000000..1150853 Binary files /dev/null and b/demo/2.png differ