K. 사용자 사용내역 기록
사용자가 어떤 행동을 했는지 기록하는 예제입니다. 도구를 변경하면 그 기록을 표기합니다.
- 실행 결과
- 코드 보기
<html>
<head>
<script
src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
defer
onload="onLoadHelper();"
></script>
<script>
const CUBE_TOOL_NAME = {
'basic/select': '선택',
'basic/delete': '삭제',
'cube/plain': '연결큐브',
'geometry/sphere': '구',
}
async function onLoadHelper() {
await mathcore.helper.load("cube", {
key: "TESTKEY"
});
const cube = new mathcore.cube.Cube();
await cube.render("cube");
initializeTool(cube);
cube.eventManager.on("changeTool", onChangeTool);
}
function onChangeTool(cubeToolName) {
log(`도구변경 - ${CUBE_TOOL_NAME[cubeToolName]}`);
}
function initializeTool(cube) {
const buttons = document.querySelectorAll(".tools button[data-name]");
buttons.forEach((button) => {
const icon = `url("${cube.toolManager.getToolIcon(button.dataset.name)}")`;
button.style.backgroundImage = icon;
button.addEventListener("click", (event) => {
const toolName = button.dataset.name;
cube.toolManager.setCurrentTool(toolName);
});
});
cube.toolManager.onChangeTool((toolName) => {
buttons.forEach((button) => {
if (button.dataset.name === toolName) {
button.classList.add("active");
} else {
button.classList.remove("active");
}
});
});
buttons[0].dispatchEvent(new Event("click"));
}
const startTime = new Date().getTime();
function getTimestamp() {
const milliseconds = new Date().getTime() - startTime;
const seconds = Math.floor(milliseconds / 1000) % 60;
const minutes = Math.floor(Math.floor(milliseconds / 1000) / 60);
const mm = minutes.toString().padStart(2, "0");
const ss = seconds.toString().padStart(2, "0");
return `${mm}:${ss}`;
}
function log(str) {
const div = document.createElement("div");
div.innerText = `[${getTimestamp()}] ${str}`;
const logger = document.getElementById("logger");
logger.appendChild(div);
logger.scrollTop = logger.scrollHeight;
}
</script>
</head>
<body>
<div id="cube"></div>
<div class="tools">
<button data-name="basic/select"></button>
<button data-name="basic/delete"></button>
<button data-name="cube/plain"></button>
<button data-name="geometry/sphere"></button>
</div>
<div id="logger"></div>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
display: flex;
overflow: hidden;
}
#cube {
position: relative;
flex: 2;
height: 100%;
}
#logger {
flex: 1;
overflow: auto;
padding: 12px;
font-size: 12px;
}
.tools {
position: absolute;
display: flex;
left: 50%;
transform: translateX(-50%);
bottom: 5px;
column-gap: 5px;
z-index: 1;
}
.tools button {
width: 40px;
height: 40px;
border: 1px solid black;
border-radius: 4px;
cursor: pointer;
background-color: white;
background-size: contain;
}
.tools button.active {
border: 2px solid red;
}
</style>
</body>
</html>