Add instructions to install customized data pack

This commit is contained in:
Misode
2023-06-20 19:23:42 +02:00
parent f104f89acf
commit 9b6233ce23
3 changed files with 62 additions and 4 deletions

View File

@@ -37,6 +37,7 @@ export const Octicon = {
lock: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M4 4a4 4 0 0 1 8 0v2h.25c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-5.5C2 6.784 2.784 6 3.75 6H4Zm8.25 3.5h-8.5a.25.25 0 0 0-.25.25v5.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25ZM10.5 6V4a2.5 2.5 0 1 0-5 0v2Z"></path></svg>,
mark_github: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>,
moon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>,
mortar_board: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M7.693 1.066a.747.747 0 0 1 .614 0l7.25 3.25a.75.75 0 0 1 0 1.368L13 6.831v2.794c0 1.024-.81 1.749-1.66 2.173-.893.447-2.075.702-3.34.702-.278 0-.55-.012-.816-.036a.75.75 0 0 1 .133-1.494c.22.02.45.03.683.03 1.082 0 2.025-.221 2.67-.543.69-.345.83-.682.83-.832V7.503L8.307 8.934a.747.747 0 0 1-.614 0L4 7.28v1.663c.296.105.575.275.812.512.438.438.688 1.059.688 1.796v3a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75v-3c0-.737.25-1.358.688-1.796.237-.237.516-.407.812-.512V6.606L.443 5.684a.75.75 0 0 1 0-1.368ZM2.583 5 8 7.428 13.416 5 8 2.572ZM2.5 11.25v2.25H4v-2.25c0-.388-.125-.611-.25-.735a.697.697 0 0 0-.5-.203.707.707 0 0 0-.5.203c-.125.124-.25.347-.25.735Z"></path></svg>,
package: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>,
pencil: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>,
play: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>,

View File

@@ -6,7 +6,7 @@ import { generateCustomized } from '../components/customized/CustomizedGenerator
import { CustomizedModel } from '../components/customized/CustomizedModel.js'
import { OresSettings } from '../components/customized/OresSettings.jsx'
import { StructuresSettings } from '../components/customized/StructuresSettings.jsx'
import { Btn, ErrorPanel, Footer, VersionSwitcher } from '../components/index.js'
import { Btn, ErrorPanel, Footer, Octicon, VersionSwitcher } from '../components/index.js'
import { useLocale, useTitle } from '../contexts/index.js'
import { useSearchParam } from '../hooks/index.js'
import { stringifySource } from '../services/Source.js'
@@ -43,9 +43,17 @@ export function Customized({}: Props) {
const initialModel = useMemo(() => {
return CustomizedModel.getDefault(version)
}, [version])
const isModified = useMemo(() => {
return !deepEqual(model, initialModel)
}, [model, initialModel])
const reset = useCallback(() => {
setModel(deepClone(initialModel))
}, [initialModel])
const download = useRef<HTMLAnchorElement>(null)
const [error, setError] = useState<Error | string | null>(null)
const [hasDownloaded, setHasDownloaded] = useState(false)
const generate = useCallback(async () => {
if (!download.current) return
try {
@@ -63,6 +71,7 @@ export function Customized({}: Props) {
download.current.setAttribute('href', url)
download.current.setAttribute('download', 'customized.zip')
download.current.click()
setHasDownloaded(true)
setError(null)
} catch (e) {
if (e instanceof Error) {
@@ -86,10 +95,24 @@ export function Customized({}: Props) {
{tab === 'ores' && <OresSettings {...{model, initialModel, changeModel}} />}
</div>
<div class="customized-actions">
<Btn icon="download" label="Create" class="customized-create" onClick={generate} />
<Btn icon="download" label="Create" class="customized-create" tooltip="Create and download data pack" tooltipLoc="se" onClick={generate} />
<a ref={download} style="display: none;"></a>
{isModified && <Btn icon="undo" label="Reset" tooltip="Reset to default" tooltipLoc="se" onClick={reset} />}
</div>
{error && <ErrorPanel error={error} onDismiss={() => setError(null)} body={`\n### Customized settings\n<details>\n<pre>\n${JSON.stringify(getDiffModel(model, initialModel), null, 2)}\n</pre>\n</details>\n`} />}
{hasDownloaded && <div class="customized-instructions">
<h4>
{Octicon.mortar_board}
What now?
</h4>
<ol>
<li>After launching Minecraft, create a new singleplayer world.</li>
<li>Select the "More" tab at the top.</li>
<li>Click on "Data Packs" and drag the downloaded zip file onto the game window. </li>
<li>Move the imported data pack to the right panel and click on "Done".</li>
<li>A message will warn about the use of experimental world settings. Click on "Proceed".</li>
</ol>
</div>}
</div>
<Footer />
</main>

View File

@@ -664,8 +664,12 @@ main.has-project {
padding-bottom: 30px;
}
.customized-actions > span {
color: var(--text-3);
.customized-actions {
display: flex;
align-items: center;
}
.customized-actions > *:not(:first-child) {
margin-left: 10px;
}
@@ -686,6 +690,35 @@ main.has-project {
margin-right: 10px;
}
.customized-instructions {
margin-top: 5px;
padding: 5px;
color: var(--text-2);
}
.customized-instructions h4 {
display: flex;
align-items: center;
margin: 10px 0;
}
.customized-instructions svg {
fill: var(--accent-primary);
width: 24px;
height: 24px;
margin-right: 10px;
}
.customized-instructions ol {
margin-left: 25px;
}
.customized-instructions li {
margin: 6px 0;
color: var(--text-3);
}
.customized > .error {
margin-left: 0;
margin-right: 0;
@@ -1240,6 +1273,7 @@ main.has-project {
color: var(--text-1);
border-radius: 6px;
font-size: 14px;
font-weight: normal;
line-height: 1.5;
text-align: left;
opacity: 0;