html page to learn numbers [0-99] (child game)

albert-100.pug

html
    head
        link(href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet")
        style
            :sass
                
                body
                    width: 100vw
                    height: 100vh
                    margin: 0
                    transition: background .5s ease-out
                    
                    display: flex
                    align-items: center
                    justify-content: center
                    
                    pre
                        font-family: 'Roboto Mono', monospace
                        
                        &.n
                            font-weight: 700
                            font-size: 600px
                            
                        &.info
                            position: absolute
                            bottom: 20px
            
    body
        pre.n ?
        pre.info
    
        script(type='module').
        
            function* range(n) {
                
                let i = 0
                while(i < n)
                    yield i++
                    
            }
            
            import { Color } from './color.js'
            
            let color = new Color('hsl(60, 40%, 80%)')
            
            let max = 5
            let total = 0
            
            let numbers = [...range(100)].map(() => 0)
            
            function random() {
                
                if (numbers.every(n => n === max)) {
                    
                    document.querySelector('pre.info').innerHTML = `each numbers has been drawn ${max} times!`
                    return NaN
                    
                }
                
                total++
                
                let count = 0
                
                while (true) {
                    
                    let i = Math.floor(100 * Math.random())
                    
                    count++
                    
                    if (Math.random() > numbers[i] / max) {
                        
                        let msg = `${total}: ${count} iteration for ${i}`
                        console.log(msg)
                        document.querySelector('pre.info').innerHTML = msg
                        
                        numbers[i]++
                        return i
                        
                    }
                    
                }
                
            }
            
            document.body.style.backgroundColor = color.RRGGBB
            
            onkeydown = event => {
                
                if (event.key === ' ') {
                    
                    /* let n = Math.floor(100 * Math.random()) */
                    let n = random()
                    
                    document.querySelector('pre.n').innerHTML = n
                    
                    color.hue = Math.random()
                    
                    document.body.style.backgroundColor = color.RRGGBB
                    
                }
                
            }
            
            Object.defineProperties(window, {
                
                numbers: { get() { return numbers } },
            
            })