1  import m, { Attributes } from 'mithril'
 2  
 3  import { Level } from '../Level'
 4  import { state } from '../State'
 5  import { App } from '../App'
 6  
 7  class LevelComponent {
 8    public view(vnode: m.Vnode): m.Vnode {
 9      const attrs = vnode.attrs as { level: Level }
10      const level: Level = attrs.level
11  
12      const classes: Array<string> = []
13      classes.push('level')
14      classes.push(level.dynamic.accessible ? 'accessible' : 'unaccessible')
15      classes.push(level.user.success ? 'success' : 'unsuccess')
16  
17      const classesText = classes.join(' ')
18  
19      return m('div', { 'class': classesText }, [
20        m(m.route.Link, {
21          'href': `/level/${level.fixed.name}`,
22          'onclick': (event: MouseEvent) => this.gotoLevel(event, level.fixed.name),
23        }, level.fixed.number),
24      ])
25    }
26  
27    public oncreate(): void {
28      App.resize()
29    }
30  
31    public gotoLevel(event: MouseEvent, levelName: string): void {
32      event.preventDefault()
33  
34      const storage = state.getStorage()
35      const level = storage.getLevels()[levelName]
36  
37      if (level.dynamic.accessible) {
38        m.route.set('/level/:level', { level: levelName })
39      }
40    }
41  }
42  
43  export class ChooseLevelScreen {
44    public oninit(): void {
45      state.loadLevels()
46    }
47  
48    public view(_vnode: m.Vnode): Array<m.Vnode> {
49      const levels = state.getLevels()
50  
51      const childrens = Object.values(levels).map((level: Level) => {
52        const levelAttribute: Attributes = { level }
53  
54        return m(LevelComponent, levelAttribute)
55      })
56  
57      return [
58        m('div', { 'id': 'topbar' }, [
59          m('div', { 'class': 'topbar-gamename' }, 'Bobby'),
60          m('div', { 'class': 'topbar-menu' }, [
61            m(m.route.Link, { 'href': '/', 'class': 'topbar-button' }, 'Retour'),
62          ]),
63        ]),
64  
65        m('div', { 'class': 'main-wrapper main-wrapper-unaligned', 'role': 'main' }, [
66          m('div', { 'class': 'main-content' }, [
67            m('div', { 'class': 'levels' }, childrens),
68          ]),
69        ]),
70      ]
71    }
72  }