lint: format

This commit is contained in:
pskfyi 2022-01-05 11:19:51 -08:00 committed by pskfyi
parent 2b4ab9c6ea
commit 977a598e42
4 changed files with 84 additions and 73 deletions

View File

@ -1,35 +1,33 @@
<template>
<div>
<button @click="add"> add {{addIncrement}} </button>
<button @click="stepup"> add to the adding </button>
<div> big value = {{ bigvalue }} </div>
<button @click="add">add {{ addIncrement }}</button>
<button @click="stepup">add to the adding</button>
<div>big value = {{ bigvalue }}</div>
</div>
</template>
<script>
// import Decimal from "break_infinity.js";
export default {
name: 'InfinityTester',
data () {
data() {
return {
addIncrement: 0,
bigvalue: 0,
}
},
methods: {
add () {
// eslint-disable-next-line no-console
console.log("!")
this.bigvalue = 0;
},
add() {
// eslint-disable-next-line no-console
console.log('!')
this.bigvalue = 0
},
stepup () {
this.addIncrement += 100;
}
}
stepup() {
this.addIncrement += 100
},
},
}
</script>

View File

@ -1,10 +1,12 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="button_clicky()"> Click Me </button>
<div> clicks = {{ clicks }} </div>
<button @click="button_clicky()">Click Me</button>
<div>clicks = {{ clicks }}</div>
<ul>
<li v-for="value in testvalues.slice(0, clicks)" :key="value">{{value}}</li>
<li v-for="value in testvalues.slice(0, clicks)" :key="value">
{{ value }}
</li>
</ul>
</div>
</template>
@ -12,7 +14,7 @@
<script>
export default {
name: 'JohnHacks',
data () {
data() {
return {
msg: 'John copies files and makes a mess',
testvalues: [1, 1, 2, 3, 5, 8, 13, 21],
@ -20,12 +22,12 @@ export default {
}
},
methods: {
button_clicky () {
// eslint-disable-next-line no-console
console.log("!")
this.clicks += 1
}
}
button_clicky() {
// eslint-disable-next-line no-console
console.log('!')
this.clicks += 1
},
},
}
</script>

View File

@ -1,59 +1,75 @@
<template>
<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
<nav class="flex flex-col sm:flex-row">
<button id="tab1" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500" @click="tabclicked(1)">
Tab 1
</button><button id="tab2" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(2)">
Tab 2
</button><button id="tab3" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(3)">
Tab 3
</button><button id="tab4" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(4)">
Tab 4
</button>
<button
id="tab1"
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
@click="tabclicked(1)"
>
Tab 1</button
><button
id="tab2"
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
@click="tabclicked(2)"
>
Tab 2</button
><button
id="tab3"
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
@click="tabclicked(3)"
>
Tab 3</button
><button
id="tab4"
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
@click="tabclicked(4)"
>
Tab 4
</button>
</nav>
<JohnHacks id="tabcontents1" class="tabshown" />
<InfinityTester id="tabcontents2" class="tabhidden" />
<JohnHacks id="tabcontents3" class="tabhidden" />
<JohnHacks id="tabcontents4" class="tabhidden" />
</div>
</div>
</template>
<script>
export default {
name: 'TabNav',
data () {
return {}
},
methods: {
tabclicked (tabnumber) {
const tabSelected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
const tabDeselected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
console.log("clicked " + tabnumber)
for (let i = 1; i <= 4; i++) {
const tabE = document.getElementById("tab" + i)
const viewE = document.getElementById("tabcontents" + i)
if (i === tabnumber) {
tabE.className = tabSelected
viewE.className = "tabshown"
}
else {
tabE.className = tabDeselected
viewE.className = "tabhidden"
}
}
name: 'TabNav',
data() {
return {}
},
methods: {
tabclicked(tabnumber) {
const tabSelected =
'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500'
const tabDeselected =
'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none'
console.log('clicked ' + tabnumber)
for (let i = 1; i <= 4; i++) {
const tabE = document.getElementById('tab' + i)
const viewE = document.getElementById('tabcontents' + i)
if (i === tabnumber) {
tabE.className = tabSelected
viewE.className = 'tabshown'
} else {
tabE.className = tabDeselected
viewE.className = 'tabhidden'
}
}
}
},
},
}
</script>
<style scoped>
.tabshown {
display: show;
display: show;
}
.tabhidden {
display: none;
display: none;
}
</style>

View File

@ -1,12 +1,8 @@
<template>
<div class="gridcontainer container mx-auto bg-red-500">
<header>
I'm a header. Check this box
</header>
<TabNav/>
<footer>
This is a game jam game.
</footer>
<header>I'm a header. Check this box</header>
<TabNav />
<footer>This is a game jam game.</footer>
</div>
</template>
@ -18,19 +14,18 @@ export default {
<style scoped>
.gridcontainer {
display: grid | inline-grid;
display: grid;
}
header {
grid-row: 1;
grid-row: 1;
}
.gridcenter {
grid-row: 2;
grid-row: 2;
}
footer {
grid-row: 3;
grid-row: 3;
}
</style>