Update Vue and package game in an .xdc

This commit is contained in:
James Shiffer 2025-04-23 13:53:10 -07:00
parent ce61ee3e6e
commit 4c4898342b
9 changed files with 2257 additions and 559 deletions

3
bundle-xdc.sh Executable file
View File

@ -0,0 +1,3 @@
#!/bin/bash
npm run build
(cd dist && zip -9 --recurse-paths - *) > wordle.xdc

8
env.d.ts vendored
View File

@ -1 +1,9 @@
/// <reference types="vue/macros-global" /> /// <reference types="vue/macros-global" />
import { Webxdc } from "webxdc-types";
import { Payload } from "./src/types";
declare global {
interface Window {
webxdc: Webxdc<Payload>;
}
}

View File

@ -4,7 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VVordle - a Wordle clone with Vue.js</title> <script src="webxdc.js"></script>
<title>WorldeXDC - a Wordle clone for WebXDC</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2759
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -10,7 +10,10 @@
"vue": "^3.2.25" "vue": "^3.2.25"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^2.0.0", "@vitejs/plugin-vue": "^5.2.3",
"vite": "^2.7.2" "@vue-macros/reactivity-transform": "^3.0.0-beta.8",
"vite": "^6.3.2",
"vite-plugin-singlefile": "^2.2.0",
"webxdc-types": "^1.0.1"
} }
} }

View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { onUnmounted } from 'vue' import { onUnmounted } from 'vue'
import { $ref, $computed } from 'vue/macros'
import { getWordOfTheDay, allWords } from './words' import { getWordOfTheDay, allWords } from './words'
import Keyboard from './Keyboard.vue' import Keyboard from './Keyboard.vue'
import { LetterState } from './types' import { LetterState } from './types'
@ -33,6 +34,8 @@ const letterStates: Record<string, LetterState> = $ref({})
// Handle keyboard input. // Handle keyboard input.
let allowInput = true let allowInput = true
const webxdc = window.webxdc
const onKeyup = (e: KeyboardEvent) => onKey(e.key) const onKeyup = (e: KeyboardEvent) => onKey(e.key)
window.addEventListener('keyup', onKeyup) window.addEventListener('keyup', onKeyup)
@ -70,6 +73,18 @@ function clearTile() {
} }
} }
function sendFinalResultGrid(won) {
let caption = webxdc.selfName;
if (won) {
caption += " guessed the word!";
} else {
caption += " didn't guess the word :(";
}
webxdc.sendToChat({
text: caption + '\n\n' + genResultGrid()
});
}
function completeRow() { function completeRow() {
if (currentRow.every((tile) => tile.letter)) { if (currentRow.every((tile) => tile.letter)) {
const guess = currentRow.map((tile) => tile.letter).join('') const guess = currentRow.map((tile) => tile.letter).join('')
@ -110,6 +125,7 @@ function completeRow() {
allowInput = false allowInput = false
if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) { if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
// yay! // yay!
sendFinalResultGrid(true)
setTimeout(() => { setTimeout(() => {
grid = genResultGrid() grid = genResultGrid()
showMessage( showMessage(
@ -128,6 +144,7 @@ function completeRow() {
}, 1600) }, 1600)
} else { } else {
// game over :( // game over :(
sendFinalResultGrid(false)
setTimeout(() => { setTimeout(() => {
showMessage(answer.toUpperCase(), -1) showMessage(answer.toUpperCase(), -1)
}, 1600) }, 1600)
@ -179,10 +196,10 @@ function genResultGrid() {
</div> </div>
</Transition> </Transition>
<header> <header>
<h1>VVORDLE</h1> <h1>WORDLE</h1>
<a <a
id="source-link" id="source-link"
href="https://github.com/yyx990803/vue-wordle" href="https://git.linux.ucla.edu/jshiffer/wordle.xdc"
target="_blank" target="_blank"
>Source</a >Source</a
> >

View File

@ -4,3 +4,7 @@ export const enum LetterState {
PRESENT = 'present', PRESENT = 'present',
ABSENT = 'absent' ABSENT = 'absent'
} }
export type Payload = {
resultGrid: string;
};

View File

@ -9,7 +9,8 @@
"sourceMap": true, "sourceMap": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"lib": ["esnext", "dom"] "lib": ["esnext", "dom"],
"types": ["@vue-macros/reactivity-transform/macros-global"]
}, },
"include": ["env.d.ts", "src/**/*"] "include": ["env.d.ts", "src/**/*"]
} }

View File

@ -1,9 +1,9 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import { viteSingleFile } from 'vite-plugin-singlefile'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue({ plugins: [vue(), ReactivityTransform(), viteSingleFile()]
reactivityTransform: true
})]
}) })