<commit_before>import "./hand.css";

import React from "react";
import { TransitionMotion, spring } from "react-motion";
import { default as Card, mapCardToCode } from "./card.jsx";

// Keep the game board a consistent height using a
// hidden placeholder card element.
const placeholderCard = {
    suit: 0,
    value: { key: "two", val: 2 },
};

export default class Hand extends React.Component {
    constructor(props) {
        super(props);
    }

    willEnter() {
        return { opacity: 0, translateX: 300 };
    }

    render() {
        return (
            <TransitionMotion
                willEnter={this.willEnter}
                styles={this.props.hand.map(card => ({
                    key: mapCardToCode(card),
                    style: { opacity: spring(1), translateX: spring(0) },
                    data: card,
                }))}>
                {interpolatedStyles =>
                    <ul className="hand">
                        <Card card={placeholderCard} isHidden={true} />

                        {interpolatedStyles.map(card =>
                            <Card card={card.data} key={card.key} 
                                style={{opacity: card.style.opacity, 
                                    transform: `translateX(${card.style.translateX}px)`}} />
                        )}
                    </ul>
                }
            </TransitionMotion>
        );
    }
}<commit_msg>Randomly rotate each dealt card to look more 'realistic'<commit_after>import "./hand.css";

import React from "react";
import { TransitionMotion, spring } from "react-motion";
import { default as Card, mapCardToCode } from "./card.jsx";

// Keep the game board a consistent height using a
// hidden placeholder card element.
const placeholderCard = {
    suit: 0,
    value: { key: "two", val: 2 },
};

export default class Hand extends React.Component {
    constructor(props) {
        super(props);
    }

    willEnter() {
        return { opacity: 0, translateX: 300, rotate: 0 };
    }

    render() {
        return (
            <TransitionMotion
                willEnter={this.willEnter}
                styles={this.props.hand.map((card, index) => {
                    // Assign the rotation value only the first time
                    // so it does not change on each re-render
                    if (!card.rotateVal)
                        card.rotateVal = getRandomRotateVal();

                    return {
                        key: mapCardToCode(card),
                        style: { 
                            opacity: spring(1), 
                            translateX: spring(0), 
                            rotate: spring(card.rotateVal),
                        },
                        data: card,
                    };
                })}>
                {interpolatedStyles =>
                    <ul className="hand">
                        <Card card={placeholderCard} isHidden={true} />

                        {interpolatedStyles.map(card =>
                            <Card card={card.data} key={card.key} 
                                style={{opacity: card.style.opacity, 
                                    transform: `translateX(${card.style.translateX}px)
                                        rotate(${card.style.rotate}deg)`
                                }} />
                        )}
                    </ul>
                }
            </TransitionMotion>
        );
    }
}

function getRandomRotateVal() {
    return Math.random() * 12 - 6;
}
{'fraction_non_alphanumeric': 0.11017187940264864, 'fraction_numerical': 0.005635390250774866, 'mean_word_length': 1.265475430759413, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4073409', 'n_tokens_mistral': 919, 'n_tokens_neox': 837, 'n_words': 209}