-
-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: editable scripts with game preview in docs (#221)
* docs(localisation): first version of narrat docs localised in fr/jp/zh * chore: asset url issue * chore(docs|css): vitepress and theme updated, CSS changes Includes CSS changes to make narrat affect other pages less, including the `.nrt-` prefix * chore: narrat preview in docs working * docs: previewable games in docs working * chore: narrat docs editable preview working * chore: wait to be loaded to try to show the custom element * chore: docs preview working, removed annoying big dependency from narrat * chore: missing file due to gitignore
- Loading branch information
Showing
56 changed files
with
1,493 additions
and
583 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,14 @@ | ||
| /* See https://docs.narrat.dev/guides/theming-the-game-and-ui for info on how to customise your game with CSS. */ | ||
|
|
||
| #narrat-app { | ||
| #narrat { | ||
| /* Customise CSS variables here. They will override the existing narrat ones. You can also add your own variables */ | ||
| --bg-color: #131720; | ||
| --text-color: #d9e1f2; | ||
| --primary: hsl(255, 30%, 55%); | ||
| --focus: hsl(210, 90%, 50%); | ||
| --secondary: #42b983; | ||
| /* You can easily override a CSS style by making it more specific than the original one. | ||
| Any css added here will applied to elements inside of #narrat and be likely more specific than their original version */ | ||
| } | ||
|
|
||
| /* Add any other CSS you want here */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // shims-narrat.d.ts | ||
|
|
||
| declare module '*.narrat' { | ||
| import { NarratScript } from 'narrat'; | ||
| const narratScript: NarratScript; | ||
| export default narratScript; | ||
| } | ||
|
|
||
| declare module '*.yaml' { | ||
| import { NarratYaml } from 'narrat'; | ||
| const narratYaml: NarratYaml; | ||
| export default narratYaml; | ||
| } | ||
| declare module '*.yml' { | ||
| import { NarratYaml } from 'narrat'; | ||
| const narratYaml: NarratYaml; | ||
| export default narratYaml; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,59 @@ | ||
| :root { | ||
| /* Original vitepress values: */ | ||
| --vp-c-red-1: #b8272c; | ||
| --vp-c-red-2: #d5393e; | ||
| --vp-c-red-3: #e0575b; | ||
| --vp-c-red-soft: rgba(244, 63, 94, 0.14); | ||
|
|
||
| /* Overriden values@ */ | ||
| --vp-c-red-1: #f66f81; | ||
| --vp-c-red-2: #e75c5c; | ||
| --vp-c-red-3: #dd3e3e; | ||
|
|
||
| /* Deprecated values */ | ||
| --vp-c-brand-darker: #772222; | ||
| --vp-c-brand-dark: #aa3232; | ||
| --vp-c-brand: #e64545; | ||
| --vp-c-brand-light: #e64545; | ||
| --vp-c-brand-lighter: #ff4b4b; | ||
|
|
||
| /* Final brand values */ | ||
| --vp-c-brand-1: var(--vp-c-red-1); | ||
| --vp-c-brand-2: var(--vp-c-red-2); | ||
| --vp-c-brand-3: var(--vp-c-red-3); | ||
| --vp-c-brand-soft: var(--vp-c-red-soft); | ||
|
|
||
| --vp-home-hero-name-background: linear-gradient(120deg, #b82727 30%, #b827b1); | ||
| --vp-home-hero-name-color: transparent; | ||
|
|
||
| /* tips */ | ||
| --vp-c-tip-1: var(--vp-c-indigo-1); | ||
| --vp-c-tip-2: var(--vp-c-indigo-2); | ||
| --vp-c-tip-3: var(--vp-c-indigo-3); | ||
| --vp-c-tip-soft: var(--vp-c-indigo-soft); | ||
| } | ||
|
|
||
| .dark { | ||
| /* --vp-c-bg: #1f0808; */ | ||
| } | ||
|
|
||
| #narrat .replay-button { | ||
| padding: 30px; | ||
| border-radius: 10px; | ||
| font-size: 3rem; | ||
| font-weight: bold; | ||
| border: 2px solid white; | ||
| } | ||
|
|
||
| #narrat { | ||
| --selected-border: 0px; | ||
| .dialog-box { | ||
| margin-top: 10px; | ||
| } | ||
| .dialog-title { | ||
| font-size: 1.7rem; | ||
| } | ||
| .dialog-text { | ||
| font-size: 1.5rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| declare module '*.vue' { | ||
| import { defineComponent } from 'vue'; | ||
|
|
||
| const component: ReturnType<typeof defineComponent>; | ||
| export default component; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
| <pre | ||
| class="editable-code" | ||
| ><code :class="`language-${props.language}`" v-html="highlightedCode"></code></pre> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { defineProps, ref } from 'vue'; | ||
| import hljs from 'highlight.js/lib/core'; | ||
| const props = defineProps<{ | ||
| codeInput: string; | ||
| language: string; | ||
| }>(); | ||
| console.log(props.codeInput); | ||
| const test = `function test() { | ||
| console.log('test'); | ||
| }`; | ||
| const convertedCode = hljs.highlight(test, { | ||
| language: 'javascript', | ||
| }); | ||
| console.log(convertedCode); | ||
| const highlightedCode = ref(convertedCode.value); | ||
| </script> | ||
| <style scoped> | ||
| .editable-code { | ||
| border: 1px solid gray; | ||
| margin-top: 20px; | ||
| margin-bottom: 20px; | ||
| /* background-color: white; */ | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| <template> | ||
| <code-input | ||
| v-if="loaded" | ||
| lang="narrat" | ||
| placeholder="Type code here" | ||
| template="syntax-highlighted" | ||
| :oninput="codeInputChanged" | ||
| :style="{ | ||
| width: '100%', | ||
| height: props.codeHeight + 'px', | ||
| }" | ||
| >{{ props.scriptContent }}</code-input | ||
| > | ||
| <div class="narrat-preview" ref="narratContainer"></div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { onMounted, ref, defineProps, shallowRef } from 'vue'; | ||
| import { gameConfig } from '../data/defaultGameConfig'; | ||
| import { getCodeInput } from '../utils/code-input'; | ||
| const narratContainer = ref<HTMLDivElement | null>(null); | ||
| const isNarratRunning = ref<boolean>(false); | ||
| async function importNarrat() { | ||
| const narrat = await import('narrat'); | ||
| return narrat; | ||
| } | ||
| type NarratModule = Awaited<ReturnType<typeof importNarrat>>; | ||
| const narrat = shallowRef<NarratModule | null>(null); | ||
| const loaded = ref(false); | ||
| const props = defineProps<{ | ||
| scriptContent: string; | ||
| autoJumpOnChange: boolean; | ||
| codeHeight: number; | ||
| }>(); | ||
| const script = ref({ | ||
| fileName: 'demo-script.narrat', | ||
| code: props.scriptContent, | ||
| id: 'demo-script', | ||
| type: 'script', | ||
| }); | ||
| function scriptToNarratModule(): { | ||
| default: any; | ||
| } { | ||
| return { | ||
| default: { | ||
| fileName: script.value.fileName, | ||
| code: script.value.code, | ||
| id: script.value.id, | ||
| type: 'script', | ||
| }, | ||
| }; | ||
| } | ||
| function codeInputChanged(el) { | ||
| const newCode = el.target.value; | ||
| script.value.code = newCode; | ||
| narrat.value.handleHMR(scriptToNarratModule() as any); | ||
| if (props.autoJumpOnChange) { | ||
| jumpBackToLabel(); | ||
| } | ||
| } | ||
| onMounted(async () => { | ||
| await readyCodeInput(); | ||
| loaded.value = true; | ||
| narrat.value = await importNarrat(); | ||
| launchNarratGame(); | ||
| }); | ||
| async function readyCodeInput() { | ||
| const codeInput = await getCodeInput(); | ||
| console.log('uwu ', codeInput); | ||
| } | ||
| function launchNarratGame() { | ||
| if (narratContainer.value) { | ||
| if (!isNarratRunning.value) { | ||
| startNarratApp(); | ||
| } | ||
| } else { | ||
| console.error('narratContainer is null'); | ||
| } | ||
| } | ||
| function stopNarratGame() { | ||
| narrat.value.stopApp(); | ||
| isNarratRunning.value = false; | ||
| } | ||
| function jumpBackToLabel() { | ||
| const vm = narrat.value.useVM(); | ||
| vm.jumpToLabel('main'); | ||
| } | ||
| function startNarratApp() { | ||
| narrat.value.startApp({ | ||
| debug: true, | ||
| logging: false, | ||
| scripts: [script.value], | ||
| container: narratContainer.value!, | ||
| config: gameConfig as any, | ||
| }); | ||
| isNarratRunning.value = true; | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .narrat-preview { | ||
| width: 100%; | ||
| aspect-ratio: 1280/720; | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template> | ||
| <ClientOnly> | ||
| <NarratPreview | ||
| :scriptContent="scriptContent" | ||
| :autoJumpOnChange="autoJumpOnChange" | ||
| :codeHeight="codeHeight" | ||
| /> | ||
| </ClientOnly> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import NarratPreview from './NarratPreview.vue'; | ||
| import { defineProps } from 'vue'; | ||
| defineProps<{ | ||
| scriptContent: string; | ||
| autoJumpOnChange: boolean; | ||
| codeHeight: number; | ||
| }>(); | ||
| </script> |
Oops, something went wrong.