<commit_before>import React, {Component, PropTypes} from 'react'
import styled from 'styled-components'

import {H2, Flex, HSpace, VSpace, Desktop, Mobile} from '../Basic'
import {Layout, Padding, Color} from '../../styles'

import dataf from './dataf'
import datam from './datam'

const colors = {
  1: {color: '#E61C78'},
  2: {color: '#7B3655'},
  3: {color: '#A2D7E4'},
  4: {color: '#5CB990'},
  5: {color: '#F5C62E'}
}

const skinColors = {
  1: {color: '#FFFFFF'},
  2: {color: '#ffdbac'},
  3: {color: '#f1c27d'},
  4: {color: '#e0ac69'},
  5: {color: '#c68642'},
  6: {color: '#8d5524'},
}

function mod(n, m) {
  return ((n % m) + m) % m;
}

const ArrowBox = styled.div`
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  width: 120px;
  padding: 2px;
  background: ${Color.lightBlue};
  border-radius: 6px;
`

const Arrow = styled.img`
  cursor: pointer;
  width: 30px;
  height: 100%;
  filter: brightness(10);
  ${p => p.mirrored ? 'transform: scale(-1, 1);' : ''}
`

const Space = styled.div`
  cursor: pointer;
  height: 100%;
  flex: 1;
`

const Sep = styled.div`
  width: 2px;
  height: 75%;
  background: white;
`

class Slider extends Component {
  static propTypes = {
    onSlide: PropTypes.func,
    label: PropTypes.string,
  }

  forward = () => this.props.onSlide(1)
  backwards = () => this.props.onSlide(-1)

  render() {
    const {label} = this.props
    return (
      <Flex align='center'>
        <ArrowBox>
          <Arrow mirrored src='/icons/Icons_ready-12.svg' onClick={this.backwards}/>
          <Space onClick={this.backwards}/>
          <Sep/>
          <Space onClick={this.forward}/>
          <Arrow src='/icons/Icons_ready-12.svg' onClick={this.forward}/>
        </ArrowBox>
        <HSpace v={Padding.s}/>
        <H2>{label}</H2>
      </Flex>
    )
  }
}

function createAvatar(def, data) {
  let result = '<svg xmlns="http://www.w3.org/2000/svg" width="65mm" height="65mm" viewBox="0 0 184.25 184.25">'
  result += '<defs><style>'
  result += `.skin{fill:${skinColors[def.skinColor || 1].color}}`
  result += `.shirt{fill:${colors[def.shirtColor || 4].color}}`
  result += `.hair{fill:${colors[def.hairColor || 2].color}}`
  result += `.band{fill:${colors[def.bandColor || 2].color}}`
  result += `.hijab{fill:${colors[def.hijabColor || 2].color}}`
  result += `.glasses{stroke:${colors[def.glassesColor || 2].color};fill:${colors[def.glassesColor || 2].color}}`

  result += '</style>'
  result += data.face[def.face || 2].defs
  result += '</defs>'

  result += data.bg.svg
  result += data.shirt.svg

  result += data.face[def.face || 2].svg
  result += data.hair[def.hair || 1].svg
  result += data.beard[def.beard || 1].svg
  result += data.glasses[def.glasses || 2].svg

  result += '</svg>'

  return result
}

const defaultDef = {
  shirtColor: 3,
  hair: 1,
  hairColor: 2,
  bandColor: 1,
  hijabColor: 1,
  face: 1,
  glasses: 1,
  glassesColor: 1,
  skinColor: 1,
  beard: 1,
}<commit_msg>Fix avatar maker / svg in Firefox<commit_after>import React, {Component, PropTypes} from 'react'
import styled from 'styled-components'

import {H2, Flex, HSpace, VSpace, Desktop, Mobile} from '../Basic'
import {Layout, Padding, Color} from '../../styles'

import dataf from './dataf'
import datam from './datam'

const colors = {
  1: {color: '#E61C78'},
  2: {color: '#7B3655'},
  3: {color: '#A2D7E4'},
  4: {color: '#5CB990'},
  5: {color: '#F5C62E'}
}

const skinColors = {
  1: {color: '#FFFFFF'},
  2: {color: '#ffdbac'},
  3: {color: '#f1c27d'},
  4: {color: '#e0ac69'},
  5: {color: '#c68642'},
  6: {color: '#8d5524'},
}

function mod(n, m) {
  return ((n % m) + m) % m;
}

const ArrowBox = styled.div`
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  width: 120px;
  padding: 2px;
  background: ${Color.lightBlue};
  border-radius: 6px;
`

const Arrow = styled.img`
  cursor: pointer;
  width: 30px;
  height: 100%;
  filter: brightness(10);
  ${p => p.mirrored ? 'transform: scale(-1, 1);' : ''}
`

const Space = styled.div`
  cursor: pointer;
  height: 100%;
  flex: 1;
`

const Sep = styled.div`
  width: 2px;
  height: 75%;
  background: white;
`

class Slider extends Component {
  static propTypes = {
    onSlide: PropTypes.func,
    label: PropTypes.string,
  }

  forward = () => this.props.onSlide(1)
  backwards = () => this.props.onSlide(-1)

  render() {
    const {label} = this.props
    return (
      <Flex align='center'>
        <ArrowBox>
          <Arrow mirrored src='/icons/Icons_ready-12.svg' onClick={this.backwards}/>
          <Space onClick={this.backwards}/>
          <Sep/>
          <Space onClick={this.forward}/>
          <Arrow src='/icons/Icons_ready-12.svg' onClick={this.forward}/>
        </ArrowBox>
        <HSpace v={Padding.s}/>
        <H2>{label}</H2>
      </Flex>
    )
  }
}

function createAvatar(def, data) {
  let result = '<svg xmlns="http://www.w3.org/2000/svg" width="65mm" height="65mm" viewBox="0 0 184.25 184.25">'
  result += '<defs><style>'
  result += `.skin{fill:${skinColors[def.skinColor || 1].color}}`
  result += `.shirt{fill:${colors[def.shirtColor || 4].color}}`
  result += `.hair{fill:${colors[def.hairColor || 2].color}}`
  result += `.band{fill:${colors[def.bandColor || 2].color}}`
  result += `.hijab{fill:${colors[def.hijabColor || 2].color}}`
  result += `.glasses{stroke:${colors[def.glassesColor || 2].color};fill:${colors[def.glassesColor || 2].color}}`

  result += '</style>'
  result += data.face[def.face || 2].defs
  result += '</defs>'

  result += data.bg.svg
  result += data.shirt.svg

  result += data.face[def.face || 2].svg
  result += data.hair[def.hair || 1].svg
  result += data.beard[def.beard || 1].svg
  result += data.glasses[def.glasses || 2].svg

  result += '</svg>'

  return result.replace(/#/g, '%23')
}

const defaultDef = {
  shirtColor: 3,
  hair: 1,
  hairColor: 2,
  bandColor: 1,
  hijabColor: 1,
  face: 1,
  glasses: 1,
  glassesColor: 1,
  skinColor: 1,
  beard: 1,
}
{'fraction_non_alphanumeric': 0.19855000823858956, 'fraction_numerical': 0.040204317020926014, 'mean_word_length': 3.292786421499293, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4553140', 'n_tokens_mistral': 2465, 'n_tokens_neox': 2304, 'n_words': 516}