aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adding xState

Browse source
This commit is contained in:
aronmal 2023-01-16 14:57:58 +01:00
parent 71eb36344c
commit 87be301794
Signed by: aronmal
GPG key ID: 816B7707426FC612
5 changed files with 177 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

27
leaky-ships/components/xstate/example.tsx Normal file
View file

@ -0,0 +1,27 @@
import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';
const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: {
on: { TOGGLE: 'active' }
},
active: {
on: { TOGGLE: 'inactive' }
}
}
});
export const Toggler = () => {
const [state, send] = useMachine(toggleMachine);
return (
<button onClick={() => send('TOGGLE')}>
{state.value === 'inactive'
? 'Click to activate'
: 'Active! Click to deactivate'}
</button>
);
};

64
leaky-ships/components/xstate/test.tsx Normal file
View file

@ -0,0 +1,64 @@
import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';
const toggleMachine =
/** @xstate-layout N4IgpgJg5mDOIC5QBcD2UoBswDoCSAdgJbIDEAtgJ4AqArgE4EDaADALqKgAOqsJRqApxAAPRAFoALADYcATjkB2SQFYVclSwBMW9SoA0ISolWKcKgMzbpARkUtJADkdbpAXzeG0GbPmJkwAjAqOkZWDiQQHj5kASFIsQRxaRYcVUcLORtM6SdJCxtDYwQLRxt5FS1HB0UbFmlpTMkPL3QsXAB3AEMSADFUelCCUjARMABjWmQwIfDhaP5BYUSbOpwtCwLNepZtFjsixAt1ddctbIUHSpsWkG92nG6+gaGRggg5yIXYpYSTFVktWkujkGRYjkkkkOCFM5isrjsDmcrlu918T2Q-XoAFEglQRmNJtNZux5rxFvFQIldJIcAVMpoZHZ8lpFNDjnJTsDGRZFGpVKi2uiepiBrjgpQ3h9SV9yT9KaJ-oCbNzQVYIVCjEdWWljsi5Ls5JI+SoPJ4QARUBA4MI0WAyTE4ssJBtOY4UsdFDobOpJEpoSrHDhpNs5I1dpIbDoLIKfLhCCQHRTnUkbFkcO6WJ7vb7-VqYTZabU+ZsDSwsopYw8MVihkn5SnA8GVBlpHILDJTCHoX7yiwvdyIRlFLyq8Lnji8cVuHKnX8EDZqmkjQV++q+ZrirpZD79vtXWn1GPcLAABaoDq4iAAZXG9DAgXrc6piDUnOkjkUZUUI4Ucl07JLvYrJhg05zKLoZpuEAA */
createMachine({
predictableActionArguments: true,
id: 'toggle',
initial: "Init",
context: {
player: 1
},
states: {
Init: {
on: {
myTurn: "waitForTurn",
enemyTurn: "waitForEnemy",
}
},
waitForTurn: {
entry: ["enableUI"],
exit: ["disableUI"],
on: {
executeTurn: { target: "waitForEnemy", actions: ["switchPlayers"] },
end: "showEndScreen"
}
},
waitForEnemy: {
on: {
executeTurn: { target: "waitForTurn", actions: ["switchPlayers"] },
end: "showEndScreen"
}
},
showEndScreen: {
type: "final"
}
}
},
{
actions: {
switchPlayers: (context, event) => {
return context.player ? 0 : 1
},
enableUI: (context, event) => { },
disableUI: (context, event) => { }
}
}
);
export const XStateTest = () => {
const [state, send] = useMachine(toggleMachine);
return (
<div>
{JSON.stringify({
value: state.value,
context: state.context
}, null, 2)}
{state.nextEvents.map((event, i) => <div key={i}>
<button onClick={() => send(event)}>{event}</button>
</div>)}
</div>
);
};

82
leaky-ships/package-lock.json generated
View file

@ -20,6 +20,7 @@
"@types/node": "18.11.18",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"@xstate/react": "^3.0.2",
"classnames": "^2.3.2",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
@ -27,7 +28,8 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"socket.io-client": "^4.5.4",
"typescript": "4.9.4"
"typescript": "4.9.4",
"xstate": "^4.35.2"
},
"devDependencies": {
"@types/web-bluetooth": "^0.0.16",
@ -628,6 +630,28 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@xstate/react": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@xstate/react/-/react-3.0.2.tgz",
"integrity": "sha512-sFbnMyi+FHF6bXbdvOF6RKVJ9VxrhhUz7KJ/8qKwpqFs0h+EoGOXdfAeuS3aEy29JsFaRclozBxDpsEJd/vlkg==",
"dependencies": {
"use-isomorphic-layout-effect": "^1.0.0",
"use-sync-external-store": "^1.0.0"
},
"peerDependencies": {
"@xstate/fsm": "^2.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"xstate": "^4.35.2"
},
"peerDependenciesMeta": {
"@xstate/fsm": {
"optional": true
},
"xstate": {
"optional": true
}
}
},
"node_modules/acorn": {
"version": "8.8.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@ -3410,6 +3434,27 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-isomorphic-layout-effect": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
"integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -3499,6 +3544,15 @@
"node": ">=0.4.0"
}
},
"node_modules/xstate": {
"version": "4.35.2",
"resolved": "https://registry.npmjs.org/xstate/-/xstate-4.35.2.tgz",
"integrity": "sha512-5X7EyJv5OHHtGQwN7DsmCAbSnDs3Mxl1cXQ4PVaLwi+7p/RRapERnd1dFyHjYin+KQoLLfuXpl1dPBThgyIGNg==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/xstate"
}
},
"node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@ -3881,6 +3935,15 @@
"eslint-visitor-keys": "^3.3.0"
}
},
"@xstate/react": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@xstate/react/-/react-3.0.2.tgz",
"integrity": "sha512-sFbnMyi+FHF6bXbdvOF6RKVJ9VxrhhUz7KJ/8qKwpqFs0h+EoGOXdfAeuS3aEy29JsFaRclozBxDpsEJd/vlkg==",
"requires": {
"use-isomorphic-layout-effect": "^1.0.0",
"use-sync-external-store": "^1.0.0"
}
},
"acorn": {
"version": "8.8.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@ -5821,6 +5884,18 @@
"punycode": "^2.1.0"
}
},
"use-isomorphic-layout-effect": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
"integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
"requires": {}
},
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"requires": {}
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -5875,6 +5950,11 @@
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
"integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
},
"xstate": {
"version": "4.35.2",
"resolved": "https://registry.npmjs.org/xstate/-/xstate-4.35.2.tgz",
"integrity": "sha512-5X7EyJv5OHHtGQwN7DsmCAbSnDs3Mxl1cXQ4PVaLwi+7p/RRapERnd1dFyHjYin+KQoLLfuXpl1dPBThgyIGNg=="
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

4
leaky-ships/package.json
View file

@ -21,6 +21,7 @@
"@types/node": "18.11.18",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
"@xstate/react": "^3.0.2",
"classnames": "^2.3.2",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
@ -28,7 +29,8 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"socket.io-client": "^4.5.4",
"typescript": "4.9.4"
"typescript": "4.9.4",
"xstate": "^4.35.2"
},
"devDependencies": {
"@types/web-bluetooth": "^0.0.16",

2
leaky-ships/pages/index.tsx
View file

@ -1,5 +1,6 @@
import Head from 'next/head'
import Link from 'next/link'
import { XStateTest } from '../components/xstate/test'
export default function Home() {
return (
@ -16,6 +17,7 @@ export default function Home() {
<p><Link href='/grid' target='_blank'>Grid Effect</Link></p>
<p><Link href='/grid2' target='_blank'>Grid Effect with Content</Link></p>
<p><Link href='/socketio' target='_blank'>SocketIO</Link></p>
<XStateTest />
</main>
</>
)