jshiffer/wordle-xdc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: jshiffer:main
Branches Tags
jshiffer:webxdc
jshiffer:main
jshiffer:0.1.0
..
compare: jshiffer:webxdc
Branches Tags
jshiffer:webxdc
jshiffer:main
jshiffer:0.1.0

4 Commits
main ... webxdc

Author SHA1 Message Date
James Shiffer
b924ce91fc Add icon and manifest 2025-04-23 17:31:36 -07:00
James Shiffer
f8b9130505 Update .gitignore 2025-04-23 14:26:40 -07:00
James Shiffer
87f72ba8f3 Update README.md 2025-04-23 14:01:05 -07:00
James Shiffer
4c4898342b Update Vue and package game in an .xdc 2025-04-23 13:53:10 -07:00
14 changed files with 2269 additions and 566 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ node_modules
dist dist
dist-ssr dist-ssr
*.local *.local
wordle.xdc

12
README.md
View File

@ -1,9 +1,11 @@
# Vue Wordle # Wordle.xdc
[Live demo](https://vue-wordle.netlify.app/) This is a fork of [VVordle](https://github.com/yyx990803/vue-wordle), a Vue.js clone of Wordle, which I repackaged for WebXDC, so you can play with your friends on Delta Chat or Cheogram.
A Vue implementation of the [Wordle game](https://www.powerlanguage.co.uk/wordle/). This is just for fun and doesn't aim to 100% replicate the original. [**Download Wordle.xdc**](https://git.linux.ucla.edu/jshiffer/wordle.xdc/releases)
You can make your own Wordle and send it to friends by base64-encoding a word and include it as the URL query, e.g. https://vue-wordle.netlify.app/?YmxpbXA= (this will also allow words that are not in the dictionary.) [VVordle live demo](https://vue-wordle.netlify.app/)
This repository is open sourced for learning purposes only - the original creator(s) of Wordle own all applicable rights to the game itself. This is just for fun and doesn't aim to 100% replicate the original.
This repository is open sourced for learning purposes only - the New York Times owns all applicable rights to the game itself.

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>;
}
}

5
index.html
View File

@ -2,9 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/icon.png" />
<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>

2755
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
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"
} }
} }

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

2
public/manifest.toml Normal file
View File

@ -0,0 +1,2 @@
name = "Wordle"
source_code_url = "https://git.linux.ucla.edu/jshiffer/wordle-xdc"

21
src/Game.vue
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
> >

4
src/types.ts
View File

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

3
tsconfig.json
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/**/*"]
} }

6
vite.config.ts
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
})]
}) })