Skip to content

Instantly share code, notes, and snippets.

@acid-chicken

acid-chicken/CombNafMofu.html

Created March 29, 2018 08:35
Show Gist options
  • Save acid-chicken/a6dcc98c1d649fdf92260489451850a8 to your computer and use it in GitHub Desktop.
Save acid-chicken/a6dcc98c1d649fdf92260489451850a8 to your computer and use it in GitHub Desktop.
Download ZIP
例によってiOSで動かないので誰か助けて下さい。
Raw
CombNafMofu.html
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#bf0101">
<meta name="description" content="なふもたんをもふもふするやつ">
<meta name="ICBM" content="35.699099, 139.74944">
<meta name="geo.position" content="35.699099;139.74944">
<meta name="geo.region" content="Japan">
<meta name="geo.placename" content="Tokyo">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@acid_chicken">
<meta name="twitter:creator" content="@acid_chicken">
<meta property="og:url" content="https://www.acid-chicken.com/chikushokai">
<meta property="og:title" content="CombNafMofu">
<meta property="og:image" content="http://www.acid-chicken.com/logo.png">
<title>CombNafMofu</title>
<base target="_blank">
<link rel="me" href="https://twitter.com/acid_chicken">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" integrity="sha256-oDCP2dNW17Y1QhBwQ+u2kLaKxoauWvIGks3a4as9QKs=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js" integrity="sha256-RKNmL9+6j/3jB72OcIg8OQr91Bi4OgFPnKQOFS1O+fo=" crossorigin="anonymous"></script>
<script src="https://magicant.github.io/sjavascript/mt.js"></script>
<style>main{margin:1em !important;width:calc(100% - 2em) !important}h1{margin:1em 0 !important}#output{line-break:auto}#wrapper{overflow-y:scroll}</style>
<main class="ui fluid container">
<h1 class="ui center aligned header">CombNafMofu</h1>
<div class="ui horizontal list">
<div class="item">
<a href="https://github.com/acid-chicken" class="ui mini circular image">
<img src="https://github.com/acid-chicken.png" alt="acid-chicken">
</a>
<div class="content">
<a href="https://github.com/acid-chicken/chikushokai" class="ui sub header">chikushokai</a>
<span>via</span>
<a href="https://github.com/acid-chicken">Acid Chicken</a>
<span>(created)</span>
</div>
</div>
<div class="item">
<a href="https://github.com/Semantic-Org" class="ui mini circular image">
<img src="https://github.com/Semantic-Org.png" alt="semantic-org">
</a>
<div class="content">
<a href="https://github.com/Semantic-Org/Semantic-UI" class="ui sub header">Semantic UI</a>
<span>via</span>
<a href="https://github.com/Semantic-Org">Semantic Org</a>
<span>(referenced)</span>
</div>
</div>
<div class="item">
<a href="https://github.com/google" class="ui mini circular image">
<img src="https://github.com/google.png" alt="fontawesome">
</a>
<div class="content">
<a href="https://github.com/google/fonts" class="ui sub header">Google Fonts Files</a>
<span>via</span>
<a href="https://github.com/google">Google</a>
<span>(referenced)</span>
</div>
</div>
<div class="item">
<a href="https://github.com/FortAwesome" class="ui mini circular image">
<img src="https://github.com/FortAwesome.png" alt="fontawesome">
</a>
<div class="content">
<a href="https://github.com/FortAwesome/Font-Awesome" class="ui sub header">Font Awesome</a>
<span>via</span>
<a href="https://github.com/FortAwesome">Fort Awesome</a>
<span>(referenced)</span>
</div>
</div>
<div class="item">
<a href="https://github.com/magicant" class="ui mini circular image">
<img src="https://github.com/magicant.png" alt="magicant">
</a>
<div class="content">
<a href="https://github.com/magicant/magicant.github.io" class="ui sub header">mt.js</a>
<span>via</span>
<a href="https://github.com/magicant">WATANABE Yuki</a>
<span>(referenced)</span>
</div>
</div>
</div>
<div class="ui grid">
<div class="stretched row">
<div class="twelve wide column" id="terminal">
<div class="ui inverted segment" id="wrapper">
<samp id="output"></samp>
</div>
</div>
<div class="four wide column" id="side">
<h2>カウント</h2>
<div class="ui tiny horizontal statistics" id="statistics"></div>
<div class="ui fluid segments">
<div class="ui fluid segment">
<h3 class="ui header">総文字数</h3>
<span id="rendered-counter">0</span>
</div>
<div class="ui fluid segment">
<h3 class="ui header">経過時間</h3>
<span id="elapsed-counter">00.000</span>
</div>
<div class="ui fluid segment">
<h3 class="ui header">設定</h3>
<div class="ui form">
<div class="ui toggle checkbox" id="auto-scroll">
<input tabindex="0" class="hidden" type="checkbox">
<label>追従</label>
</div>
</div>
</div>
</div>
<div class="ui buttons">
<button class="ui twitter button" id="share-normal">
<i class="twitter icon"></i>
<span>通常</span>
</button>
<div class="or"></div>
<button class="ui twitter disabled button" id="share-complete">
<i class="twitter icon"></i>
<span>完成</span>
</button>
</div>
</div>
</div>
</div>
</main>
<script>
if (!('Notification' in window)) {
Notification.requestPermission()
}
if (!String.prototype.padStart) {
String.prototype.padStart = function padStart(targetLength,padString) {
targetLength = targetLength >> 0
padString = String((typeof padString !== 'undefined' ? padString : ' '))
if (this.length > targetLength) {
return String(this)
}
else {
targetLength = targetLength-this.length
if (targetLength > padString.length) {
padString += padString.repeat(targetLength/padString.length)
}
return padString.slice(0,targetLength) + String(this)
}
}
}
const mersenneTwister = new MersenneTwister()
const nafmoTanMofumofu = [ 'な', 'ふ', 'も', 'た', 'ん', 'も', 'ふ', 'も', 'ふ' ]
const beDistinct = 'ん'
const nafmoTanMofumofuDoubled = nafmoTanMofumofu.concat(nafmoTanMofumofu)
const nafmoTanMofumofuWithoutBeDistinct = nafmoTanMofumofuDoubled.slice(nafmoTanMofumofuDoubled.indexOf(beDistinct) + 1, nafmoTanMofumofuDoubled.lastIndexOf(beDistinct))
const hellShake = action => nafmoTanMofumofu.reduce((prev, x, i) => {
const target = `${prev}${x}`
action(target, i)
return target
}, '')
const statistics = document.getElementById('statistics')
hellShake((target, i) => statistics.innerHTML += `<div class="statistic"><div class="value" id="${target}">0</div><div class="label">${target}</div></div>`)
let containers = {}
hellShake(target => containers[target] = document.getElementById(target))
const terminal = document.getElementById('terminal')
const side = document.getElementById('side')
const wrapper = document.getElementById('wrapper')
const output = document.getElementById('output')
const renderedCounter = document.getElementById('rendered-counter')
const elapsedCounter = document.getElementById('elapsed-counter')
const autoScroll = document.getElementById('auto-scroll')
const countChar = (source, target) => source.split(target).length - 1
let rendered = 0
let completed = 0
let firstTime = -1
let lastChar = beDistinct
document.getElementById('share-normal').addEventListener('click', e => {
let message = 'https://twitter.com/share?text=%E3%82%B5%E3%83%96%E3%82%AB%E3%83%AB%E3%82%AF%E3%82%BD%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%98%E3%83%AB%E3%82%B7%E3%82%A7%E3%82%A4%E3%82%AF%E6%8C%87%E5%AE%9A%E6%9A%B4%E5%8A%9B%E5%9B%A3%E7%AB%B9%E7%94%9F%E4%BC%9A%E3%81%A7%0A'
hellShake(target => {
message += `${encodeURIComponent(target)}%E3%82%92${containers[target].innerText}%E5%80%8B%0A`
})
message += '%E7%99%BA%E8%A6%8B%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82&url=https%3A%2F%2Fwww.acid-chicken.com%2Fchikushokai&hashtags=%E3%82%B5%E3%83%96%E3%82%AB%E3%83%AB%E3%82%AF%E3%82%BD%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%98%E3%83%AB%E3%82%B7%E3%82%A7%E3%82%A4%E3%82%AF%E6%8C%87%E5%AE%9A%E6%9A%B4%E5%8A%9B%E5%9B%A3%E7%AB%B9%E7%94%9F%E4%BC%9A&via=acid_chicken'
window.open(message)
})
document.getElementById('share-complete').addEventListener('click', e => {
window.open(`https://twitter.com/share?text=%E3%82%B5%E3%83%96%E3%82%AB%E3%83%AB%E3%82%AF%E3%82%BD%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%98%E3%83%AB%E3%82%B7%E3%82%A7%E3%82%A4%E3%82%AF%E6%8C%87%E5%AE%9A%E6%9A%B4%E5%8A%9B%E5%9B%A3%E7%AB%B9%E7%94%9F%E4%BC%9A%E3%81%A7%0A${renderedCounter.innerText}%E5%80%8B%E7%94%9F%E6%88%90%E3%81%97%E3%81%9F%E4%B8%AD%E3%81%8B%E3%82%89${completed}%E5%80%8B%E3%81%AE%E3%83%9D%E3%83%97%E3%83%86%E3%83%94%E3%83%94%E3%83%83%E3%82%AF%E3%82%92%E7%99%BA%E8%A6%8B%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E7%B5%8C%E9%81%8E%E6%99%82%E9%96%93(${elapsedCounter.innerText})&url=https%3A%2F%2Fwww.acid-chicken.com%2Fchikushokai&hashtags=%E3%82%B5%E3%83%96%E3%82%AB%E3%83%AB%E3%82%AF%E3%82%BD%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%98%E3%83%AB%E3%82%B7%E3%82%A7%E3%82%A4%E3%82%AF%E6%8C%87%E5%AE%9A%E6%9A%B4%E5%8A%9B%E5%9B%A3%E7%AB%B9%E7%94%9F%E4%BC%9A&via=acid_chicken`)
})
$('.ui.checkbox')
.checkbox()
const started = new Date().getTime()
const render = () => {
const elapsed = new Date().getTime() - started
output.innerText += lastChar = lastChar === beDistinct ? nafmoTanMofumofuWithoutBeDistinct[mersenneTwister.nextInt(0, nafmoTanMofumofuWithoutBeDistinct.length)] : nafmoTanMofumofu[mersenneTwister.nextInt(0, nafmoTanMofumofu.length)]
renderedCounter.innerText = ++rendered
let sub = 0
const days = Math.floor(elapsed / 86400000)
const hours = Math.floor((elapsed - (sub += 86400000 * days)) / 3600000)
const minutes = Math.floor((elapsed - (sub += 3600000 * hours)) / 60000)
const seconds = Math.floor((elapsed - (sub += 60000 * minutes)) / 1000)
const milliseconds = Math.floor(elapsed - (sub += 1000 * seconds))
elapsedCounter.innerText = `${days ? `${days}:` : ''}${days || hours ? `${hours.toString().padStart(2, '0')}:` : ''}${days || hours || minutes ? `${minutes.toString().padStart(2, '0')}:` : ''}${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`
terminal.style.maxHeight = `${side.offsetHeight}px`
const text = output.innerText
if (parseInt(containers[hellShake(target => {
const count = countChar(text, target)
containers[target].innerText = count
if (autoScroll.classList.contains('checked')) {
if (~window.navigator.userAgent.indexOf('Firefox')) {
wrapper.scroll(0, output.offsetHeight)
} else {
wrapper.scrollTop = wrapper.scrollHeight
}
}
})].innerText) - completed) {
if (!completed) {
firstTime = elapsed
}
if (!('Notification' in window)) {
new Notification('CombNafMofu', { body: `なふもたんもふもふが完成しました。${++completed}回目です。` })
}
}
requestAnimationFrame(render)
}
requestAnimationFrame(render)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment