gamedev
/
vuejs-tutorial
1
0
Fork 0
Code Issues Pull Requests 17 Projects Releases Wiki Activity

Upgrade to Vue 3 with some fixes still needed

This commit is contained in:
James Skemp 2020-09-20 18:07:46 -05:00
parent e42ee004c1
commit 458aa1e316
11 changed files with 947 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -4,7 +4,7 @@ module.exports = {
node: true
},
'extends': [
'plugin:vue/essential',
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
"plugin:jsdoc/recommended"

1202
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@ -13,31 +13,31 @@
"test:coverageWatch": "jest --coverage --watchAll"
},
"dependencies": {
"@vue/eslint-config-typescript": "^5.1.0",
"bootstrap": "^4.5.2",
"bootstrap-vue": "^2.16.0",
"rpg-dice-roller": "^4.4.1",
"tslib": "^2.0.1",
"vue": "^2.6.12",
"vue-class-component": "^7.2.5",
"vue-property-decorator": "^9.0.0"
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-typescript": "^7.10.4",
"@types/jest": "^26.0.13",
"@typescript-eslint/eslint-plugin": "^4.0.1",
"@typescript-eslint/parser": "^4.0.1",
"@vue/cli-plugin-eslint": "^4.5.4",
"@vue/cli-plugin-typescript": "^4.5.4",
"@vue/cli-service": "^4.5.4",
"@types/jest": "^26.0.14",
"@typescript-eslint/eslint-plugin": "^4.1.1",
"@typescript-eslint/parser": "^4.1.1",
"@vue/cli-plugin-eslint": "^4.5.6",
"@vue/cli-plugin-typescript": "^4.5.6",
"@vue/cli-service": "^4.5.6",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^5.1.0",
"babel-jest": "^26.3.0",
"eslint": "^7.8.1",
"eslint-plugin-jsdoc": "^30.3.1",
"eslint": "^7.9.0",
"eslint-plugin-jsdoc": "^30.3.3",
"eslint-plugin-vue": "^6.1.2",
"jest": "^26.4.2",
"typescript": "^4.0.2",
"typescript": "^4.0.3",
"vue-template-compiler": "^2.6.12"
}
}

10
src/App.vue
View File

@ -1,15 +1,13 @@
<template>
<div id="app">
<!--<img alt="Vue logo" src="./assets/logo.png">-->
<HelloWorld msg="RPG Tester Vue.js + TypeScript App"/>
</div>
<!--<img alt="Vue logo" src="./assets/logo.png">-->
<HelloWorld msg="RPG Tester Vue.js + TypeScript App"/>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
@Component({
@Options({
components: {
HelloWorld
}

13
src/components/CharacterDisplay.vue
View File

@ -58,17 +58,22 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Options, Vue } from 'vue-class-component';
import Character from '../models/Character';
import { getAttackText } from '../utilities/AttackUtilities';
import { getShortBaseStats, getCurrentStats, getStatModifications, getCharacterDesire } from '../utilities/CharacterUtilities';
import Attack from '../models/Attack';
import { desireToText } from '../utilities/Enums';
import Party from '../models/Party';
@Component
@Options({
props: {
party: Party,
character: Character
}
})
export default class CharacterDisplay extends Vue {
@Prop() party!: Party;
@Prop() character!: Character;
party!: Party;
character!: Character;
// TODO remove?
baseStats = '';
// TODO remove?

9
src/components/HelloWorld.vue
View File

@ -7,19 +7,22 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Options, Vue } from 'vue-class-component';
import WorldDisplay from './WorldDisplay.vue';
import TestingControl from './TestingControl.vue';
@Component({
@Options({
components: {
WorldDisplay,
TestingControl
},
props: {
msg: String
}
})
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
msg!: string;
}
</script>

26
src/components/PartyDisplay.vue
View File

@ -2,7 +2,7 @@
<b-container>
<b-row>
<b-col>
<h3>Party {{this.party.id}}</h3>
<h3>Party {{party.id}}</h3>
</b-col>
</b-row>
<b-row>
@ -46,7 +46,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Options, Vue } from 'vue-class-component';
import CharacterDisplay from './CharacterDisplay.vue';
import Party from '../models/Party';
import { partyStateToText } from '../utilities/Enums'
@ -55,15 +55,19 @@ import World from '../models/World';
import { sortBySpeed, sortByHealth, sortByDodge, sortByArmor } from '../utilities/CharacterSortUtilities';
import { addOpponent } from '../utilities/PartyUtilities';
import Character from '../models/Character';
@Component({
@Options({
components: {
CharacterDisplay
},
props: {
world: World,
party: Party
}
})
export default class PartyDisplay extends Vue {
@Prop() private world!: World;
@Prop() private party!: Party;
world!: World;
party!: Party;
stateText = '';
created(): void {
@ -72,28 +76,28 @@ export default class PartyDisplay extends Vue {
displayDisbandParty(): void {
disbandParty(this.world, this.party);
this.$forceUpdate();
//this.$forceUpdate();
this.$emit('party-disbanded', this.party.id);
}
displaySortHealth(): void {
sortByHealth(this.party.mainCharacters);
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortDodge(): void {
sortByDodge(this.party.mainCharacters);
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortArmor(): void {
sortByArmor(this.party.mainCharacters);
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortSpeed(): void {
sortBySpeed(this.party.mainCharacters);
this.$forceUpdate();
//this.$forceUpdate();
}
addOpponent(): void {
@ -103,7 +107,7 @@ export default class PartyDisplay extends Vue {
opponent.baseStats.melee.attacks[0].damage = '1d4';
addOpponent(this.party, opponent, this.world.currentMoment);
this.$forceUpdate();
//this.$forceUpdate();
}
}
</script>

60
src/components/TestingControl.vue
View File

@ -13,48 +13,48 @@
<div>Final results short length: {{ finalResultShortLength }}</div>
<div>
Health:
<input type="number" v-model.number="healthMin" value="" /> -
<input type="number" v-model.number="healthMax" value="" />
<input type="number" v-model.number="healthMin" /> -
<input type="number" v-model.number="healthMax" />
<br />
Attack:
<input type="number" v-model.number="attackMin" value="" /> -
<input type="number" v-model.number="attackMax" value="" />
<input type="number" v-model.number="attackMin" /> -
<input type="number" v-model.number="attackMax" />
<br />
Dodge:
<input type="number" v-model.number="dodgeMin" value="" /> -
<input type="number" v-model.number="dodgeMax" value="" />
<input type="number" v-model.number="dodgeMin" /> -
<input type="number" v-model.number="dodgeMax" />
<br />
Armor:
<input type="number" v-model.number="armorMin" value="" /> -
<input type="number" v-model.number="armorMax" value="" />
<input type="number" v-model.number="armorMin" /> -
<input type="number" v-model.number="armorMax" />
<br />
Speed:
<input type="number" v-model.number="speedMin" value="" /> -
<input type="number" v-model.number="speedMax" value="" />
<input type="number" v-model.number="speedMin" /> -
<input type="number" v-model.number="speedMax" />
<br />
Damage:
<input type="text" v-model="damage" value="" />
<input type="text" v-model="damage" />
<br />
Opponent health:
<input type="number" v-model.number="opponentHealth" value="" />
<input type="number" v-model.number="opponentHealth" />
<br />
Opponent attack:
<input type="number" v-model.number="opponentAttack" value="" />
<input type="number" v-model.number="opponentAttack" />
<br />
Opponent damage:
<input type="text" v-model="opponentDamage" value="" />
<input type="text" v-model="opponentDamage" />
<br />
Opponent dodge:
<input type="number" v-model.number="opponentDodge" value="" />
<input type="number" v-model.number="opponentDodge" />
<br />
Opponent armor:
<input type="number" v-model.number="opponentArmor" value="" />
<input type="number" v-model.number="opponentArmor" />
<br />
Opponent speed:
<input type="number" v-model.number="opponentSpeed" value="" />
<input type="number" v-model.number="opponentSpeed" />
<br />
Times to test:
<input type="number" v-model.number="testTimes" value="" />
<input type="number" v-model.number="testTimes" />
<br />
<button v-on:click="test">Test cases</button>
<button v-on:click="clearTestResults">Clear test results</button>
@ -63,31 +63,31 @@
<div>
<h2>Console World Testing</h2>
Test character max health:
<input type="number" v-model.number="testCharacterMaxHealth" value="" />
<input type="number" v-model.number="testCharacterMaxHealth" />
<br />
Test character current health:
<input type="number" v-model.number="testCharacterCurrentHealth" value="" />
<input type="number" v-model.number="testCharacterCurrentHealth" />
<br />
Test character melee:
<input type="number" v-model.number="testCharacterMelee" value="" />
<input type="number" v-model.number="testCharacterMelee" />
<br />
Test character range:
<input type="number" v-model.number="testCharacterRange" value="" />
<input type="number" v-model.number="testCharacterRange" />
<br />
Test character magic:
<input type="number" v-model.number="testCharacterMagic" value="" />
<input type="number" v-model.number="testCharacterMagic" />
<br />
Test character dodge:
<input type="number" v-model.number="testCharacterDodge" value="" />
<input type="number" v-model.number="testCharacterDodge" />
<br />
Test character armor:
<input type="number" v-model.number="testCharacterArmor" value="" />
<input type="number" v-model.number="testCharacterArmor" />
<br />
Test character speed:
<input type="number" v-model.number="testCharacterSpeed" value="" />
<input type="number" v-model.number="testCharacterSpeed" />
<br />
Test character damage:
<input type="text" v-model="testCharacterDamage" value="" />
<input type="text" v-model="testCharacterDamage" />
<br />
<button v-on:click="addTestCharacter">Add test character</button>
</div>
@ -98,7 +98,7 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Options, Vue } from 'vue-class-component';
import { DiceRoll, DiceRoller } from 'rpg-dice-roller';
import World from '../models/World';
import Character from '../models/Character';
@ -113,7 +113,7 @@ import CharacterData from '../data/CharacterData';
import { getBaseStatsPoints, getBaseStatAttacks } from '../utilities/BaseStatsUtilities';
import { attackPreferenceToText } from '../utilities/Enums';
@Component({})
@Options({})
export default class TestingControl extends Vue {
currentMoment = 0;
@ -590,7 +590,7 @@ export default class TestingControl extends Vue {
}
addTestCharacter(): void {
const testWorld: World = this.$testWorld;
const testWorld: World = (window as any).$testWorld;
const newCharacter = new Character(-1, true);
newCharacter.baseStats.health = this.testCharacterMaxHealth;

16
src/components/WorldDisplay.vue
View File

@ -62,7 +62,7 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Options, Vue } from 'vue-class-component';
import PartyDisplay from './PartyDisplay.vue';
import World from '../models/World';
import { getUnusedPartyId, addPartyToWorld, removeEmptyParties, startNextMoment, createNewWorld } from '../utilities/WorldUtilities';
@ -76,7 +76,7 @@ import { getLatestJournalEntries } from '@/utilities/JournalUtilities';
type EquivalenceResult = { equivalent: boolean, differences: string[] }
@Component({
@Options({
components: {
PartyDisplay
}
@ -167,38 +167,38 @@ export default class WorldDisplay extends Vue {
}
refreshDisplay(): void {
this.$forceUpdate();
//this.$forceUpdate();
}
cleanParties(): void {
removeEmptyParties(this.world);
console.log('cleanParties');
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortByHealth(): void {
sortByHealth(this.world.parties[0].mainCharacters);
console.log('sort by health');
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortByDodge(): void {
sortByDodge(this.world.parties[0].mainCharacters);
console.log('sort by dodge');
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortByArmor(): void {
sortByArmor(this.world.parties[0].mainCharacters);
console.log('sort by armor');
this.$forceUpdate();
//this.$forceUpdate();
}
displaySortBySpeed(): void {
sortBySpeed(this.world.parties[0].mainCharacters);
console.log('sort by speed');
// TODO all of the forceUpdate calls need to be removed
this.$forceUpdate();
//this.$forceUpdate();
}
increaseTime(): void {

14
src/main.ts
View File

@ -1,4 +1,4 @@
import Vue from 'vue';
import { createApp } from 'vue';
import App from './App.vue';
// Only import the layout-related controls.
import { LayoutPlugin } from 'bootstrap-vue';
@ -7,12 +7,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
import World from './models/World';
// Reference the plugin(s) we imported above, here.
Vue.use(LayoutPlugin);
//Vue.use(LayoutPlugin);
// TODO above is not currently supported with Vue 3
Vue.config.productionTip = false;
Vue.prototype.$world = new World();
Vue.prototype.$testWorld = new World();
(window as any).$world = new World();
(window as any).$testWorld = new World();
new Vue({
render: h => h(App)
}).$mount('#app')
createApp(App).mount('#app');

5
src/shims-vue.d.ts vendored
View File

@ -1,4 +1,5 @@
declare module '*.vue' {
import Vue from 'vue'
export default Vue
import { defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}