535 lines
12 KiB
Vue
535 lines
12 KiB
Vue
<!-- .vitepress/theme/components/BasaltDemoWithCode.vue -->
|
|
<script setup>
|
|
import { ref, reactive, computed, useSlots, onMounted, onUnmounted, nextTick } from 'vue'
|
|
|
|
const props = defineProps({
|
|
language: {
|
|
type: String,
|
|
default: 'lua'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'Basalt Demo'
|
|
}
|
|
})
|
|
|
|
const showDemo = ref(false)
|
|
const container = ref(null)
|
|
const wrapperRef = ref(null)
|
|
const position = reactive({ x: 100, y: 100 })
|
|
const isLoading = ref(false)
|
|
let offset = { x: 0, y: 0 }
|
|
let isDragging = false
|
|
let computerInstance = null
|
|
|
|
const slots = useSlots()
|
|
function extractText(nodes) {
|
|
return (nodes || [])
|
|
.map((node) => {
|
|
if (!node) return ''
|
|
if (typeof node === 'string') return node
|
|
if (typeof node.children === 'string') return node.children
|
|
if (Array.isArray(node.children)) return extractText(node.children)
|
|
return ''
|
|
})
|
|
.join('\n')
|
|
.replace(/\r\n/g, '\n')
|
|
.replace(/\n{3,}/g, '\n\n')
|
|
.trim()
|
|
}
|
|
|
|
const luaCode = computed(() => extractText(slots.default?.() ?? []))
|
|
|
|
const highlightedCode = computed(() => {
|
|
let code = luaCode.value
|
|
|
|
const keywords = ['local', 'function', 'if', 'then', 'else', 'elseif', 'end', 'for', 'while', 'do', 'repeat', 'until', 'return', 'break', 'true', 'false', 'nil', 'and', 'or', 'not', 'require']
|
|
const keywordRegex = new RegExp(`\\b(${keywords.join('|')})\\b`, 'g')
|
|
|
|
code = code.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
|
|
|
code = code.replace(keywordRegex, '<span class="keyword">$1</span>')
|
|
code = code.replace(/"([^"]*)"/g, '<span class="string">"$1"</span>')
|
|
code = code.replace(/'([^']*)'/g, '<span class="string">\'$1\'</span>')
|
|
code = code.replace(/--(.*)$/gm, '<span class="comment">--$1</span>')
|
|
code = code.replace(/\b(\d+)\b/g, '<span class="number">$1</span>')
|
|
code = code.replace(/\b(basalt|main)\b/g, '<span class="variable">$1</span>')
|
|
code = code.replace(/(:?\w+)\(/g, '<span class="function">$1</span>(')
|
|
|
|
return code
|
|
})
|
|
|
|
async function startDemo() {
|
|
if (typeof window === 'undefined') return
|
|
if (isLoading.value || showDemo.value) return
|
|
|
|
isLoading.value = true
|
|
|
|
try {
|
|
const basalt = await fetch(
|
|
'https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua'
|
|
).then(res => res.text())
|
|
|
|
if (!window.require) {
|
|
await new Promise((resolve, reject) => {
|
|
const script = document.createElement('script')
|
|
script.src = 'https://copy-cat.squiddev.cc/require.js'
|
|
script.onload = resolve
|
|
script.onerror = reject
|
|
document.body.appendChild(script)
|
|
})
|
|
window.require.config({ paths: { copycat: 'https://copy-cat.squiddev.cc/' } })
|
|
}
|
|
|
|
showDemo.value = true
|
|
centerWindow()
|
|
|
|
await nextTick()
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 200))
|
|
|
|
window.require(['copycat/embed'], (setup) => {
|
|
if (!container.value) {
|
|
console.error('Container not found')
|
|
isLoading.value = false
|
|
return
|
|
}
|
|
|
|
computerInstance = setup(container.value, {
|
|
hdFont: 'https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png',
|
|
files: {
|
|
'startup.lua': luaCode.value,
|
|
'basalt.lua': basalt
|
|
},
|
|
label: props.title
|
|
})
|
|
|
|
computerInstance.run()
|
|
|
|
setTimeout(() => {
|
|
isLoading.value = false
|
|
}, 500)
|
|
})
|
|
|
|
} catch (error) {
|
|
console.error('Error starting demo:', error)
|
|
isLoading.value = false
|
|
showDemo.value = false
|
|
}
|
|
}
|
|
|
|
function closeDemo() {
|
|
if (computerInstance) {
|
|
try {
|
|
computerInstance.shutdown()
|
|
} catch (e) {
|
|
console.warn('Error shutting down:', e)
|
|
}
|
|
computerInstance = null
|
|
}
|
|
|
|
showDemo.value = false
|
|
isLoading.value = false
|
|
}
|
|
|
|
function centerWindow() {
|
|
if (typeof window === 'undefined') return
|
|
|
|
const windowWidth = window.innerWidth
|
|
const windowHeight = window.innerHeight
|
|
position.x = Math.max(0, (windowWidth - 650) / 2)
|
|
position.y = Math.max(0, (windowHeight - 480) / 2)
|
|
}
|
|
|
|
function startDrag(e) {
|
|
if (typeof document === 'undefined') return
|
|
|
|
if (e.target.closest('button')) return
|
|
isDragging = true
|
|
offset.x = e.clientX - position.x
|
|
offset.y = e.clientY - position.y
|
|
document.addEventListener('mousemove', onDrag)
|
|
document.addEventListener('mouseup', stopDrag)
|
|
e.preventDefault()
|
|
}
|
|
|
|
function onDrag(e) {
|
|
if (!isDragging || typeof window === 'undefined') return
|
|
|
|
const maxX = window.innerWidth - 650
|
|
const maxY = window.innerHeight - 480
|
|
|
|
position.x = Math.max(0, Math.min(e.clientX - offset.x, maxX))
|
|
position.y = Math.max(0, Math.min(e.clientY - offset.y, maxY))
|
|
}
|
|
|
|
function stopDrag() {
|
|
if (typeof document === 'undefined') return
|
|
|
|
isDragging = false
|
|
document.removeEventListener('mousemove', onDrag)
|
|
document.removeEventListener('mouseup', stopDrag)
|
|
}
|
|
|
|
function handleKeydown(e) {
|
|
if (e.key === 'Escape' && showDemo.value) {
|
|
closeDemo()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// SSR Guard - nur im Browser Event Listener hinzufügen
|
|
if (typeof document !== 'undefined') {
|
|
document.addEventListener('keydown', handleKeydown)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
// SSR Guard
|
|
if (typeof document !== 'undefined') {
|
|
document.removeEventListener('keydown', handleKeydown)
|
|
}
|
|
closeDemo()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="basalt-demo-wrapper">
|
|
<!-- Code Block with Run Button -->
|
|
<div class="code-block-container">
|
|
<div class="code-header">
|
|
<span class="language-badge">{{ language }}</span>
|
|
<button
|
|
class="run-button"
|
|
@click="startDemo"
|
|
:disabled="isLoading || showDemo"
|
|
>
|
|
<span v-if="!isLoading" class="play-icon">▶</span>
|
|
<span v-else class="loading-icon">⟳</span>
|
|
<span class="button-text">{{ isLoading ? 'Loading...' : 'Run' }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="code-block">
|
|
<pre><code v-html="highlightedCode"></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<Teleport v-if="typeof document !== 'undefined'" to="body">
|
|
<div
|
|
v-if="showDemo"
|
|
ref="wrapperRef"
|
|
class="terminal-window"
|
|
:style="{
|
|
top: position.y + 'px',
|
|
left: position.x + 'px'
|
|
}"
|
|
>
|
|
<div class="terminal-header" @mousedown="startDrag">
|
|
<div class="terminal-title">
|
|
<span class="terminal-icon">💻</span>
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
<div class="terminal-controls">
|
|
<button
|
|
class="control-button minimize"
|
|
@click="centerWindow"
|
|
title="Center"
|
|
>
|
|
⊡
|
|
</button>
|
|
<button
|
|
class="control-button close"
|
|
@click="closeDemo"
|
|
title="Close (ESC)"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="terminal-body">
|
|
<Transition name="fade">
|
|
<div v-if="isLoading" class="loading-overlay">
|
|
<div class="spinner"></div>
|
|
<p>Loading emulator...</p>
|
|
</div>
|
|
</Transition>
|
|
|
|
<div
|
|
ref="container"
|
|
class="terminal-container"
|
|
:style="{ opacity: isLoading ? 0 : 1 }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.basalt-demo-wrapper {
|
|
position: relative;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.code-block-container {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--vp-code-block-bg, #1e1e1e);
|
|
border: 1px solid var(--vp-c-divider, #333);
|
|
}
|
|
|
|
.code-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid var(--vp-c-divider, #333);
|
|
}
|
|
|
|
.language-badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.run-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.75rem;
|
|
background: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.run-button:hover:not(:disabled) {
|
|
background: #45a049;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.run-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.loading-icon {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Code Block */
|
|
.code-block {
|
|
overflow: auto;
|
|
max-height: 500px;
|
|
}
|
|
|
|
.code-block pre {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
background: transparent;
|
|
font-family: 'Courier New', Consolas, monospace;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: #d4d4d4;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.code-block code {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.code-block :deep(.keyword) {
|
|
color: #C586C0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.code-block :deep(.string) {
|
|
color: #CE9178;
|
|
}
|
|
|
|
.code-block :deep(.comment) {
|
|
color: #6A9955;
|
|
font-style: italic;
|
|
}
|
|
|
|
.code-block :deep(.number) {
|
|
color: #B5CEA8;
|
|
}
|
|
|
|
.code-block :deep(.function) {
|
|
color: #DCDCAA;
|
|
}
|
|
|
|
.code-block :deep(.variable) {
|
|
color: #9CDCFE;
|
|
}
|
|
|
|
.terminal-window {
|
|
position: fixed;
|
|
width: 650px;
|
|
height: 480px;
|
|
background: #1a1a1a;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 9999;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.terminal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
|
|
border-bottom: 1px solid #111;
|
|
cursor: move;
|
|
user-select: none;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.terminal-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #fff;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.terminal-controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.control-button {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.control-button.minimize {
|
|
background: #fbbf24;
|
|
color: #92400e;
|
|
}
|
|
|
|
.control-button.minimize:hover {
|
|
background: #f59e0b;
|
|
}
|
|
|
|
.control-button.close {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.control-button.close:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.terminal-body {
|
|
flex: 1;
|
|
position: relative;
|
|
background: #000;
|
|
border-radius: 0 0 8px 8px;
|
|
overflow: hidden;
|
|
height: calc(480px - 50px);
|
|
}
|
|
|
|
.terminal-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
color: white;
|
|
z-index: 10;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-top-color: white;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-from {
|
|
opacity: 0;
|
|
}
|
|
|
|
.dark .code-block-container {
|
|
background: #1e1e1e;
|
|
}
|
|
|
|
html:not(.dark) .code-block-container {
|
|
background: #f6f6f6;
|
|
border-color: #e0e0e0;
|
|
}
|
|
|
|
html:not(.dark) .code-block pre {
|
|
color: #333;
|
|
}
|
|
|
|
html:not(.dark) .code-header {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-bottom-color: #e0e0e0;
|
|
}
|
|
|
|
html:not(.dark) .language-badge {
|
|
color: #666;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.terminal-window {
|
|
width: 90vw !important;
|
|
max-width: 650px;
|
|
height: 70vh !important;
|
|
max-height: 480px;
|
|
left: 5vw !important;
|
|
top: 15vh !important;
|
|
}
|
|
}
|
|
</style> |