ITOR — compose letters, engrave them on stone tablets */
var _epistleOpen = false;
function toggleEpistleEditor(){
_epistleOpen = !_epistleOpen;
var ee = document.getElementById('epistleEditor');
if(_epistleOpen){
if(!ee){
ee = document.createElement('div');
ee.id = 'epistleEditor';
ee.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:20000;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;';
ee.innerHTML = '
'
+ '
✒️ Epistle Editor
'
+ '
Write for the ancestors. Engrave it in stone.
'
+ ''
+ ''
+ '
'
+ ''
+ ''
+ '
'
+ '
';
document.body.appendChild(ee);
document.getElementById('epistleEngrave').onclick = function(){ engraveEpistle(); };
document.getElementById('epistleClose').onclick = function(){ toggleEpistleEditor(); };
ee.onclick = function(e){ if(e.target===ee) toggleEpistleEditor(); };
}else{
ee.style.display = 'flex';
}
}else if(ee){
ee.style.display = 'none';
}
}
function engraveEpistle(){
try{
var title = document.getElementById('epistleTitle').value || 'Untitled';
var body = document.getElementById('epistleBody').value || '';
if(!body){ codeStatus('write something first'); return; }
// create stone tablet
var tablet = new THREE.Group();
var stoneMat = new THREE.MeshStandardMaterial({color:0x3a3a3a, roughness:0.9});
var slab = new THREE.Mesh(new THREE.BoxGeometry(4, 5, 0.4), stoneMat);
slab.name = 'epistle-slab';
tablet.add(slab);
// gold frame
var frameMat = new THREE.MeshStandardMaterial({color:0xffd700, metalness:0.8, roughness:0.2});
var frame = new THREE.Mesh(new THREE.BoxGeometry(4.3, 5.3, 0.2), frameMat);
frame.position.z = -0.15;
frame.name = 'epistle-frame';
tablet.add(frame);
// render text on canvas
var canvas = document.createElement('canvas');
canvas.width = 512; canvas.height = 640;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#2a2a2a';
ctx.fillRect(0,0,512,640);
ctx.fillStyle = '#ffd700';
ctx.font = 'bold 36px serif';
ctx.textAlign = 'center';
ctx.fillText(title.substring(0,24), 256, 60);
ctx.strokeStyle = '#ffd700';
ctx.lineWidth = 2;
ctx.beginPath(); ctx.moveTo(60,90); ctx.lineTo(452,90); ctx.stroke();
ctx.fillStyle = '#e8e8e8';
ctx.font = '24px serif';
ctx.textAlign = 'left';
var words = body.split(' ');
var lines = [], line = '';
for(var i=0; i 440){ lines.push(line); line = words[i] + ' '; }
else line = test;
}
lines.push(line);
for(var l=0; l