Japanese emoticons experiment

Inspiration

Doomscrolling on X one day, this image appeared in front of me…

Explanation

As a seasoned fan of all things emoji and ascii (I’m extremely partial to using a Lenny Face in emails/texts) I was tickled by the sentiment behind each of the icons. Some part of my brain decided I wanted to take this image and save these emoticons for future copy and paste use.

Now, there’s a variety of ways I could have done this. Probably most easily would have been typing it out in a list and keeping it in my iOS Notes application, especially with how trivial it is to copy text from images now in iOS. But then I remembered I had a section of my website for “experiments” and decided it would be fun to try and make something a little more sophisticated.

Currently my website is built using the Astro site generator, which readily allows the development and use of React components alongside the rest of the Astro code, so I went about making a small set of buttons in a grid that would copy the emote to the clipboard whenever the button is pressed. You can see it in action over at the experiments page.

It’s not super complicated or doing anything fancy, but it’s been a while since I’d done anything in React and was a nice way of easing myself back into the codebase. The styling isn’t anything fancy either, I am constrained by both the width of my current site and my lack of overall design skills/imagination (-_-;).

Below is the final code, so feel free to suggest any other emoticons I might want to add to the list, or any neat React/CSS tricks.

Code

const emotes = [
  { emote: '(n_n)', label: 'Our trains function' },
  { emote: '(._.)', label: 'I get paid in yen' },
  { emote: '(-_-)', label: 'I do not want to change in Shinjuku' },
  { emote: '(;_;)', label: 'I needed a priority seat' },
  { emote: '(@_@)', label: 'Because rules!' },
  { emote: '(o_o)', label: 'So. Many. Tourists.' },
  { emote: '(*^*)', label: `I'm from Kyoto` },
  { emote: '(>_<)', label: 'Cool biz is not cool enough' },
  { emote: '(^_^)', label: 'My wallet has never been stolen' },
  { emote: '*(^o^)*', label: 'beer for breakfast' },
  { emote: '(^o^)', label: 'I can has healthcare' },
  { emote: '(X.X)', label: `My friend karoshi'd` },
  { emote: '(=_=)', label: '12 hr meetings are fine' },
  { emote: '(*-*)', label: 'Look an onsen' },
  { emote: '(!_!)', label: 'I live with my mother-in-law' },
  { emote: '(o_O)', label: 'double eyelid surgery mishap' },
  { emote: '(*O*)', label: 'your husband cooks?' },
  { emote: '(O_O)', label: 'Wtf America' },
  { emote: '(;o;)', label: 'My husband blew our savings on a hostess' },
  { emote: `(.o.')`, label: `I'm an expert on the English passive past perfect tense but can't hold a 2 second conversation`, useSmallText: true },
  { emote: '(-_-;)', label: 'I forgot to vote' },
  { emote: `('_')`, label: 'Does your country have 4 seasons?' },
  { emote: '(u_u)', label: 'sleeping at desk' },
  { emote: '(xOx)', label: 'No I would not like a root beer' },
  { emote: '(>O<)', label: 'on a rush hour train' },
  { emote: '(-_O)', label: `I'm def not a chikan` },
  { emote: '8(>_<)8', label: 'hoikuen ochita' },
  { emote: '(9_9)', label: 'What is sleep?' },
  { emote: '(>>)', label: `When asked about anything involving WWII that's not atomic bombs`, useSmallText: true },
  { emote: '(~o~)', label: 'Chibi chibi Chaka Chaka' },
];

import styles from '@experiments/JapaneseEmoticonPicker.module.css'

export default function JapaneseEmoticonPicker() {
  function handleClick(emote) {
    window.navigator.clipboard.writeText(emote)
  }
  return (
    <div className={styles.grid}>
    {
      emotes.map(({ emote, label, useSmallText }) => (
      <div className={styles.gridItem} key={emote}>
        <button className={styles.button} onClick={() => handleClick(emote)} title={label} id={emote}>
          <span>{emote}</span>
          <label htmlFor={emote} className={useSmallText ? styles.smalltext : null}>{label}</label>
        </button>
      </div>
      ))
    }
    </div>
  )
};

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background-color: #dbf3f8;
  padding: 20px 10px;
}

.button {
  width: 100px;
  height: 100px;
  font-family: cursive;
  font-size: 24px;
  text-align: center;
  color: black;
  background: none;
  background-color: #dbf3f8;
  outline: none;
  cursor: pointer;
  border-radius: 3px;
  border-color: #beeaf3;
  border-style: none none solid solid;
  border-width: 2px;
  box-shadow: -3px 3px 0px 3px #d5f8ff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.button:active {
  box-shadow: -1px 1px 0px 1px rgb(0, 200, 255);
}

.button label {
  font-family: sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.button label.smalltext {
  font-size: 10px;
}

Experiment link

In case you made it to the bottom without clicking the experiment link, here it is again to save you going all the way to the top!

Japanese emoticons experiment.