remove twig for index page

public/index.html

@@ -8,16 +8,7 @@
   <div id="app"></div>
   <script type="module">
   import Index from "/views/Index.vue.js"
-  new Vue({
+  new Vue({ el: '#app', render: (h) => h(Index) })
-    el: '#app',
-    render: (h) => h(Index, {
-      props: {
-        gamesRunning: {{ gamesRunning|json_encode|raw }},
-        gamesFinished: {{ gamesFinished|json_encode|raw }},
-        images: {{ images|json_encode|raw }},
-      },
-    }),
-  })
   </script>
 </body>
 </html>

public/views/Index.vue.js

@@ -10,11 +10,6 @@ export default {
     GameTeaser,
     ImageTeaser,
   },
-  props: {
-    gamesRunning: Array,
-    gamesFinished: Array,
-    images: Array,
-  },
   template: `
 <div id="app">
   <h1>Running games</h1>
@@ -72,8 +67,19 @@ export default {
       tiles: 1000,
       image: '',
       scoreMode: GameCommon.SCORE_MODE_ANY,
+
+      gamesRunning: [],
+      gamesFinished: [],
+      images: [],
     }
   },
+  async created() {
+    const res = await fetch('/api/index-data')
+    const json = await res.json()
+    this.gamesRunning = json.gamesRunning
+    this.gamesFinished = json.gamesFinished
+    this.images = json.images
+  },
   methods: {
     time(start, end) {
       const icon = end ? '🏁' : '⏳'

server/index.js

@@ -37,8 +37,6 @@ const storage = multer.diskStorage({
 })
 const upload = multer({storage}).single('file');
 
-const statics = express.static(PUBLIC_DIR)
-
 const render = async (template, data) => {
   const loader = new twing.TwingLoaderFilesystem(TEMPLATE_DIR)
   const env = new twing.TwingEnvironment(loader)
@@ -59,6 +57,28 @@ app.use('/replay/:gid', async (req, res, next) => {
   }))
 })
 
+app.get('/api/index-data', (req, res) => {
+  const ts = Time.timestamp()
+  const games = [
+    ...Game.getAllGames().map(game => ({
+      id: game.id,
+      hasReplay: GameLog.exists(game.id),
+      started: Game.getStartTs(game.id),
+      finished: Game.getFinishTs(game.id),
+      tilesFinished: Game.getFinishedTileCount(game.id),
+      tilesTotal: Game.getTileCount(game.id),
+      players: Game.getActivePlayers(game.id, ts).length,
+      imageUrl: Game.getImageUrl(game.id),
+    })),
+  ]
+
+  res.send({
+    gamesRunning: games.filter(g => !g.finished),
+    gamesFinished: games.filter(g => !!g.finished),
+    images: Images.allImages(),
+  })
+})
+
 app.post('/upload', (req, res) => {
   upload(req, res, async (err) => {
     if (err) {
@@ -100,31 +120,7 @@ app.post('/newgame', bodyParser.json(), async (req, res) => {
 
 app.use('/common/', express.static(COMMON_DIR))
 app.use('/uploads/', express.static(UPLOAD_DIR))
-app.use('/', async (req, res, next) => {
+app.use('/', express.static(PUBLIC_DIR))
-  if (req.path === '/') {
-    const ts = Time.timestamp()
-    const games = [
-      ...Game.getAllGames().map(game => ({
-        id: game.id,
-        hasReplay: GameLog.exists(game.id),
-        started: Game.getStartTs(game.id),
-        finished: Game.getFinishTs(game.id),
-        tilesFinished: Game.getFinishedTileCount(game.id),
-        tilesTotal: Game.getTileCount(game.id),
-        players: Game.getActivePlayers(game.id, ts).length,
-        imageUrl: Game.getImageUrl(game.id),
-      })),
-    ]
-
-    res.send(await render('index.html.twig', {
-      gamesRunning: games.filter(g => !g.finished),
-      gamesFinished: games.filter(g => !!g.finished),
-      images: Images.allImages(),
-    }))
-  } else {
-    statics(req, res, next)
-  }
-})
 
 const wss = new WebSocketServer(config.ws);