add tool entrypoints

jeffanddom · Jan 9, 2021 · c7549ac · c7549ac
1 parent 45a69cc
commit c7549ac
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "description": "It's another game!",
   "license": "BSD-3-Clause",
   "scripts": {
+    "buildWeb": "npx ts-node --transpile-only src/cli/build/buildWeb.ts",
     "buildServer": "npx ts-node --transpile-only src/cli/build/buildServer.ts",
     "dev": "npx ts-node --transpile-only src/cli/build/dev.ts",
     "devServer": "node out/server/server.js",

diff --git a/src/cli/build/buildServer.ts b/src/cli/build/buildServer.ts
@@ -3,7 +3,12 @@ import * as path from 'path'
 
 import * as esbuild from 'esbuild'
 
-import { buildVersionPath, gameSrcPath, serverBuildOutputPath } from './common'
+import {
+  buildVersionPath,
+  gameSrcPath,
+  serverOutputPath,
+  webEntrypoints,
+} from './common'
 
 function getMtimeMs(filepath: string): number {
   const stats = fs.statSync(filepath)
@@ -29,14 +34,21 @@ console.log(`build version '${buildVersion}' written to ${buildVersionPath}`)
 esbuild.buildSync({
   bundle: true,
   entryPoints: [path.join(gameSrcPath, 'server', 'main.ts')],
-  outdir: serverBuildOutputPath,
+  outdir: serverOutputPath,
   platform: 'node',
   sourcemap: true,
   target: 'es2019',
 })
 
 // Generate new entrypoint HTML with hardcoded build version
-fs.copyFileSync(
-  path.join(gameSrcPath, 'client', 'index.html'),
-  path.join(serverBuildOutputPath, 'index.html'),
+Promise.all(
+  webEntrypoints.map(async (srcPath) => {
+    await fs.promises.mkdir(path.join(serverOutputPath, srcPath), {
+      recursive: true,
+    })
+    await fs.promises.copyFile(
+      path.join(gameSrcPath, srcPath, 'index.html'),
+      path.join(serverOutputPath, srcPath, 'index.html'),
+    )
+  }),
 )
diff --git a/src/cli/build/buildClient.ts → src/cli/build/buildWeb.ts b/src/cli/build/buildClient.ts → src/cli/build/buildWeb.ts
@@ -2,19 +2,21 @@ import * as path from 'path'
 
 import * as esbuild from 'esbuild'
 
-import { clientBuildOutputPath, gameSrcPath } from './common'
+import { gameSrcPath, webEntrypoints, webOutputPath } from './common'
 
 console.log('Creating bundle...')
 
 esbuild.buildSync({
   bundle: true,
-  entryPoints: [path.join(gameSrcPath, 'client', 'main.ts')],
+  entryPoints: webEntrypoints.map((srcPath) =>
+    path.join(gameSrcPath, srcPath, 'main.ts'),
+  ),
   loader: {
     '.obj': 'text',
     '.gltf': 'json',
   },
   minify: false,
-  outdir: clientBuildOutputPath,
+  outdir: webOutputPath,
   sourcemap: true,
   target: ['chrome88', 'firefox84', 'safari14'],
 })
diff --git a/src/cli/build/common.ts b/src/cli/build/common.ts
@@ -15,6 +15,8 @@ const findProjectRoot = (): string => {
 export const projectRootPath = findProjectRoot()
 export const gameSrcPath = path.join(projectRootPath, 'src')
 export const buildOutputPath = path.join(projectRootPath, 'out')
-export const clientBuildOutputPath = path.join(buildOutputPath, 'client')
-export const serverBuildOutputPath = path.join(buildOutputPath, 'server')
-export const buildVersionPath = path.join(serverBuildOutputPath, 'buildVersion')
+export const webOutputPath = path.join(buildOutputPath, 'web')
+export const serverOutputPath = path.join(buildOutputPath, 'server')
+export const buildVersionPath = path.join(serverOutputPath, 'buildVersion')
+
+export const webEntrypoints = ['client', 'tools/rendertoy']
diff --git a/src/cli/build/dev.ts b/src/cli/build/dev.ts
@@ -3,7 +3,7 @@ import * as path from 'path'
 
 import * as chokidar from 'chokidar'
 
-import { gameSrcPath, serverBuildOutputPath } from './common'
+import { gameSrcPath, serverOutputPath } from './common'
 
 // Removes a newline from the end of a buffer, if it exists.
 const trimNewlineSuffix = (data: Buffer): Buffer => {
@@ -34,7 +34,7 @@ const rebuild = async () => {
     const build = spawn('npx', [
       'ts-node',
       '--transpile-only',
-      path.join(gameSrcPath, 'cli', 'build', 'buildClient.ts'),
+      path.join(gameSrcPath, 'cli', 'build', 'buildWeb.ts'),
     ])
     build.on('close', resolve)
     build.stdout.on('data', (data) =>
@@ -67,7 +67,7 @@ const rebuild = async () => {
     server.kill()
   }
 
-  server = spawn('node', [path.join(serverBuildOutputPath, 'main.js')])
+  server = spawn('node', [path.join(serverOutputPath, 'main.js')])
   server.stdout.on('data', (data) =>
     console.log(trimNewlineSuffix(data).toString()),
   )

diff --git a/src/client/index.html b/src/client/index.html
@@ -29,9 +29,7 @@
 </head>
 
 <body>
-  <script src="/main.js"></script>
-
-  <!-- autoreload code should follow the execution of client/main.ts-->
+  <script src="/client/main.js"></script>
   <!-- DEV SERVER AUTORELOAD PLACEHOLDER -->
 </body>
 

diff --git a/src/server/main.ts b/src/server/main.ts
@@ -7,8 +7,9 @@ import * as WebSocket from 'ws'
 
 import {
   buildVersionPath,
-  clientBuildOutputPath,
-  serverBuildOutputPath,
+  serverOutputPath,
+  webEntrypoints,
+  webOutputPath,
 } from '~/cli/build/common'
 import { updateEntrypointHtmlForAutoReload } from '~/client/autoReload'
 import { SIMULATION_PERIOD_S } from '~/constants'
@@ -19,9 +20,11 @@ async function buildVersion(): Promise<string> {
   return (await fs.promises.readFile(buildVersionPath)).toString()
 }
 
-async function entrypointTemplate(): Promise<string> {
+async function entrypointTemplate(srcPath: string): Promise<string> {
   return (
-    await fs.promises.readFile(path.join(serverBuildOutputPath, 'index.html'))
+    await fs.promises.readFile(
+      path.join(serverOutputPath, srcPath, 'index.html'),
+    )
   ).toString('utf8')
 }
 
@@ -49,18 +52,28 @@ async function main(): Promise<void> {
 
   await httpServer.register(inert)
 
+  for (const entrypoint of webEntrypoints) {
+    httpServer.route({
+      method: 'GET',
+      path: '/' + entrypoint,
+      handler: async () => {
+        const [bv, template] = await Promise.all([
+          buildVersion(),
+          entrypointTemplate(entrypoint),
+        ])
+        return updateEntrypointHtmlForAutoReload({
+          buildVersion: bv,
+          html: template,
+        })
+      },
+    })
+  }
+
   httpServer.route({
     method: 'GET',
     path: '/',
-    handler: async () => {
-      const [bv, template] = await Promise.all([
-        buildVersion(),
-        entrypointTemplate(),
-      ])
-      return updateEntrypointHtmlForAutoReload({
-        buildVersion: bv,
-        html: template,
-      })
+    handler: async (req, h) => {
+      return h.redirect('/client')
     },
   })
 
@@ -123,8 +136,7 @@ async function main(): Promise<void> {
     path: '/{param*}',
     handler: {
       directory: {
-        path: clientBuildOutputPath,
-        redirectToSlash: true,
+        path: webOutputPath,
       },
     },
   })

diff --git a/src/tools/rendertoy/index.html b/src/tools/rendertoy/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    html {
+      height: 100%;
+      background-color: purple;
+    }
+
+    body,
+    canvas {
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      margin: 0 auto;
+      padding: 0;
+      display: block;
+      cursor: pointer;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+
+    #controls {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="/tools/rendertoy/main.js"></script>
+  <!-- DEV SERVER AUTORELOAD PLACEHOLDER -->
+</body>
+
+</html>
diff --git a/src/tools/rendertoy/main.ts b/src/tools/rendertoy/main.ts
@@ -0,0 +1 @@
+console.log('hello, world!')