Any HTTP server (Apache, http-server)
Start the server, so that you can access files from public
For http-server from npm:
npx http-server public
App should be served under http://127.0.0.1:8080/.
You can also user built in server. To do so, you need Node.js and npm installed and run
npm run start
App will be available under http://127.0.0.1:8080/
To build from source you will need Node.js and npm
Build commands:
npm install
npm run build
To run in developer mode:
npm run dev
To serve built application:
npm run start
App will be available under http://127.0.0.1:8080/
By default the game launches in Only X mode, meaning that both players place X signs, the one who creates three in line loses.
It also has one human player and one AI (MinMax) set by default.
Those settings can be changed in the settings panel.
the board allows you to see game state and make moves. To make a move, just click any available (empty) spot.
If you want AI to make a move instead of you or you just selected an AI for the player (then the player will not make the move immediately in case of a mouse slip) then you can press the button Move using this AI
and current player's assigned AI will be used to make a move.
Note: If no AI is assigned to the player you can use the dropdown menu right next to the button to choose which AI to use.
This field shows whose turn it is. It also displays info about game result.
This button resets the board and starts a new game.
Settings panel allows you to change some game options:
To show/hide settings panel use the gray button with cogwheel icon.
Use this field to choose which game variant you want to play.
Note! After changing the variant, the board is reset and new game is started. You may need to change or reset some settings for game to start.
A button with ↺ icon located next to game variant field can be used to reset settings to default values set for given game variant. It also restarts the game.
Each player can be assigned any of the available AIs. If current player has an AI assigned, during their move it will be used to determine which move to make. If player has no AI set (None
) then move can be made by human or using the AI Move button
You can also change symbols assigned to each player here, but game variant may not allow for some configurations.
If this field is checked, the game will restart automatically after it finishes.
When checked, a field appers beneath where you can adjust the wait duration from game finish to reset.
Sets the minimal time delay (in milliseconds) after which AI will make a move. Useful for tracking games of AIs that move too fast to see what is happening. If set to 0, the move will be executed as soon as it is available.
Shows or hides bot head when playing Human vs CPU.
This table registers all games and their results. The last row sums up all the data.
This button shows and hides results table.
This button clears saved records.
Install the dependencies...
cd svelte-app
npm install
...then start Rollup:
npm run dev
Navigate to localhost:8080. You should see your app running. Edit a component file in src
, save it, and reload the page to see your changes.
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv
commands in package.json to include the option --host 0.0.0.0
.
If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
To create an optimised version of the app:
npm run build
You can run the newly built app with npm run start
. This uses sirv, which is included in your package.json's dependencies
so that the app will work when you deploy to platforms like Heroku.
© 2022, ADIOP55550