<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>六面体バランス レーダーチャート</title>
<script src="/https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 20px;
background: #f0f0f5;
}
h1 { font-size: 20px; }
.faces {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px auto;
max-width: 400px;
}
label {
display: block;
padding: 10px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#result { margin-top: 20px; font-size: 18px; font-weight: bold; }
#pressure { margin-top: 15px; font-size: 16px; color: darkred; }
canvas { margin-top: 20px; max-width: 400px; }
</style>
</head>
<body>
<h1>六面体バランスシミュレーター</h1>
<p>6面のうち3つを選ぶと、残り3つは相手側に割り振られます。<br>
歪みをレーダーチャートで可視化します。</p>
<div class="faces">
<label><input type="checkbox" value="オリジナル"> オリジナル</label>
<label><input type="checkbox" value="現実"> 現実</label>
<label><input type="checkbox" value="恐慌"> 恐慌</label>
<label><input type="checkbox" value="人生"> 人生</label>
<label><input type="checkbox" value="創作"> 創作</label>
<label><input type="checkbox" value="コピー"> コピー</label>
</div>
<div id="result">選択してください</div>
<div id="pressure"></div>
<canvas id="radarChart"></canvas>
<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const result = document.getElementById("result");
const pressure = document.getElementById("pressure");
const pairs = [
["オリジナル","恐慌"], // 上下軸
["現実","人生"], // 左右軸
["創作","コピー"] // 奥行軸
];
const ctx = document.getElementById("radarChart").getContext("2d");
const radarChart = new Chart(ctx, {
type: "radar",
data: {
labels: ["オリジナル-恐慌", "現実-人生", "創作-コピー"],
datasets: [{
label: "あなた",
data: [0, 0, 0],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 2
},{
label: "相手",
data: [0, 0, 0],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 2
}]
},
options: {
scales: {
r: {
min: 0,
max: 1,
ticks: { stepSize: 1 }
}
}
}
});
checkboxes.forEach(cb => {
cb.addEventListener("change", () => {
const selected = [...checkboxes].filter(c => c.checked).map(c => c.value);
if (selected.length > 3) {
cb.checked = false; // 4つ目は外す
return;
}
if (selected.length === 3) {
const all = ["オリジナル","現実","恐慌","人生","創作","コピー"];
const opponent = all.filter(f => !selected.includes(f));
result.innerHTML = `
あなたの選択: ${selected.join("・")}<br>
相手の選択: ${opponent.join("・")}
`;
// 歪み度合いを計算
let distortion = 0;
const yourData = [];
const oppData = [];
pairs.forEach(([a,b]) => {
if (selected.includes(a)) { yourData.push(1); oppData.push(0); }
else if (selected.includes(b)) { yourData.push(1); oppData.push(0); }
else { yourData.push(0); oppData.push(1); }
if ((selected.includes(a) && opponent.includes(b)) ||
(selected.includes(b) && opponent.includes(a))) {
distortion++;
}
});
pressure.innerHTML = `歪み度合い（同調圧力の強さ）: ${distortion} / 3`;
// レーダーチャート更新
radarChart.data.datasets[0].data = yourData;
radarChart.data.datasets[1].data = oppData;
radarChart.update();
} else {
result.textContent = "選択してください";
pressure.textContent = "";
radarChart.data.datasets[0].data = [0,0,0];
radarChart.data.datasets[1].data = [0,0,0];
radarChart.update();
}
});
});
</script>
</body>
</html>
