create-cubing-app 0.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/package.json +15 -0
- package/src/index.css +9 -0
- package/src/index.html +17 -0
- package/src/main.ts +22 -0
package/README.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# `cubing-app-template`
|
|
2
|
+
|
|
3
|
+
This is a template project for project using [`cubing.js`](https://github.com/cubing/cubing.js) with `node` and `npm`. In an editor like VSCode, this will give you nice imports, autocompletions, and other TypeScript benefits.
|
|
4
|
+
|
|
5
|
+
See <https://js.cubing.net/cubing/> for (in-progress) documentation on `cubing.js`. If you think you have any issues, don't hesitate to [file an issue here](https://github.com/cubing/cubing.js/issues/new/choose).
|
|
6
|
+
|
|
7
|
+
## Getting started
|
|
8
|
+
|
|
9
|
+
Make sure `node` is installed first (which will also install `npm`): <https://nodejs.org/en/download/>
|
|
10
|
+
|
|
11
|
+
```shell
|
|
12
|
+
# Set up the project for the first time
|
|
13
|
+
git clone https://github.com/cubing/cubing-app-template my-app && cd my-app
|
|
14
|
+
npm install
|
|
15
|
+
|
|
16
|
+
# Start working on the project at http://localhost:1234
|
|
17
|
+
npm run dev
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Building the site for the web
|
|
21
|
+
|
|
22
|
+
```shell
|
|
23
|
+
npm run build
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
The site will be built to the `dist/web` folder, ready to place onto any static web server.
|
|
27
|
+
|
|
28
|
+
(Note: the output uses module scripts, which means you can't just open the output HTML files directly in the browser. You have to use a web server. Something like `python3 -m http.server -d dist/web` might help if you just need to test the output locally.)
|
|
29
|
+
|
|
30
|
+
## Getting the latest version of `cubing.js`
|
|
31
|
+
|
|
32
|
+
See <https://github.com/cubing/cubing.js/releases> for information on the latest releases.
|
|
33
|
+
|
|
34
|
+
```shell
|
|
35
|
+
# Check what version of `cubing.js` you have
|
|
36
|
+
npm list cubing
|
|
37
|
+
|
|
38
|
+
# Update to the latest
|
|
39
|
+
npm install --save cubing@latest
|
|
40
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "create-cubing-app",
|
|
3
|
+
"version": "0.26.1",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"build": "node -e 'import(\"barely-a-dev-server\").then(s => s.barelyServe({entryRoot: \"src\", dev: false, outDir: \"dist/web\"}))'",
|
|
6
|
+
"dev": "node -e 'import(\"barely-a-dev-server\").then(s => s.barelyServe({entryRoot: \"src\"}))'",
|
|
7
|
+
"clean": "rm -rf ./dist"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"cubing": "^0.26.1"
|
|
11
|
+
},
|
|
12
|
+
"devDependencies": {
|
|
13
|
+
"barely-a-dev-server": "^0.2.6"
|
|
14
|
+
}
|
|
15
|
+
}
|
package/src/index.css
ADDED
package/src/index.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf8">
|
|
6
|
+
<title>My Cubing App</title>
|
|
7
|
+
<link rel="stylesheet" href="./index.css">
|
|
8
|
+
<!-- Note: the source file is `main.ts`, but here we use the transpiled file name it will have on the web server. -->
|
|
9
|
+
<script src="./main.js" type="module"></script>
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<h1>My Cubing App</h1>
|
|
14
|
+
<twisty-player id="main-player"></twisty-player>
|
|
15
|
+
</body>
|
|
16
|
+
|
|
17
|
+
</html>
|
package/src/main.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { TwistyAlgViewer, TwistyPlayer } from "cubing/twisty";
|
|
2
|
+
import { randomScrambleForEvent } from "cubing/scramble";
|
|
3
|
+
|
|
4
|
+
class App {
|
|
5
|
+
// Example of getting an element from the page.
|
|
6
|
+
twistyPlayer: TwistyPlayer = document.querySelector("#main-player");
|
|
7
|
+
// Example of creating a new element and adding it to the page.
|
|
8
|
+
twistyAlgViewer = document.body.appendChild(
|
|
9
|
+
new TwistyAlgViewer({ twistyPlayer: this.twistyPlayer })
|
|
10
|
+
);
|
|
11
|
+
constructor() {
|
|
12
|
+
this.updateScramble();
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
async updateScramble() {
|
|
16
|
+
this.twistyPlayer.alg = await randomScrambleForEvent("333");
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Make the app object available in the console for debugging.
|
|
21
|
+
// Try running: app.updateScramble()
|
|
22
|
+
globalThis.app = new App();
|