v8.2.1: update sockdrive warnings

src/frame/fat-drives-frame.tsx

@@ -6,6 +6,7 @@ import { State } from "../store";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { dispatchLoginAction, uiSlice } from "../store/ui";
 import { LockBadge } from "../components/lock";
+import { isSockdrivePremium } from "../player-api";
 
 interface Drive {
     name: string,
@@ -94,15 +95,9 @@ export function FatDrivesFrame() {
                 .catch(console.error)
                 .finally(() => setBusy(false));
 
-            fetch(sockdriveEndpoint + "/premium/" + account.email)
-                .then((r) => r.json())
-                .then((payload: { premium: boolean }) => {
-                    setSockdrivePremium(payload.premium);
-                })
-                .catch((e) => {
-                    console.error(e);
-                    setSockdrivePremium(false);
-                });
+            isSockdrivePremium(sockdriveEndpoint, account)
+                .then(setSockdrivePremium)
+                .catch(console.error);
         }
     }
 

src/frame/stats-frame.tsx

@@ -1,14 +1,23 @@
 import { useSelector } from "react-redux";
-import { State } from "../store";
+import { State, useNonSerializableStore } from "../store";
 
 export function StatsFrame() {
+    const nonSerializableStore = useNonSerializableStore();
+    const backend = useSelector((state: State) => state.dos.backend);
+    const hardware = useSelector((state: State) => state.dos.backendHardware) &&
+        nonSerializableStore.options.backendHardware;
+    const emuVersion = useSelector((state: State) => state.dos.emuVersion);
     const startedAt = useSelector((state: State) => state.dos.ciStartedAt);
     const stats = useSelector((state: State) => state.dos.stats);
+    const driveInfo = useSelector((state: State) => state.dos.sockdriveInfo);
     const cycles = Math.round(useSelector((state: State) => state.dos.stats.cyclesPerMs) / 1000);
     const driveRecvMb = Math.round(stats.driveRecv / 1024 / 1024 * 100) / 100;
     const driveSpeedMb = (stats.driveRecvTime / 1000) > 1 ?
         Math.round(driveRecvMb / stats.driveRecvTime * 1000 * 100) / 100 : 0;
     return <div class="stats-frame frame-root items-start px-4">
+        <div class="text-center mb-2 text-xs">
+            js-dos/emu: {JSDOS_VERSION}/{emuVersion}
+        </div>
         <div class="w-full overflow-x-auto">
             <table class="table table-compact w-full">
                 <thead>
@@ -18,6 +27,10 @@ export function StatsFrame() {
                     </tr>
                 </thead>
                 <tbody>
+                    <tr>
+                        <td>Emulation</td>
+                        <td>{backend + " " + (hardware ? "(WS)" : "(WA)")}</td>
+                    </tr>
                     <tr>
                         <td>Uptime</td>
                         <td>{Math.round((Date.now() - startedAt) / 100) / 10} s</td>
@@ -64,6 +77,12 @@ export function StatsFrame() {
                         <td>Net RECV/s</td>
                         <td>{Math.round(stats.netRecv / 1024 * 100) / 100}Kb</td>
                     </tr>
+                    {driveInfo.map((info, i) => {
+                        return <tr>
+                            <td>HDD { i == 0 ? "C:" : "D:"}</td>
+                            <td>{info.drive} {info.write ? " RW" : " RO" }</td>
+                        </tr>;
+                    })}
                     <tr>
                         <td>HDD RECV/s</td>
                         <td>{driveRecvMb}Mb (~{driveSpeedMb}Mb/s)</td>

src/i18n.ts

@@ -15,6 +15,7 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         add: "Добавить",
         logout: "Выйти",
         please_login: "Войдите в аккаунт",
+        login: "Войти",
         features: "Функции",
         premium: "Подписка",
         buy: "Купить",
@@ -71,7 +72,7 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         copy_net_link: "Отправьте ссылку на подключение",
         copied: "Скопировано",
         image_rendering: "Обработка изображения",
-        read_only_access: "Диск FAT32 открыт только для чтения",
+        read_only_access: "Эмуляция Win 9x в режиме только для чтения",
         fix: "Исправить",
         close: "Закрыть",
         cancle: "Отказаться",
@@ -83,6 +84,8 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         fat_write: "FAT запись",
         play: "Запустить",
         system_cursor: "Системный курсор",
+        no_cloud_access: "Войдите что бы использовать",
+        cloud_storage: "облачное хранилище",
     },
     en: {
         play: "Start",
@@ -98,6 +101,7 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         add: "Add",
         logout: "Logout",
         please_login: "Please login",
+        login: "Login",
         features: "Features",
         premium: "Subscription",
         buy: "Buy",
@@ -154,7 +158,7 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         copy_net_link: "Share this link to connect",
         copied: "Copied",
         image_rendering: "Image rendering",
-        read_only_access: "The FAT32 drive is open in read-only mode",
+        read_only_access: "Win 9x emulation is in READ ONLY mode",
         fix: "Fix",
         close: "Close",
         cancle: "Cancle",
@@ -164,6 +168,8 @@ const translations: {[lang: string]: {[key: string]: string} } = {
         hardware: "Hardware acceleration",
         net_drives: "Net drives",
         fat_write: "Writeable FAT",
+        no_cloud_access: "Please login to use",
+        cloud_storage: "cloud storage",
     },
 };
 

src/player-api.ts

@@ -3,6 +3,7 @@ import { NonSerializableStore, State } from "./store";
 import { getT } from "./i18n";
 import { putChanges } from "./v8/changes";
 import { uiSlice } from "./store/ui";
+import { Account } from "./store/auth";
 
 export async function apiSave(state: State,
                               nonSerializableStore: NonSerializableStore,
@@ -31,7 +32,7 @@ export async function apiSave(state: State,
         if (account === null || account.email === null) {
             dispatch(uiSlice.actions.showToast({
                 message: t("warn_save"),
-                intent: "warning",
+                intent: "success",
             }));
         } else {
             dispatch(uiSlice.actions.showToast({
@@ -51,3 +52,13 @@ export async function apiSave(state: State,
         return false;
     }
 }
+
+export function isSockdrivePremium(sockdriveEndpoint: string, account: Account | null): Promise<boolean> {
+    if (account) {
+        return fetch(sockdriveEndpoint + "/premium/" + account.email)
+            .then((r) => r.json())
+            .then((payload: { premium: boolean }) => payload.premium);
+    } else {
+        return Promise.resolve(false);
+    }
+}

src/store/dos.ts

@@ -77,6 +77,7 @@ const initialState: {
     },
     imageRendering: ImageRendering,
     sockdriveWrite: boolean,
+    sockdriveInfo: { drive: string, write: boolean}[],
     softKeyboard: boolean,
     softKeyboardLayout: string[],
     softKeyboardSymbols: {[key: string]: string}[],
@@ -129,6 +130,7 @@ const initialState: {
     ciStartedAt: 0,
     imageRendering: (lStorage.getItem("imageRendering") ?? "pixelated") as any,
     sockdriveWrite: true,
+    sockdriveInfo: [],
     softKeyboard: false,
     softKeyboardLayout: [
         "{esc} ` 1 2 3 4 5 6 7 8 9 0 () - = {bksp} {enter}",
@@ -312,6 +314,9 @@ export const dosSlice = createSlice({
         setSockdriveWrite: (s, a: { payload: boolean }) => {
             s.sockdriveWrite = a.payload;
         },
+        addSockdriveInfo: (s, a: { payload: { drive: string, write: boolean} }) => {
+            s.sockdriveInfo.push(a.payload);
+        },
         mobileControls: (s, a: { payload: boolean }) => {
             s.mobileControls = a.payload;
         },

src/store/ui.ts

@@ -51,7 +51,7 @@ const initialState: {
     toastIntent: "none",
     toastTimeoutId: 0,
     background: null,
-    readOnlyWarning: false,
+    readOnlyWarning: true,
     updateWsWarning: false,
     cloudSaves: true,
     autoStart: false,

src/ui.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { useDispatch, useSelector } from "react-redux";
 import { Login } from "./login/login";
 import { Frame } from "./frame/frame";
@@ -7,13 +7,16 @@ import { State } from "./store";
 import { dispatchLoginAction, uiSlice } from "./store/ui";
 import { Window } from "./window/window";
 import { useT } from "./i18n";
+import { sockdriveBackend } from "./store/init";
+import { isSockdrivePremium } from "./player-api";
 
 let currentWideScreen = uiSlice.getInitialState().wideScreen;
 export function Ui() {
     const rootRef = useRef<HTMLDivElement>(null);
     const hidden = useSelector((state: State) => state.ui.hidden);
     const theme = useSelector((state: State) => state.ui.theme);
     const dispatch = useDispatch();
+    const prerun = useSelector((state: State) => state.ui.window) === "prerun";
 
     useEffect(() => {
         if (hidden || rootRef === null || rootRef.current === null) {
@@ -53,15 +56,14 @@ export function Ui() {
         <SideBar />
         <Login />
         <Toast />
-        <ReadOnlyWarning />
+        { prerun && <ReadOnlyWarning /> }
         <UpdateWsWarning />
     </div>;
 };
 
 function Toast() {
     const toast = useSelector((state: State) => state.ui.toast);
     const intent = useSelector((state: State) => state.ui.toastIntent);
-    const readOnlyWarning = useSelector((state: State) => state.ui.readOnlyWarning);
     const intentClass = intent === "panic" ? "error" : intent;
 
     if (toast === null) {
@@ -82,7 +84,7 @@ function Toast() {
             d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />;
     }
 
-    return <div class={"absolute right-10 " + (readOnlyWarning ? "bottom-32" : "bottom-10")}>
+    return <div class="absolute right-10 bottom-10">
         <div class={ "alert alert-" + intentClass + " text-" + intentClass + "-content" }>
             <svg xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -97,34 +99,61 @@ function Toast() {
 }
 
 function ReadOnlyWarning() {
+    const kiosk = useSelector((state: State) => state.ui.kiosk);
     const readOnlyWarning = useSelector((state: State) => state.ui.readOnlyWarning);
     const account = useSelector((state: State) => state.auth.account);
+    const backend = useSelector((state: State) => state.dos.backend);
     const t = useT();
     const dispatch = useDispatch();
+    const { sockdriveEndpoint } = useSelector((state: State) =>
+        sockdriveBackend[state.init.sockdriveBackendName] ??
+        sockdriveBackend["js-dos"]);
+    const [sockdrivePremium, setSockdrivePremium] = useState<boolean>(true);
+    const premium = (account?.premium ?? false) || sockdrivePremium;
+
+    useEffect(() => {
+        isSockdrivePremium(sockdriveEndpoint, account)
+            .then(setSockdrivePremium);
+    }, [account?.token, sockdriveEndpoint]);
 
-    if (!readOnlyWarning) {
+    if (!readOnlyWarning || kiosk ||
+            (account !== null && backend === "dosbox") ||
+            premium) {
         return null;
     }
 
-    function fix() {
+    function close() {
         dispatch(uiSlice.actions.readOnlyWarning(false));
-        dispatchLoginAction(account, dispatch);
     }
 
-    function close() {
+    function fix() {
         dispatch(uiSlice.actions.readOnlyWarning(false));
+        if (account === null) {
+            dispatchLoginAction(account, dispatch);
+        } else {
+            window.open("https://js-dos.com/subscription.html", "_blank");
+        }
     }
 
-    return <div class="absolute right-10 bottom-10">
+    const text = account === null ?
+        <>{t("no_cloud_access")}
+            <a href="https://js-dos.com/cloud-storage.html"
+                target="_blank" class="link link-primary ml-1">{t("cloud_storage")}</a>
+        </> : <>{t("read_only_access")}</>;
+
+    return <div class="absolute pl-16 right-4 bottom-10">
         <div class="alert">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                class="stroke-info shrink-0 w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                class="text-error shrink-0 w-7 h-7 mt-1" stroke="currentColor" stroke-width="1.5px">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374
+                    1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697
+                    16.126ZM12 15.75h.007v.008H12v-.008Z" />;
             </svg>
-            <span>{t("read_only_access")}</span>
+            <span>{text}</span>
             <div>
-                <button class="btn btn-sm btn-primary mr-2" onClick={fix}>{t("fix")}</button>
+                <button class="btn btn-sm btn-primary mr-2" onClick={fix}>
+                    {account === null ? t("login") : t("fix")}
+                </button>
                 <button class="btn btn-sm" onClick={close}>{t("close")}</button>
             </div>
         </div>

src/window/dos/dos-runtime.tsx

@@ -46,9 +46,10 @@ function useLog(ci: CommandInterface): void {
                 dispatch(uiSlice.actions.cloudSaves(false));
                 if (args[0]?.indexOf("write=") !== -1) {
                     console.log("drive", drive, "config:", args[0]);
-                }
-                if (args[0]?.indexOf("write=false") !== -1) {
-                    dispatch(uiSlice.actions.readOnlyWarning(true));
+                    dispatch(dosSlice.actions.addSockdriveInfo({
+                        drive,
+                        write: args[0]?.indexOf("write=false") === -1,
+                    }));
                 }
                 if (args[0]?.indexOf("preload=") !== -1) {
                     const rest = Number.parseInt(args[0].substring(args[0].indexOf("preload=") + "preload=".length));

src/window/prerun-window.tsx

@@ -12,8 +12,11 @@ export function PreRunWindow() {
 
     return <div class="pre-run-window">
         <Play />
-        <div class="text-center mt-8 absolute bottom-4">jsdos/emu version:&nbsp;
-            <span class="text-ellipsis overflow-hidden">{JSDOS_VERSION}/{emuVersion}</span></div>
+        <div class="self-end mt-8 absolute bottom-3">
+            <span class="text-ellipsis overflow-hidden">
+                js-{JSDOS_VERSION}/emu-{emuVersion.substring(0, emuVersion.indexOf(" "))}
+            </span>
+        </div>
     </div>;
 }