103 lines
5.6 KiB
PHP
103 lines
5.6 KiB
PHP
|
@extends('layouts.app')
|
||
|
|
|
||
|
|
@section('page-title', "Play Online - " . config('app.name'))
|
||
|
|
|
||
|
|
@push('scripts')
|
||
|
|
<script type="text/javascript" src="{{ asset('rom-patcher-js/RomPatcher.webapp.js') }}"></script>
|
||
|
|
@vite('resources/js/PlayOnlineAndPatcher.js')
|
||
|
|
@endpush
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="page-title">
|
||
|
|
<span>Play Online</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="rom-patcher-container" class="patcher-container" x-data="PlayOnline({{ Js::from($patches ?? []) }}, {{ JS::from($emuConfig ?? [])}})">
|
||
|
|
|
||
|
|
<div x-show="!launchGame">
|
||
|
|
|
||
|
|
<div class="patcher-grid">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">1. Original ROM</label>
|
||
|
|
<div class="patcher-dropzone" id="rom-dropzone"
|
||
|
|
:class="{ 'dragover': isRomDragOver, 'has-file': romFileName !== '' }"
|
||
|
|
@click="triggerFileInput('rom-patcher-input-file-rom')"
|
||
|
|
@dragover.prevent="isRomDragOver = true"
|
||
|
|
@dragleave.prevent="isRomDragOver = false"
|
||
|
|
@drop.prevent="isRomDragOver = false; handleDrop($event, 'rom')">
|
||
|
|
|
||
|
|
<input type="file" id="rom-patcher-input-file-rom" style="display: none;" @change="handleInputChange($event, 'rom')" disabled />
|
||
|
|
<i data-lucide="gamepad-2" size="40" :style="romFileName ? 'color: var(--rhpz-orange)' : 'color: var(--text2)'"></i>
|
||
|
|
<span style="color: var(--text); font-weight: 500;" x-text="romFileName ? romFileName : 'Drag n\'drop your file here or click'"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">2. Patch file</label>
|
||
|
|
|
||
|
|
<div class="patcher-dropzone" id="patch-dropzone"
|
||
|
|
x-show="!hasEmbedded"
|
||
|
|
:class="{ 'dragover': isPatchDragOver, 'has-file': patchFileName !== '' }"
|
||
|
|
@click="triggerFileInput('rom-patcher-input-file-patch')"
|
||
|
|
@dragover.prevent="isPatchDragOver = true"
|
||
|
|
@dragleave.prevent="isPatchDragOver = false"
|
||
|
|
@drop.prevent="isPatchDragOver = false; handleDrop($event, 'patch')">
|
||
|
|
|
||
|
|
<input type="file" id="rom-patcher-input-file-patch" style="display: none;" @change="handleInputChange($event, 'patch')" disabled />
|
||
|
|
<i data-lucide="file-archive" size="40" :style="patchFileName ? 'color: var(--rhpz-orange)' : 'color: var(--text2)'"></i>
|
||
|
|
<span style="color: var(--text); font-weight: 500;" x-text="patchFileName ? patchFileName : 'Drag n\'drop your file here or click'"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div x-show="hasEmbedded" class="embed-patch-box">
|
||
|
|
<div class="embed-patch-box-icon">
|
||
|
|
<div class="embed-patch-box-icon-block">
|
||
|
|
<i data-lucide="package" size="24" color="var(--rhpz-orange)"></i>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style="font-weight: 600; color: var(--text); font-size: 1.1rem;">Patch file</div>
|
||
|
|
<div style="font-size: 0.85rem; color: var(--text2);">Select if there is multiple patch files</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="rom-patcher-container-input" style="margin-top: 10px;">
|
||
|
|
<select id="rom-patcher-select-patch" class="form-select" style="width: 100%; cursor: pointer;"></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="patcher-status-box" id="patcher-status" x-show="showStatusBox" x-transition x-cloak style="margin-top: 20px;">
|
||
|
|
<div class="rom-patcher-row" style="color: var(--text2);">
|
||
|
|
<div style="color: var(--rhpz-orange); font-weight: bold;">Checksums:</div>
|
||
|
|
<ul style="margin-bottom: 0">
|
||
|
|
<li>CRC32: <span id="rom-patcher-span-crc32"></span></li>
|
||
|
|
<li>MD5: <span id="rom-patcher-span-md5"></span></li>
|
||
|
|
<li>SHA-1: <span id="rom-patcher-span-sha1"></span></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<span id="rom-patcher-span-rom-info"></span>
|
||
|
|
<div class="rom-patcher-row margin-bottom" id="rom-patcher-row-patch-description">
|
||
|
|
<div style="color: var(--rhpz-orange); font-weight: bold;">Description:</div>
|
||
|
|
<div id="rom-patcher-patch-description"></div>
|
||
|
|
</div>
|
||
|
|
<div class="rom-patcher-row margin-bottom" id="rom-patcher-row-patch-requirements">
|
||
|
|
<div id="rom-patcher-patch-requirements-type" style="color: var(--rhpz-orange); font-weight: bold;">ROM requirements:</div>
|
||
|
|
<div id="rom-patcher-patch-requirements-value"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 25px; border-top: 1px solid var(--border); padding-top: 20px; text-align: right;">
|
||
|
|
<button type="button" class="btn primary" id="rom-patcher-button-apply" disabled>
|
||
|
|
<i data-lucide="wrench" size="16"></i> Launch Game
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="rom-patcher-row-error-message" class="block-error" style="display:none">
|
||
|
|
<span id="rom-patcher-error-message"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div id="game" x-show="launchGame"></div>
|
||
|
|
</div>
|
||
|
|
@endsection
|