Skip to content

Commit

Permalink
Template for Umineko Warning (See #212)
Browse files Browse the repository at this point in the history
  • Loading branch information
@drojf
drojf committed May 28, 2023
1 parent 4110d4d commit 3d5fbc2
Show file tree
Hide file tree
Showing 5 changed files with 300 additions and 3 deletions.
2 changes: 1 addition & 1 deletion httpGUI/python-patcher-index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ window.onload = function onWindowLoaded() {
},
methods: {
nav(gameName) {
setModNameAndNavigate(gameName);
setModNameAndNavigate(gameName, gameName.toLowerCase().includes('umineko') ? 'umineko-warning.html' : 'installer.html');
},
// if subModExtraProperties missing a game, use wrong image
// to make it obvious that the table needs to be updated
Expand Down
4 changes: 2 additions & 2 deletions httpGUI/python-patcher-rest-lib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,11 @@ function doPost(requestType, requestData, onSuccessCallback, timeout, onErrorCal
}

// TODO: should always navigate to the same install page, as it is shared amongst all games
function setModNameAndNavigate(modName) {
function setModNameAndNavigate(modName, targetURL) {
doPost('setModName', { modName }, (response) => {
console.log(response);
if (response.valid) {
window.location.href = 'installer.html';
window.location.href = targetURL ?? 'installer.html';
} else {
alert(`Error: "${modName}" is not the name of a mod in the JSON config file. Check web console for a list of valid mod names`);
console.error('Invalid Mod Name! Valid names below:');
Expand Down
86 changes: 86 additions & 0 deletions httpGUI/python-patcher-umineko-warning.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
'use strict';

let app = null;

// <python-pather-rest-lib.js should be included before this file>
// TODO: use proper javascript import
// When the main window is loaded
// - Vue components are defined
// - Main Vue instance, called 'app', is initialized
// - the subModHandles are retrieved from the python server to populate the app.subModList property
window.onload = function onWindowLoaded() {

// Forces all links which have been sanitized to open in new window (in this case, markdown links)
// See https://github.com/cure53/DOMPurify/issues/317#issuecomment-698800327
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
if ('target' in node) {
node.setAttribute('target', '_blank');
node.setAttribute('rel', 'noopener');
}
});

app = new Vue({
el: '#app',
data: {
subModList: [],
masonryInitialized: false,
donationProgress: 'N months',
donationMonthsRemaining: 'XXX%',
metaInfo: {
buildInfo: '', // Installer Build Version and Date
installerIsLatest: [null, ''], // 2- Tuple of whether installer is latest, and description of version information
lockFileExists: false, // This indicates if a install is already running in a different instance, or a previous install was killed while running
operatingSystem: '', // The operating system - either 'windows', 'linux', or 'mac'
installAlreadyInProgress: false, // This is true if the install is currently running. Use to resume displaying an ongoing installation if the user accidentally closed the browser tab.
donationMonthsRemaining: '', // How many months the server can be paid for with current funding
donationProgressPercent: '', // How close funding is to the 12 month donation goal, in percent
},
modalVisible: false,
},
methods: {
nav(gameName) {
setModNameAndNavigate(gameName);
},
clearModal() {
doPost('clearLatestInstallerWarning', [], () => {});
this.modalVisible = false;
},
},
computed: {
versionInfoAvailable() {
return this.metaInfo.installerIsLatest[0] !== null;
},
},
watch: {

},
updated() {
// call initializeMasonry() from the theme's javascript js/script.js, on the first update call
if (!this.masonryInitialized) {
this.masonryInitialized = true;
initializeMasonry();
}
},
created() {
// populate the app.subModList with subMods from the python server
doPost('subModHandles', [], (responseData) => {
app.subModList = responseData.subModHandles;
const modNameToSubModHandleMap = {};
console.log(responseData);
responseData.subModHandles.forEach((subModHandle) => {
modNameToSubModHandleMap[subModHandle.modName] = subModHandle;
});

app.metaInfo = responseData.metaInfo;
if (app.metaInfo.installerIsLatest[0] !== true) {
app.modalVisible = true;
}

// Force user back to the install page if the tried to leave
if (app.metaInfo.installAlreadyInProgress) {
window.location = 'installer.html';
}
});
},
});
};
22 changes: 22 additions & 0 deletions httpGUI/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,3 +386,25 @@ The snackbar - position it at the bottom and in the middle of the screen */
font-weight: bold;
color: black;
}

.button-tabs .warning-tab-title {
padding: 13px;
display: inline-block;
text-align: center;
min-width: 150px;
background: red;
color: #fff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}

.button-tabs .warning-tab-title:hover {
background: brown;
}
189 changes: 189 additions & 0 deletions httpGUI/umineko-warning.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@

<!doctype html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="favicon.png" />
<meta charset="utf-8">
<title>07th-Mod Installer Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/flexslider.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<link href='https://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="app" class="main-container" v-cloak>
<div id="modal-container" >
<modal v-bind:visible="modalVisible" v-on:close="clearModal()">
<div v-if="versionInfoAvailable">
<h3>New Installer Available</h3>
<p>{{metaInfo.installerIsLatest[1]}}</p>
<p>You should update the installer to get bug-fixes and new features.</p>
</div>
<div v-else>
<h3>Error while checking if installer is latest</h3>
<p>{{metaInfo.installerIsLatest[1]}}</p>
<p>If you're sure you have the latest version, click "Use Old Installer", and ignore this message.</p>
<p>Otherwise please go to the installer download page and make sure you have the latest version.</p>
</div>
<a href="https://github.com/07th-mod/python-patcher/releases" target="_blank"><button type="button" class="btn">Go to installer download page</button></a>
<button type="button" class="btn" style="border: grey;" v-on:click="clearModal()">Use old installer (not recommended)</button>
</modal>
</div>

<div class="nav-container">
<nav>
<div class="nav-bar">
<div class="module left">
<a href="index.html">
<img class="logo logo-dark" alt="07th-Mod Installer" src="img/logo-07th.png">
</a>
</div>
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<i class="ti-menu"></i>
</div>
<div class="module-group right">
<div class="module left">
<dropdown-game-menu v-bind:handles="subModList"></dropdown-game-menu>
</div>
</div>
</div>
</nav>
</div>

<div class="main-container">
<snack-bar></snack-bar>
<section class="page-title page-title-4 bg-secondary">
<div class="container">
<div class="row">
<div class="col-md-8">
<h3 class="uppercase mb0">Alternate Mod Recommendation</h3>
</div>
<div class="col-md-4 text-right">
<ol class="breadcrumb breadcrumb-2">
<li>
<a href="index.html" target="_self">Home</a>
</li>
<li class="active">Umineko Warning<br></li>
</ol>
</div>
</div>
</div>
</section>

<section class="pt48">
<div class="container">

<!-- Old Warning Message-->
<div style='border-left: solid #ff9100 5px; padding: 20px; margin: 0px;'>
<div style='font-weight: bold; background-color: rgba(255,145,0,.1); padding: 10px 0px 10px 0px; margin-bottom: 10px; text-align: center'>Alternate mod recommendation</div>
<p>The 07th-Mod patches for Tsubasa, Hane and Saku were never fully completed. As of now, the Hane patch is the only one to have full voice and widescreen support, while the other two are simple graphic replacement packs with console sprites. All patches are also missing CGs and advanced features such as animations and lip sync.</p>

<p>If you are able to emulate or hack a Nintendo Switch we recommend patching the Switch game to run in English instead. You may find instructions on how to do so <a href='https://andolga.github.io/umineko-catbox-english/' target="_blank">here</a>.</p>

<p>The legacy patches will remain available for download in their unfinished state. If you are certain you would like to play with them, you may download them here.</p>
</div>

<br>
<br>

<!-- Dot Points Example-->
This patch installs all PS3 content that the team has ported so far:
<ul class="installer-bullets">
<li>Has ADV mode, where text is shown in a textbox at the bottom of the screen. In the Question Arcs only, this can be toggled on or off at any time.</li>
<li>Japanese Text is ONLY supported with the <strong>Experimental Script</strong> option</li>
<li>PS3 voices</li>
<li>PS3 sprites</li>
<li>PS3 CGs (event images)</li>
<li>PS3 Backgrounds</li>
<li>Remake of original OP with PS3 graphics OR (spoilery) PS3 Game's OP movie (user option on startup)</li>
<li>DOES NOT add shader effects or lipsync from the PS3 game.</li>
</ul>

<br>
<br>

<!-- Table example-->
<table class="umineko-image-table-content">
<thead>
<tr>
<th>Alchemist/PS3 sprites</th>
<th>Mangagamer/Pachinko sprites</th>
<th>Ryukishi sprites</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/umineko/sprite_alchemist.png"></td>
<td><img src="img/umineko/sprite_pachinko.png"></td>
<td><img src="img/umineko/sprite_potato.png"></td>
</tr>
</tbody>
</table>

<br>
<br>

<!-- Buttons to continue the install, or to install -->
<div class="row">
<div class="col-md-4 text-left">
<a style="font-size:20px" href="https://andolga.github.io/umineko-catbox-english/" target="_blank">
<ul class="tabs button-tabs">
<li><div class="tab-title">
Open Console Patch Website
</div></li>
</ul>
</a>
</div>

<div class="col-md-4 text-left">
<a style="font-size:20px" href="installer.html">
<ul class="tabs button-tabs">
<li><div class="warning-tab-title">
Continue PC Install Anyway
</div></li>
</ul>
</a>
</div>
</div>

</div>
</section>

<section class="section-small-padding bg-secondary">
<div class="container">
<h4>Donation Status</h4>
<p>
Server time remaining: <b>{{ metaInfo.donationMonthsRemaining }}</b><b> months</b><br>
This year's funding goal is <b>{{ metaInfo.donationProgressPercent }}</b>% complete.<br>
<a href="https://07th-mod.com/wiki/Donations/" target="_blank">Click Here</a> to Donate!<br>
</p>
</div>
<div class="container">{{ metaInfo.buildInfo }}</div>
</section>
</div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/masonry.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/vue.js"></script>
<script src="js/marked.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/purify.min.js"></script>
<script src="python-patcher-rest-lib.js"></script>
<script src="python-patcher-vue-common.js"></script>
<script src="python-patcher-umineko-warning.js"></script>
<script>
// Warn the user if they are on Internet Explorer - we don't support it!
if(window.navigator.userAgent.match(/(MSIE|Trident)/)) {
alert('ERROR: The 07th-Mod Installer does not support Internet Explorer!\n\nPlease install Microsoft Edge, Firefox, or Chrome. Please also restart the installer.');
}
</script>
</body>
</html>

0 comments on commit 3d5fbc2

Please sign in to comment.