render()

in share/src/components/GameModder.tsx [613:671]
55 lines of code
3 McCabe index (conditional complexity)

    render() {
        let currImg = this.state.userImages[this.state.currentImg]
        let isBackgroundTab = this.state.currentImg === 3

        let body = document.getElementsByTagName('body')[0]
        // const MARGIN = 20
        const HEADER_HEIGHT = 50
        let actualWidth = body.clientWidth
        let actualHeight = body.clientHeight - HEADER_HEIGHT
        let refWidth = 539.0
        let refHeight = SE.TOTAL_HEIGHT
        let wScale = actualWidth / refWidth
        let hScale = actualHeight / refHeight
        this.scale = Math.min(wScale, hScale)

        const SPRITE_GALLERY_HEIGHT = 100
        let spriteGalleryHeight = SPRITE_GALLERY_HEIGHT * this.scale
        let colorPickerHeight = (SE.TOTAL_HEIGHT + SPRITE_GALLERY_HEIGHT) * this.scale

        // TODO
        let samples = [
            SAMPLE_CHARACTERS,
            SAMPLE_OBSTACLES,
            SAMPLE_OBSTACLES2
        ]
        let spriteGalleryOptions =
            (samples[this.state.currentImg] || SAMPLE_CHARACTERS)
                .map(i => imageLiteralToBitmap(i))

        let startImg = this.state.userImages[this.state.currentImg].data
        let galKey = `tab${this.state.currentImg}__` + spriteGalleryOptions.map(b => b.buf.toString()).join("_")
        let galProps: SpriteGalleryProps = {
            height: spriteGalleryHeight,
            options: spriteGalleryOptions,
            onClick: this.onSpriteGalleryPick.bind(this)
        }
        return (
            <div className="game-modder">
                <h1 ref="header" className="what-to-do-header">{currImg.callToAction}</h1>
                <TabBar ref="tab-bar" tabImages={this.tabImages}
                    tabChange={this.onTabChange.bind(this)} startTab={this.state.currentImg} />
                {isBackgroundTab
                    ?
                    <ColorPicker selectionChanged={this.onBackgroundColorChanged.bind(this)}
                        selected={this.state.currentBackground} colors={SE.COLORS}
                        height={colorPickerHeight}></ColorPicker>
                    :
                    <SpriteEditorComp ref="sprite-editor" startImage={startImg}
                        onPlay={this.onPlay} scale={this.scale} galleryProps={galProps}></SpriteEditorComp>
                }
                {/* <div ref="sprite-gallery" className="sprite-gallery">
                </div> */}
                <button ref="play-btn" className={`play-btn ${this.state.pulse ? "shake" : ""}`}>
                    <span>Play</span>
                    <i className="icon play"></i>
                </button>
            </div>
        )
    }