mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Merge branch 'feat/games'
This commit is contained in:
Sam Carlton
commit
f6aa1ca046
9 changed files with 449 additions and 10 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -84,3 +84,4 @@ dist
|
|||
# Other
|
||||
/app-list.json
|
||||
/README-temp.md
|
||||
/game-list.json
|
||||
|
|
|
|||
|
|
@ -162,6 +162,10 @@ export default {
|
|||
label: 'Entertainment',
|
||||
url: '/kind/entertainment-and-media-apps',
|
||||
},
|
||||
{
|
||||
label: 'Games',
|
||||
url: '/games',
|
||||
},
|
||||
])
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -56,14 +56,19 @@
|
|||
class="relative"
|
||||
>
|
||||
<a
|
||||
:href="`/app/${ app.slug }`"
|
||||
:href="app.endpoint"
|
||||
class="flex items-center hover:neumorphic-shadow hover:bg-gradient-to-br from-darkest to-dark focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg -mx-5 px-4 py-4 sm:px-6"
|
||||
>
|
||||
<div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker">
|
||||
{{ app.name.charAt(0) }}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 px-4 md:mr-48">
|
||||
<div class="text-sm leading-5 font-light truncate">{{ app.name }}</div>
|
||||
<div class="text-sm leading-5 font-light truncate">
|
||||
<span v-if="app.endpoint.includes('/game/')">
|
||||
🕹
|
||||
</span>
|
||||
{{ app.name }}
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
|
||||
{{ app.text }}
|
||||
</div>
|
||||
|
|
@ -82,7 +87,10 @@
|
|||
|
||||
<div class="search-item-options-container h-full flex justify-center md:justify-end items-center py-4 md:px-12">
|
||||
|
||||
<div class="subscribe space-y-6 sm:space-x-6">
|
||||
<div
|
||||
v-if="noEmailSubscribe !== false"
|
||||
class="subscribe space-y-6 sm:space-x-6"
|
||||
>
|
||||
<EmailSubscribe
|
||||
:app-name="app.name"
|
||||
:input-class-groups="{
|
||||
|
|
@ -111,7 +119,7 @@
|
|||
<script>
|
||||
import scrollIntoView from 'scroll-into-view-if-needed'
|
||||
|
||||
import appList from '~/app-list.json'
|
||||
// import appList from '~/app-list.json'
|
||||
|
||||
import EmailSubscribe from '~/components/email-subscribe.vue'
|
||||
|
||||
|
|
@ -130,7 +138,11 @@ export default {
|
|||
props: {
|
||||
appList: {
|
||||
type: Array,
|
||||
default: () => appList
|
||||
required: true
|
||||
},
|
||||
noEmailSubscribe: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
quickButtons: {
|
||||
type: Array,
|
||||
|
|
@ -236,11 +248,18 @@ export default {
|
|||
return matches
|
||||
},
|
||||
statusIs (query, app) {
|
||||
|
||||
// if (typeof app.status !== 'string') {
|
||||
// console.log('app', app)
|
||||
// console.log('status', status)
|
||||
// console.log('app.status.includes(status)', app.status.includes(status))
|
||||
// }
|
||||
|
||||
if (!query.includes('status:')) return
|
||||
|
||||
const [_, status] = query.split(':')
|
||||
|
||||
const matches = app.status.includes(status)
|
||||
const matches = app.status.includes(status) || app.status === status
|
||||
|
||||
if (matches) {
|
||||
this.statusResults.push(app)
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@ export default async function () {
|
|||
url,
|
||||
text,
|
||||
slug: appSlug,
|
||||
endpoint: `/app/${appSlug}`,
|
||||
section: {
|
||||
label: sectionTitle,
|
||||
slug: sectionSlug
|
||||
|
|
|
|||
140
helpers/build-game-list.js
Normal file
140
helpers/build-game-list.js
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
|
||||
import { promises as fs } from 'fs'
|
||||
import slugify from 'slugify'
|
||||
import axios from 'axios'
|
||||
|
||||
// import { statuses } from './build-app-list'
|
||||
|
||||
|
||||
// console.log('process.env.GAMES_SOURCE', process.env.GAMES_SOURCE)
|
||||
|
||||
// export const statuses = {
|
||||
// '✅': 'native',
|
||||
// '✳️': 'rosetta',
|
||||
// '⏹': 'no-in-progress',
|
||||
// '🚫': 'no'
|
||||
// }
|
||||
|
||||
const statusesTranslations = {
|
||||
'Native': 'native',
|
||||
'Rosetta': 'rosetta',
|
||||
// '': 'no'
|
||||
}
|
||||
|
||||
const statusesMessages = {
|
||||
'native': '✅ Yes, Full Native Apple Silicon Support',
|
||||
'rosetta': '✳️ Yes, works via Rosetta 2',
|
||||
'no': '🚫 No, not yet supported only works on Intel-based Macs'
|
||||
}
|
||||
|
||||
|
||||
function parseStatus(game) {
|
||||
if (game.Playable === 'no') return 'no'
|
||||
|
||||
// Match status to Sheet Status
|
||||
return statusesTranslations[game['Native/Rosetta']]
|
||||
// for (const statusKey in statusesTranslations) {
|
||||
// console.log("game['Native/Rosetta']", game['Native/Rosetta'])
|
||||
// console.log('statuses[statusKey]', statusesTranslations[game['Native/Rosetta']])
|
||||
// if (game['Native/Rosetta'].includes(statusKey)) {
|
||||
// return statusesTranslations[statusKey]
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
export default async function () {
|
||||
|
||||
// Fetch Sheet data
|
||||
const gamesSheet = await axios
|
||||
.get(process.env.GAMES_SOURCE)
|
||||
.then(function (response) {
|
||||
// handle success
|
||||
return response.data.records
|
||||
})
|
||||
.catch(function (error) {
|
||||
// handle error
|
||||
console.log(error);
|
||||
})
|
||||
|
||||
const gameList = []
|
||||
|
||||
// console.log('gamesSheet', gamesSheet)
|
||||
|
||||
for (const game of gamesSheet) {
|
||||
|
||||
// If there's no title
|
||||
// then stop
|
||||
if (game.Games.length === 0) continue
|
||||
|
||||
// If there's no 'Native/Rosetta' status
|
||||
// then stop
|
||||
if (game['Native/Rosetta'].length === 0) continue
|
||||
|
||||
// Generate slug
|
||||
const slug = slugify(game.Games, {
|
||||
lower: true,
|
||||
strict: true
|
||||
})
|
||||
|
||||
// Find index of game is list so far
|
||||
const gameIndex = gameList.findIndex(game => {
|
||||
return game.slug === slug
|
||||
})
|
||||
|
||||
// Game already has entry
|
||||
if (gameIndex !== -1) {
|
||||
|
||||
// console.log('Existing Game', game)
|
||||
|
||||
gameList[gameIndex].reports.push(game)
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
|
||||
const status = parseStatus(game)
|
||||
|
||||
if (typeof status !== 'string') {
|
||||
console.warn('Non-string status', game)
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
gameList.push({
|
||||
name: game.Games,
|
||||
status,
|
||||
url: `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
|
||||
text: statusesMessages[status],
|
||||
slug,
|
||||
endpoint: `/game/${slug}`,
|
||||
section: {
|
||||
label: 'Games',
|
||||
slug: 'games'
|
||||
},
|
||||
content: '',
|
||||
relatedLinks: [
|
||||
{
|
||||
"href": `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
|
||||
"label": "View"
|
||||
}
|
||||
],
|
||||
reports: [
|
||||
game
|
||||
]
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// console.log('gameList', gameList)
|
||||
|
||||
|
||||
return gameList
|
||||
|
||||
// fs.readFile('../README.md', 'utf8')
|
||||
// .then((err, data) => {
|
||||
// const result = md.parse(data)
|
||||
// console.log('result', result)
|
||||
|
||||
// return result
|
||||
// })
|
||||
}
|
||||
|
|
@ -3,22 +3,35 @@ import path from 'path'
|
|||
|
||||
import pkg from './package'
|
||||
import buildAppList from './helpers/build-app-list.js'
|
||||
import buildGamesList from './helpers/build-game-list.js'
|
||||
|
||||
|
||||
const storeAppList = async function (builder) {
|
||||
// TODO: Make DRY
|
||||
|
||||
const appListPath = path.join(
|
||||
// builder.nuxt.options.buildDir,
|
||||
builder.nuxt.options.srcDir,
|
||||
'/app-list.json'
|
||||
)
|
||||
|
||||
const gamesListPath = path.join(
|
||||
// builder.nuxt.options.buildDir,
|
||||
builder.nuxt.options.srcDir,
|
||||
'/game-list.json'
|
||||
)
|
||||
|
||||
const appList = await buildAppList()
|
||||
const gamesList = await buildGamesList()
|
||||
|
||||
// console.log('builder.nuxt.options', builder.nuxt.options)
|
||||
await fs.writeFile(appListPath, JSON.stringify(appList))
|
||||
await fs.writeFile(gamesListPath, JSON.stringify(gamesList))
|
||||
}
|
||||
|
||||
|
||||
// console.log('process.env.GAMES_SOURCE', process.env.GAMES_SOURCE)
|
||||
|
||||
export default {
|
||||
target: 'static',
|
||||
|
||||
|
|
@ -43,9 +56,16 @@ export default {
|
|||
]
|
||||
},
|
||||
routes() {
|
||||
return import('./app-list.json')//buildAppList()
|
||||
.then((importedAppList) => {
|
||||
return Promise.all([
|
||||
import('./app-list.json'),
|
||||
import('./game-list.json')
|
||||
])
|
||||
.then(([
|
||||
importedAppList,
|
||||
importedGameList
|
||||
]) => {
|
||||
const appList = importedAppList.default
|
||||
const gameList = importedGameList.default
|
||||
// console.log('appList', appList)
|
||||
|
||||
const appRoutes = appList.map(app => ({
|
||||
|
|
@ -53,6 +73,11 @@ export default {
|
|||
// payload: appList
|
||||
}))
|
||||
|
||||
const gameRoutes = gameList.map(game => ({
|
||||
route: '/game/' + game.slug,
|
||||
// payload: appList
|
||||
}))
|
||||
|
||||
const sectionList = []
|
||||
|
||||
appList.forEach(app => {
|
||||
|
|
@ -68,6 +93,7 @@ export default {
|
|||
|
||||
return [
|
||||
...appRoutes,
|
||||
...gameRoutes,
|
||||
...sectionRoutes
|
||||
]
|
||||
})
|
||||
|
|
|
|||
150
pages/game/_slug.vue
Normal file
150
pages/game/_slug.vue
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<section class="container py-32">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<h1 class="title text-sm md:text-2xl font-semibold">
|
||||
Does {{ app.name }} work on Apple Silicon?
|
||||
</h1>
|
||||
<h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
|
||||
{{ app.text }}
|
||||
</h2>
|
||||
|
||||
<!-- <div class="subscribe space-y-6 sm:space-x-6 mb-4">
|
||||
<EmailSubscribe
|
||||
:app-name="app.name"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<small class="test-sm opacity-75 mb-4">
|
||||
<span>Data generously provided by </span>
|
||||
<span>
|
||||
<a
|
||||
href="https://twitter.com/__tosh"
|
||||
class="font-bold"
|
||||
>Thomas Schranz</a>
|
||||
</span>
|
||||
<span>via</span>
|
||||
<span>
|
||||
<a
|
||||
href="https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0"
|
||||
class="font-bold"
|
||||
>Games and Apps on Apple Silicon</a>
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<div class="links space-y-6 sm:space-x-6 mb-8">
|
||||
<LinkButton
|
||||
v-for="(link, i) in app.relatedLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
target="_blank"
|
||||
class=""
|
||||
>{{ (i === 0) ? 'View' : link.label }}</LinkButton>
|
||||
</div>
|
||||
|
||||
<h2 class="subtitle text-xl md:text-2xl font-bold py-6">
|
||||
Reports
|
||||
</h2>
|
||||
|
||||
<ul class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
|
||||
|
||||
<li
|
||||
v-for="(report, i) in app.reports"
|
||||
:key="`${app.slug}-${i}`"
|
||||
class="col-span-1 rounded-lg border w-full md:w-64"
|
||||
>
|
||||
<div class="w-full flex items-center justify-between p-6">
|
||||
<div class="flex-1">
|
||||
<div class="space-x-3">
|
||||
<h3 class="text-sm leading-5 font-medium">{{ report['Specs'] }}</h3>
|
||||
<span class="flex-shrink-0 inline-block px-2 py-0.5 text-teal-800 text-xs leading-4 font-medium bg-teal-100 rounded-full">{{ report['FPS'] }}</span>
|
||||
</div>
|
||||
<p class="mt-1 text-sm leading-5">{{ report['Notes'] }}</p>
|
||||
<p
|
||||
v-if="report['Resolution'].length !== 0"
|
||||
class="mt-1 text-sm leading-5"
|
||||
>
|
||||
🖥 {{ report['Resolution'] }}
|
||||
</p>
|
||||
<p
|
||||
v-if="report['Settings'].length !== 0"
|
||||
class="mt-1 text-sm leading-5"
|
||||
>
|
||||
⚙️ {{ report['Settings'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="report['Source'].length !== 0"
|
||||
class="border-t border-gray-200"
|
||||
>
|
||||
<div class="-mt-px flex">
|
||||
<div class="w-0 flex-1 flex border-r border-gray-200">
|
||||
<a
|
||||
:href="report['Source']"
|
||||
class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
|
||||
>
|
||||
<!-- Heroicon name: mail -->
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||
</svg>
|
||||
<span class="ml-3 opacity-75">Source</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="report-links py-24 shadow-none">
|
||||
<!-- https://eric.blog/2016/01/08/prefilling-github-issues/ -->
|
||||
<a
|
||||
:href="`https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0`"
|
||||
target="_blank"
|
||||
class="text-xs"
|
||||
rel="noopener"
|
||||
>Report Update</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
import EmailSubscribe from '~/components/email-subscribe.vue'
|
||||
import gameList from '~/game-list.json'
|
||||
// import buildAppList from '~/helpers/build-app-list'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LinkButton,
|
||||
EmailSubscribe
|
||||
},
|
||||
async asyncData ({ params: { slug } }) {
|
||||
|
||||
return {
|
||||
slug,
|
||||
app: gameList.find(app => (app.slug === slug))
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `Does ${this.app.name} work on Apple Silicon?`,
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
93
pages/games.vue
Normal file
93
pages/games.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<section class="container py-24">
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="title text-4xl md:text-6xl font-hairline leading-tight text-center">
|
||||
Does it ARM?
|
||||
</h1>
|
||||
<h2 class="subtitle md:text-xl font-light text-center">
|
||||
Games that are reported to support Apple Silicon
|
||||
</h2>
|
||||
|
||||
<small class="opacity-75">
|
||||
<span>Data generously provided by </span>
|
||||
<span>
|
||||
<a
|
||||
href="https://twitter.com/__tosh"
|
||||
class="font-bold"
|
||||
>Thomas Schranz</a>
|
||||
</span>
|
||||
<span>via</span>
|
||||
<span>
|
||||
<a
|
||||
href="https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0"
|
||||
class="font-bold"
|
||||
>Games and Apps on Apple Silicon</a>
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<Search
|
||||
:app-list="gameList"
|
||||
:quick-buttons="quickButtons"
|
||||
no-email-subscribe
|
||||
@update:query="query = $event"
|
||||
/>
|
||||
|
||||
<LinkButton
|
||||
:href="`https://docs.google.com/spreadsheets/d/1er-NivvuIheDmIKBVRu3S_BzA_lZT5z3Z-CxQZ-uPVs/edit#gid=0`"
|
||||
>
|
||||
Report a Game
|
||||
</LinkButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from '~/components/search.vue'
|
||||
import LinkButton from '~/components/link-button.vue'
|
||||
|
||||
import gameList from '~/game-list.json'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Search,
|
||||
LinkButton
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
query: '',
|
||||
quickButtons: [
|
||||
{
|
||||
label: '✅ Full Native Support',
|
||||
query: 'status:native'
|
||||
},
|
||||
{
|
||||
label: '✳️ Rosetta',
|
||||
query: 'status:rosetta'
|
||||
},
|
||||
{
|
||||
label: '🚫 Unsupported',
|
||||
query: 'status:no'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
gameList() {
|
||||
return gameList
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: `Games supported on Apple Silicon - Does it ARM`,
|
||||
// meta: [
|
||||
// // hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
||||
// {
|
||||
// hid: 'description',
|
||||
// name: 'description',
|
||||
// content: 'My custom description'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
</h2>
|
||||
|
||||
<Search
|
||||
:app-list="appList"
|
||||
@update:query="query = $event"
|
||||
/>
|
||||
|
||||
|
|
@ -26,6 +27,7 @@ import Search from '~/components/search.vue'
|
|||
import LinkButton from '~/components/link-button.vue'
|
||||
|
||||
import appList from '~/app-list.json'
|
||||
import gameList from '~/game-list.json'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -34,12 +36,15 @@ export default {
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
query: ''
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
appList() {
|
||||
return appList
|
||||
return [
|
||||
...appList,
|
||||
...gameList
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue