webxdc · adbenitez · Jul 7, 2023 · Jul 7, 2023 · Jul 7, 2023 · Jul 7, 2023
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,22 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - run: npm install
+      - run: npm run format:check
+      - run: |
+          npm i -g typescript
+          tsc --noEmit --allowJs --lib es2015,dom *.js
+      - run: npm test
diff --git a/.github/workflows/release-webxdc.yml b/.github/workflows/release-webxdc.yml
@@ -0,0 +1,35 @@
+name: Release Webxdc
+
+on:
+  push:
+    tags:
+      - "v*.*.*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - run: npm install
+      - run: npm run format:check
+      - run: |
+          npm i -g typescript
+          tsc --noEmit --allowJs --lib es2015,dom *.js
+      - run: npm test
+      - run: npm run build
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            Auto-generated release
+          prerelease: ${{ contains(github.event.ref, '-beta') }}
+          fail_on_unmatched_files: true
+          files: ./dist-xdc/*.xdc
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,13 @@
-*.xdc
+# Logs
+pnpm-debug.log*
+.pnpm-debug.log
 
+node_modules
+dist
+dist-xdc
+
+# Editor directories and files
+.vscode/*
+.idea
+.DS_Store
+*~
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+dist
+dist-xdc
+webxdc.js
+webxdc.d.ts
+pnpm-lock.yaml
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# tictactoe.webxdc
+# Tic Tac Toe
 
-![icon](./icon.png)
+![icon](./public/icon.png)
 
 a tic tac toe webxdc app.
 
@@ -22,9 +22,60 @@ a tic tac toe webxdc app.
 
 ## Developing
 
+### Installing Dependencies
+
+After cloning this repo for the first time, install dependecies:
+
+```
+npm install
+```
+
+### Running tests
+
+```
+npm run format:check
+npm test
+```
+
 type-check the project
 
 ```
 npm i -g typescript
 tsc --noEmit --allowJs --lib es2015,dom *.js
 ```
+
+### Testing the app in the browser
+
+To test your work in your browser (with hot reloading!) while developing:
+
+```
+npm run dev-mini
+# Alternatively to test in a more advanced WebXDC emulator:
+npm run dev
+```
+
+### Building
+
+To package your WebXDC file:
+
+```
+npm run build
+```
+
+To package your WebXDC with developer tools inside to debug in Delta Chat, set the `NODE_ENV`
+environment variable to "debug":
+
+```
+NODE_ENV=debug npm run build
+```
+
+The resulting optimized `.xdc` file is saved in `dist-xdc/` folder.
+
+### Releasing
+
+To automatically build and create a new GitHub release with your `.xdc` file:
+
+```
+git tag -a v1.0.1
+git push origin v1.0.1
+```
diff --git a/create-xdc.sh b/create-xdc.sh
diff --git a/index.html b/index.html
@@ -4,187 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TicTacToe</title>
     <script src="webxdc.js"></script>
+    <link rel="stylesheet" href="./main.css" />
   </head>
   <body>
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: sans-serif;
-        font-size: 1.1em;
-        background: linear-gradient(#fff 0%, #FFFFED 100%)
-      }
-      #board-screen {
-        width: 100vw;
-        height: 100vh;
-      }
-
-      .screen {
-        display: flex;
-        flex-direction: column;
-        width: 100vw;
-        height: 100vh;
-      }
-
-      .nav-bar {
-        text-align: center;
-        padding-bottom: 1.5em;
-      }
-
-      .nav-bar .switch {
-        background-color: #eee;
-        margin: 1em;
-        padding: 1em 2em;
-        border-radius: 1em;
-        z-index: 1000;
-      }
-      .nav-bar .switch:hover {
-        background-color: #ddd;
-      }
-
-      .content {
-        overflow-y: auto;
-        width: 97vw;
-        max-width: 550px;
-        margin: auto;
-      }
-
-      .board {
-        width: 80vw;
-        height: 80vw;
-        max-width: 500px;
-        max-height: 500px;
-        background-color: #999;
-        margin: auto;
-        display: flex;
-        padding: 6px;
-        flex-direction: column;
-        box-shadow: 0 0 .2em #999;
-      }
-
-      .board-container .board {
-        box-shadow: 0 0 .5em #888;
-        margin: 1em auto;
-      }
-
-      .board > div {
-        flex-grow: 1;
-        display: flex;
-        margin: 6px 0px;
-      }
-
-      .board > div > div {
-        flex-grow: 1;
-        margin: 0px 6px;
-        background-color: #fff;
-        background-size: contain;
-      }
-
-      .board.myturn > div > div:not(.cross, .circle):hover {
-        background: #ddd;
-      }
-
-      .board > div > div.cross { /* #2e97ff in svg below */
-        background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20width%3D%2264mm%22%0A%20%20%20height%3D%2264mm%22%0A%20%20%20viewBox%3D%220%200%2064%2064%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22svg827%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20id%3D%22path912%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%232e97ff%3Bstroke-width%3A0.830767%22%0A%20%20%20%20%20%20%20d%3D%22M%20120.94531%2023.958984%20A%2096.985704%2096.985704%200%200%200%2023.958984%20120.94531%20A%2096.985704%2096.985704%200%200%200%20120.94531%20217.92969%20A%2096.985704%2096.985704%200%200%200%20217.92969%20120.94531%20A%2096.985704%2096.985704%200%200%200%20120.94531%2023.958984%20z%20M%20120.94531%2052.695312%20A%2068.249197%2068.249197%200%200%201%20189.19336%20120.94531%20A%2068.249197%2068.249197%200%200%201%20120.94531%20189.19336%20A%2068.249197%2068.249197%200%200%201%2052.695312%20120.94531%20A%2068.249197%2068.249197%200%200%201%20120.94531%2052.695312%20z%20%22%0A%20%20%20%20%20%20%20transform%3D%22scale%280.26458333%29%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
-        background-size: cover;
-      }
-
-      .board > div > div.circle { /* #e85d3c in svg below */
-        background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20width%3D%2264mm%22%0A%20%20%20height%3D%2264mm%22%0A%20%20%20viewBox%3D%220%200%2064%2064%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22svg827%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20id%3D%22rect1178%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23e85d3c%3Bstroke-width%3A0.264583%22%0A%20%20%20%20%20%20%20d%3D%22M%206.7986846%2C12.511468%2026.28733%2C32.000114%206.7986846%2C51.488759%2012.511102%2C57.201177%2031.999748%2C37.712531%2051.488759%2C57.201543%2057.201177%2C51.489125%2037.712165%2C32.000114%2057.201177%2C12.511102%2051.488759%2C6.7986846%2031.999748%2C26.287696%2012.511102%2C6.7990505%20Z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
-        background-size: cover;
-      }
-
-      .board-container {
-        margin: 20px 0px;
-      }
-
-      .game-title {
-        margin-bottom: 0.1em;
-        margin-left: 1em;
-      }
-
-      .turn-container {
-        margin-left: 1em;
-      }
-
-      .board-container .game-title, .board-container .turn-container {
-        text-align: center;
-        margin-left: 0;
-      }
-
-
-      .user {
-        border-radius: 3px;
-        color: white;
-        padding: 1px 5px;
-        max-width: 9em;
-        text-overflow: ellipsis;
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        position: relative;
-        top: 4px;
-      }
-
-      .user.cross {
-        background-color: #2e97ff;
-      }
-
-      .user.circle {
-        background-color: #e85d3c;
-      }
-
-      .game-entry {
-        display: flex;
-      }
-
-
-      .game-entry,
-      .game-offer {
-        background-color: #eee;
-        margin: 1em;
-        padding: 1em;
-        border-radius: 1em;
-      }
-
-      .game-entry:hover {
-        background-color: #ddd;
-      }
-
-      .game-entry .game-info {
-        flex-grow: 1;
-        padding-top: 4px;
-        margin: auto;
-      }
-
-      .game-entry .board {
-        width: 90px;
-        height: 90px;
-        min-width: 90px;
-        min-height: 90px;
-        padding: .1vw;
-      }
-      .game-entry .board > div {
-        margin: .1vw 0;
-      }
-      .game-entry .board > div > div {
-        margin: 0 .1vw;
-      }
-
-      .home-screen h2 {
-        text-align: center;
-        color: #888;
-      }
-
-      .home-screen .content {
-        flex-grow: 1;
-      }
-    </style>
     <div id="board-screen"></div>
-
-    <script src="tic_tac_toe.js"></script>
+    <script src="tic_tac_toe.js" type="module"></script>
   </body>
 </html>